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
|
* ownCloud
|
||||||
*
|
*
|
||||||
|
* @author John Molakvoæ
|
||||||
|
* @copyright 2016 John Molakvoæ <fremulon@protonmail.com>
|
||||||
* @author Morris Jobke
|
* @author Morris Jobke
|
||||||
* @copyright 2013 Morris Jobke <morris.jobke@gmail.com>
|
* @copyright 2013 Morris Jobke <morris.jobke@gmail.com>
|
||||||
*
|
*
|
||||||
|
@ -48,16 +50,64 @@
|
||||||
|
|
||||||
(function ($) {
|
(function ($) {
|
||||||
$.fn.imageplaceholder = function(seed, text, size) {
|
$.fn.imageplaceholder = function(seed, text, size) {
|
||||||
// set optional argument "text" to value of "seed" if undefined
|
|
||||||
text = text || seed;
|
text = text || seed;
|
||||||
|
|
||||||
var hash = md5(seed).substring(0, 4),
|
var hash = seed.toLowerCase().replace(/[^0-9a-f]+/g, '');
|
||||||
maxRange = parseInt('ffff', 16),
|
|
||||||
hue = parseInt(hash, 16) / maxRange * 256,
|
// Already a md5 hash?
|
||||||
height = this.height() || size || 32;
|
if( !hash.match(/^[0-9a-f]{32}$/g) ) {
|
||||||
this.css('background-color', 'hsl(' + hue + ', 90%, 65%)');
|
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
|
// Placeholders are square
|
||||||
|
var height = this.height() || size || 32;
|
||||||
this.height(height);
|
this.height(height);
|
||||||
this.width(height);
|
this.width(height);
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue