[feature] add group and bookmark header dropdown

Author: zombieFox

gulpfile.js

@@ -94,6 +94,7 @@ const jsFiles = [
 path.src+'/js/auto-suggest.js',
 path.src+'/js/pagelock.js',
 path.src+'/js/edge.js',
+path.src+'/js/dropdown.js',
 path.src+'/js/init.js'
 ]
 

src/css/form.css

@@ -1207,7 +1207,6 @@ input[type="range"]:disabled::-moz-range-progress{
 
 .form-group .form-group-text{
 margin-bottom:0;
-/* margin-left: calc(-1px * var(--form-input-border)); */
 border-radius:0;
 z-index:1;
 position: relative;
@@ -1300,6 +1299,48 @@ input[type="range"]:disabled::-moz-range-progress{
 border-radius:0var(--theme-radius) var(--theme-radius) 0;
 }
 
+.form-dropdown{
+position: relative;
+}
+
+.form-dropdown-menu{
+background-color:rgb(var(--theme-gray-02));
+border-radius:var(--theme-radius);
+padding:0.5em0;
+position: absolute;
+top:calc(100%+calc(var(--layout-line-width) *2));
+left:0;
+width:100%;
+min-width:12em;
+box-shadow:var(--layout-shadow-large);
+display: none;
+z-index:var(--z-index-dropdown);
+}
+
+.form-dropdown-open .form-dropdown-menu{
+display: flex;
+flex-direction: column;
+}
+
+.form-dropdown-menubutton,
+.form-dropdown-menu .button{
+border:0;
+border-radius:0;
+margin-bottom:0;
+justify-content: flex-start;
+}
+
+.form-group.nested-button .form-dropdown-menu*:first-child .button,
+.form-group.nested-button .form-dropdown-menu*:last-child .button,
+.form-group.nested-button .form-dropdown-menu*:first-childinput[type="checkbox"]+label,
+.form-group.nested-button .form-dropdown-menu*:last-childinput[type="checkbox"]+label,
+.form-group.nested-button .form-dropdown-menu*:first-childinput[type="radio"]+label,
+.form-group.nested-button .form-dropdown-menu*:last-childinput[type="radio"]+label,
+.form-group.nested-button .form-dropdown-menu*:first-childinput[type="color"]+label,
+.form-group.nested-button .form-dropdown-menu*:last-childinput[type="color"]+label{
+border-radius:0;
+}
+
 .feedback-wrap{
 padding:0.5em0;
 position: relative;

src/css/utilities.css

@@ -7,6 +7,10 @@
 list-style-type: none;
 }
 
+.list-unstyledli:not(:last-child){
+margin-bottom:0;
+}
+
 .list-inlineli{
 display: inline-block;
 }

src/css/variables.css

@@ -118,7 +118,8 @@
 --z-index-modal:6000;
 --z-index-menu:7000;
 --z-index-auto-suggest-list:8000;
---z-index-edge:9000;
+--z-index-dropdown:9000;
+--z-index-edge:10000;
 /* breakpoint */
 /* can not be used in @media as of yet */
 --breakpoint-sm:550px;

src/index.html

@@ -80,9 +80,19 @@
 <inputid="control-link-edit" class="control-link-edit" type="checkbox" tabindex="1">
 <labelfor="control-link-edit" class="mb-0">Edit</label>
 </div>
-<buttonclass="control-link-add button" tabindex="1">
-<spanclass="button-text">Add</span>
-</button>
+<divclass="form-dropdown">
+<buttonclass="form-dropdown-toggle button" tabindex="1">
+<spanclass="button-text">Add</span>
+</button>
+<ulclass="list-unstyled form-dropdown-menu">
+<li>
+<buttonclass="button button-block text-left form-dropdown-menu-item control-group-add" tabindex="1"><spanclass="button-text">New Group</span></button>
+</li>
+<li>
+<buttonclass="button button-block text-left form-dropdown-menu-item control-link-add" tabindex="1"><spanclass="button-text">New Bookmark</span></button>
+</li>
+</ul>
+</div>
 </div>
 </div>
 <divclass="header-item header-button header-accent">
@@ -628,7 +638,8 @@ <h1 class="menu-item-header-text">Search</h1>
 <divclass="form-indent">
 <divclass="input-wrap">
 <labelfor="control-header-search-engine-custom-name">Name</label>
-<inputid="control-header-search-engine-custom-name" class="control-header-search-engine-custom-name mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search engine name" tabindex="-1">
+<inputid="control-header-search-engine-custom-name" class="control-header-search-engine-custom-name mb-0" type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search engine name"
+tabindex="-1">
 </div>
 <divclass="input-wrap">
 <labelfor="control-header-search-engine-custom-url">URL</label>
@@ -1028,7 +1039,8 @@ <h1 class="menu-item-header-text">Accent</h1>
 <labelfor="control-theme-accent-current-picker">Colour</label>
 <divclass="form-group mb-0">
 <inputid="control-theme-accent-current-picker" class="form-group-item-half control-theme-accent-current-picker mb-0" type="color" value="#000000" tabindex="1">
-<inputid="control-theme-accent-current-hex" class="form-group-item-half control-theme-accent-current-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+<inputid="control-theme-accent-current-hex" class="form-group-item-half control-theme-accent-current-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off"
+autocapitalize="off" spellcheck="false">
 </div>
 </div>
 <pclass="control-theme-style-light-helper form-helper small">Accent Colour can also be changed from the Header area.</p>
@@ -1109,7 +1121,8 @@ <h1 class="menu-item-header-text">Colour</h1>
 <divclass="input-wrap">
 <divclass="form-group mb-0">
 <inputid="control-background-color-custom-current-picker" class="form-group-item-half control-background-color-custom-current-picker mb-0" type="color" value="#000000" tabindex="1">
-<inputid="control-background-color-custom-current-hex" class="form-group-item-half control-background-color-custom-current-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+<inputid="control-background-color-custom-current-hex" class="form-group-item-half control-background-color-custom-current-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7" autocomplete="off"
+autocorrect="off" autocapitalize="off" spellcheck="false">
 </div>
 </div>
 <pclass="control-background-color-theme-helper form-helper small">Take care as some colours may make the Clock, Date and other text unreadable.</p>
@@ -1276,6 +1289,7 @@ <h1 class="menu-item-header-text">nightTab</h1>
 <scriptsrc="js/auto-suggest.js"></script>
 <scriptsrc="js/pagelock.js"></script>
 <scriptsrc="js/edge.js"></script>
+<scriptsrc="js/dropdown.js"></script>
 <scriptsrc="js/init.js"></script>
 <!-- end-js-block -->
 

src/js/bookmarks.js

@@ -192,23 +192,31 @@ var bookmarks = (function(){
 mod.add={
 link: function(data){
 if(data.position.group.new){
-mod.add.group(data);
+mod.add.group();
 };
 mod.all[data.position.destination.group].items.splice(data.position.destination.item,0,data.link);
 },
 group: function(data){
-varname=data.position.group.name;
-if(name!=null&&typeofname=="string"){
-name=name.trim();
-};
-if(name==""||name==null||name==undefined){
+varmakeName=function(){
 varcount=get().length+1;
-name="Group "+count;
+return"Group "+count;
+};
+if(data){
+if(data.group.name==null){
+data.group.name=makeName();
+}elseif(typeofdata.group.name=="string"){
+data.group.name=data.group.name.trim();
+if(data.group.name==""){
+data.group.name=makeName();
+};
+};
+mod.all.splice(data.position.destination,0,data.group);
+}else{
+mod.all.push({
+name: makeName(),
+items: []
+});
 };
-mod.all.push({
-name: name,
-items: []
-});
 }
 };
 

src/js/control.js

@@ -64,7 +64,13 @@ var control = (function(){
 element: helper.e(".control-link-add"),
 type: "button",
 func: function(){
-link.add.open();
+link.add.item.open();
+}
+},{
+element: helper.e(".control-group-add"),
+type: "button",
+func: function(){
+link.add.group.open();
 }
 },{
 element: helper.e(".control-link-edit"),

src/js/dropdown.js

@@ -0,0 +1,113 @@
+vardropdown=(function(){
+
+varmod={};
+
+mod.open=function(){
+helper.setObject({
+object: state.get(),
+path: "dropdown",
+newValue: true
+});
+};
+
+mod.close=function(){
+helper.setObject({
+object: state.get(),
+path: "dropdown",
+newValue: false
+});
+};
+
+mod.toggle=function(){
+if(state.get().dropdown){
+helper.setObject({
+object: state.get(),
+path: "dropdown",
+newValue: false
+});
+}else{
+helper.setObject({
+object: state.get(),
+path: "dropdown",
+newValue: true
+});
+};
+};
+
+varbind={};
+
+bind.formDropdown=function(){
+varallFormDropdown=helper.eA(".form-dropdown");
+allFormDropdown.forEach(function(arrayItem,index){
+varformDropdown=arrayItem;
+varformDropdownToggle=formDropdown.querySelector(".form-dropdown-toggle");
+varallFormDropdownMenuItem=formDropdown.querySelectorAll(".form-dropdown-menu-item");
+formDropdownToggle.addEventListener("click",function(){
+mod.toggle();
+render.toggle(formDropdown);
+render.offset(formDropdown);
+},false);
+allFormDropdownMenuItem.forEach(function(arrayItem,index){
+arrayItem.addEventListener("click",function(){
+mod.close();
+render.close(formDropdown);
+},false);
+});
+});
+};
+
+varrender={};
+
+render.offset=function(formDropdown){
+varformDropdownMenu=formDropdown.querySelector(".form-dropdown-menu");
+varbox=formDropdownMenu.getBoundingClientRect();
+if(box.left+box.width>window.innerWidth){
+formDropdownMenu.style.right="0";
+formDropdownMenu.style.left="inherit";
+}else{
+formDropdownMenu.removeAttribute("style");
+};
+};
+
+render.toggle=function(formDropdown){
+if(formDropdown.classList.contains("form-dropdown-open")){
+mod.close();
+helper.removeClass(formDropdown,"form-dropdown-open");
+}else{
+mod.open();
+helper.addClass(formDropdown,"form-dropdown-open");
+};
+};
+
+render.close=function(formDropdown){
+mod.close();
+helper.removeClass(formDropdown,"form-dropdown-open");
+};
+
+render.open=function(formDropdown){
+mod.open();
+helper.addClass(formDropdown,"form-dropdown-open");
+};
+
+varclose=function(){
+mod.close();
+varallFormDropdown=helper.eA(".form-dropdown");
+allFormDropdown.forEach(function(arrayItem,index){
+helper.removeClass(arrayItem,"form-dropdown-open");
+});
+};
+
+varinit=function(){
+mod.close();
+bind.formDropdown();
+};
+
+// exposed methods
+return{
+init: init,
+bind: bind,
+render: render,
+close: close
+};
+
+})();

src/js/init.js

@@ -18,4 +18,5 @@ search.init();
 header.init();
 modal.init();
 shade.init();
+dropdown.init();
 version.init();

src/js/keyboard.js

@@ -11,10 +11,15 @@ var keyboard = (function(){
 }elseif(state.get().menu){
 menu.close();
 shade.close();
+}elseif(state.get().dropdown){
+dropdown.close();
 }elseif(state.get().autoSuggest){
 autoSuggest.close();
 }elseif(state.get().link.add){
-link.add.close();
+link.add.item.close();
+shade.close();
+}elseif(state.get().group.add){
+link.add.group.close();
 shade.close();
 }elseif(state.get().link.edit){
 link.add.close();
@@ -34,14 +39,37 @@ var keyboard = (function(){
 window.addEventListener("keydown",function(event){
 // ctrl+alt+a
 if(event.ctrlKey&&event.altKey&&event.keyCode==65){
+if(state.get().group.add){
+link.add.group.close();
+};
 if(!state.get().link.add){
 if(state.get().menu){
 menu.close();
 };
 if(state.get().modal){
 modal.close();
 };
-link.add.open();
+link.add.item.open();
+};
+};
+},false);
+};
+
+bind.ctrAltG=function(){
+window.addEventListener("keydown",function(event){
+// ctrl+alt+g
+if(event.ctrlKey&&event.altKey&&event.keyCode==71){
+if(state.get().link.add){
+link.add.item.close();
+};
+if(!state.get().group.add){
+if(state.get().menu){
+menu.close();
+};
+if(state.get().modal){
+modal.close();
+};
+link.add.group.open();
 };
 };
 },false);
@@ -63,7 +91,8 @@ var keyboard = (function(){
 // ctrl+alt+m
 if(event.ctrlKey&&event.altKey&&event.keyCode==77){
 if(state.get().link.add){
-link.add.close();
+link.add.item.close();
+link.add.group.close();
 shade.close();
 }elseif(state.get().modal){
 modal.close();
@@ -102,6 +131,7 @@ var keyboard = (function(){
 varinit=function(){
 bind.esc();
 bind.ctrAltA();
+bind.ctrAltG();
 bind.ctrAltD();
 bind.ctrAltM();
 bind.ctrAltE();