[feature] add group and bookmark header dropdown

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: 0 var(--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.5em 0;
+  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-menu button,
+.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-child input[type="checkbox"]+label,
+.form-group.nested-button .form-dropdown-menu *:last-child input[type="checkbox"]+label,
+.form-group.nested-button .form-dropdown-menu *:first-child input[type="radio"]+label,
+.form-group.nested-button .form-dropdown-menu *:last-child input[type="radio"]+label,
+.form-group.nested-button .form-dropdown-menu *:first-child input[type="color"]+label,
+.form-group.nested-button .form-dropdown-menu *:last-child input[type="color"]+label {
+  border-radius: 0;
+}
+
 .feedback-wrap {
   padding: 0.5em 0;
   position: relative;

src/css/utilities.css

@@ -7,6 +7,10 @@
   list-style-type: none;
 }
 
+.list-unstyled li:not(:last-child) {
+  margin-bottom: 0;
+}
+
 .list-inline li {
   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 @@
                 <input id="control-link-edit" class="control-link-edit" type="checkbox" tabindex="1">
                 <label for="control-link-edit" class="mb-0">Edit</label>
               </div>
-              <button class="control-link-add button" tabindex="1">
+              <div class="form-dropdown">
+                <button class="form-dropdown-toggle button" tabindex="1">
                   <span class="button-text">Add</span>
                 </button>
+                <ul class="list-unstyled form-dropdown-menu">
+                  <li>
+                    <button class="button button-block text-left form-dropdown-menu-item control-group-add" tabindex="1"><span class="button-text">New Group</span></button>
+                  </li>
+                  <li>
+                    <button class="button button-block text-left form-dropdown-menu-item control-link-add" tabindex="1"><span class="button-text">New Bookmark</span></button>
+                  </li>
+                </ul>
+              </div>
             </div>
           </div>
           <div class="header-item header-button header-accent">
@@ -628,7 +638,8 @@
                 <div class="form-indent">
                   <div class="input-wrap">
                     <label for="control-header-search-engine-custom-name">Name</label>
-                    <input id="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">
+                    <input id="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>
                   <div class="input-wrap">
                     <label for="control-header-search-engine-custom-url">URL</label>
@@ -1028,7 +1039,8 @@
                 <label for="control-theme-accent-current-picker">Colour</label>
                 <div class="form-group mb-0">
                   <input id="control-theme-accent-current-picker" class="form-group-item-half control-theme-accent-current-picker mb-0" type="color" value="#000000" tabindex="1">
-                  <input id="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">
+                  <input id="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>
               <p class="control-theme-style-light-helper form-helper small">Accent Colour can also be changed from the Header area.</p>
@@ -1109,7 +1121,8 @@
                 <div class="input-wrap">
                   <div class="form-group mb-0">
                     <input id="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">
-                    <input id="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">
+                    <input id="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>
                 <p class="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 @@
 <script src="js/auto-suggest.js"></script>
 <script src="js/pagelock.js"></script>
 <script src="js/edge.js"></script>
+<script src="js/dropdown.js"></script>
 <script src="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) {
-      var name = data.position.group.name;
+      var makeName = function() {
-      if (name != null && typeof name == "string") {
-        name = name.trim();
-      };
-      if (name == "" || name == null || name == undefined) {
         var count = get().length + 1;
-        name = "Group " + count;
+        return "Group " + count;
       };
+      if (data) {
+        if (data.group.name == null) {
+          data.group.name = makeName();
+        } else if (typeof data.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: name,
+          name: makeName(),
           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 @@
+var dropdown = (function() {
+
+  var mod = {};
+
+  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
+      });
+    };
+  };
+
+  var bind = {};
+
+  bind.formDropdown = function() {
+    var allFormDropdown = helper.eA(".form-dropdown");
+    allFormDropdown.forEach(function(arrayItem, index) {
+      var formDropdown = arrayItem;
+      var formDropdownToggle = formDropdown.querySelector(".form-dropdown-toggle");
+      var allFormDropdownMenuItem = 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);
+      });
+    });
+  };
+
+  var render = {};
+
+  render.offset = function(formDropdown) {
+    var formDropdownMenu = formDropdown.querySelector(".form-dropdown-menu");
+    var box = 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");
+  };
+
+  var close = function() {
+    mod.close();
+    var allFormDropdown = helper.eA(".form-dropdown");
+    allFormDropdown.forEach(function(arrayItem, index) {
+      helper.removeClass(arrayItem, "form-dropdown-open");
+    });
+  };
+
+  var init = 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() {
         } else if (state.get().menu) {
           menu.close();
           shade.close();
+        } else if (state.get().dropdown) {
+          dropdown.close();
         } else if (state.get().autoSuggest) {
           autoSuggest.close();
         } else if (state.get().link.add) {
-          link.add.close();
+          link.add.item.close();
+          shade.close();
+        } else if (state.get().group.add) {
+          link.add.group.close();
           shade.close();
         } else if (state.get().link.edit) {
           link.add.close();
@@ -34,6 +39,9 @@ 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();
@@ -41,7 +49,27 @@ var keyboard = (function() {
           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();
         } else if (state.get().modal) {
           modal.close();
@@ -102,6 +131,7 @@ var keyboard = (function() {
   var init = function() {
     bind.esc();
     bind.ctrAltA();
+    bind.ctrAltG();
     bind.ctrAltD();
     bind.ctrAltM();
     bind.ctrAltE();

src/js/link.js

@@ -11,6 +11,10 @@ var link = (function() {
     }
   };
 
+  stagedGroup.init = function() {
+    stagedGroup.group.items = [];
+  };
+
   stagedGroup.reset = function() {
     stagedGroup.position.origin = null;
     stagedGroup.position.destination = null;
@@ -154,6 +158,7 @@ var link = (function() {
   };
 
   mod.add = {
+    item: {
       open: function() {
         helper.setObject({
           object: state.get(),
@@ -168,6 +173,23 @@ var link = (function() {
           newValue: false
         });
       }
+    },
+    group: {
+      open: function() {
+        helper.setObject({
+          object: state.get(),
+          path: "group.add",
+          newValue: true
+        });
+      },
+      close: function() {
+        helper.setObject({
+          object: state.get(),
+          path: "group.add",
+          newValue: false
+        });
+      }
+    }
   };
 
   var bind = {};
@@ -375,104 +397,18 @@ var link = (function() {
       }, false);
 
       itemGroupControlItemEdit.addEventListener("click", function() {
-        render.group.edit(copyStagedGroup);
+        render.edit.group(copyStagedGroup);
       }, false);
 
       itemGroupControlItemRemove.addEventListener("click", function() {
-        render.group.remove(copyStagedGroup);
+        render.remove.group(copyStagedGroup);
       }, false);
 
       return group;
     },
-    edit: function(copyStagedGroup) {
-      stagedGroup.group = JSON.parse(JSON.stringify(copyStagedGroup.group));
-      stagedGroup.position = JSON.parse(JSON.stringify(copyStagedGroup.position));
-      var form = render.group.form({
-        useStagedGroup: true
-      });
-      var heading = "Edit " + stagedGroup.group.name;
-      var successAction = function() {
-        var copyStagedGroup = JSON.parse(JSON.stringify(stagedGroup));
-        bookmarks.mod.edit.group(copyStagedGroup);
-        data.save();
-        groupAndItems();
-        render.focus.group.current.edit(copyStagedGroup);
-        stagedGroup.reset();
-        autoSuggest.close();
-        shade.close();
-        pagelock.unlock();
-      };
-      var cancelAction = function() {
-        stagedGroup.reset();
-        autoSuggest.close();
-        pagelock.unlock();
-        shade.close();
-      };
-      modal.open({
-        heading: heading,
-        successAction: successAction,
-        cancelAction: cancelAction,
-        actionText: "Save",
-        size: "small",
-        content: form
-      });
-      shade.open({
-        action: function() {
-          stagedGroup.reset();
-          autoSuggest.close();
-          pagelock.unlock();
-          modal.close();
-        }
-      });
-    },
-    remove: function(copyStagedGroup) {
-      stagedGroup.group = JSON.parse(JSON.stringify(copyStagedGroup.group));
-      stagedGroup.position = JSON.parse(JSON.stringify(copyStagedGroup.position));
-      var heading;
-      if (stagedGroup.group.name != null && stagedGroup.group.name != "") {
-        heading = "Remove " + stagedGroup.group.name + " group";
-      } else {
-        heading = "Remove unnamed group";
-      };
-      var successAction = function() {
-        var copyStagedGroup = JSON.parse(JSON.stringify(stagedGroup));
-        bookmarks.remove.group(copyStagedGroup);
-        data.save();
-        mod.edit.check();
-        header.render.button.edit();
-        groupAndItems();
-        render.focus.group.previous.remove(copyStagedGroup);
-        stagedGroup.reset();
-        control.render.dependents();
-        control.render.class();
-        shade.close();
-        pagelock.unlock();
-      };
-      var cancelAction = function() {
-        stagedGroup.reset();
-        shade.close();
-        pagelock.unlock();
-      };
-      modal.open({
-        heading: heading,
-        content: "Are you sure you want to remove this group and all the bookmarks within? This can not be undone.",
-        successAction: successAction,
-        cancelAction: cancelAction,
-        actionText: "Remove",
-        size: "small"
-      });
-      shade.open({
-        action: function() {
-          stagedGroup.reset();
-          autoSuggest.close();
-          pagelock.unlock();
-          modal.close();
-        }
-      });
-      pagelock.lock();
-    },
     form: function(override) {
       var options = {
+        new: null,
         useStagedGroup: null
       };
       if (override) {
@@ -495,12 +431,15 @@ var link = (function() {
       groupFormPositionInputWrap.appendChild(groupFormPositionSelect);
       groupFormNameInputWrap.appendChild(groupFormInputLabel);
       groupFormNameInputWrap.appendChild(groupFormInputName);
-      fieldset.appendChild(groupFormPositionInputWrap);
       fieldset.appendChild(groupFormNameInputWrap);
+      fieldset.appendChild(groupFormPositionInputWrap);
       form.appendChild(fieldset);
 
       var makeGroupOptions = function() {
         var optionCount = bookmarks.get().length;
+        if (options.new) {
+          optionCount = optionCount + 1;
+        };
         for (var i = 1; i <= optionCount; i++) {
           groupFormPositionSelect.appendChild(helper.node("option:" + helper.ordinalNumber(i)));
         };
@@ -511,10 +450,18 @@ var link = (function() {
         groupFormInputName.value = stagedGroup.group.name;
       };
 
+      var setLastPosition = function() {
+        groupFormPositionSelect.selectedIndex = groupFormPositionSelect.length - 1;
+        stagedGroup.position.destination = groupFormPositionSelect.selectedIndex;
+      };
+
       makeGroupOptions();
       if (options.useStagedGroup) {
         populateForm();
       };
+      if (options.new) {
+        setLastPosition();
+      };
 
       form.addEventListener("keydown", function(event) {
         if (event.keyCode == 13) {
@@ -681,141 +628,15 @@ var link = (function() {
       }, false);
 
       linkEdit.addEventListener("click", function() {
-        render.item.edit(copyStagedLink);
+        render.edit.item(copyStagedLink);
       }, false);
 
       linkRemove.addEventListener("click", function() {
-        render.item.remove(copyStagedLink);
+        render.remove.item(copyStagedLink);
       }, false);
 
       return linkItem;
     },
-    edit: function(copyStagedLink) {
-      stagedLink.link = JSON.parse(JSON.stringify(copyStagedLink.link));
-      stagedLink.position = JSON.parse(JSON.stringify(copyStagedLink.position));
-      var form = render.item.form({
-        useStagedLink: true
-      });
-      var heading;
-      if (stagedLink.link.name != null && stagedLink.link.name != "") {
-        heading = "Edit " + stagedLink.link.name;
-      } else {
-        heading = "Edit unnamed bookmark";
-      };
-      var successAction = function() {
-        var copyStagedLink = JSON.parse(JSON.stringify(stagedLink));
-        bookmarks.mod.edit.link(copyStagedLink);
-        data.save();
-        groupAndItems();
-        render.focus.item.current.edit(copyStagedLink);
-        stagedLink.reset();
-        autoSuggest.close();
-        shade.close();
-        pagelock.unlock();
-      };
-      var cancelAction = function() {
-        stagedLink.reset();
-        autoSuggest.close();
-        pagelock.unlock();
-        shade.close();
-      };
-      modal.open({
-        heading: heading,
-        successAction: successAction,
-        cancelAction: cancelAction,
-        actionText: "Save",
-        size: "small",
-        content: form
-      });
-      shade.open({
-        action: function() {
-          stagedLink.reset();
-          autoSuggest.close();
-          pagelock.unlock();
-          modal.close();
-        }
-      });
-    },
-    remove: function(copyStagedLink) {
-      stagedLink.link = JSON.parse(JSON.stringify(copyStagedLink.link));
-      stagedLink.position = JSON.parse(JSON.stringify(copyStagedLink.position));
-      var heading;
-      if (stagedLink.link.name != null && stagedLink.link.name != "") {
-        heading = "Remove " + stagedLink.link.name + " bookmark";
-      } else {
-        heading = "Remove unnamed bookmark";
-      };
-      var successAction = function() {
-        var copyStagedLink = JSON.parse(JSON.stringify(stagedLink));
-        bookmarks.remove.link(copyStagedLink);
-        data.save();
-        mod.edit.check();
-        header.render.button.edit();
-        groupAndItems();
-        render.focus.item.previous.remove(copyStagedLink);
-        stagedLink.reset();
-        control.render.dependents();
-        control.render.class();
-        shade.close();
-        pagelock.unlock();
-      };
-      var cancelAction = function() {
-        stagedLink.reset();
-        shade.close();
-        pagelock.unlock();
-      };
-      modal.open({
-        heading: heading,
-        content: "Are you sure you want to remove this bookmark? This can not be undone.",
-        successAction: successAction,
-        cancelAction: cancelAction,
-        actionText: "Remove",
-        size: "small"
-      });
-      shade.open({
-        action: function() {
-          stagedLink.reset();
-          autoSuggest.close();
-          pagelock.unlock();
-          modal.close();
-        }
-      });
-      pagelock.lock();
-    },
-    display: {
-      letter: function() {
-        var html = helper.e("html");
-        html.style.setProperty("--link-item-display-letter-size", state.get().link.item.display.letter.size + "em");
-      },
-      icon: function() {
-        var html = helper.e("html");
-        html.style.setProperty("--link-item-display-icon-size", state.get().link.item.display.icon.size + "em");
-      }
-    },
-    name: function() {
-      var html = helper.e("html");
-      html.style.setProperty("--link-item-name-size", state.get().link.item.name.size + "em");
-    },
-    size: function() {
-      var html = helper.e("html");
-      html.style.setProperty("--link-item-size", state.get().link.item.size + "em");
-    },
-    tabindex: function() {
-      var allLinkControlItem = helper.eA(".link-control-item");
-      if (state.get().link.edit) {
-        allLinkControlItem.forEach(function(arrayItem, index) {
-          arrayItem.tabIndex = 1;
-        });
-      } else {
-        allLinkControlItem.forEach(function(arrayItem, index) {
-          arrayItem.tabIndex = -1;
-        });
-      };
-    },
-    border: function() {
-      var html = helper.e("html");
-      html.style.setProperty("--link-item-border", state.get().link.item.border);
-    },
     form: function(override) {
       var options = {
         useStagedLink: null
@@ -1156,6 +977,40 @@ var link = (function() {
         postFocus: displayIconFormGroupText
       });
       return form;
+    },
+    display: {
+      letter: function() {
+        var html = helper.e("html");
+        html.style.setProperty("--link-item-display-letter-size", state.get().link.item.display.letter.size + "em");
+      },
+      icon: function() {
+        var html = helper.e("html");
+        html.style.setProperty("--link-item-display-icon-size", state.get().link.item.display.icon.size + "em");
+      }
+    },
+    name: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--link-item-name-size", state.get().link.item.name.size + "em");
+    },
+    size: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--link-item-size", state.get().link.item.size + "em");
+    },
+    tabindex: function() {
+      var allLinkControlItem = helper.eA(".link-control-item");
+      if (state.get().link.edit) {
+        allLinkControlItem.forEach(function(arrayItem, index) {
+          arrayItem.tabIndex = 1;
+        });
+      } else {
+        allLinkControlItem.forEach(function(arrayItem, index) {
+          arrayItem.tabIndex = -1;
+        });
+      };
+    },
+    border: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--link-item-border", state.get().link.item.border);
     }
   };
 
@@ -1400,15 +1255,16 @@ var link = (function() {
     helper.e(".link-form-text-icon").focus();
   };
 
-  var add = {
+  render.add = {
+    item: {
       open: function() {
-      mod.add.open();
+        mod.add.item.open();
         stagedLink.init();
         var successAction = function() {
           stagedLink.link.timeStamp = new Date().getTime();
           bookmarks.mod.add.link(JSON.parse(JSON.stringify(stagedLink)));
           data.save();
-        mod.add.close();
+          mod.add.item.close();
           groupAndItems();
           stagedLink.reset();
           control.render.dependents();
@@ -1417,7 +1273,7 @@ var link = (function() {
           pagelock.unlock();
         };
         var cancelAction = function() {
-        mod.add.close();
+          mod.add.item.close();
           stagedLink.reset();
           autoSuggest.close();
           shade.close();
@@ -1433,22 +1289,276 @@ var link = (function() {
         });
         shade.open({
           action: function() {
-          mod.add.close();
+            mod.add.item.close();
             stagedLink.reset();
             autoSuggest.close();
-          pagelock.unlock();
             modal.close();
+            pagelock.unlock();
           }
         });
         stagedLink.position.destination.item = helper.e(".link-form-position").selectedIndex;
         pagelock.lock();
       },
       close: function() {
-      mod.add.close();
+        mod.add.item.close();
         modal.close();
         stagedLink.reset();
         pagelock.unlock();
       }
+    },
+    group: {
+      open: function() {
+        mod.add.group.open();
+        stagedGroup.init();
+        var successAction = function() {
+          bookmarks.mod.add.group(JSON.parse(JSON.stringify(stagedGroup)));
+          data.save();
+          mod.add.group.close();
+          groupAndItems();
+          stagedGroup.reset();
+          shade.close();
+          pagelock.unlock();
+        };
+        var cancelAction = function() {
+          mod.add.group.close();
+          stagedGroup.reset();
+          autoSuggest.close();
+          shade.close();
+          pagelock.unlock();
+        };
+        modal.open({
+          heading: "Add a new group",
+          successAction: successAction,
+          cancelAction: cancelAction,
+          actionText: "Add",
+          size: "small",
+          content: render.group.form({
+            new: true
+          })
+        });
+        shade.open({
+          action: function() {
+            mod.add.group.close();
+            stagedGroup.reset();
+            autoSuggest.close();
+            modal.close();
+            pagelock.unlock();
+          }
+        });
+        stagedGroup.position.destination = helper.e(".group-form-position").selectedIndex;
+        pagelock.lock();
+      },
+      close: function() {
+        mod.add.group.close();
+        modal.close();
+        stagedGroup.reset();
+        pagelock.unlock();
+      }
+    }
+  };
+
+  render.edit = {
+    item: function(copyStagedLink) {
+      stagedLink.link = JSON.parse(JSON.stringify(copyStagedLink.link));
+      stagedLink.position = JSON.parse(JSON.stringify(copyStagedLink.position));
+      var form = render.item.form({
+        useStagedLink: true
+      });
+      var heading;
+      if (stagedLink.link.name != null && stagedLink.link.name != "") {
+        heading = "Edit " + stagedLink.link.name;
+      } else {
+        heading = "Edit unnamed bookmark";
+      };
+      var successAction = function() {
+        var copyStagedLink = JSON.parse(JSON.stringify(stagedLink));
+        bookmarks.mod.edit.link(copyStagedLink);
+        data.save();
+        groupAndItems();
+        render.focus.item.current.edit(copyStagedLink);
+        stagedLink.reset();
+        autoSuggest.close();
+        shade.close();
+        pagelock.unlock();
+      };
+      var cancelAction = function() {
+        stagedLink.reset();
+        autoSuggest.close();
+        pagelock.unlock();
+        shade.close();
+      };
+      modal.open({
+        heading: heading,
+        successAction: successAction,
+        cancelAction: cancelAction,
+        actionText: "Save",
+        size: "small",
+        content: form
+      });
+      shade.open({
+        action: function() {
+          stagedLink.reset();
+          autoSuggest.close();
+          pagelock.unlock();
+          modal.close();
+        }
+      });
+    },
+    group: function(copyStagedGroup) {
+      stagedGroup.group = JSON.parse(JSON.stringify(copyStagedGroup.group));
+      stagedGroup.position = JSON.parse(JSON.stringify(copyStagedGroup.position));
+      var form = render.group.form({
+        useStagedGroup: true
+      });
+      var heading = "Edit " + stagedGroup.group.name;
+      var successAction = function() {
+        var copyStagedGroup = JSON.parse(JSON.stringify(stagedGroup));
+        bookmarks.mod.edit.group(copyStagedGroup);
+        data.save();
+        groupAndItems();
+        render.focus.group.current.edit(copyStagedGroup);
+        stagedGroup.reset();
+        autoSuggest.close();
+        shade.close();
+        pagelock.unlock();
+      };
+      var cancelAction = function() {
+        stagedGroup.reset();
+        autoSuggest.close();
+        pagelock.unlock();
+        shade.close();
+      };
+      modal.open({
+        heading: heading,
+        successAction: successAction,
+        cancelAction: cancelAction,
+        actionText: "Save",
+        size: "small",
+        content: form
+      });
+      shade.open({
+        action: function() {
+          stagedGroup.reset();
+          autoSuggest.close();
+          pagelock.unlock();
+          modal.close();
+        }
+      });
+    }
+  };
+
+  render.remove = {
+    item: function(copyStagedLink) {
+      stagedLink.link = JSON.parse(JSON.stringify(copyStagedLink.link));
+      stagedLink.position = JSON.parse(JSON.stringify(copyStagedLink.position));
+      var heading;
+      if (stagedLink.link.name != null && stagedLink.link.name != "") {
+        heading = "Remove " + stagedLink.link.name + " bookmark";
+      } else {
+        heading = "Remove unnamed bookmark";
+      };
+      var successAction = function() {
+        var copyStagedLink = JSON.parse(JSON.stringify(stagedLink));
+        bookmarks.remove.link(copyStagedLink);
+        data.save();
+        mod.edit.check();
+        header.render.button.edit();
+        groupAndItems();
+        render.focus.item.previous.remove(copyStagedLink);
+        stagedLink.reset();
+        control.render.dependents();
+        control.render.class();
+        shade.close();
+        pagelock.unlock();
+      };
+      var cancelAction = function() {
+        stagedLink.reset();
+        shade.close();
+        pagelock.unlock();
+      };
+      modal.open({
+        heading: heading,
+        content: "Are you sure you want to remove this bookmark? This can not be undone.",
+        successAction: successAction,
+        cancelAction: cancelAction,
+        actionText: "Remove",
+        size: "small"
+      });
+      shade.open({
+        action: function() {
+          stagedLink.reset();
+          autoSuggest.close();
+          pagelock.unlock();
+          modal.close();
+        }
+      });
+      pagelock.lock();
+    },
+    group: function(copyStagedGroup) {
+      stagedGroup.group = JSON.parse(JSON.stringify(copyStagedGroup.group));
+      stagedGroup.position = JSON.parse(JSON.stringify(copyStagedGroup.position));
+      var heading;
+      if (stagedGroup.group.name != null && stagedGroup.group.name != "") {
+        heading = "Remove " + stagedGroup.group.name + " group";
+      } else {
+        heading = "Remove unnamed group";
+      };
+      var successAction = function() {
+        var copyStagedGroup = JSON.parse(JSON.stringify(stagedGroup));
+        bookmarks.remove.group(copyStagedGroup);
+        data.save();
+        mod.edit.check();
+        header.render.button.edit();
+        groupAndItems();
+        render.focus.group.previous.remove(copyStagedGroup);
+        stagedGroup.reset();
+        control.render.dependents();
+        control.render.class();
+        shade.close();
+        pagelock.unlock();
+      };
+      var cancelAction = function() {
+        stagedGroup.reset();
+        shade.close();
+        pagelock.unlock();
+      };
+      modal.open({
+        heading: heading,
+        content: "Are you sure you want to remove this group and all the bookmarks within? This can not be undone.",
+        successAction: successAction,
+        cancelAction: cancelAction,
+        actionText: "Remove",
+        size: "small"
+      });
+      shade.open({
+        action: function() {
+          stagedGroup.reset();
+          autoSuggest.close();
+          pagelock.unlock();
+          modal.close();
+        }
+      });
+      pagelock.lock();
+    }
+  };
+
+  var add = {
+    item: {
+      open: function() {
+        render.add.item.open();
+      },
+      close: function() {
+        render.add.item.close();
+      }
+    },
+    group: {
+      open: function() {
+        render.add.group.open();
+      },
+      close: function() {
+        render.add.group.close();
+      }
+    }
   };
 
   var edit = function() {
@@ -1471,7 +1581,8 @@ var link = (function() {
   };
 
   var init = function() {
-    mod.add.close();
+    mod.add.item.close();
+    mod.add.group.close();
     groupAndItems();
     render.group.size();
     render.item.size();
@@ -1491,7 +1602,8 @@ var link = (function() {
     edit: edit,
     tabindex: tabindex,
     groupAndItems: groupAndItems,
-    stagedLink: stagedLink
+    stagedLink: stagedLink,
+    stagedGroup: stagedGroup
   };
 
 })();

src/js/state.js

@@ -179,7 +179,8 @@ var state = (function() {
       name: {
         show: true,
         size: 1
-      }
+      },
+      add: false
     },
     layout: {
       alignment: "centercenter",
@@ -235,6 +236,7 @@ var state = (function() {
     search: false,
     menu: false,
     modal: false,
+    dropdown: false,
     autoSuggest: false
   };
 

src/js/update.js

@@ -628,8 +628,10 @@ var update = (function() {
         name: {
           show: true,
           size: 1
-        }
+        },
+        add: false
       };
+      data.state.dropdown = false;
       return data;
     }
   };