[refactor] Improve global, link and group edit states

Author: zombieFox

package.json

@@ -1,6 +1,6 @@
 {
 "name": "nighttab",
-"version": "4.1.3",
+"version": "4.2.1",
 "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/css/form.css

@@ -847,6 +847,7 @@ input[type="range"]:disabled::-moz-range-progress{
 display: inline-block;
 }
 
+/* input button */
 .input-buttoninput[type="checkbox"]+label,
 .input-buttoninput[type="radio"]+label,
 .input-buttoninput[type="color"]+label,
@@ -998,6 +999,7 @@ input[type="range"]:disabled::-moz-range-progress{
 background-color:rgb(var(--button-border-disabled));
 }
 
+/* input button link */
 .input-button-linkinput[type="checkbox"]+label,
 .input-button-linkinput[type="radio"]+label,
 .input-button-linkinput[type="color"]+label,
@@ -1032,7 +1034,6 @@ input[type="range"]:disabled::-moz-range-progress{
 .input-button-linkinput:disabled[type="color"]+label,
 .input-button-linkinput:disabled[type="file"]+label{
 background-color: transparent;
-color: transparent;
 pointer-events: none;
 }
 

src/css/group.css

@@ -55,12 +55,12 @@
 }
 
 .is-group-order-headerbody.is-group-name-show .group-header,
-.is-group-order-headerbody.is-link-edit .group-header{
+.is-group-order-headerbody.is-edit .group-header{
 padding-bottom:calc(var(--layout-space) *var(--layout-gutter));
 }
 
 .is-group-order-bodyheader.is-group-name-show .group-header,
-.is-group-order-bodyheader.is-link-edit .group-header{
+.is-group-order-bodyheader.is-edit .group-header{
 padding-top:calc(var(--layout-space) *var(--layout-gutter));
 }
 
@@ -101,7 +101,7 @@
  margin var(--layout-timing-extra-fast);
 }
 
-.is-link-edit .group-control{
+.is-edit .group-control{
 height:2.5em;
 width:16em;
 transition:
@@ -110,12 +110,12 @@
  margin var(--layout-timing-extra-fast) var(--layout-duration-04);
 }
 
-.is-link-edit.is-group-name-show.is-group-area-alignment-left .group-control,
-.is-link-edit.is-group-name-show.is-group-area-alignment-center .group-control{
+.is-edit.is-group-name-show.is-group-area-alignment-left .group-control,
+.is-edit.is-group-name-show.is-group-area-alignment-center .group-control{
 margin-right:1em;
 }
 
-.is-link-edit.is-group-name-show.is-group-area-alignment-right .group-control{
+.is-edit.is-group-name-show.is-group-area-alignment-right .group-control{
 margin-left:1em;
 }
 

src/css/link.css

@@ -239,29 +239,29 @@
 border-bottom-right-radius:calc(var(--theme-radius) /4);
 }
 
-.is-link-edit .link-panel-front,
-.is-link-edit .link-item:hover .link-panel-front,
-.is-link-edit .link-item:focus .link-panel-front{
+.is-edit .link-panel-front,
+.is-edit .link-item:hover .link-panel-front,
+.is-edit .link-item:focus .link-panel-front{
 height:calc(100%-var(--link-item-edit-height));
 }
 
-.is-theme-radius.is-link-edit.is-link-orientation-top .link-panel-front,
-.is-theme-radius.is-link-edit.is-link-orientation-top .link-item:hover .link-panel-front,
-.is-theme-radius.is-link-edit.is-link-orientation-top .link-item:focus .link-panel-front{
+.is-theme-radius.is-edit.is-link-orientation-top .link-panel-front,
+.is-theme-radius.is-edit.is-link-orientation-top .link-item:hover .link-panel-front,
+.is-theme-radius.is-edit.is-link-orientation-top .link-item:focus .link-panel-front{
 border-top-left-radius:calc(var(--theme-radius) /4);
 border-top-right-radius:calc(var(--theme-radius) /4);
 }
 
-.is-theme-radius.is-link-edit.is-link-orientation-bottom .link-panel-front,
-.is-theme-radius.is-link-edit.is-link-orientation-bottom .link-item:hover .link-panel-front,
-.is-theme-radius.is-link-edit.is-link-orientation-bottom .link-item:focus .link-panel-front{
+.is-theme-radius.is-edit.is-link-orientation-bottom .link-panel-front,
+.is-theme-radius.is-edit.is-link-orientation-bottom .link-item:hover .link-panel-front,
+.is-theme-radius.is-edit.is-link-orientation-bottom .link-item:focus .link-panel-front{
 border-bottom-left-radius:calc(var(--theme-radius) /4);
 border-bottom-right-radius:calc(var(--theme-radius) /4);
 }
 
-.is-link-item-shadow-show.is-link-edit .link-panel-front,
-.is-link-item-shadow-show.is-link-edit .link-item:hover .link-panel-front,
-.is-link-item-shadow-show.is-link-edit .link-item:focus .link-panel-front{
+.is-link-item-shadow-show.is-edit .link-panel-front,
+.is-link-item-shadow-show.is-edit .link-item:hover .link-panel-front,
+.is-link-item-shadow-show.is-edit .link-item:focus .link-panel-front{
 box-shadow:var(--layout-shadow-medium);
 }
 
@@ -276,7 +276,7 @@
 transition: font-size var(--layout-timing-extra-fast), top var(--layout-timing-extra-fast), left var(--layout-timing-extra-fast);
 }
 
-.is-link-edit .link-display{
+.is-edit .link-display{
 font-size:0.6em;
 }
 
@@ -683,23 +683,23 @@
 clip-path:polygon(0calc(100%-calc(var(--link-item-url-height) +10%)),100%calc(100%-calc(var(--link-item-url-height) +10%)),100%100%,0100%);
 }
 
-.is-link-edit.is-link-orientation-top .link-panel-back,
-.is-link-edit.is-link-orientation-top .link-panel-back,
-.is-link-edit.is-link-orientation-top .link-panel-back,
-.is-link-edit.is-link-orientation-top .link-item:focus .link-panel-back,
-.is-link-edit.is-link-orientation-top .link-item:focus-within .link-panel-back,
-.is-link-edit.is-link-orientation-top .link-item:hover .link-panel-back{
+.is-edit.is-link-orientation-top .link-panel-back,
+.is-edit.is-link-orientation-top .link-panel-back,
+.is-edit.is-link-orientation-top .link-panel-back,
+.is-edit.is-link-orientation-top .link-item:focus .link-panel-back,
+.is-edit.is-link-orientation-top .link-item:focus-within .link-panel-back,
+.is-edit.is-link-orientation-top .link-item:hover .link-panel-back{
 height:100%;
 top:0;
 clip-path:polygon(00,100%0,100%calc(100%-calc(var(--link-item-edit-height) -10%)),0calc(100%-calc(var(--link-item-edit-height) -10%)))
 }
 
-.is-link-edit.is-link-orientation-bottom .link-panel-back,
-.is-link-edit.is-link-orientation-bottom .link-panel-back,
-.is-link-edit.is-link-orientation-bottom .link-panel-back,
-.is-link-edit.is-link-orientation-bottom .link-item:focus .link-panel-back,
-.is-link-edit.is-link-orientation-bottom .link-item:focus-within .link-panel-back,
-.is-link-edit.is-link-orientation-bottom .link-item:hover .link-panel-back{
+.is-edit.is-link-orientation-bottom .link-panel-back,
+.is-edit.is-link-orientation-bottom .link-panel-back,
+.is-edit.is-link-orientation-bottom .link-panel-back,
+.is-edit.is-link-orientation-bottom .link-item:focus .link-panel-back,
+.is-edit.is-link-orientation-bottom .link-item:focus-within .link-panel-back,
+.is-edit.is-link-orientation-bottom .link-item:hover .link-panel-back{
 height:100%;
 top:0;
 clip-path:polygon(0calc(100%-calc(var(--link-item-edit-height) +10%)),100%calc(100%-calc(var(--link-item-edit-height) +10%)),100%100%,0100%);
@@ -717,7 +717,7 @@
 transition: height var(--layout-timing-extra-fast);
 }
 
-.is-link-edit .link-control{
+.is-edit .link-control{
 height:var(--link-item-edit-height);
 }
 
@@ -850,9 +850,9 @@
 justify-content: flex-end;
 }
 
-.is-link-item-url-show:not(.is-link-edit) .link-item:focus-within .link-url,
-.is-link-item-url-show:not(.is-link-edit) .link-item:focus .link-url,
-.is-link-item-url-show:not(.is-link-edit) .link-item:hover .link-url{
+.is-link-item-url-show:not(.is-edit) .link-item:focus-within .link-url,
+.is-link-item-url-show:not(.is-edit) .link-item:focus .link-url,
+.is-link-item-url-show:not(.is-edit) .link-item:hover .link-url{
 height:var(--link-item-url-height);
 }
 
@@ -873,14 +873,14 @@
 color:rgb(var(--theme-white));
 }
 
-.is-link-edit.is-link-item-url-show .link-item:focus .link-panel-front,
-.is-link-edit.is-link-item-url-show .link-item:focus-within .link-panel-front,
-.is-link-edit.is-link-item-url-show .link-item:hover .link-panel-front{
+.is-edit.is-link-item-url-show .link-item:focus .link-panel-front,
+.is-edit.is-link-item-url-show .link-item:focus-within .link-panel-front,
+.is-edit.is-link-item-url-show .link-item:hover .link-panel-front{
 height:calc(100%-var(--link-item-edit-height));
 }
 
-.is-link-edit .link-item:hover .link-url,
-.is-link-edit .link-item:focus .link-url{
+.is-edit .link-item:hover .link-url,
+.is-edit .link-item:focus .link-url{
 height:0;
 }
 

src/index.html

@@ -88,8 +88,8 @@
 <divclass="header-button-body">
 <divclass="form-group nested-button mb-0">
 <divclass="input-wrap input-button input-hide py-0">
-<inputid="control-link-edit" class="control-link-edit" type="checkbox" tabindex="1">
-<labelfor="control-link-edit" class="mb-0"><spanclass="label-icon"></span> Edit</label>
+<inputid="control-edit" class="control-edit" type="checkbox" tabindex="1">
+<labelfor="control-edit" class="mb-0"><spanclass="label-icon"></span> Edit</label>
 </div>
 <divclass="input-wrap py-0">
 <divclass="form-dropdown">

src/js/control.js

@@ -73,8 +73,8 @@ var control = (function(){
 link.add.group.open();
 }
 },{
-element: helper.e(".control-link-edit"),
-path: "link.edit",
+element: helper.e(".control-edit"),
+path: "edit",
 type: "checkbox",
 func: function(){
 link.tabindex();
@@ -2876,6 +2876,12 @@ var control = (function(){
 
 render.class=function(){
 varhtml=helper.e("html");
+var_edit=function(){
+helper.removeClass(html,"is-edit");
+if(state.get.current().edit){
+helper.addClass(html,"is-edit");
+};
+};
 var_menu=function(){
 helper.addClass(html,"is-menu");
 };
@@ -3044,7 +3050,6 @@ var control = (function(){
 helper.removeClass(html,"is-link-style-block");
 helper.removeClass(html,"is-link-orientation-top");
 helper.removeClass(html,"is-link-orientation-bottom");
-helper.removeClass(html,"is-link-edit");
 if(state.get.current().link.show){
 helper.addClass(html,"is-link-show");
 helper.addClass(html,"is-link-area-alignment-"+state.get.current().link.area.alignment);
@@ -3074,9 +3079,6 @@ var control = (function(){
 if(state.get.current().link.item.border>0){
 helper.addClass(html,"is-link-item-border");
 };
-if(state.get.current().link.edit){
-helper.addClass(html,"is-link-edit");
-};
 };
 };
 var_theme=function(){
@@ -3115,6 +3117,7 @@ var control = (function(){
 helper.removeClass(html,"is-background-image-show");
 };
 };
+_edit();
 _menu();
 _header();
 _group();
@@ -3465,9 +3468,9 @@ var control = (function(){
 };
 var_edit=function(){
 if(bookmarks.get().length>0){
-_disable.input(".control-link-edit",false);
+_disable.input(".control-edit",false);
 }else{
-_disable.input(".control-link-edit",false);
+_disable.input(".control-edit",true);
 };
 };
 var_group=function(){

src/js/header.js

@@ -134,24 +134,19 @@ var header = (function(){
 style: function(){
 varaction={
 box: function(){
-helper.removeClass(helper.getClosest(helper.e(".control-link-edit"),".input-wrap"),"input-button-link");
+helper.removeClass(helper.getClosest(helper.e(".control-edit"),".input-wrap"),"input-button-link");
 helper.removeClass(helper.e(".control-add-toggle"),"button-link");
 helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"),".input-wrap"),"input-button-link");
 helper.removeClass(helper.e(".control-menu-open"),"button-link");
 },
 clear: function(){
-helper.addClass(helper.getClosest(helper.e(".control-link-edit"),".input-wrap"),"input-button-link");
+helper.addClass(helper.getClosest(helper.e(".control-edit"),".input-wrap"),"input-button-link");
 helper.addClass(helper.e(".control-add-toggle"),"button-link");
 helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"),".input-wrap"),"input-button-link");
 helper.addClass(helper.e(".control-menu-open"),"button-link");
 }
 };
 action[state.get.current().header.button.style]();
-},
-edit: function(){
-if(!state.get.current().link.edit){
-helper.e(".control-link-edit").checked=false;
-};
 }
 };
 

src/js/keyboard.js

@@ -14,18 +14,28 @@ var keyboard = (function(){
 dropdown.close();
 }elseif(state.get.current().autoSuggest){
 autoSuggest.close();
+}elseif(state.get.current().link.edit){
+link.edit.item.close();
+shade.close();
+data.save();
 }elseif(state.get.current().link.add){
 link.add.item.close();
+shade.close();
+data.save();
+}elseif(state.get.current().group.edit){
+link.edit.group.close();
+shade.close();
+data.save();
 }elseif(state.get.current().group.add){
 link.add.group.close();
-}elseif(state.get.current().link.edit&&state.get.current().modal){
-link.add.item.close();
-}elseif(state.get.current().link.edit){
-link.edit.close();
+shade.close();
 data.save();
 }elseif(state.get.current().modal){
 modal.close();
 shade.close();
+}elseif(state.get.current().edit){
+link.edit.mode.close();
+data.save();
 };
 data.save();
 };
@@ -103,7 +113,11 @@ var keyboard = (function(){
 window.addEventListener("keydown",function(event){
 // ctrl+alt+e
 if(event.ctrlKey&&event.altKey&&event.keyCode==69){
-link.edit.toggle();
+if(bookmarks.get().length>0){
+link.edit.mode.toggle();
+}else{
+link.edit.mode.close();
+};
 data.save();
 };
 },false);