[refactor] improve menu render

Author: zombieFox

src/css/menu.css

@@ -40,15 +40,19 @@
 flex-direction: row;
 }
 
-.menu-nav-area{
+.menu-nav-area-tab{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 align-items: flex-start;
+flex-grow:1;
 }
 
-.menu-nav-area-grow{
-flex-grow:1;
+.menu-nav-area-close{
+display: flex;
+flex-direction: row;
+flex-wrap: wrap;
+align-items: flex-start;
 }
 
 .menu-nav:not(:last-child){
@@ -85,39 +89,31 @@
 padding:002em2em;
 }
 
-.menu-close{
-background-color: transparent;
-margin:0;
-padding-top:0.75em;
-padding-bottom:0.75em;
-border-radius:0var(--theme-radius) 00;
-}
-
 .menu-nav-button{
 background-color: transparent;
-margin:0;
-padding:1em;
 border-radius:0;
+margin:0;
+padding-top:0;
+padding-bottom:0;
+height:3.25em;
+line-height:1;
 flex-grow:1;
 }
 
-.menu-nav-button:first-child{
+.menu-nav-area-tab .menu-nav-button:first-child{
 border-radius:var(--theme-radius) 000;
 }
 
-.menu-nav-button [class^="icon-"],
-.menu-nav-button [class*=" icon-"]{
-line-height:1;
-padding-top:1.5em;
-padding-bottom:1.5em;
+.menu-nav-area-close .menu-nav-button{
+border-radius:0var(--theme-radius) 00;
 }
 
 @media (min-width:550px){
  .menu{
 width:80vw;
  }
 
- .menu-nav-button{
+ .menu-nav-area-tab .menu-nav-button{
 flex-basis:33.3333333333%;
 max-width:33.3333333333%;
  }
@@ -160,7 +156,7 @@
 z-index:3;
  }
 
- .menu-nav-button{
+ .menu-nav-area-tab .menu-nav-button{
 flex-basis:50%;
 max-width:50%;
  }
@@ -180,14 +176,14 @@
 grid-template-columns:1fr2fr;
  }
 
- .menu-nav-button{
+ .menu-nav-area-tab .menu-nav-button{
 flex-basis:33.3333333333%;
 max-width:33.3333333333%;
  }
 }
 
 @media (min-width:1100px){
- .menu-nav-button{
+ .menu-nav-area-tab .menu-nav-button{
 flex-basis:0;
 max-width: inherit;
  }

src/index.html

@@ -1,10 +1,64 @@
 varcontrol=(function(){
 
 var_allControl=[{
-element: helper.e(".control-menu"),
+element: helper.e(".control-menu-open"),
 type: "button",
 func: function(){
-menu.toggle();
+menu.mod.open();
+menu.render.toggle();
+menu.render.tabindex.toggle();
+pagelock.render.toggle();
+}
+},{
+element: helper.e(".control-menu-layout"),
+type: "button",
+func: function(){
+menu.render.tab(this.element,helper.e(".menu-content-area-layout"));
+}
+},{
+element: helper.e(".control-menu-header"),
+type: "button",
+func: function(){
+menu.render.tab(this.element,helper.e(".menu-content-area-header"));
+}
+},{
+element: helper.e(".control-menu-bookmarks"),
+type: "button",
+func: function(){
+menu.render.tab(this.element,helper.e(".menu-content-area-bookmarks"));
+}
+},{
+element: helper.e(".control-menu-theme"),
+type: "button",
+func: function(){
+menu.render.tab(this.element,helper.e(".menu-content-area-theme"));
+}
+},{
+element: helper.e(".control-menu-background"),
+type: "button",
+func: function(){
+menu.render.tab(this.element,helper.e(".menu-content-area-background"));
+}
+},{
+element: helper.e(".control-menu-data"),
+type: "button",
+func: function(){
+menu.render.tab(this.element,helper.e(".menu-content-area-data"));
+}
+},{
+element: helper.e(".control-menu-nightTab"),
+type: "button",
+func: function(){
+menu.render.tab(this.element,helper.e(".menu-content-area-nightTab"));
+}
+},{
+element: helper.e(".control-menu-close"),
+type: "button",
+func: function(){
+shade.destroy();
+menu.mod.close();
+menu.render.toggle();
+menu.render.tabindex.toggle();
 pagelock.render.toggle();
 }
 },{
@@ -1448,14 +1502,14 @@ var control = (function(){
 event: "input",
 func: function(){
 edge.render.box({
-element: helper.e(".control-menu"),
+element: helper.e(".control-menu-open"),
 });
 }
 },{
 event: "mousedown",
 func: function(){
 edge.render.box({
-element: helper.e(".control-menu"),
+element: helper.e(".control-menu-open"),
 });
 }
 },{
@@ -1473,7 +1527,7 @@ var control = (function(){
 func: function(){
 if(event.keyCode==37||event.keyCode==38||event.keyCode==39||event.keyCode==40){
 edge.render.box({
-element: helper.e(".control-menu"),
+element: helper.e(".control-menu-open"),
 });
 };
 }
@@ -1493,7 +1547,7 @@ var control = (function(){
 event: "click",
 func: function(){
 edge.render.box({
-element: helper.e(".control-menu"),
+element: helper.e(".control-menu-open"),
 delay: 500
 });
 }

src/js/control.js

@@ -137,13 +137,13 @@ var header = (function(){
 helper.removeClass(helper.getClosest(helper.e(".control-link-edit"),".input-wrap"),"input-button-link");
 helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current"),".input-wrap"),"input-button-link");
 helper.removeClass(helper.e(".control-link-add"),"button-link");
-helper.removeClass(helper.e(".control-menu"),"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-theme-accent-current"),".input-wrap"),"input-button-link");
 helper.addClass(helper.e(".control-link-add"),"button-link");
-helper.addClass(helper.e(".control-menu"),"button-link");
+helper.addClass(helper.e(".control-menu-open"),"button-link");
 }
 };
 action[state.get().header.button.style]();

src/js/header.js

@@ -1,93 +1,74 @@
 varmenu=(function(){
 
-var_bind=function(){
-varallMenuNavButton=helper.eA(".menu-nav-button");
-varmenuClose=helper.e(".menu-close");
-allMenuNavButton.forEach(function(arrayItem,index){
-arrayItem.addEventListener("click",function(){
-_tab(this);
-},false);
-});
-menuClose.addEventListener("click",function(){
-close();
-shade.destroy();
-pagelock.render.toggle();
-},false);
-};
-
-var_scrollToTop=function(){
-if(window.innerWidth<550){
-helper.e(".menu-area").scrollTop=0;
-}else{
-helper.e(".menu-content").scrollTop=0;
-};
-};
-
-var_tab=function(button){
-varallMenuNavButton=helper.eA(".menu-nav-button");
-varallMenuContentArea=helper.eA(".menu-content-area");
-vartarget=helper.e(button.dataset.target);
-allMenuNavButton.forEach(function(arrayItem,index){
-helper.removeClass(arrayItem,"active");
-});
-allMenuContentArea.forEach(function(arrayItem,index){
-helper.addClass(arrayItem,"is-hidden");
-});
-helper.addClass(button,"active");
-helper.removeClass(target,"is-hidden");
-_scrollToTop();
-};
+varmod={};
 
-varclose=function(){
+mod.open=function(){
 helper.setObject({
 object: state.get(),
 path: "menu",
-newValue: false
+newValue: true
 });
-render.menu();
-render.tabindex();
 };
 
-varopen=function(){
-_scrollToTop();
+mod.close=function(){
 helper.setObject({
 object: state.get(),
 path: "menu",
-newValue: true
+newValue: false
 });
-render.menu();
-render.tabindex();
 };
 
-vartoggle=function(){
+mod.toggle=function(){
 if(state.get().menu){
 helper.setObject({
 object: state.get(),
 path: "menu",
 newValue: false
 });
 }else{
-_scrollToTop();
+render.scrollToTop();
 helper.setObject({
 object: state.get(),
 path: "menu",
 newValue: true
 });
 };
-render.menu();
-render.tabindex();
 };
 
 varrender={};
 
-render.menu=function(){
+render.scrollToTop=function(){
+if(window.innerWidth<550){
+helper.e(".menu-area").scrollTop=0;
+}else{
+helper.e(".menu-content").scrollTop=0;
+};
+};
+
+render.tab=function(menuNavButton,menuContentArea){
+varallMenuNavButton=helper.eA(".menu-nav-button");
+varallMenuContentArea=helper.eA(".menu-content-area");
+allMenuNavButton.forEach(function(arrayItem,index){
+helper.removeClass(arrayItem,"active");
+});
+allMenuContentArea.forEach(function(arrayItem,index){
+helper.addClass(arrayItem,"is-hidden");
+});
+helper.addClass(menuNavButton,"active");
+helper.removeClass(menuContentArea,"is-hidden");
+render.scrollToTop();
+};
+
+render.toggle=function(){
 varhtml=helper.e("html");
 if(state.get().menu){
 helper.addClass(html,"is-menu-open");
 helper.e(".menu").focus();
 shade.render({
 action: function(){
-close();
+mod.close();
+render.toggle();
+menu.render.tabindex.toggle();
 pagelock.render.toggle();
 }
 });
@@ -96,31 +77,31 @@ var menu = (function(){
 };
 };
 
-render.tabindex=function(){
-varmenu=helper.e(".menu");
-if(state.get().menu){
-menu.tabIndex=1;
-menu.querySelectorAll("[tabindex]").forEach(function(arrayItem,index){
-arrayItem.tabIndex=1;
-});
-}else{
-menu.tabIndex=-1;
-menu.querySelectorAll("[tabindex]").forEach(function(arrayItem,index){
-arrayItem.tabIndex=-1;
-});
-};
+render.tabindex={
+toggle: function(){
+varmenu=helper.e(".menu");
+if(state.get().menu){
+menu.tabIndex=1;
+menu.querySelectorAll("[tabindex]").forEach(function(arrayItem,index){
+arrayItem.tabIndex=1;
+});
+}else{
+menu.tabIndex=-1;
+menu.querySelectorAll("[tabindex]").forEach(function(arrayItem,index){
+arrayItem.tabIndex=-1;
+});
+};
+}
 };
 
 varinit=function(){
-_bind();
-close();
+mod.close();
+render.toggle();
 };
 
 return{
 init: init,
-close: close,
-open: open,
-toggle: toggle,
+mod: mod,
 render: render
 };