[feature] add group and bookmark header dropdown

2025-01-15 10:28:43 +01:00 · 2019-10-20 23:41:12 +01:00 · 2019-10-20 23:41:12 +01:00 · ead89076b2
commit ead89076b2
parent a19d201544
13 changed files with 612 additions and 277 deletions
--- a/gulpfile.js
+++ b/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'
 ]

--- a/src/css/form.css
+++ b/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;
--- a/src/css/utilities.css
+++ b/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;
 }
--- a/src/css/variables.css
+++ b/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;
--- a/src/index.html
+++ b/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 -->

--- a/src/js/bookmarks.js
+++ b/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;
-      if (name != null && typeof name == "string") {
-        name = name.trim();
-      };
-      if (name == "" || name == null || name == undefined) {
+      var makeName = function() {
        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: []
        });
+      };
    }
  };

--- a/src/js/control.js
+++ b/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"),
--- a/src/js/dropdown.js
+++ b/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
+  };
+
+})();
--- a/src/js/init.js
+++ b/src/js/init.js
@ -18,4 +18,5 @@ search.init();
 header.init();
 modal.init();
 shade.init();
+dropdown.init();
 version.init();
--- a/src/js/keyboard.js
+++ b/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();
--- a/src/js/link.js
+++ b/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
  };

 })();
--- a/src/js/state.js
+++ b/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
  };

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