https://sinudet.net/owncloud/core/js/placeholder.js?v=850ceb9c7a43fd76cd53784fc240ca2b

1/**
2 * ownCloud
3 *
4 * @author John Molakvoæ
5 * @copyright Copyright (c) 2016 John Molakvoæ <[email protected]>
6 * @author Morris Jobke
7 * @copyright Copyright (c) 2013 Morris Jobke <[email protected]>
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/*
25 * Adds a background color to the element called on and adds the first character
26 * of the passed in string. This string is also the seed for the generation of
27 * the background color.
28 *
29 * You have following HTML:
30 *
31 * <div id="albumart"></div>
32 *
33 * And call this from Javascript:
34 *
35 * $('#albumart').imageplaceholder('The Album Title');
36 *
37 * Which will result in:
38 *
39 * <div id="albumart" style="background-color: hsl(123, 90%, 65%); ... ">T</div>
40 *
41 * You may also call it like this, to have a different background, than the seed:
42 *
43 * $('#albumart').imageplaceholder('The Album Title', 'Album Title');
44 *
45 * Resulting in:
46 *
47 * <div id="albumart" style="background-color: hsl(123, 90%, 65%); ... ">A</div>
48 *
49 */
50 
51 /*
52 * Alternatively, you can use the prototype function to convert your string to hsl colors:
53 *
54 * "a6741a86aded5611a8e46ce16f2ad646".toHsl()
55 *
56 * Will return the hsl parameters within an array:
57 *
58 * [290, 60, 68]
59 *
60 */
61
62(function ($) {
63
64	String.prototype.toHsl = function() {
65
66		var hash = this.toLowerCase().replace(/[^0-9a-f]+/g, '');
67
68		// Already a md5 hash?
69		if( !hash.match(/^[0-9a-f]{32}$/g) ) {
70			hash = md5(hash);
71		}
72
73		function rgbToHsl(r, g, b) {
74			r /= 255, g /= 255, b /= 255;
75			var max = Math.max(r, g, b), min = Math.min(r, g, b);
76			var h, s, l = (max + min) / 2;
77			if(max === min) {
78				h = s = 0; // achromatic
79			} else {
80				var d = max - min;
81				s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
82				switch(max) {
83				case r: h = (g - b) / d + (g < b ? 6 : 0); break;
84				case g: h = (b - r) / d + 2; break;
85				case b: h = (r - g) / d + 4; break;
86				}
87				h /= 6;
88			}
89			return [h, s, l];
90		}
91
92		// Init vars
93		var result = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
94		var rgb = [0, 0, 0];
95		var sat = 70;
96		var lum = 68;
97		var modulo = 16;
98
99		// Splitting evenly the string
100		for(var i in hash) {
101			result[i%modulo] = result[i%modulo] + parseInt(hash.charAt(i), 16).toString();
102		}
103
104		// Converting our data into a usable rgb format
105		// Start at 1 because 16%3=1 but 15%3=0 and makes the repartition even
106		for(var count=1;count<modulo;count++) {
107			rgb[count%3] += parseInt(result[count]);
108		}
109
110		// Reduce values bigger than rgb requirements
111		rgb[0] = rgb[0]%255;
112		rgb[1] = rgb[1]%255;
113		rgb[2] = rgb[2]%255;
114
115		var hsl = rgbToHsl(rgb[0], rgb[1], rgb[2]);
116
117		// Classic formula to check the brightness for our eye
118		// If too bright, lower the sat
119		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) );
120		if (bright >= 200) {
121			sat = 60;
122		}
123		return [parseInt(hsl[0] * 360), sat, lum];
124	};
125
126	$.fn.imageplaceholder = function(seed, text, size) {
127		text = text || seed;
128
129		// Compute the hash
130		var hsl = seed.toHsl();
131		this.css('background-color', 'hsl('+hsl[0]+', '+hsl[1]+'%, '+hsl[2]+'%)');
132
133		// Placeholders are square
134		var height = this.height() || size || 32;
135		this.height(height);
136		this.width(height);
137
138		// CSS rules
139		this.css('color', '#fff');
140		this.css('font-weight', 'normal');
141		this.css('text-align', 'center');
142
143		// calculate the height
144		this.css('line-height', height + 'px');
145		this.css('font-size', (height * 0.55) + 'px');
146
147		if(seed !== null && seed.length) {
148			this.html(text[0].toUpperCase());
149		}
150	};
151}(jQuery));