placeholder.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. /**
  2. * ownCloud
  3. *
  4. * @author John Molakvoæ
  5. * @copyright 2016-2018 John Molakvoæ <skjnldsv@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: rgb(121, 90, 171); ... ">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: rgb(121, 90, 171); ... ">A</div>
  47. *
  48. */
  49. /*
  50. * Alternatively, you can use the prototype function to convert your string to rgb colors:
  51. *
  52. * "a6741a86aded5611a8e46ce16f2ad646".toRgb()
  53. *
  54. * Will return the rgb parameters within the following object:
  55. *
  56. * Color {r: 208, g: 158, b: 109}
  57. *
  58. */
  59. (function ($) {
  60. String.prototype.toRgb = function() {
  61. // Normalize hash
  62. var hash = this.toLowerCase();
  63. // Already a md5 hash?
  64. if( hash.match(/^([0-9a-f]{4}-?){8}$/) === null ) {
  65. hash = md5(hash);
  66. }
  67. hash = hash.replace(/[^0-9a-f]/g, '');
  68. function Color(r,g,b) {
  69. this.r = r;
  70. this.g = g;
  71. this.b = b;
  72. }
  73. function stepCalc(steps, ends) {
  74. var step = new Array(3);
  75. step[0] = (ends[1].r - ends[0].r) / steps;
  76. step[1] = (ends[1].g - ends[0].g) / steps;
  77. step[2] = (ends[1].b - ends[0].b) / steps;
  78. return step;
  79. }
  80. function mixPalette(steps, color1, color2) {
  81. var count = steps + 1;
  82. var palette = new Array();
  83. palette.push(color1);
  84. var step = stepCalc(steps, [color1, color2])
  85. for (var i = 1; i < steps; i++) {
  86. var r = parseInt(color1.r + (step[0] * i));
  87. var g = parseInt(color1.g + (step[1] * i));
  88. var b = parseInt(color1.b + (step[2] * i));
  89. palette.push(new Color(r,g,b));
  90. }
  91. return palette;
  92. }
  93. var red = new Color(182, 70, 157);
  94. var yellow = new Color(221, 203, 85);
  95. var blue = new Color(0, 130, 201); // Nextcloud blue
  96. // Number of steps to go from a color to another
  97. // 3 colors * 6 will result in 18 generated colors
  98. var steps = 6;
  99. var palette1 = mixPalette(steps, red, yellow);
  100. var palette2 = mixPalette(steps, yellow, blue);
  101. var palette3 = mixPalette(steps, blue, red);
  102. var finalPalette = palette1.concat(palette2).concat(palette3);
  103. // Convert a string to an integer evenly
  104. function hashToInt(hash, maximum) {
  105. var finalInt = 0;
  106. var result = Array();
  107. // Splitting evenly the string
  108. for (var i=0; i<hash.length; i++) {
  109. // chars in md5 goes up to f, hex:16
  110. result.push(parseInt(hash.charAt(i), 16) % 16);
  111. }
  112. // Adds up all results
  113. for (var j in result) {
  114. finalInt += result[j];
  115. }
  116. // chars in md5 goes up to f, hex:16
  117. // make sure we're always using int in our operation
  118. return parseInt(parseInt(finalInt) % maximum);
  119. }
  120. return finalPalette[hashToInt(hash, steps * 3 )];
  121. };
  122. $.fn.imageplaceholder = function(seed, text, size) {
  123. text = text || seed;
  124. // Compute the hash
  125. var rgb = seed.toRgb();
  126. this.css('background-color', 'rgb('+rgb.r+', '+rgb.g+', '+rgb.b+')');
  127. // Placeholders are square
  128. var height = this.height() || size || 32;
  129. this.height(height);
  130. this.width(height);
  131. // CSS rules
  132. this.css('color', '#fff');
  133. this.css('font-weight', 'normal');
  134. this.css('text-align', 'center');
  135. // calculate the height
  136. this.css('line-height', height + 'px');
  137. this.css('font-size', (height * 0.55) + 'px');
  138. if(seed !== null && seed.length) {
  139. this.html(text[0].toUpperCase());
  140. }
  141. };
  142. $.fn.clearimageplaceholder = function() {
  143. this.css('background-color', '');
  144. this.css('color', '');
  145. this.css('font-weight', '');
  146. this.css('text-align', '');
  147. this.css('line-height', '');
  148. this.css('font-size', '');
  149. this.html('');
  150. this.removeClass('icon-loading');
  151. this.removeClass('icon-loading-small');
  152. };
  153. }(jQuery));