1
0

placeholder.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. /**
  2. * ownCloud
  3. *
  4. * @author John Molakvoæ
  5. * @copyright 2016 John Molakvoæ <fremulon@protonmail.com>
  6. * @author Morris Jobke
  7. * @copyright 2013 Morris Jobke <morris.jobke@gmail.com>
  8. *
  9. * This library is free software; you can redistribute it and/or
  10. * modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
  11. * License as published by the Free Software Foundation; either
  12. * version 3 of the License, or any later version.
  13. *
  14. * This library is distributed in the hope that it will be useful,
  15. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  16. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  17. * GNU AFFERO GENERAL PUBLIC LICENSE for more details.
  18. *
  19. * You should have received a copy of the GNU Affero General Public
  20. * License along with this library. If not, see <http://www.gnu.org/licenses/>.
  21. *
  22. */
  23. /*
  24. * Adds a background color to the element called on and adds the first character
  25. * of the passed in string. This string is also the seed for the generation of
  26. * the background color.
  27. *
  28. * You have following HTML:
  29. *
  30. * <div id="albumart"></div>
  31. *
  32. * And call this from Javascript:
  33. *
  34. * $('#albumart').imageplaceholder('The Album Title');
  35. *
  36. * Which will result in:
  37. *
  38. * <div id="albumart" style="background-color: hsl(123, 90%, 65%); ... ">T</div>
  39. *
  40. * You may also call it like this, to have a different background, than the seed:
  41. *
  42. * $('#albumart').imageplaceholder('The Album Title', 'Album Title');
  43. *
  44. * Resulting in:
  45. *
  46. * <div id="albumart" style="background-color: hsl(123, 90%, 65%); ... ">A</div>
  47. *
  48. */
  49. /*
  50. * Alternatively, you can use the prototype function to convert your string to hsl colors:
  51. *
  52. * "a6741a86aded5611a8e46ce16f2ad646".toHsl()
  53. *
  54. * Will return the hsl parameters within an array:
  55. *
  56. * [290, 60, 68]
  57. *
  58. */
  59. (function ($) {
  60. String.prototype.toHsl = function() {
  61. var hash = this.toLowerCase().replace(/[^0-9a-f]+/g, '');
  62. // Already a md5 hash?
  63. if( !hash.match(/^[0-9a-f]{32}$/g) ) {
  64. hash = md5(hash);
  65. }
  66. function rgbToHsl(r, g, b) {
  67. r /= 255, g /= 255, b /= 255;
  68. var max = Math.max(r, g, b), min = Math.min(r, g, b);
  69. var h, s, l = (max + min) / 2;
  70. if(max === min) {
  71. h = s = 0; // achromatic
  72. } else {
  73. var d = max - min;
  74. s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
  75. switch(max) {
  76. case r: h = (g - b) / d + (g < b ? 6 : 0); break;
  77. case g: h = (b - r) / d + 2; break;
  78. case b: h = (r - g) / d + 4; break;
  79. }
  80. h /= 6;
  81. }
  82. return [h, s, l];
  83. }
  84. // Init vars
  85. var result = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
  86. var rgb = [0, 0, 0];
  87. var sat = 70;
  88. var lum = 68;
  89. var modulo = 16;
  90. // Splitting evenly the string
  91. for(var i in hash) {
  92. result[i%modulo] = result[i%modulo] + parseInt(hash.charAt(i), 16).toString();
  93. }
  94. // Converting our data into a usable rgb format
  95. // Start at 1 because 16%3=1 but 15%3=0 and makes the repartition even
  96. for(var count=1;count<modulo;count++) {
  97. rgb[count%3] += parseInt(result[count]);
  98. }
  99. // Reduce values bigger than rgb requirements
  100. rgb[0] = rgb[0]%255;
  101. rgb[1] = rgb[1]%255;
  102. rgb[2] = rgb[2]%255;
  103. var hsl = rgbToHsl(rgb[0], rgb[1], rgb[2]);
  104. // Classic formulla to check the brigtness for our eye
  105. // If too bright, lower the sat
  106. var bright = Math.sqrt( 0.299 * Math.pow(rgb[0], 2) + 0.587 * Math.pow(rgb[1], 2) + 0.114 * Math.pow(rgb[2], 2) );
  107. if (bright >= 200) {
  108. sat = 60;
  109. }
  110. return [parseInt(hsl[0] * 360), sat, lum];
  111. };
  112. $.fn.imageplaceholder = function(seed, text, size) {
  113. text = text || seed;
  114. // Compute the hash
  115. var hsl = seed.toHsl();
  116. this.css('background-color', 'hsl('+hsl[0]+', '+hsl[1]+'%, '+hsl[2]+'%)');
  117. // Placeholders are square
  118. var height = this.height() || size || 32;
  119. this.height(height);
  120. this.width(height);
  121. // CSS rules
  122. this.css('color', '#fff');
  123. this.css('font-weight', 'normal');
  124. this.css('text-align', 'center');
  125. // calculate the height
  126. this.css('line-height', height + 'px');
  127. this.css('font-size', (height * 0.55) + 'px');
  128. if(seed !== null && seed.length) {
  129. this.html(text[0].toUpperCase());
  130. }
  131. };
  132. }(jQuery));