New colour generator
This commit is contained in:
parent
37d32a93d0
commit
dcc28a3ad7
1 changed files with 56 additions and 6 deletions
|
@ -1,6 +1,8 @@
|
|||
/**
|
||||
* ownCloud
|
||||
*
|
||||
* @author John Molakvoæ
|
||||
* @copyright 2016 John Molakvoæ <fremulon@protonmail.com>
|
||||
* @author Morris Jobke
|
||||
* @copyright 2013 Morris Jobke <morris.jobke@gmail.com>
|
||||
*
|
||||
|
@ -48,16 +50,64 @@
|
|||
|
||||
(function ($) {
|
||||
$.fn.imageplaceholder = function(seed, text, size) {
|
||||
// set optional argument "text" to value of "seed" if undefined
|
||||
text = text || seed;
|
||||
|
||||
var hash = md5(seed).substring(0, 4),
|
||||
maxRange = parseInt('ffff', 16),
|
||||
hue = parseInt(hash, 16) / maxRange * 256,
|
||||
height = this.height() || size || 32;
|
||||
this.css('background-color', 'hsl(' + hue + ', 90%, 65%)');
|
||||
var hash = seed.toLowerCase().replace(/[^0-9a-f]+/g, '');
|
||||
|
||||
// Already a md5 hash?
|
||||
if( !hash.match(/^[0-9a-f]{32}$/g) ) {
|
||||
hash = md5(hash);
|
||||
}
|
||||
|
||||
function rgbToHsl(r, g, b) {
|
||||
r /= 255, g /= 255, b /= 255;
|
||||
var max = Math.max(r, g, b), min = Math.min(r, g, b);
|
||||
var h, s, l = (max + min) / 2;
|
||||
if(max === min) {
|
||||
h = s = 0; // achromatic
|
||||
} else {
|
||||
var d = max - min;
|
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||||
switch(max) {
|
||||
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
|
||||
case g: h = (b - r) / d + 2; break;
|
||||
case b: h = (r - g) / d + 4; break;
|
||||
}
|
||||
h /= 6;
|
||||
}
|
||||
return [h, s, l];
|
||||
}
|
||||
|
||||
// Init vars
|
||||
var result = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
|
||||
var rgb = [0, 0, 0];
|
||||
var sat = 80;
|
||||
var lum = 68;
|
||||
var modulo = 16;
|
||||
|
||||
// Splitting evenly the string
|
||||
for(var i in hash) {
|
||||
result[i%modulo] = result[i%modulo] + parseInt(hash.charAt(i), 16).toString();
|
||||
}
|
||||
|
||||
// Converting our data into a usable rgb format
|
||||
// Start at 1 because 16%3=1 but 15%3=0 and makes the repartition even
|
||||
for(var count=1;count<modulo;count++) {
|
||||
rgb[count%3] += parseInt(result[count]);
|
||||
}
|
||||
var hsl = rgbToHsl(rgb[0], rgb[1], rgb[2]);
|
||||
|
||||
// Classic formulla to check the brigtness for our eye
|
||||
// If too bright, lower the sat
|
||||
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) );
|
||||
if (bright >= 200) {
|
||||
sat = 60;
|
||||
}
|
||||
var hue = parseInt(hsl[0] * 360);
|
||||
this.css('background-color', 'hsl('+hue+', '+sat+'%, '+lum+'%)');
|
||||
|
||||
// Placeholders are square
|
||||
var height = this.height() || size || 32;
|
||||
this.height(height);
|
||||
this.width(height);
|
||||
|
||||
|
|
Loading…
Reference in a new issue