[refactor] switch to improved colour conversion helper

src/js/background.js

@@ -127,10 +127,10 @@ var background = (function() {
       helper.e(".control-background-image-file").value = "";
     },
     picker: function() {
-      helper.e(".control-background-color-by-picker").value = helper.rgbToHex(state.get.current().background.color.custom);
+      helper.e(".control-background-color-by-picker").value = helper.convertColor.rgb.hex(state.get.current().background.color.custom);
     },
     hex: function() {
-      helper.e(".control-background-color-by-hex").value = helper.rgbToHex(state.get.current().background.color.custom);
+      helper.e(".control-background-color-by-hex").value = helper.convertColor.rgb.hex(state.get.current().background.color.custom);
     }
   };
 

src/js/control.js

@@ -2594,8 +2594,8 @@ var control = (function() {
     func: function() {
       theme.mod.color.hsl();
       theme.render.color.shade();
-      theme.render.color.range.hsl();
+      theme.render.color.input.range.hsl();
-      theme.render.color.range.rgb();
+      theme.render.color.input.range.rgb();
       theme.render.color.input.hex();
       theme.render.color.input.picker();
     }
@@ -2606,8 +2606,8 @@ var control = (function() {
     func: function() {
       theme.mod.color.hsl();
       theme.render.color.shade();
-      theme.render.color.range.hsl();
+      theme.render.color.input.range.hsl();
-      theme.render.color.range.rgb();
+      theme.render.color.input.range.rgb();
       theme.render.color.input.hex();
       theme.render.color.input.quick();
     }
@@ -2619,8 +2619,8 @@ var control = (function() {
     func: function() {
       theme.mod.color.hsl();
       theme.render.color.shade();
-      theme.render.color.range.hsl();
+      theme.render.color.input.range.hsl();
-      theme.render.color.range.rgb();
+      theme.render.color.input.range.rgb();
       theme.render.color.input.picker();
       theme.render.color.input.quick();
     }
@@ -2951,7 +2951,7 @@ var control = (function() {
         return parseInt(object.element.value, 10);
       },
       color: function(object) {
-        return helper.hexToRgb(object.element.value);
+        return helper.convertColor.hex.rgb(object.element.value);
       }
     };
     var valueMod = {
@@ -2962,7 +2962,7 @@ var control = (function() {
         return value / 100;
       },
       hexTextString: function(value, object) {
-        return helper.hexToRgb(value);
+        return helper.convertColor.hex.rgb(value);
       }
     };
     var changeValue = function(object) {
@@ -2978,10 +2978,10 @@ var control = (function() {
           path: object.path,
           newValue: newValue
         });
-        // console.log("state set", object.path, helper.getObject({
+        console.log("state set", object.path, helper.getObject({
-        //   object: state.get.current(),
+          object: state.get.current(),
-        //   path: object.path
+          path: object.path
-        // }));
+        }));
       };
     };
     var bindControl = function(object) {
@@ -3947,7 +3947,7 @@ var control = (function() {
         return value * 100;
       },
       hexTextString: function(value, element) {
-        return helper.rgbToHex(value);
+        return helper.convertColor.rgb.hex(value);
       }
     };
     var setValue = {
@@ -4006,7 +4006,7 @@ var control = (function() {
         object.element.value = newValue;
       },
       color: function(object) {
-        object.element.value = helper.rgbToHex(helper.getObject({
+        object.element.value = helper.convertColor.rgb.hex(helper.getObject({
           object: state.get.current(),
           path: object.path
         }));

src/js/helper.js

@@ -195,90 +195,6 @@ 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 || huePrime === 6) {
-      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 = {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16)
-      };
-    };
-    return result;
-  };
-
-  var rgbToHex = function(rgbObject) {
-    if (rgbObject == undefined) {
-      return null;
-    };
-    var componentToHex = function(hexPart) {
-      hexPart = hexPart.toString(16);
-      if (hexPart.length == 1) {
-        hexPart = "0" + hexPart
-      };
-      return hexPart;
-    };
-    var result = "#" + componentToHex(rgbObject.r) + componentToHex(rgbObject.g) + componentToHex(rgbObject.b);
-    return result;
-  };
-
   var makeNode = function(override) {
     var options = {
       tag: null,
@@ -666,9 +582,9 @@ var helper = (function() {
   };
 
   convertColor.rgb.hsl = function(rgb) {
-    var r = rgb[0] / 255;
+    var r = rgb.r / 255;
-    var g = rgb[1] / 255;
+    var g = rgb.g / 255;
-    var b = rgb[2] / 255;
+    var b = rgb.b / 255;
     var min = Math.min(r, g, b);
     var max = Math.max(r, g, b);
     var delta = max - min;
@@ -701,36 +617,44 @@ var helper = (function() {
       s = delta / (2 - max - min);
     };
 
-    return [h, s * 100, l * 100];
+    return {
+      h: h,
+      s: s * 100,
+      l: l * 100
+    };
   };
 
   convertColor.rgb.hex = function(args) {
-    var integer = ((Math.round(args[0]) & 0xFF) << 16) +
+    var integer = ((Math.round(args.r) & 0xFF) << 16) +
-      ((Math.round(args[1]) & 0xFF) << 8) +
+      ((Math.round(args.g) & 0xFF) << 8) +
-      (Math.round(args[2]) & 0xFF);
+      (Math.round(args.b) & 0xFF);
 
-    var string = integer.toString(16).toUpperCase();
+    var string = integer.toString(16);
-    return "000000".substring(string.length) + string;
+    return "#" + "000000".substring(string.length) + string;
   };
 
   convertColor.hsl.rgb = function(hsl) {
-    var h = hsl[0] / 360;
+    var h = hsl.h / 360;
-    var s = hsl[1] / 100;
+    var s = hsl.s / 100;
-    var l = hsl[2] / 100;
+    var l = hsl.l / 100;
     var t2;
     var t3;
     var val;
 
     if (s === 0) {
       val = l * 255;
-      return [val, val, val];
+      return {
-    }
+        r: val,
+        g: val,
+        b: val
+      };
+    };
 
     if (l < 0.5) {
       t2 = l * (1 + s);
     } else {
       t2 = l + s - l * s;
-    }
+    };
 
     var t1 = 2 * l - t2;
 
@@ -739,11 +663,11 @@ var helper = (function() {
       t3 = h + 1 / 3 * -(i - 1);
       if (t3 < 0) {
         t3++;
-      }
+      };
 
       if (t3 > 1) {
         t3--;
-      }
+      };
 
       if (6 * t3 < 1) {
         val = t1 + (t2 - t1) * 6 * t3;
@@ -753,19 +677,27 @@ var helper = (function() {
         val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
       } else {
         val = t1;
-      }
+      };
 
       rgb[i] = val * 255;
-    }
+    };
 
-    return rgb;
+    return {
+      r: rgb[0],
+      g: rgb[1],
+      b: rgb[2]
+    };
   };
 
   convertColor.hex.rgb = function(args) {
     var match = args.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);
     if (!match) {
-      return [0, 0, 0];
+      return {
-    }
+        r: 0,
+        g: 0,
+        b: 0
+      };
+    };
 
     var colorString = match[0];
 
@@ -773,14 +705,18 @@ var helper = (function() {
       colorString = colorString.split("").map(function(char) {
         return char + char;
       }).join("");
-    }
+    };
 
     var integer = parseInt(colorString, 16);
     var r = (integer >> 16) & 0xFF;
     var g = (integer >> 8) & 0xFF;
     var b = integer & 0xFF;
 
-    return [r, g, b];
+    return {
+      r: r,
+      g: g,
+      b: b
+    };
   };
 
   // exposed methods
@@ -796,9 +732,6 @@ var helper = (function() {
     getDateTime: getDateTime,
     sortObject: sortObject,
     applyOptions: applyOptions,
-    hexToRgb: hexToRgb,
-    rgbToHex: rgbToHex,
-    hslToRgb: hslToRgb,
     makeNode: makeNode,
     node: node,
     setObject: setObject,

src/js/link.js

@@ -113,11 +113,16 @@ var link = (function() {
       bookmarks.get().forEach(function(arrayItem, index) {
         arrayItem.items.forEach(function(arrayItem, index) {
           arrayItem.accent.override = true;
-          arrayItem.accent.color = helper.hslToRgb({
+          var rgb = helper.convertColor.hsl.rgb({
             h: degree,
-            s: 1,
+            s: 100,
-            l: 0.5
+            l: 50
           });
+          arrayItem.accent.color = {
+            r: parseInt(rgb.r, 10),
+            g: parseInt(rgb.g, 10),
+            b: parseInt(rgb.b, 10)
+          };
           degree = degree + units;
         });
       });
@@ -930,8 +935,8 @@ var link = (function() {
           helper.addClass(form.querySelector(".link-form-input-accent-helper"), "disabled");
         };
         if (stagedLink.link.accent.color.r != null && stagedLink.link.accent.color.g != null && stagedLink.link.accent.color.b != null) {
-          accentColorPicker.value = helper.rgbToHex(stagedLink.link.accent.color);
+          accentColorPicker.value = helper.convertColor.rgb.hex(stagedLink.link.accent.color);
-          accentColorHex.value = helper.rgbToHex(stagedLink.link.accent.color);
+          accentColorHex.value = helper.convertColor.rgb.hex(stagedLink.link.accent.color);
         };
       };
 
@@ -1006,20 +1011,20 @@ var link = (function() {
       }, false);
       accentCustomRadio.addEventListener("change", function() {
         stagedLink.link.accent.override = true;
-        stagedLink.link.accent.color = helper.hexToRgb(accentColorPicker.value);
+        stagedLink.link.accent.color = helper.convertColor.hex.rgb(accentColorPicker.value);
         accentColorPicker.removeAttribute("disabled");
         accentColorHex.removeAttribute("disabled");
         helper.removeClass(accentColorInputHelper, "disabled");
       }, false);
       accentColorPicker.addEventListener("change", function() {
         if (helper.isHexNumber(this.value)) {
-          stagedLink.link.accent.color = helper.hexToRgb(this.value);
+          stagedLink.link.accent.color = helper.convertColor.hex.rgb(this.value);
           accentColorHex.value = this.value;
         };
       }, false);
       accentColorHex.addEventListener("input", function() {
         if (helper.isHexNumber(this.value)) {
-          stagedLink.link.accent.color = helper.hexToRgb(this.value);
+          stagedLink.link.accent.color = helper.convertColor.hex.rgb(this.value);
           accentColorPicker.value = this.value;
         };
       }, false);
@@ -1668,10 +1673,10 @@ var link = (function() {
 
   render.input = {
     picker: function() {
-      helper.e(".control-link-item-color-by-picker").value = helper.rgbToHex(state.get.current().link.item.color.custom);
+      helper.e(".control-link-item-color-by-picker").value = helper.convertColor.rgb.hex(state.get.current().link.item.color.custom);
     },
     hex: function() {
-      helper.e(".control-link-item-color-by-hex").value = helper.rgbToHex(state.get.current().link.item.color.custom);
+      helper.e(".control-link-item-color-by-hex").value = helper.convertColor.rgb.hex(state.get.current().link.item.color.custom);
     }
   };
 

src/js/theme.js

@@ -21,16 +21,28 @@ var theme = (function() {
 
   mod.color = {
     hsl: function() {
-      var hsl = helper.convertColor.rgb.hsl([state.get.current().theme.color.rgb.r, state.get.current().theme.color.rgb.g, state.get.current().theme.color.rgb.b]);
+      var hsl = helper.convertColor.rgb.hsl(state.get.current().theme.color.rgb);
-      state.get.current().theme.color.hsl.h = parseInt(hsl[0], 10);
+      helper.setObject({
-      state.get.current().theme.color.hsl.s = parseInt(hsl[1], 10);
+        object: state.get.current(),
-      state.get.current().theme.color.hsl.l = parseInt(hsl[2], 10);
+        path: "theme.color.hsl",
+        newValue: {
+          h: parseInt(hsl.h, 10),
+          s: parseInt(hsl.s, 10),
+          l: parseInt(hsl.l, 10)
+        }
+      });
     },
     rgb: function() {
-      var rgb = helper.convertColor.hsl.rgb([state.get.current().theme.color.hsl.h, state.get.current().theme.color.hsl.s, state.get.current().theme.color.hsl.l]);
+      var rgb = helper.convertColor.hsl.rgb(state.get.current().theme.color.hsl);
-      state.get.current().theme.color.rgb.r = parseInt(rgb[0], 10);
+      helper.setObject({
-      state.get.current().theme.color.rgb.g = parseInt(rgb[1], 10);
+        object: state.get.current(),
-      state.get.current().theme.color.rgb.b = parseInt(rgb[2], 10);
+        path: "theme.color.rgb",
+        newValue: {
+          r: parseInt(rgb.r, 10),
+          g: parseInt(rgb.g, 10),
+          b: parseInt(rgb.b, 10)
+        }
+      });
     }
   };
 
@@ -96,87 +108,85 @@ var theme = (function() {
             };
           }
         };
-        var hsl = color[state.get.current().theme.accent.random.style]();
+        var rgb = helper.convertColor.hsl.rgb(color[state.get.current().theme.accent.random.style]());
-        var randomColor = helper.hslToRgb({
+        var hex = helper.convertColor.rgb.hex(rgb);
-          h: hsl.h,
-          s: (hsl.s / 100),
-          l: (hsl.l / 100)
-        });
         helper.setObject({
           object: state.get.current(),
           path: "theme.accent.current",
-          newValue: randomColor
+          newValue: {
+            r: parseInt(rgb.r, 10),
+            g: parseInt(rgb.g, 10),
+            b: parseInt(rgb.b, 10)
+          }
         });
-        helper.e(".control-theme-accent-current-quick").value = helper.rgbToHex(randomColor);
+        helper.e(".control-theme-accent-current-quick").value = hex;
-        helper.e(".control-theme-accent-current-picker").value = helper.rgbToHex(randomColor);
+        helper.e(".control-theme-accent-current-picker").value = hex;
-        helper.e(".control-theme-accent-current-hex").value = helper.rgbToHex(randomColor);
+        helper.e(".control-theme-accent-current-hex").value = hex;
       };
     },
     input: {
       quick: function() {
-        helper.e(".control-theme-accent-current-quick").value = helper.rgbToHex(state.get.current().theme.accent.current);
+        helper.e(".control-theme-accent-current-quick").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.current);
       },
       picker: function() {
-        helper.e(".control-theme-accent-current-picker").value = helper.rgbToHex(state.get.current().theme.accent.current);
+        helper.e(".control-theme-accent-current-picker").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.current);
       },
       hex: function() {
-        helper.e(".control-theme-accent-current-hex").value = helper.rgbToHex(state.get.current().theme.accent.current);
+        helper.e(".control-theme-accent-current-hex").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.current);
       }
     }
   };
 
   render.color = {
     shade: function() {
-
       var shadeSteps = 10;
       var saturationShift = 0;
       var lightShift = 4;
       var html = helper.e("html");
-
+      var hsl = helper.convertColor.rgb.hsl(state.get.current().theme.color.rgb);
-      var hsl = helper.convertColor.rgb.hsl([state.get.current().theme.color.rgb.r, state.get.current().theme.color.rgb.g, state.get.current().theme.color.rgb.b]);
-
-      // base color
       html.style.setProperty("--theme-shade", state.get.current().theme.color.rgb.r + ", " + state.get.current().theme.color.rgb.g + ", " + state.get.current().theme.color.rgb.b);
-
+      var renderShade = function(name, index, rgb) {
-      for (var i = 1; i <= shadeSteps; i++) {
+        for (var key in rgb) {
-        var h = hsl[0];
+          if (rgb[key] < 0) {
-        var s = (hsl[1] - (saturationShift * i));
+            rgb[key] = 0;
-        var l = (hsl[2] - (lightShift * i));
+          } else if (rgb[key] > 255) {
-        var rgb = helper.convertColor.hsl.rgb([h, s, l]);
+            rgb[key] = 255;
-        var number;
+          };
-        if (i < 10) {
+          rgb[key] = parseInt(rgb[key], 10);
-          number = "0" + i;
+        };
+        if (index < 10) {
+          index = "0" + index;
         } else {
-          number = i
+          index = index;
         };
-        html.style.setProperty("--theme-shade-neg-" + number, parseInt(rgb[0], 10) + ", " + parseInt(rgb[1], 10) + ", " + parseInt(rgb[2], 10));
+        html.style.setProperty(name + index, rgb.r + ", " + rgb.g + ", " + rgb.b);
       };
-
       for (var i = 1; i <= shadeSteps; i++) {
-        var h = hsl[0];
+        var rgb = helper.convertColor.hsl.rgb({
-        var s = (hsl[1] + (saturationShift * i));
+          h: hsl.h,
-        var l = (hsl[2] + (lightShift * i));
+          s: hsl.s - (saturationShift * i),
-        var rgb = helper.convertColor.hsl.rgb([h, s, l]);
+          l: hsl.l - (lightShift * i)
-        var number;
+        });
-        if (i < 10) {
+        renderShade("--theme-shade-neg-", i, rgb);
-          number = "0" + i;
-        } else {
-          number = i
       };
-        html.style.setProperty("--theme-shade-pos-" + number, parseInt(rgb[0], 10) + ", " + parseInt(rgb[1], 10) + ", " + parseInt(rgb[2], 10));
+      for (var i = 1; i <= shadeSteps; i++) {
+        var rgb = helper.convertColor.hsl.rgb({
+          h: hsl.h,
+          s: hsl.s + (saturationShift * i),
+          l: hsl.l + (lightShift * i)
+        });
+        renderShade("--theme-shade-pos-", i, rgb);
       };
-
     },
     input: {
       quick: function() {
-        helper.e(".control-theme-color-rgb-quick").value = helper.rgbToHex(state.get.current().theme.color.rgb);
+        helper.e(".control-theme-color-rgb-quick").value = helper.convertColor.rgb.hex(state.get.current().theme.color.rgb);
       },
       picker: function() {
-        helper.e(".control-theme-color-rgb-picker").value = helper.rgbToHex(state.get.current().theme.color.rgb);
+        helper.e(".control-theme-color-rgb-picker").value = helper.convertColor.rgb.hex(state.get.current().theme.color.rgb);
       },
       hex: function() {
-        helper.e(".control-theme-color-rgb-hex").value = helper.rgbToHex(state.get.current().theme.color.rgb);
+        helper.e(".control-theme-color-rgb-hex").value = helper.convertColor.rgb.hex(state.get.current().theme.color.rgb);
-      }
       },
       range: {
         hsl: function() {
@@ -196,6 +206,7 @@ var theme = (function() {
           helper.e(".control-theme-color-rgb-b-count").textContent = state.get.current().theme.color.rgb.b;
         }
       }
+    }
   };
 
   var toggle = function() {