[refactor] improve custom theme edit control

package-lock.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "4.10.0",
+  "version": "4.11.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

@@ -1327,8 +1327,9 @@
                 <div class="button-wrap">
                   <button class="control-theme-custom-add button mb-0" tabindex="-1">Save current theme</button>
                 </div>
-                <div class="button-wrap">
+                <div class="input-wrap input-button input-hide">
-                  <button class="control-theme-custom-edit button mb-0" tabindex="-1">Edit</button>
+                  <input id="control-theme-custom-edit" class="control-theme-custom-edit" type="checkbox" tabindex="1">
+                  <label for="control-theme-custom-edit" class="mb-0"><span class="label-icon"></span> Edit</label>
                 </div>
               </div>
               <p class="control-theme-custom-helper form-helper small">Saving a Theme will record the current Colour, Accent, Font, Style and Radius.</p>

src/js/control.js

@@ -2539,9 +2539,10 @@ var control = (function() {
     }
   }, {
     element: helper.e(".control-theme-custom-edit"),
-    type: "button",
+    path: "theme.custom.edit",
+    type: "checkbox",
     func: function() {
-      theme.custom.edit();
+      render.class();
     }
   }, {
     element: helper.e(".control-theme-style-dark"),
@@ -3450,10 +3451,13 @@ var control = (function() {
       };
     };
     var _theme = function() {
+      helper.removeClass(html, "is-theme-custom-edit");
+      helper.removeClass(html, "is-theme-radius");
+      if (state.get.current().theme.custom.edit) {
+        helper.addClass(html, "is-theme-custom-edit");
+      };
       if (state.get.current().theme.radius > 0) {
         helper.addClass(html, "is-theme-radius");
-      } else {
-        helper.removeClass(html, "is-theme-radius");
       };
     };
     var _layout = function() {
@@ -3842,23 +3846,21 @@ var control = (function() {
       _transitional();
     };
     var _edit = function() {
+      _disable.input(".control-edit", true);
       if (bookmarks.get().length > 0) {
         _disable.input(".control-edit", false);
-      } else {
-        _disable.input(".control-edit", true);
       };
     };
     var _group = function() {
+      _disable.element("[for=control-group-name-size]", true);
+      _disable.input(".control-group-name-size", true);
+      _disable.element(".control-group-name-size-count", true);
+      _disable.input(".control-group-name-size-default", true);
       if (state.get.current().group.name.show) {
         _disable.element("[for=control-group-name-size]", false);
         _disable.input(".control-group-name-size", false);
         _disable.element(".control-group-name-size-count", false);
         _disable.input(".control-group-name-size-default", false);
-      } else {
-        _disable.element("[for=control-group-name-size]", true);
-        _disable.input(".control-group-name-size", true);
-        _disable.element(".control-group-name-size-count", true);
-        _disable.input(".control-group-name-size-default", true);
       };
     };
     var _link = function() {
@@ -4062,6 +4064,16 @@ var control = (function() {
       };
     };
     var _theme = function() {
+      _disable.input(".control-theme-custom-edit", true);
+      _disable.input(".control-theme-accent-random-style-any", true);
+      _disable.input(".control-theme-accent-random-style-light", true);
+      _disable.input(".control-theme-accent-random-style-dark", true);
+      _disable.input(".control-theme-accent-random-style-pastel", true);
+      _disable.input(".control-theme-accent-random-style-saturated", true);
+      _disable.input(".control-theme-accent-randomise", true);
+      if (state.get.current().theme.custom.all.length > 0) {
+        _disable.input(".control-theme-custom-edit", false);
+      };
       if (state.get.current().theme.accent.random.active) {
         _disable.input(".control-theme-accent-random-style-any", false);
         _disable.input(".control-theme-accent-random-style-light", false);
@@ -4069,13 +4081,6 @@ var control = (function() {
         _disable.input(".control-theme-accent-random-style-pastel", false);
         _disable.input(".control-theme-accent-random-style-saturated", false);
         _disable.input(".control-theme-accent-randomise", false);
-      } else {
-        _disable.input(".control-theme-accent-random-style-any", true);
-        _disable.input(".control-theme-accent-random-style-light", true);
-        _disable.input(".control-theme-accent-random-style-dark", true);
-        _disable.input(".control-theme-accent-random-style-pastel", true);
-        _disable.input(".control-theme-accent-random-style-saturated", true);
-        _disable.input(".control-theme-accent-randomise", true);
       };
     };
     var _background = function() {

src/js/state.js

@@ -262,7 +262,10 @@ var state = (function() {
       style: "dark",
       radius: 0.25,
       shadow: 1,
-      custom: []
+      custom: {
+        all: [],
+        edit: false
+      }
     },
     background: {
       color: {

src/js/theme.js

@@ -1089,13 +1089,20 @@ var theme = (function() {
 
   mod.custom = {
     get: function(index) {
-      return JSON.parse(JSON.stringify(state.get.current().theme.custom[index]));
+      return JSON.parse(JSON.stringify(state.get.current().theme.custom.all[index]));
     },
     add: function() {
-      state.get.current().theme.custom.push(JSON.parse(JSON.stringify(stagedThemeCustom.theme)));
+      state.get.current().theme.custom.all.push(JSON.parse(JSON.stringify(stagedThemeCustom.theme)));
     },
     remove: function(copyStagedThemeCustom) {
-      state.get.current().theme.custom.splice(stagedThemeCustom.position.index, 1);
+      state.get.current().theme.custom.all.splice(stagedThemeCustom.position.index, 1);
+    },
+    close: function() {
+      helper.setObject({
+        object: state.get.current(),
+        path: "theme.custom.edit",
+        newValue: false
+      });
     }
   };
 
@@ -1399,7 +1406,7 @@ var theme = (function() {
     all: function() {
       var themeCustomSaved = helper.e(".theme-custom");
       var formInline = helper.node("div|class:form-inline");
-      var allThemeCuston = JSON.parse(JSON.stringify(state.get.current().theme.custom));
+      var allThemeCuston = JSON.parse(JSON.stringify(state.get.current().theme.custom.all));
       if (allThemeCuston.length > 0) {
         allThemeCuston.forEach(function(arrayItem, index) {
           var themeCustomItem = helper.node("div|class:theme-custom-item");
@@ -1527,6 +1534,7 @@ var theme = (function() {
         shade.close();
         pagelock.unlock();
         stagedThemeCustom.reset();
+        control.render.dependents();
       };
       var cancelAction = function() {
         shade.close();
@@ -1561,12 +1569,16 @@ var theme = (function() {
       };
       var successAction = function() {
         mod.custom.remove();
+        custom.check();
         data.save();
         render.custom.clear();
         render.custom.all();
         shade.close();
         pagelock.unlock();
         stagedThemeCustom.reset();
+        control.render.update();
+        control.render.class();
+        control.render.dependents();
       };
       var cancelAction = function() {
         shade.close();
@@ -1590,16 +1602,6 @@ var theme = (function() {
       });
       pagelock.lock();
     },
-    edit: function() {
-      var html = helper.e("html");
-      if (_customThemeEdit) {
-        _customThemeEdit = false;
-        helper.removeClass(html, "is-theme-custom-edit");
-      } else {
-        _customThemeEdit = true;
-        helper.addClass(html, "is-theme-custom-edit");
-      };
-    },
     clear: function() {
       var themeCustom = helper.e(".theme-custom");
       while (themeCustom.lastChild) {
@@ -1662,6 +1664,11 @@ var theme = (function() {
     edit: function() {
       render.custom.edit();
       render.custom.tabIndex();
+    },
+    check: function() {
+      if (state.get.current().theme.custom.all <= 0) {
+        mod.custom.close();
+      };
     }
   };
 

src/js/update.js

@@ -757,6 +757,13 @@ var update = (function() {
     "4.10.0": function(data) {
       data.state.theme.shadow = 1;
       return data;
+    },
+    "4.11.0": function(data) {
+      data.state.theme.custom = {
+        all: data.state.theme.custom,
+        edit: false
+      };
+      return data;
     }
   };
 

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "4.10.0";
+  var current = "4.11.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.10.0",
+  "version": "4.11.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"