[refactor] improve link render

src/index.html

@@ -75,7 +75,7 @@
             <div class="form-group nested-button mb-0">
               <div class="input-wrap input-button input-hide py-0">
                 <input id="control-link-edit" class="control-link-edit" type="checkbox" tabindex="1">
-                <label for="control-link-edit" class=" mb-0">Edit</label>
+                <label for="control-link-edit" class="mb-0">Edit</label>
               </div>
               <button class="control-link-add button" tabindex="1">
                 <span class="button-text">Add</span>

src/js/auto-suggest.js

@@ -205,7 +205,7 @@ var autoSuggest = (function() {
               helper.addClass(icon, "fab");
             };
             anchor.addEventListener("click", function() {
-              link.autoSuggestIconAction(arrayItem);
+              link.render.autoSuggestIconAction(arrayItem);
             }, false);
             var text = helper.node("span:" + arrayItem.label + "|class:auto-suggest-icon-text");
             anchor.appendChild(icon);

src/js/control.js

@@ -11,7 +11,7 @@ var control = (function() {
     element: helper.e(".control-link-add"),
     type: "button",
     func: function() {
-      link.add();
+      link.render.add();
     }
   }, {
     element: helper.e(".control-link-edit"),
@@ -26,7 +26,7 @@ var control = (function() {
     type: "color",
     func: function() {
       theme.render.accent.color();
-      link.clear();
+      link.render.clear();
       link.render.item.all();
       sortable(".link-area");
     }
@@ -1875,7 +1875,7 @@ var control = (function() {
     path: "link.item.order",
     type: "radio",
     func: function() {
-      link.clear();
+      link.render.clear();
       link.render.item.all();
       sortable(".link-area");
     }
@@ -1884,7 +1884,7 @@ var control = (function() {
     path: "link.item.order",
     type: "radio",
     func: function() {
-      link.clear();
+      link.render.clear();
       link.render.item.all();
       sortable(".link-area");
     }
@@ -1923,7 +1923,7 @@ var control = (function() {
     path: "link.newTab",
     type: "checkbox",
     func: function() {
-      link.clear();
+      link.render.clear();
       link.render.item.all();
       sortable(".link-area");
     }
@@ -1946,7 +1946,7 @@ var control = (function() {
     type: "button",
     func: function() {
       bookmarks.sort("letter");
-      link.clear();
+      link.render.clear();
       link.render.item.all();
       sortable(".link-area");
     }
@@ -1955,7 +1955,7 @@ var control = (function() {
     type: "button",
     func: function() {
       bookmarks.sort("icon");
-      link.clear();
+      link.render.clear();
       link.render.item.all();
       sortable(".link-area");
     }
@@ -1964,7 +1964,7 @@ var control = (function() {
     type: "button",
     func: function() {
       bookmarks.sort("name");
-      link.clear();
+      link.render.clear();
       link.render.item.all();
       sortable(".link-area");
     }
@@ -1972,8 +1972,8 @@ var control = (function() {
     element: helper.e(".control-link-accent-clear"),
     type: "button",
     func: function() {
-      link.accent.clear();
+      link.mod.accent.clear();
-      link.clear();
+      link.render.clear();
       link.render.item.all();
       sortable(".link-area");
     }
@@ -1981,8 +1981,8 @@ var control = (function() {
     element: helper.e(".control-link-accent-set"),
     type: "button",
     func: function() {
-      link.accent.set();
+      link.mod.accent.rainbow();
-      link.clear();
+      link.render.clear();
       link.render.item.all();
       sortable(".link-area");
     }
@@ -2065,7 +2065,7 @@ var control = (function() {
     func: function() {
       theme.render.accent.random();
       theme.render.accent.color();
-      link.clear();
+      link.render.clear();
       link.render.item.all();
       sortable(".link-area");
     }
@@ -2798,7 +2798,6 @@ var control = (function() {
       if (bookmarks.get().length > 0) {
         disable.input(".control-link-edit", false);
       } else {
-        disable.input(".control-link-edit", true);
         disable.input(".control-link-edit", false);
       };
     };

src/js/header.js

@@ -147,6 +147,11 @@ var header = (function() {
         }
       };
       action[state.get().header.button.style]();
+    },
+    edit: function() {
+      if (!state.get().link.edit) {
+        helper.e(".control-link-edit").checked = false;
+      };
     }
   };
 

src/js/keyboard.js

@@ -36,7 +36,7 @@ var keyboard = (function() {
       if (event.ctrlKey && event.altKey && event.keyCode == 65) {
         if (state.get().link.show) {
           menu.close();
-          link.add();
+          link.render.add();
         };
       };
     }, false);
@@ -97,7 +97,7 @@ var keyboard = (function() {
       if (state.get().theme.accent.random.active && event.ctrlKey && event.altKey && event.keyCode == 82) {
         theme.render.accent.random();
         theme.render.accent.color();
-        link.clear();
+        link.render.clear();
         link.render.item.all();
         sortable(".link-area");
         data.save();

src/js/link.js

@@ -1,6 +1,8 @@
 var link = (function() {
 
-  var bind = function() {
+  var bind = {};
+
+  bind.sort = function() {
     sortable(".link-area", {
       items: ".link-item",
       handle: ".link-control-item-handle",
@@ -12,25 +14,11 @@ var link = (function() {
     });
   };
 
-  var _previousFocusLink = null;
+  var _previousFocus = null;
 
-  var _returnToPreviousFocusLink = function() {
+  var stagedLink = {};
-    if (_previousFocusLink != null) {
-      var linkPanelFront = helper.eA(".link-panel-front");
-      if (linkPanelFront.length > 0) {
-        if (_previousFocusLink >= 0) {
-          linkPanelFront[_previousFocusLink].focus();
-        } else {
-          linkPanelFront[0].focus();
-        };
-      } else {
-        helper.e("body").focus();
-      };
-      _previousFocusLink = null;
-    };
-  };
 
-  var stagedBookmarkData = {
+  stagedLink.data = {
     display: null,
     letter: null,
     icon: {
@@ -51,45 +39,47 @@ var link = (function() {
     }
   };
 
-  var initStagedBookmarkData = function() {
+  stagedLink.init = function() {
-    link.stagedBookmarkData.display = "letter";
+    stagedLink.data.display = "letter";
-    link.stagedBookmarkData.accent.override = false;
+    stagedLink.data.accent.override = false;
   };
 
-  var resetStagedBookmarkData = function() {
+  stagedLink.reset = function() {
-    link.stagedBookmarkData.display = null;
+    stagedLink.data.display = null;
-    link.stagedBookmarkData.letter = null;
+    stagedLink.data.letter = null;
-    link.stagedBookmarkData.icon.name = null;
+    stagedLink.data.icon.name = null;
-    link.stagedBookmarkData.icon.prefix = null;
+    stagedLink.data.icon.prefix = null;
-    link.stagedBookmarkData.icon.label = null;
+    stagedLink.data.icon.label = null;
-    link.stagedBookmarkData.name = null;
+    stagedLink.data.name = null;
-    link.stagedBookmarkData.url = null;
+    stagedLink.data.url = null;
-    link.stagedBookmarkData.timeStamp = null;
+    stagedLink.data.timeStamp = null;
-    link.stagedBookmarkData.accent.override = null;
+    stagedLink.data.accent.override = null;
-    link.stagedBookmarkData.accent.color.r = null;
+    stagedLink.data.accent.color.r = null;
-    link.stagedBookmarkData.accent.color.g = null;
+    stagedLink.data.accent.color.g = null;
-    link.stagedBookmarkData.accent.color.b = null;
+    stagedLink.data.accent.color.b = null;
   };
 
-  var add = function() {
+  var render = {};
-    initStagedBookmarkData();
+
-    var form = _makeLinkForm();
+  render.add = function() {
+    stagedLink.init();
+    var form = render.form();
     modal.render({
       heading: "Add a new bookmark",
       successAction: function() {
-        link.stagedBookmarkData.timeStamp = new Date().getTime();
+        stagedLink.data.timeStamp = new Date().getTime();
-        bookmarks.add(JSON.parse(JSON.stringify(link.stagedBookmarkData)));
+        bookmarks.add(JSON.parse(JSON.stringify(stagedLink.data)));
         data.save();
-        clear();
+        render.clear();
         render.item.all();
         render.tabIndex();
+        sortable(".link-area");
         control.dependents();
         control.render();
-        resetStagedBookmarkData();
+        stagedLink.reset();
-        sortable(".link-area");
       },
       cancelAction: function() {
-        resetStagedBookmarkData();
+        stagedLink.reset();
         autoSuggest.destroy();
       },
       actionText: "Add",
@@ -98,10 +88,10 @@ var link = (function() {
     });
   };
 
-  var edit = function(bookmarkData) {
+  render.edit = function(bookmarkData) {
-    link.stagedBookmarkData = JSON.parse(JSON.stringify(bookmarkData));
+    stagedLink.data = JSON.parse(JSON.stringify(bookmarkData));
-    var form = _makeLinkForm();
+    var form = render.form();
-    if (link.stagedBookmarkData.display == "letter" || link.stagedBookmarkData.display == null) {
+    if (stagedLink.data.display == "letter" || stagedLink.data.display == null) {
       form.querySelector(".link-form-input-letter").removeAttribute("disabled");
       form.querySelector(".link-form-input-icon").setAttribute("disabled", "");
       form.querySelector(".form-group-text").setAttribute("disabled", "");
@@ -109,7 +99,7 @@ var link = (function() {
       form.querySelector(".link-form-input-helper-icon").setAttribute("disabled", "");
       form.querySelector(".link-form-icon-clear").setAttribute("disabled", "");
       form.querySelector(".link-form-text-icon").tabIndex = -1;
-    } else if (link.stagedBookmarkData.display == "icon") {
+    } else if (stagedLink.data.display == "icon") {
       form.querySelector(".link-form-input-letter").setAttribute("disabled", "");
       form.querySelector(".link-form-input-icon").removeAttribute("disabled");
       form.querySelector(".form-group-text").removeAttribute("disabled");
@@ -119,31 +109,31 @@ var link = (function() {
       form.querySelector(".link-form-input-display-icon").checked = true;
       form.querySelector(".link-form-text-icon").tabIndex = 1;
     };
-    if (link.stagedBookmarkData.icon.name != null && link.stagedBookmarkData.icon.prefix != null && link.stagedBookmarkData.icon.label != null) {
+    if (stagedLink.data.icon.name != null && stagedLink.data.icon.prefix != null && stagedLink.data.icon.label != null) {
-      form.querySelector(".link-form-text-icon").appendChild(helper.node("span|class:link-form-icon " + link.stagedBookmarkData.icon.prefix + " fa-" + link.stagedBookmarkData.icon.name));
+      form.querySelector(".link-form-text-icon").appendChild(helper.node("span|class:link-form-icon " + stagedLink.data.icon.prefix + " fa-" + stagedLink.data.icon.name));
     };
-    form.querySelector(".link-form-input-letter").value = link.stagedBookmarkData.letter;
+    form.querySelector(".link-form-input-letter").value = stagedLink.data.letter;
-    form.querySelector(".link-form-input-icon").value = link.stagedBookmarkData.icon.label;
+    form.querySelector(".link-form-input-icon").value = stagedLink.data.icon.label;
-    form.querySelector(".link-form-input-name").value = link.stagedBookmarkData.name;
+    form.querySelector(".link-form-input-name").value = stagedLink.data.name;
-    form.querySelector(".link-form-input-url").value = link.stagedBookmarkData.url;
+    form.querySelector(".link-form-input-url").value = stagedLink.data.url;
-    if (link.stagedBookmarkData.accent.override) {
+    if (stagedLink.data.accent.override) {
-      form.querySelector(".link-form-input-color").value = helper.rgbToHex(link.stagedBookmarkData.accent.color);
+      form.querySelector(".link-form-input-color").value = helper.rgbToHex(stagedLink.data.accent.color);
     };
     modal.render({
-      heading: "Edit " + link.stagedBookmarkData.name,
+      heading: "Edit " + stagedLink.data.name,
       successAction: function() {
-        bookmarks.edit(JSON.parse(JSON.stringify(link.stagedBookmarkData)));
+        bookmarks.edit(JSON.parse(JSON.stringify(stagedLink.data)));
         data.save();
-        clear();
+        render.clear();
         render.item.all();
         render.tabIndex();
-        _returnToPreviousFocusLink();
+        render.previousFocus();
-        resetStagedBookmarkData();
         sortable(".link-area");
+        stagedLink.reset();
       },
       cancelAction: function() {
-        _returnToPreviousFocusLink();
+        render.previousFocus();
-        resetStagedBookmarkData();
+        stagedLink.reset();
       },
       actionText: "Save",
       size: "small",
@@ -151,171 +141,110 @@ var link = (function() {
     });
   };
 
-  var remove = function(bookmarkData) {
+  render.remove = function(bookmarkData) {
     modal.render({
       heading: "Remove " + bookmarkData.name + " bookmark",
       content: "Are you sure you want to remove this bookmark? This can not be undone.",
       successAction: function() {
-        _previousFocusLink = _previousFocusLink - 1;
+        _previousFocus = _previousFocus - 1;
         bookmarks.remove(bookmarkData);
-        _checkCount();
+        mod.edit();
+        header.render.button.edit();
         data.save();
-        clear();
+        render.clear();
         render.item.all();
+        render.previousFocus();
+        sortable(".link-area");
         control.dependents();
         control.render();
-        _returnToPreviousFocusLink();
-        sortable(".link-area");
       },
       cancelAction: function() {
-        _returnToPreviousFocusLink();
+        render.previousFocus();
       },
       actionText: "Remove",
       size: "small"
     });
   };
 
-  var _checkCount = function() {
+  render.clear = function() {
-    if (bookmarks.get().length <= 0) {
+    var linkArea = helper.e(".link-area");
-      helper.setObject({
+    while (linkArea.lastChild) {
-        object: state.get(),
+      linkArea.removeChild(linkArea.lastChild);
-        path: "link.edit",
+    };
-        newValue: false
+  };
+
+  render.area = {
+    width: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--link-area-width", state.get().link.area.width + "%");
+    }
+  };
+
+  render.item = {
+    all: function() {
+      var linkArea = helper.e(".link-area");
+      var bookmarksToRender = false;
+      if (state.get().search) {
+        bookmarksToRender = search.get();
+      } else {
+        bookmarksToRender = bookmarks.get();
+      };
+      var action = {
+        bookmarks: function(array) {
+          array.forEach(function(arrayItem, index) {
+            linkArea.appendChild(render.item.link(arrayItem, index));
           });
+        },
+        empty: {
+          search: function() {
+            linkArea.appendChild(render.empty.search());
+          },
+          bookmarks: function() {
+            linkArea.appendChild(render.empty.bookmarks());
+          }
+        }
+      };
+      // if searching
+      if (state.get().search) {
+        // if bookmarks exist to be searched
+        if (bookmarksToRender.total > 0) {
+          // if matching bookmarks found
+          if (bookmarksToRender.matching.length > 0) {
+            action.bookmarks(bookmarksToRender.matching);
+          } else {
+            action.empty.search();
+          };
+        } else {
+          action.empty.bookmarks();
+        };
+      } else {
+        // if bookmarks exist
+        if (bookmarksToRender.length > 0) {
+          action.bookmarks(bookmarksToRender);
+        } else {
+          action.empty.bookmarks();
         };
       };
-
+    },
-  var _makeLinkForm = function() {
+    display: {
-    var form = helper.node("form|class:link-form");
+      letter: function() {
-    var fieldset = helper.node("fieldset");
+        var html = helper.e("html");
-    var letterFormIndet = helper.node("div|class:form-indent");
+        html.style.setProperty("--link-item-display-letter-size", state.get().link.item.display.letter.size + "em");
-    var letterInputWrap = helper.node("div|class:input-wrap");
+      },
-    var letterInput = helper.node("input|type:text,class:link-form-input-letter mb-0,id:link-form-input-letter,placeholder:E,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
+      icon: function() {
-    var iconFormIndet = helper.node("div|class:form-indent");
+        var html = helper.e("html");
-    var iconFormGroupWrap = helper.node("div|class:input-wrap");
+        html.style.setProperty("--link-item-display-icon-size", state.get().link.item.display.icon.size + "em");
-    var iconFormGroup = helper.node("div|class:form-group auto-suggest-wrapper");
+      }
-    var iconInput = helper.node("input|type:text,class:link-form-input-icon auto-suggest-input,id:link-form-input-icon,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
+    },
-    var iconFormGroupText = helper.node("div|class:form-group-text link-form-text-icon,tabindex:-1,disabled");
+    name: function() {
-    var iconFormGroupClear = helper.node("button|class:link-form-icon-clear button mb-0,type:button,tabindex:1,disabled");
+      var html = helper.e("html");
-    var iconFormGroupClearIcon = helper.node("span|class:icon-close");
+      html.style.setProperty("--link-item-name-size", state.get().link.item.name.size + "em");
-    var iconPara = helper.node("p:Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported.|class:link-form-input-helper-icon input-helper small muted,disabled");
+    },
-    var nameInputWrap = helper.node("div|class:input-wrap");
+    size: function() {
-    var nameLabel = helper.node("label:Name|for:link-form-input-name");
+      var html = helper.e("html");
-    var nameInput = helper.node("input|type:text,class:link-form-input-name mb-0,id:link-form-input-name,placeholder:Example,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
+      html.style.setProperty("--link-item-size", state.get().link.item.size + "em");
-    var urlInputWrap = helper.node("div|class:input-wrap");
+    },
-    var urlLabel = helper.node("label:URL|for:link-form-input-url");
+    link: function(data, index) {
-    var urlInput = helper.node("input|type:text,class:link-form-input-url mb-0,id:link-form-input-url,placeholder:https://www.example.com/,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
-    var colorWrap = helper.node("div|class:input-wrap");
-    var colorFormGroup = helper.node("div|class:form-group");
-    var colorLabel = helper.node("label:Accent override|for:link-form-input-color");
-    var colorInput = helper.node("input|id:link-form-input-color,class:link-form-input-color mb-0,type:color,value:" + helper.rgbToHex(state.get().theme.accent.current) + ",tabindex:1");
-    var colorButtonRefresh = helper.node("button|class:button mb-0,type:button,tabindex:1");
-    var colorButtonRefreshIcon = helper.node("span|class:icon-refresh");
-    var colorPara = helper.node("p:Use this colour to override the global Accent colour.|class:input-helper small muted");
-    var letterRadioInputWrap = helper.node("div|class:input-wrap");
-    var letterRadioInput = helper.node("input|class:link-form-input-display-letter,id:link-form-input-display-letter,type:radio,name:link-form-input-display,tabindex:1,checked,value:letter");
-    var letterRadioLable = helper.node("label:Letters|for:link-form-input-display-letter");
-    var iconRadioInputWrap = helper.node("div|class:input-wrap");
-    var iconRadioInput = helper.node("input|class:link-form-input-display-icon,id:link-form-input-display-icon,type:radio,name:link-form-input-display,tabindex:1,value:icon");
-    var iconRadioLable = helper.node("label:Icon|for:link-form-input-display-icon");
-
-    letterRadioInputWrap.appendChild(letterRadioInput);
-    letterRadioInputWrap.appendChild(letterRadioLable);
-    fieldset.appendChild(letterRadioInputWrap);
-    letterInputWrap.appendChild(letterInput);
-    letterFormIndet.appendChild(letterInputWrap);
-    fieldset.appendChild(letterFormIndet);
-    iconRadioInputWrap.appendChild(iconRadioInput);
-    iconRadioInputWrap.appendChild(iconRadioLable);
-    fieldset.appendChild(iconRadioInputWrap);
-    iconFormGroupClear.appendChild(iconFormGroupClearIcon);
-    iconFormGroup.appendChild(iconInput);
-    iconFormGroup.appendChild(iconFormGroupText);
-    iconFormGroup.appendChild(iconFormGroupClear);
-    iconFormGroupWrap.appendChild(iconFormGroup);
-    iconFormGroupWrap.appendChild(iconPara);
-    iconFormIndet.appendChild(iconFormGroupWrap);
-    fieldset.appendChild(iconFormIndet);
-    fieldset.appendChild(helper.node("hr"));
-    nameInputWrap.appendChild(nameLabel);
-    nameInputWrap.appendChild(nameInput);
-    fieldset.appendChild(nameInputWrap);
-    urlInputWrap.appendChild(urlLabel);
-    urlInputWrap.appendChild(urlInput);
-    fieldset.appendChild(urlInputWrap);
-    fieldset.appendChild(helper.node("hr"));
-    colorFormGroup.appendChild(colorInput);
-    colorButtonRefresh.appendChild(colorButtonRefreshIcon);
-    colorFormGroup.appendChild(colorButtonRefresh);
-    colorWrap.appendChild(colorLabel);
-    colorWrap.appendChild(colorFormGroup);
-    colorWrap.appendChild(colorPara);
-    fieldset.appendChild(colorWrap);
-    form.appendChild(fieldset);
-
-    letterRadioInput.addEventListener("change", function(event) {
-      link.stagedBookmarkData.display = this.value;
-    }, false);
-    iconRadioInput.addEventListener("change", function(event) {
-      link.stagedBookmarkData.display = this.value;
-    }, false);
-    letterInput.addEventListener("input", function(event) {
-      link.stagedBookmarkData.letter = this.value;
-    }, false);
-    nameInput.addEventListener("input", function(event) {
-      link.stagedBookmarkData.name = this.value;
-    }, false);
-    urlInput.addEventListener("input", function(event) {
-      link.stagedBookmarkData.url = this.value;
-    }, false);
-    colorInput.addEventListener("change", function(event) {
-      link.stagedBookmarkData.accent.override = true;
-      link.stagedBookmarkData.accent.color = helper.hexToRgb(this.value);
-    }, false);
-    colorButtonRefresh.addEventListener("click", function(event) {
-      colorInput.value = helper.rgbToHex(state.get().theme.accent.current);
-      link.stagedBookmarkData.accent.override = false;
-      link.stagedBookmarkData.accent.color = {
-        r: null,
-        g: null,
-        b: null
-      };
-    }, false);
-    iconFormGroupClear.addEventListener("click", function(event) {
-      link.stagedBookmarkData.icon.name = null;
-      link.stagedBookmarkData.icon.prefix = null;
-      link.stagedBookmarkData.icon.label = null;
-      var existingIcon = helper.e(".link-form-icon");
-      if (existingIcon) {
-        existingIcon.remove();
-      };
-      iconInput.value = "";
-    }, false);
-    letterRadioInput.addEventListener("change", function(event) {
-      letterInput.removeAttribute("disabled");
-      iconInput.setAttribute("disabled", "");
-      iconFormGroupText.setAttribute("disabled", "");
-      iconPara.setAttribute("disabled", "");
-      iconFormGroupClear.setAttribute("disabled", "");
-      iconFormGroupText.tabIndex = -1;
-    }, false);
-    iconRadioInput.addEventListener("change", function(event) {
-      letterInput.setAttribute("disabled", "");
-      iconInput.removeAttribute("disabled");
-      iconFormGroupText.removeAttribute("disabled");
-      iconPara.removeAttribute("disabled");
-      iconFormGroupClear.removeAttribute("disabled");
-      iconFormGroupText.tabIndex = 1;
-    }, false);
-    autoSuggest.bind({
-      input: iconInput,
-      type: "fontawesomeIcon",
-      postFocus: iconFormGroupText
-    });
-    return form;
-  };
-
-  var _makeLink = function(data, index) {
       var linkItemOptions = {
         tag: "div",
         attr: [{
@@ -517,137 +446,34 @@ var link = (function() {
       linkItem.appendChild(linkPanelBack);
 
       linkEdit.addEventListener("click", function() {
-      _previousFocusLink = index;
+        _previousFocus = index;
-      edit(data);
+        render.edit(data);
       }, false);
       linkRemove.addEventListener("click", function() {
-      _previousFocusLink = index;
+        _previousFocus = index;
-      remove(data);
+        render.remove(data);
       }, false);
 
       return linkItem;
+    }
   };
 
-  var autoSuggestIconAction = function(autoSuggestData) {
+  render.empty = {
-    link.stagedBookmarkData.icon.label = autoSuggestData.label;
+    search: function() {
-    link.stagedBookmarkData.icon.name = autoSuggestData.name;
-    if (autoSuggestData.styles.includes("solid")) {
-      link.stagedBookmarkData.icon.prefix = "fas";
-    } else if (autoSuggestData.styles.includes("brands")) {
-      link.stagedBookmarkData.icon.prefix = "fab";
-    };
-    var existingIcon = helper.e(".link-form-icon");
-    if (existingIcon) {
-      existingIcon.remove();
-    };
-    helper.e(".link-form-input-icon").value = autoSuggestData.label;
-    helper.e(".link-form-text-icon").appendChild(helper.node("span|class:link-form-icon " + link.stagedBookmarkData.icon.prefix + " fa-" + link.stagedBookmarkData.icon.name));
-    helper.e(".link-form-text-icon").focus();
-  };
-
-  var _makeEmptySearch = function() {
-    var searchInput = helper.e(".search-input");
       var div = helper.node("div|class:link-empty");
       var h1 = helper.node("h1:No matching bookmarks found|class:link-empty-heading");
       var para = helper.node("p:\"Enter\" to Search " + state.get().header.search.engine[state.get().header.search.engine.selected].name + "|class:small muted");
       div.appendChild(h1);
       div.appendChild(para);
       return div;
-  };
+    },
-
+    bookmarks: function() {
-  var _makeEmptyBookmarks = function() {
-    var searchInput = helper.e(".search-input");
       var div = helper.node("div|class:link-empty");
       var h1 = helper.node("h1:No bookmarks added|class:link-empty-heading");
       var para = helper.node("p:Why not add some?|class:small muted");
       div.appendChild(h1);
       div.appendChild(para);
       return div;
-  };
-
-  var clear = function() {
-    var linkArea = helper.e(".link-area");
-    while (linkArea.lastChild) {
-      linkArea.removeChild(linkArea.lastChild);
-    };
-  };
-
-  var render = {};
-
-  render = {
-    area: {
-      width: function() {
-        var html = helper.e("html");
-        html.style.setProperty("--link-area-width", state.get().link.area.width + "%");
-      }
-    }
-  };
-
-  render.item = {
-    all: function() {
-      var linkArea = helper.e(".link-area");
-      var bookmarksToRender = false;
-      if (state.get().search) {
-        bookmarksToRender = search.get();
-      } else {
-        bookmarksToRender = bookmarks.get();
-      };
-      var action = {
-        render: {
-          bookmarks: function(array) {
-            array.forEach(function(arrayItem, index) {
-              linkArea.appendChild(_makeLink(arrayItem, index));
-            });
-          },
-          empty: {
-            search: function() {
-              linkArea.appendChild(_makeEmptySearch());
-            },
-            bookmarks: function() {
-              linkArea.appendChild(_makeEmptyBookmarks());
-            }
-          }
-        }
-      };
-      // if searching
-      if (state.get().search) {
-        // if bookmarks exist to be searched
-        if (bookmarksToRender.total > 0) {
-          // if matching bookmarks found
-          if (bookmarksToRender.matching.length > 0) {
-            action.render.bookmarks(bookmarksToRender.matching);
-          } else {
-            action.render.empty.search();
-          };
-        } else {
-          action.render.empty.bookmarks();
-        };
-      } else {
-        // if bookmarks exist
-        if (bookmarksToRender.length > 0) {
-          action.render.bookmarks(bookmarksToRender);
-        } else {
-          action.render.empty.bookmarks();
-        };
-      };
-    },
-    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");
     }
   };
 
@@ -664,9 +490,185 @@ var link = (function() {
     };
   };
 
-  var accent = {};
+  render.previousFocus = function() {
+    if (_previousFocus != null) {
+      var linkPanelFront = helper.eA(".link-panel-front");
+      if (linkPanelFront.length > 0) {
+        if (_previousFocus >= 0) {
+          linkPanelFront[_previousFocus].focus();
+        } else {
+          linkPanelFront[0].focus();
+        };
+      } else {
+        helper.e("body").focus();
+      };
+      _previousFocus = null;
+    };
+  };
 
-  accent.set = function() {
+  render.form = function() {
+    var form = helper.node("form|class:link-form");
+    var fieldset = helper.node("fieldset");
+    var letterFormIndet = helper.node("div|class:form-indent");
+    var letterInputWrap = helper.node("div|class:input-wrap");
+    var letterInput = helper.node("input|type:text,class:link-form-input-letter mb-0,id:link-form-input-letter,placeholder:E,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
+    var iconFormIndet = helper.node("div|class:form-indent");
+    var iconFormGroupWrap = helper.node("div|class:input-wrap");
+    var iconFormGroup = helper.node("div|class:form-group auto-suggest-wrapper");
+    var iconInput = helper.node("input|type:text,class:link-form-input-icon auto-suggest-input,id:link-form-input-icon,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
+    var iconFormGroupText = helper.node("div|class:form-group-text link-form-text-icon,tabindex:-1,disabled");
+    var iconFormGroupClear = helper.node("button|class:link-form-icon-clear button mb-0,type:button,tabindex:1,disabled");
+    var iconFormGroupClearIcon = helper.node("span|class:icon-close");
+    var iconPara = helper.node("p:Refer to the \"Free\" and \"Brand\" icons from FontAwesome for full set of icons supported.|class:link-form-input-helper-icon input-helper small muted,disabled");
+    var nameInputWrap = helper.node("div|class:input-wrap");
+    var nameLabel = helper.node("label:Name|for:link-form-input-name");
+    var nameInput = helper.node("input|type:text,class:link-form-input-name mb-0,id:link-form-input-name,placeholder:Example,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
+    var urlInputWrap = helper.node("div|class:input-wrap");
+    var urlLabel = helper.node("label:URL|for:link-form-input-url");
+    var urlInput = helper.node("input|type:text,class:link-form-input-url mb-0,id:link-form-input-url,placeholder:https://www.example.com/,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false");
+    var colorWrap = helper.node("div|class:input-wrap");
+    var colorFormGroup = helper.node("div|class:form-group");
+    var colorLabel = helper.node("label:Accent override|for:link-form-input-color");
+    var colorInput = helper.node("input|id:link-form-input-color,class:link-form-input-color mb-0,type:color,value:" + helper.rgbToHex(state.get().theme.accent.current) + ",tabindex:1");
+    var colorButtonRefresh = helper.node("button|class:button mb-0,type:button,tabindex:1");
+    var colorButtonRefreshIcon = helper.node("span|class:icon-refresh");
+    var colorPara = helper.node("p:Use this colour to override the global Accent colour.|class:input-helper small muted");
+    var letterRadioInputWrap = helper.node("div|class:input-wrap");
+    var letterRadioInput = helper.node("input|class:link-form-input-display-letter,id:link-form-input-display-letter,type:radio,name:link-form-input-display,tabindex:1,checked,value:letter");
+    var letterRadioLable = helper.node("label:Letters|for:link-form-input-display-letter");
+    var iconRadioInputWrap = helper.node("div|class:input-wrap");
+    var iconRadioInput = helper.node("input|class:link-form-input-display-icon,id:link-form-input-display-icon,type:radio,name:link-form-input-display,tabindex:1,value:icon");
+    var iconRadioLable = helper.node("label:Icon|for:link-form-input-display-icon");
+
+    letterRadioInputWrap.appendChild(letterRadioInput);
+    letterRadioInputWrap.appendChild(letterRadioLable);
+    fieldset.appendChild(letterRadioInputWrap);
+    letterInputWrap.appendChild(letterInput);
+    letterFormIndet.appendChild(letterInputWrap);
+    fieldset.appendChild(letterFormIndet);
+    iconRadioInputWrap.appendChild(iconRadioInput);
+    iconRadioInputWrap.appendChild(iconRadioLable);
+    fieldset.appendChild(iconRadioInputWrap);
+    iconFormGroupClear.appendChild(iconFormGroupClearIcon);
+    iconFormGroup.appendChild(iconInput);
+    iconFormGroup.appendChild(iconFormGroupText);
+    iconFormGroup.appendChild(iconFormGroupClear);
+    iconFormGroupWrap.appendChild(iconFormGroup);
+    iconFormGroupWrap.appendChild(iconPara);
+    iconFormIndet.appendChild(iconFormGroupWrap);
+    fieldset.appendChild(iconFormIndet);
+    fieldset.appendChild(helper.node("hr"));
+    nameInputWrap.appendChild(nameLabel);
+    nameInputWrap.appendChild(nameInput);
+    fieldset.appendChild(nameInputWrap);
+    urlInputWrap.appendChild(urlLabel);
+    urlInputWrap.appendChild(urlInput);
+    fieldset.appendChild(urlInputWrap);
+    fieldset.appendChild(helper.node("hr"));
+    colorFormGroup.appendChild(colorInput);
+    colorButtonRefresh.appendChild(colorButtonRefreshIcon);
+    colorFormGroup.appendChild(colorButtonRefresh);
+    colorWrap.appendChild(colorLabel);
+    colorWrap.appendChild(colorFormGroup);
+    colorWrap.appendChild(colorPara);
+    fieldset.appendChild(colorWrap);
+    form.appendChild(fieldset);
+
+    letterRadioInput.addEventListener("change", function(event) {
+      stagedLink.data.display = this.value;
+    }, false);
+    iconRadioInput.addEventListener("change", function(event) {
+      stagedLink.data.display = this.value;
+    }, false);
+    letterInput.addEventListener("input", function(event) {
+      stagedLink.data.letter = this.value;
+    }, false);
+    nameInput.addEventListener("input", function(event) {
+      stagedLink.data.name = this.value;
+    }, false);
+    urlInput.addEventListener("input", function(event) {
+      stagedLink.data.url = this.value;
+    }, false);
+    colorInput.addEventListener("change", function(event) {
+      stagedLink.data.accent.override = true;
+      stagedLink.data.accent.color = helper.hexToRgb(this.value);
+    }, false);
+    colorButtonRefresh.addEventListener("click", function(event) {
+      colorInput.value = helper.rgbToHex(state.get().theme.accent.current);
+      stagedLink.data.accent.override = false;
+      stagedLink.data.accent.color = {
+        r: null,
+        g: null,
+        b: null
+      };
+    }, false);
+    iconFormGroupClear.addEventListener("click", function(event) {
+      stagedLink.data.icon.name = null;
+      stagedLink.data.icon.prefix = null;
+      stagedLink.data.icon.label = null;
+      var existingIcon = helper.e(".link-form-icon");
+      if (existingIcon) {
+        existingIcon.remove();
+      };
+      iconInput.value = "";
+    }, false);
+    letterRadioInput.addEventListener("change", function(event) {
+      letterInput.removeAttribute("disabled");
+      iconInput.setAttribute("disabled", "");
+      iconFormGroupText.setAttribute("disabled", "");
+      iconPara.setAttribute("disabled", "");
+      iconFormGroupClear.setAttribute("disabled", "");
+      iconFormGroupText.tabIndex = -1;
+    }, false);
+    iconRadioInput.addEventListener("change", function(event) {
+      letterInput.setAttribute("disabled", "");
+      iconInput.removeAttribute("disabled");
+      iconFormGroupText.removeAttribute("disabled");
+      iconPara.removeAttribute("disabled");
+      iconFormGroupClear.removeAttribute("disabled");
+      iconFormGroupText.tabIndex = 1;
+    }, false);
+    autoSuggest.bind({
+      input: iconInput,
+      type: "fontawesomeIcon",
+      postFocus: iconFormGroupText
+    });
+    return form;
+  };
+
+  render.autoSuggestIconAction = function(autoSuggestData) {
+    stagedLink.data.icon.label = autoSuggestData.label;
+    stagedLink.data.icon.name = autoSuggestData.name;
+    if (autoSuggestData.styles.includes("solid")) {
+      stagedLink.data.icon.prefix = "fas";
+    } else if (autoSuggestData.styles.includes("brands")) {
+      stagedLink.data.icon.prefix = "fab";
+    };
+    var existingIcon = helper.e(".link-form-icon");
+    if (existingIcon) {
+      existingIcon.remove();
+    };
+    helper.e(".link-form-input-icon").value = autoSuggestData.label;
+    helper.e(".link-form-text-icon").appendChild(helper.node("span|class:link-form-icon " + stagedLink.data.icon.prefix + " fa-" + stagedLink.data.icon.name));
+    helper.e(".link-form-text-icon").focus();
+  };
+
+  var mod = {};
+
+  mod.accent = {
+    clear: function() {
+      bookmarks.get().forEach(function(arrayItem, index) {
+        arrayItem.accent = {
+          override: false,
+          color: {
+            r: null,
+            g: null,
+            b: null
+          }
+        };
+      });
+    },
+    rainbow: function() {
       var units = 360 / bookmarks.get().length;
       var degree = 0;
       bookmarks.get().forEach(function(arrayItem, index) {
@@ -678,20 +680,18 @@ var link = (function() {
         });
         degree = degree + units;
       });
-  };
-
-  accent.clear = function() {
-    bookmarks.get().forEach(function(arrayItem, index) {
-      arrayItem.accent = {
-        override: false,
-        color: {
-          r: null,
-          g: null,
-          b: null
     }
   };
+
+  mod.edit = function() {
+    if (bookmarks.get().length <= 0) {
+      helper.setObject({
+        object: state.get(),
+        path: "link.edit",
+        newValue: false
       });
     };
+  };
 
   var init = function() {
     render.area.width();
@@ -700,19 +700,13 @@ var link = (function() {
     render.item.display.letter();
     render.item.display.icon();
     render.item.name();
-    bind();
+    bind.sort();
   };
 
   // exposed methods
   return {
-    stagedBookmarkData: stagedBookmarkData,
-    autoSuggestIconAction: autoSuggestIconAction,
-    accent: accent,
     init: init,
-    clear: clear,
+    mod: mod,
-    add: add,
-    edit: edit,
-    remove: remove,
     render: render
   };
 

src/js/search.js

@@ -7,7 +7,7 @@ var search = (function() {
     searchInput.addEventListener("input", function() {
       mod.searching.set();
       render.clear.button();
-      link.clear();
+      link.render.clear();
       link.render.item.all();
       sortable(".link-area");
     }, false);
@@ -19,7 +19,7 @@ var search = (function() {
       render.clear.input();
       mod.searching.set();
       render.clear.button();
-      link.clear();
+      link.render.clear();
       link.render.item.all();
       sortable(".link-area");
     }, false);

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "3.40.0";
+  var current = "3.41.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");

src/manifest.json

@@ -2,7 +2,7 @@
   "name": "nightTab",
   "short_name": "nightTab",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-  "version": "3.40.0",
+  "version": "3.41.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"