New colours variations and random colour generator

css/calendarlist.css

@@ -191,12 +191,17 @@
   align-items: center;
 }
 .colorpicker .colorpicker-list li {
-  height: 26px;
-  width: 26px !important;
+  height: 24px;
+  width: 24px !important;
 }
 .colorpicker .colorpicker-list li.selected {
   border: 1px solid #333;
 }
+.colorpicker .colorpicker-list li.randomcolour {
+  background-image: url('../img/random.svg');
+  background-repeat: no-repeat;
+  background-position: center center;
+}
 
 /*scroll issues */
 #scrollable {

js/app/directives/colorpickerDirective.js

@@ -14,24 +14,30 @@
  *
  * This library is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.	See the
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  * GNU AFFERO GENERAL PUBLIC LICENSE for more details.
  *
  * You should have received a copy of the GNU Affero General Public
  * License along with this library. If not, see <http://www.gnu.org/licenses/>.
  *
  */
- 
+
 /* https://github.com/kayellpeee/hsl_rgb_converter
  * expected hue range: [0, 360)
  * expected saturation range: [0, 1]
  * expected lightness range: [0, 1]
  */
 var hslToRgb = function(hue, saturation, lightness) {
+	'use strict';
 	// based on algorithm from http://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB
-	if (hue == undefined) {
+	if(Array.isArray(hue)) {
+		[hue, saturation, lightness] = hue;
+	}
+	if (hue === undefined) {
 		return [0, 0, 0];
 	}
+	saturation /= 100;
+	lightness /= 100;
 
 	var chroma = (1 - Math.abs((2 * lightness) - 1)) * saturation;
 	var huePrime = hue / 60;
@@ -77,6 +83,25 @@ var hslToRgb = function(hue, saturation, lightness) {
 
 };
 
+/*
+ * Convert rgb array to hex string
+ */
+var rgbToHex = function(r, g, b) {
+	'use strict';
+	if(Array.isArray(r)) {
+		[r, g, b] = r;
+	}
+	return '#' + parseInt(r, 10).toString(16) + parseInt(g, 10).toString(16) + parseInt(b, 10).toString(16);
+};
+
+
+/*
+ * Generate a random colour with the core generator
+ */
+var randColour = function() {
+	'use strict';
+	return rgbToHex(hslToRgb(Math.random().toString().toHsl()));
+};
 
 /**
  * Directive: Colorpicker
@@ -100,13 +125,11 @@ app.directive('colorpicker', function() {
 		var hsl = "";
 		var hslcolour = "";
 		//		  0    40   80   120  160  200   240  280  320
-		listofcolours = ["15", "9", "4", "b", "6", "11", "e", "f", "57"];
+		listofcolours = ["15", "9", "4", "b", "6", "11", "74", "f", "57"];
 		listofcolours.forEach(function(hash, index) {
 			hsl = hash.toHsl();
-			hslcolour = hslToRgb(Math.round(hsl[0]/40)*40, hsl[1]/100, hsl[2]/100);
-			listofcolours[index] = '#' + parseInt(hslcolour[0], 10).toString(16)+
-										 parseInt(hslcolour[1], 10).toString(16)+
-										 parseInt(hslcolour[2], 10).toString(16)
+			hslcolour = hslToRgb(hsl);
+			listofcolours[index] = rgbToHex(hslcolour);
 		});
 	}
 	return {
@@ -119,6 +142,12 @@ app.directive('colorpicker', function() {
 		link: function(scope, element, attr) {
 			scope.colors = scope.customizedColors || listofcolours;
 			scope.selected = scope.selected || scope.colors[0];
+			scope.random = "#000000";
+
+			scope.randomizeColour = function() {
+				scope.random = randColour();
+				scope.pick(scope.random);
+			};
 
 			scope.pick = function(color) {
 				scope.selected = color;

js/public/app.js

@@ -1557,44 +1557,144 @@ app.controller('VAlarmController', ["$scope", function($scope) {
 	};
 }]);
 
+
+/* https://github.com/kayellpeee/hsl_rgb_converter
+ * expected hue range: [0, 360)
+ * expected saturation range: [0, 1]
+ * expected lightness range: [0, 1]
+ */
+var hslToRgb = function(hue, saturation, lightness) {
+	'use strict';
+	// based on algorithm from http://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB
+	if(Array.isArray(hue)) {
+		[hue, saturation, lightness] = hue;
+	}
+	if (hue === undefined) {
+		return [0, 0, 0];
+	}
+	saturation /= 100;
+	lightness /= 100;
+
+	var chroma = (1 - Math.abs((2 * lightness) - 1)) * saturation;
+	var huePrime = hue / 60;
+	var secondComponent = chroma * (1 - Math.abs((huePrime % 2) - 1));
+
+	huePrime = Math.floor(huePrime);
+	var red;
+	var green;
+	var blue;
+
+	if (huePrime === 0) {
+		red = chroma;
+		green = secondComponent;
+		blue = 0;
+	} else if (huePrime === 1) {
+		red = secondComponent;
+		green = chroma;
+		blue = 0;
+	} else if (huePrime === 2) {
+		red = 0;
+		green = chroma;
+		blue = secondComponent;
+	} else if (huePrime === 3) {
+		red = 0;
+		green = secondComponent;
+		blue = chroma;
+	} else if (huePrime === 4) {
+		red = secondComponent;
+		green = 0;
+		blue = chroma;
+	} else if (huePrime === 5) {
+		red = chroma;
+		green = 0;
+		blue = secondComponent;
+	}
+
+	var lightnessAdjustment = lightness - (chroma / 2);
+	red += lightnessAdjustment;
+	green += lightnessAdjustment;
+	blue += lightnessAdjustment;
+
+	return [Math.round(red * 255), Math.round(green * 255), Math.round(blue * 255)];
+
+};
+
+/*
+ * Convert rgb array to hex string
+ */
+var rgbToHex = function(r, g, b) {
+	'use strict';
+	if(Array.isArray(r)) {
+		[r, g, b] = r;
+	}
+	return '#' + parseInt(r, 10).toString(16) + parseInt(g, 10).toString(16) + parseInt(b, 10).toString(16);
+};
+
+
+/*
+ * Generate a random colour with the core generator
+ */
+var randColour = function() {
+	'use strict';
+	return rgbToHex(hslToRgb(Math.random().toString().toHsl()));
+};
+
 /**
-* Directive: Colorpicker
-* Description: Colorpicker for the Calendar app.
-*/
+ * Directive: Colorpicker
+ * Description: Colorpicker for the Calendar app.
+ */
 
 
 app.directive('colorpicker', function() {
-  'use strict';
-    var listofcolours =  [
-        '#31CC7C',
-        '#317CCC',
-        '#FF7A66',
-        '#F1DB50',
-        '#7C31CC',
-        '#CC317C',
-        '#3A3B3D',
-        '#CACBCD'
-    ];
-    return {
-        scope: {
-            selected: '=',
-            customizedColors: '=colors'
-        },
-        restrict: 'AE',
-        templateUrl: OC.filePath('calendar','templates', 'colorpicker.html'),
-        link: function (scope, element, attr) {
-            scope.colors = scope.customizedColors || listofcolours;
-            scope.selected = scope.selected || scope.colors[0];
-
-            scope.pick = function (color) {
-                scope.selected = color;
-            };
-
-        }
-    };
+	'use strict';
+	var listofcolours = [
+		'#31CC7C',
+		'#317CCC',
+		'#FF7A66',
+		'#F1DB50',
+		'#7C31CC',
+		'#CC317C',
+		'#3A3B3D',
+		'#CACBCD'
+	];
+	if (typeof String.prototype.toHsl === 'function') {
+		var hsl = "";
+		var hslcolour = "";
+		//		  0    40   80   120  160  200   240  280  320
+		listofcolours = ["15", "9", "4", "b", "6", "11", "74", "f", "57"];
+		listofcolours.forEach(function(hash, index) {
+			hsl = hash.toHsl();
+			hslcolour = hslToRgb(hsl);
+			listofcolours[index] = rgbToHex(hslcolour);
+		});
+	}
+	return {
+		scope: {
+			selected: '=',
+			customizedColors: '=colors'
+		},
+		restrict: 'AE',
+		templateUrl: OC.filePath('calendar', 'templates', 'colorpicker.html'),
+		link: function(scope, element, attr) {
+			scope.colors = scope.customizedColors || listofcolours;
+			scope.selected = scope.selected || scope.colors[0];
+			scope.random = "#000000";
+
+			scope.randomizeColour = function() {
+				scope.random = randColour();
+				scope.pick(scope.random);
+			};
+
+			scope.pick = function(color) {
+				scope.selected = color;
+			};
+
+		}
+	};
 
 });
 
+
 app.directive('ocdatetimepicker', ["$compile", "$timeout", function($compile, $timeout) {
 	'use strict';
 

templates/colorpicker.html

@@ -1,7 +1,9 @@
 <ul class="colorpicker-list">
-	<li
-			ng-repeat="color in colors"
-			ng-class="{ selected: (color===selected) }"
-			ng-click="pick(color)"
-			ng-style="{ 'background-color':color}; "></li>
+	<li ng-repeat="color in colors"
+		ng-class="{ selected: (color===selected) }"
+		ng-click="pick(color)"
+		ng-style="{ 'background-color':color}; "></li>
+	<li class="randomcolour"
+		ng-click="randomizeColour()"
+		ng-style="{ 'background-color':random}; "></li>
 </ul>