[refactor] store accent colour under rgb key in state data

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "4.17.0",
+  "version": "4.18.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "4.17.0",
+  "version": "4.18.0",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
   "main": "index.js",
   "scripts": {

src/index.html

@@ -116,8 +116,8 @@
                   <label for="control-theme-color-rgb-quick">Colour</label>
                 </div>
                 <div class="form-input-button input-color-dot input-color-dot-accent">
-                  <input id="control-theme-accent-current-quick" class="control-theme-accent-current-quick" type="color" value="#000000" tabindex="1">
+                  <input id="control-theme-accent-rgb-quick" class="control-theme-accent-rgb-quick" type="color" value="#000000" tabindex="1">
-                  <label for="control-theme-accent-current-quick">Accent</label>
+                  <label for="control-theme-accent-rgb-quick">Accent</label>
                 </div>
               </div>
             </div>
@@ -1784,14 +1784,14 @@
             </div>
             <div class="menu-item-form">
               <div class="form-wrap">
-                <label for="control-theme-accent-current-picker">Colour</label>
+                <label for="control-theme-accent-rgb-picker">Colour</label>
                 <div class="form-group form-group-block">
-                  <input id="control-theme-accent-current-picker" class="form-group-item-half control-theme-accent-current-picker" type="color" value="#000000" tabindex="1">
+                  <input id="control-theme-accent-rgb-picker" class="form-group-item-half control-theme-accent-rgb-picker" type="color" value="#000000" tabindex="1">
-                  <input id="control-theme-accent-current-hex" class="form-group-item-half control-theme-accent-current-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+                  <input id="control-theme-accent-rgb-hex" class="form-group-item-half control-theme-accent-rgb-hex" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
                 </div>
               </div>
               <div class="form-wrap">
-                <button class="control-theme-accent-current-default button" tabindex="-1">Default accent</button>
+                <button class="control-theme-accent-rgb-default button" tabindex="-1">Default accent</button>
               </div>
               <div class="form-helper">
                 <p class="control-theme-style-light-helper form-helper-item">Accent Colour can also be changed from the Header Area.</p>

src/js/control.js

@@ -81,8 +81,8 @@ var control = (function() {
       render.class();
     }
   }, {
-    element: helper.e(".control-theme-accent-current-quick"),
+    element: helper.e(".control-theme-accent-rgb-quick"),
-    path: "theme.accent.current",
+    path: "theme.accent.rgb",
     type: "color",
     func: function() {
       theme.render.accent.color();
@@ -2865,8 +2865,8 @@ var control = (function() {
       render.update();
     }
   }, {
-    element: helper.e(".control-theme-accent-current-picker"),
+    element: helper.e(".control-theme-accent-rgb-picker"),
-    path: "theme.accent.current",
+    path: "theme.accent.rgb",
     type: "color",
     func: function() {
       theme.render.accent.color();
@@ -2875,8 +2875,8 @@ var control = (function() {
       link.groupAndItems();
     }
   }, {
-    element: helper.e(".control-theme-accent-current-hex"),
+    element: helper.e(".control-theme-accent-rgb-hex"),
-    path: "theme.accent.current",
+    path: "theme.accent.rgb",
     type: "text",
     valueMod: ["hexTextString"],
     func: function() {
@@ -2886,12 +2886,12 @@ var control = (function() {
       link.groupAndItems();
     }
   }, {
-    element: helper.e(".control-theme-accent-current-default"),
+    element: helper.e(".control-theme-accent-rgb-default"),
     type: "button",
     func: function() {
-      mod.setValue("theme.accent.current", helper.getObject({
+      mod.setValue("theme.accent.rgb", helper.getObject({
         object: state.get.default(),
-        path: "theme.accent.current"
+        path: "theme.accent.rgb"
       }));
       theme.render.accent.color();
       theme.render.accent.input.picker();

src/js/header.js

@@ -137,14 +137,14 @@ var header = (function() {
           helper.removeClass(helper.getClosest(helper.e(".control-edit"), ".form-input-button"), "form-input-button-link");
           helper.removeClass(helper.e(".control-add-toggle"), "button-link");
           helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-button-link");
-          helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "form-input-button-link");
+          helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "form-input-button-link");
           helper.removeClass(helper.e(".control-menu-open"), "button-link");
         },
         clear: function() {
           helper.addClass(helper.getClosest(helper.e(".control-edit"), ".form-input-button"), "form-input-button-link");
           helper.addClass(helper.e(".control-add-toggle"), "button-link");
           helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-button-link");
-          helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "form-input-button-link");
+          helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "form-input-button-link");
           helper.addClass(helper.e(".control-menu-open"), "button-link");
         }
       };
@@ -155,16 +155,16 @@ var header = (function() {
         helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot");
         helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot-shade");
         helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-hide");
-        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "input-color-dot");
+        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "input-color-dot");
-        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "input-color-dot-accent");
+        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "input-color-dot-accent");
-        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "form-input-hide");
+        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "form-input-hide");
       } else {
         helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot");
         helper.removeClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "input-color-dot-shade");
         helper.addClass(helper.getClosest(helper.e(".control-theme-color-rgb-quick"), ".form-input-button"), "form-input-hide");
-        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "input-color-dot");
+        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "input-color-dot");
-        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "input-color-dot-accent");
+        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "input-color-dot-accent");
-        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".form-input-button"), "form-input-hide");
+        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-rgb-quick"), ".form-input-button"), "form-input-hide");
       };
     }
   };

src/js/link.js

@@ -552,9 +552,9 @@ var link = (function() {
           linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-text-light";
         };
       } else {
-        if (invert(state.get.current().theme.accent.current, true) == "#000000") {
+        if (invert(state.get.current().theme.accent.rgb, true) == "#000000") {
           linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-text-dark";
-        } else if (invert(state.get.current().theme.accent.current, true) == "#ffffff") {
+        } else if (invert(state.get.current().theme.accent.rgb, true) == "#ffffff") {
           linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-text-light";
         };
       };

src/js/state.js

@@ -221,7 +221,7 @@ var state = (function() {
     },
     theme: {
       accent: {
-        current: {
+        rgb: {
           r: 0,
           g: 80,
           b: 255
@@ -369,7 +369,7 @@ var state = (function() {
     },
     theme: {
       accent: {
-        current: {
+        rgb: {
           r: 0,
           g: 80,
           b: 255

src/js/theme.js

@@ -48,7 +48,7 @@ var theme = (function() {
     });
     helper.setObject({
       object: state.get.current(),
-      path: "theme.accent.current",
+      path: "theme.accent.rgb",
       newValue: data.accent
     });
     helper.setObject({
@@ -137,7 +137,7 @@ var theme = (function() {
         var hex = helper.convertColor.rgb.hex(rgb);
         helper.setObject({
           object: state.get.current(),
-          path: "theme.accent.current",
+          path: "theme.accent.rgb",
           newValue: {
             r: parseInt(rgb.r, 10),
             g: parseInt(rgb.g, 10),
@@ -183,7 +183,7 @@ var theme = (function() {
       name: "nightTab (default)",
       font: state.get.default().theme.font,
       color: state.get.default().theme.color,
-      accent: state.get.default().theme.accent.current,
+      accent: state.get.default().theme.accent.rgb,
       radius: state.get.default().theme.radius,
       shadow: state.get.default().theme.shadow,
       style: state.get.default().theme.style,
@@ -1279,18 +1279,18 @@ var theme = (function() {
   render.accent = {
     color: function() {
       var html = helper.e("html");
-      var color = state.get.current().theme.accent.current;
+      var color = state.get.current().theme.accent.rgb;
       html.style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
     },
     input: {
       quick: function() {
-        helper.e(".control-theme-accent-current-quick").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.current);
+        helper.e(".control-theme-accent-rgb-quick").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.rgb);
       },
       picker: function() {
-        helper.e(".control-theme-accent-current-picker").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.current);
+        helper.e(".control-theme-accent-rgb-picker").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.rgb);
       },
       hex: function() {
-        helper.e(".control-theme-accent-current-hex").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.current);
+        helper.e(".control-theme-accent-rgb-hex").value = helper.convertColor.rgb.hex(state.get.current().theme.accent.rgb);
       }
     }
   };
@@ -1699,7 +1699,7 @@ var theme = (function() {
       var successAction = function() {
         stagedThemeCustom.theme.font = state.get.current().theme.font;
         stagedThemeCustom.theme.color = state.get.current().theme.color;
-        stagedThemeCustom.theme.accent = state.get.current().theme.accent.current;
+        stagedThemeCustom.theme.accent = state.get.current().theme.accent.rgb;
         stagedThemeCustom.theme.radius = state.get.current().theme.radius;
         stagedThemeCustom.theme.shadow = state.get.current().theme.shadow;
         stagedThemeCustom.theme.style = state.get.current().theme.style;

src/js/update.js

@@ -770,6 +770,11 @@ var update = (function() {
         opacity: 0.4
       };
       return data;
+    },
+    "4.18.0": function(data) {
+      data.state.theme.accent.rgb = data.state.theme.accent.current;
+      delete data.state.theme.accent.current;
+      return data;
     }
   };
 

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "4.17.0";
+  var current = "4.18.0";
 
   var name = "Naughty Goose";
 

src/manifest.json

@@ -2,7 +2,7 @@
   "name": "nightTab",
   "short_name": "nightTab",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-  "version": "4.17.0",
+  "version": "4.18.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"