From dcc28a3ad7168b68f337f002e953ba05e4053498 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6?= <skjnldsv@users.noreply.github.com>
Date: Wed, 30 Mar 2016 06:41:52 +0200
Subject: [PATCH] New colour generator
---
core/js/placeholder.js | 62 ++++++++++++++++++++++++++++++++++++++----
1 file changed, 56 insertions(+), 6 deletions(-)
diff --git a/core/js/placeholder.js b/core/js/placeholder.js
index 5fb5b5b8f80..8eb17b43fa4 100644
--- a/core/js/placeholder.js
+++ b/core/js/placeholder.js
@@ -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);
--
GitLab