[refactor] improve custom theme edit control

Author: zombieFox

package-lock.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":{

package.json

@@ -1327,8 +1327,9 @@ <h1 class="menu-item-header-text">Saved themes</h1>
 <divclass="button-wrap">
 <buttonclass="control-theme-custom-add button mb-0" tabindex="-1">Save current theme</button>
 </div>
-<divclass="button-wrap">
-<buttonclass="control-theme-custom-edit button mb-0" tabindex="-1">Edit</button>
+<divclass="input-wrap input-button input-hide">
+<inputid="control-theme-custom-edit" class="control-theme-custom-edit" type="checkbox" tabindex="1">
+<labelfor="control-theme-custom-edit" class="mb-0"><spanclass="label-icon"></span> Edit</label>
 </div>
 </div>
 <pclass="control-theme-custom-helper form-helper small">Saving a Theme will record the current Colour, Accent, Font, Style and Radius.</p>

src/index.html

@@ -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,20 +4064,23 @@ 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);
 _disable.input(".control-theme-accent-random-style-dark",false);
 _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/control.js

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

src/js/state.js

@@ -1089,13 +1089,20 @@ var theme = (function(){
 
 mod.custom={
 get: function(index){
-returnJSON.parse(JSON.stringify(state.get.current().theme.custom[index]));
+returnJSON.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(){
 varthemeCustomSaved=helper.e(".theme-custom");
 varformInline=helper.node("div|class:form-inline");
-varallThemeCuston=JSON.parse(JSON.stringify(state.get.current().theme.custom));
+varallThemeCuston=JSON.parse(JSON.stringify(state.get.current().theme.custom.all));
 if(allThemeCuston.length>0){
 allThemeCuston.forEach(function(arrayItem,index){
 varthemeCustomItem=helper.node("div|class:theme-custom-item");
@@ -1527,6 +1534,7 @@ var theme = (function(){
 shade.close();
 pagelock.unlock();
 stagedThemeCustom.reset();
+control.render.dependents();
 };
 varcancelAction=function(){
 shade.close();
@@ -1561,12 +1569,16 @@ var theme = (function(){
 };
 varsuccessAction=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();
 };
 varcancelAction=function(){
 shade.close();
@@ -1590,16 +1602,6 @@ var theme = (function(){
 });
 pagelock.lock();
 },
-edit: function(){
-varhtml=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(){
 varthemeCustom=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/theme.js

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

src/js/update.js

@@ -1,6 +1,6 @@
 varversion=(function(){
 
-varcurrent="4.10.0";
+varcurrent="4.11.0";
 
 varname="Naughty Goose";
 

src/js/version.js

@@ -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"