[feature] adding random accent colour options

index.html

@@ -287,6 +287,26 @@
               <input id="control-layout-theme-random" class="control-layout-theme-random" type="checkbox" tabindex="1">
               <label for="control-layout-theme-random"><span class="label-icon"></span>Random Accent colour on load/refresh</label>
             </div>
+            <div class="radio-wrap form-indent-1">
+              <input id="control-layout-theme-style-any" class="control-layout-theme-style-any" type="radio" tabindex="1" name="control-layout-theme-style" value="any">
+              <label for="control-layout-theme-style-any"><span class="label-icon"></span>Any colour</label>
+            </div>
+            <div class="radio-wrap form-indent-1">
+              <input id="control-layout-theme-style-light" class="control-layout-theme-style-light" type="radio" tabindex="1" name="control-layout-theme-style" value="light">
+              <label for="control-layout-theme-style-light"><span class="label-icon"></span>Light colours</label>
+            </div>
+            <div class="radio-wrap form-indent-1">
+              <input id="control-layout-theme-style-dark" class="control-layout-theme-style-dark" type="radio" tabindex="1" name="control-layout-theme-style" value="dark">
+              <label for="control-layout-theme-style-dark"><span class="label-icon"></span>Dark colours</label>
+            </div>
+            <div class="radio-wrap form-indent-1">
+              <input id="control-layout-theme-style-pastel" class="control-layout-theme-style-pastel" type="radio" tabindex="1" name="control-layout-theme-style" value="pastel">
+              <label for="control-layout-theme-style-pastel"><span class="label-icon"></span>Pastel colours</label>
+            </div>
+            <div class="radio-wrap form-indent-1">
+              <input id="control-layout-theme-style-saturated" class="control-layout-theme-style-saturated" type="radio" tabindex="1" name="control-layout-theme-style" value="saturated">
+              <label for="control-layout-theme-style-saturated"><span class="label-icon"></span>Saturated colours</label>
+            </div>
           </div>
         </div>
       </div>

js/control.js

@@ -192,10 +192,22 @@ var control = (function() {
         helper.e(".control-header-search-engine-custom-url").disabled = true;
       };
     };
+    var _theme = function() {
+      if (state.get().layout.theme.random.active) {
+        helper.eA("input[name='control-layout-theme-style']").forEach(function(arrayItem, index) {
+          arrayItem.disabled = false;
+        });
+      } else {
+        helper.eA("input[name='control-layout-theme-style']").forEach(function(arrayItem, index) {
+          arrayItem.disabled = true;
+        });
+      };
+    };
     _edit();
     _date();
     _clock();
     _search();
+    _theme();
   };
 
   var _bind = function() {
@@ -224,12 +236,23 @@ var control = (function() {
     }, false);
     helper.e(".control-layout-theme-random").addEventListener("change", function() {
       state.change({
-        path: "layout.theme.random",
+        path: "layout.theme.random.active",
         value: this.checked
       });
       theme.render();
+      dependents();
       data.save();
     }, false);
+    helper.eA("input[name='control-layout-theme-style']").forEach(function(arrayItem, index) {
+      arrayItem.addEventListener("change", function() {
+        state.change({
+          path: "layout.theme.random.style",
+          value: this.value
+        });
+        render();
+        data.save();
+      }, false);
+    });
     helper.e(".control-link-new-tab").addEventListener("change", function() {
       state.change({
         path: "link.newTab",
@@ -492,7 +515,8 @@ var control = (function() {
   var update = function() {
     helper.e(".control-edit").checked = state.get().edit.active;
     helper.e(".control-layout-theme").value = helper.rgbToHex(state.get().layout.theme.current);
-    helper.e(".control-layout-theme-random").checked = state.get().layout.theme.random;
+    helper.e(".control-layout-theme-random").checked = state.get().layout.theme.random.active;
+    helper.e(".control-layout-theme-style-" + state.get().layout.theme.random.style).checked = true;
     helper.e(".control-link-new-tab").value = state.get().link.style.newTab;
     helper.e(".control-link-style-" + state.get().link.style).checked = true;
     helper.e(".control-link-sort-" + state.get().link.sort).checked = true;

js/helper.js

@@ -84,7 +84,64 @@ var helper = (function() {
     };
   };
 
+  var hslToRgb = function(hslObject) {
+    if (hslObject == undefined) {
+      return null;
+    };
+
+    var chroma = (1 - Math.abs((2 * hslObject.l) - 1)) * hslObject.s;
+    var huePrime = hslObject.h / 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 = hslObject.l - (chroma / 2);
+    red += lightnessAdjustment;
+    green += lightnessAdjustment;
+    blue += lightnessAdjustment;
+
+    var result = {
+      r: Math.round(red * 255),
+      g: Math.round(green * 255),
+      b: Math.round(blue * 255)
+    };
+
+    return result;
+  };
+
   var hexToRgb = function(hex) {
+    if (hex == undefined) {
+      return null;
+    };
     var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
     if (result) {
       result = {
@@ -92,13 +149,14 @@ var helper = (function() {
         g: parseInt(result[2], 16),
         b: parseInt(result[3], 16)
       };
-    } else {
+    };
-      result = null;
-    }
     return result;
   };
 
   var rgbToHex = function(rgbObject) {
+    if (rgbObject == undefined) {
+      return null;
+    };
     var componentToHex = function(hexPart) {
       hexPart = hexPart.toString(16);
       if (hexPart.length == 1) {
@@ -312,6 +370,7 @@ var helper = (function() {
     applyOptions: applyOptions,
     hexToRgb: hexToRgb,
     rgbToHex: rgbToHex,
+    hslToRgb: hslToRgb,
     makeNode: makeNode,
     setObject: setObject,
     getObject: getObject,

js/state.js

@@ -68,7 +68,10 @@ var state = (function() {
           g: 255,
           b: 0,
         },
-        random: false
+        random: {
+          active: false,
+          style: "any"
+        }
       },
     },
     edit: {

js/theme.js

@@ -7,12 +7,53 @@ var theme = (function() {
   };
 
   var random = function() {
-    if (state.get().layout.theme.random) {
+    if (state.get().layout.theme.random.active) {
-      var randomColor = {
+      var randomVal = function(min, max) {
-        r: helper.randomNumber(0, 255),
+        return Math.floor(Math.random() * (max - min) + 1) + min;
-        g: helper.randomNumber(0, 255),
-        b: helper.randomNumber(0, 255)
       };
+      var color = {
+        any: function() {
+          return {
+            h: randomVal(0, 360),
+            s: randomVal(0, 100),
+            l: randomVal(0, 100)
+          };
+        },
+        light: function() {
+          return {
+            h: randomVal(0, 360),
+            s: randomVal(50, 90),
+            l: randomVal(50, 90)
+          };
+        },
+        dark: function() {
+          return {
+            h: randomVal(0, 360),
+            s: randomVal(10, 50),
+            l: randomVal(10, 50)
+          };
+        },
+        pastel: function() {
+          return {
+            h: randomVal(0, 360),
+            s: 100,
+            l: 80
+          };
+        },
+        saturated: function() {
+          return {
+            h: randomVal(0, 360),
+            s: 100,
+            l: 50
+          };
+        }
+      };
+      var hsl = color[state.get().layout.theme.random.style]();
+      var randomColor = helper.hslToRgb({
+        h: hsl.h,
+        s: (hsl.s / 100),
+        l: (hsl.l / 100)
+      });
       state.change({
         path: "layout.theme.current",
         value: randomColor

js/update.js

@@ -32,6 +32,15 @@ var update = (function() {
     return data;
   };
 
+  var _update_230 = function(data) {
+    data.state.layout.theme.random = {
+      active: data.state.layout.theme.random,
+      style: "any"
+    };
+    data.version = 2.30;
+    return data;
+  };
+
   // var _update_300 = function(data) {
   //   data.version = 3.00;
   //   return data;
@@ -50,6 +59,10 @@ var update = (function() {
       console.log("\trunning update", 2.10);
       data = _update_210(data);
     };
+    if (data.version < 2.30) {
+      console.log("\trunning update", 2.30);
+      data = _update_230(data);
+    };
     // if (data.version < 3.00) {
     //   console.log("\t# running update", 3.00);
     //   data = _update_300(data);

js/version.js

@@ -1,7 +1,7 @@
 var version = (function() {
 
   // version is normally bumped when the state needs changing or any new functionality is added
-  var current = "2.2.0";
+  var current = "2.3.0";
 
   var get = function() {
     var number = current.split(".");