[bug] fix link edit and delete while search is active

js/control.js

@@ -2,7 +2,10 @@ var control = (function() {
 
   var state = {
     edit: false,
-    style: "block"
+    style: {
+      block: true,
+      list: false
+    }
   };
 
   var get = function() {
@@ -15,65 +18,76 @@ var control = (function() {
     var controlLinkBlock = helper.e(".control-link-blocks");
     var controlLinkList = helper.e(".control-link-list");
     controlAdd.addEventListener("click", function() {
-      _add();
+      links.add();
     }, false);
     controlEdit.addEventListener("click", function() {
-      _edit();
+      _toggleEdit();
+      render();
+      links.tabIndex();
     }, false);
     controlLinkBlock.addEventListener("click", function() {
       _toggleListStyle("block");
+      render();
       data.save();
     }, false);
     controlLinkList.addEventListener("click", function() {
       _toggleListStyle("list");
+      render();
       data.save();
     }, false);
   };
 
-  var _add = function() {
-    links.add();
-  };
-
-  var _edit = function() {
-    var body = helper.e("body");
-    var controlEdit = helper.e(".control-edit");
+  var _toggleEdit = function() {
     if (state.edit) {
-      helper.removeClass(body, "is-edit");
-      helper.removeClass(controlEdit, "active");
       state.edit = false;
-      links.tabindex();
     } else {
-      helper.addClass(body, "is-edit");
-      helper.addClass(controlEdit, "active");
       state.edit = true;
-      links.tabindex();
     };
   };
 
   var _toggleListStyle = function(style) {
-    state.style = style;
-    render();
+    var action = {
+      block: function() {
+        state.style.block = true;
+        state.style.list = false;
+      },
+      list: function() {
+        state.style.block = false;
+        state.style.list = true;
+      }
+    };
+    action[style]();
   };
 
   var render = function() {
     var html = helper.e("html");
+    var controlEdit = helper.e(".control-edit");
     var controlLinkBlock = helper.e(".control-link-blocks");
     var controlLinkList = helper.e(".control-link-list");
-    var action = {
-      block: function() {
+    var _renderEdit = function() {
+      if (state.edit) {
+        helper.addClass(html, "is-edit");
+        helper.addClass(controlEdit, "active");
+      } else {
+        helper.removeClass(html, "is-edit");
+        helper.removeClass(controlEdit, "active");
+      };
+    };
+    var _renderStyle = function() {
+      if (state.style.block) {
         helper.addClass(html, "is-link-block");
         helper.removeClass(html, "is-link-list");
         helper.addClass(controlLinkBlock, "active");
         helper.removeClass(controlLinkList, "active");
-      },
-      list: function() {
+      } else if (state.style.list) {
         helper.removeClass(html, "is-link-block");
         helper.addClass(html, "is-link-list");
         helper.removeClass(controlLinkBlock, "active");
         helper.addClass(controlLinkList, "active");
-      }
+      };
     };
-    action[state.style]();
+    _renderEdit();
+    _renderStyle();
   };
 
   var restore = function(object) {

js/links.js

@@ -1,5 +1,9 @@
 var links = (function() {
 
+  var currentEditIndex = null;
+
+  var currentAction = null;
+
   var _bind = function(override) {
     var options = {
       element: null,
@@ -25,9 +29,6 @@ var links = (function() {
     }
   };
 
-  var currentEditIndex = null;
-  var currentAction = null;
-
   var add = function() {
     currentAction = "add";
     var form = _makeLinkForm();
@@ -76,7 +77,11 @@ var links = (function() {
     currentEditIndex = null;
     currentAction = null;
     clear();
-    render();
+    if (search.get().search) {
+      search.render();
+    } else {
+      render();
+    };
     data.save();
   };
 
@@ -84,7 +89,11 @@ var links = (function() {
     var index = parseInt(button.closest(".link-item").dataset.index, 10);
     bookmarks.remove(index);
     clear();
-    render();
+    if (search.get().search) {
+      search.render();
+    } else {
+      render();
+    };
     data.save();
   };
 
@@ -227,149 +236,152 @@ var links = (function() {
     return form;
   };
 
+  var _makeLink = function(data, index) {
+    var linkItem = _makeElement({
+      tag: "div",
+      attr: [{
+        key: "class",
+        value: "link-item"
+      }, {
+        key: "data-index",
+        value: index
+      }]
+    });
+    var linkPanelFront = _makeElement({
+      tag: "a",
+      attr: [{
+        key: "class",
+        value: "link-panel-front"
+      }, {
+        key: "href",
+        value: data.url
+      }, {
+        key: "tabindex",
+        value: 1
+      }]
+    });
+    var linkPanelBack = _makeElement({
+      tag: "div",
+      attr: [{
+        key: "class",
+        value: "link-panel-back"
+      }]
+    });
+    var linkLetter = _makeElement({
+      tag: "p",
+      text: data.letter,
+      attr: [{
+        key: "class",
+        value: "link-letter"
+      }, {
+        key: "data-index",
+        value: data.url
+      }]
+    });
+    var linkName = _makeElement({
+      tag: "p",
+      text: data.name,
+      attr: [{
+        key: "class",
+        value: "link-name"
+      }]
+    });
+    var linkUrl = _makeElement({
+      tag: "div",
+      attr: [{
+        key: "class",
+        value: "link-url"
+      }]
+    });
+    var linkUrlText = _makeElement({
+      tag: "p",
+      text: data.url.replace(/^https?\:\/\//i, "").replace(/\/$/, ""),
+      attr: [{
+        key: "class",
+        value: "link-url-text"
+      }]
+    });
+    var linkControl = _makeElement({
+      tag: "div",
+      attr: [{
+        key: "class",
+        value: "link-control"
+      }]
+    });
+    var linkEdit = _makeElement({
+      tag: "button",
+      attr: [{
+        key: "class",
+        value: "button button-small link-control-item link-edit"
+      }, {
+        key: "tabindex",
+        value: -1
+      }]
+    });
+    var linkEditIcon = _makeElement({
+      tag: "span",
+      attr: [{
+        key: "class",
+        value: "button-icon icon-edit"
+      }]
+    });
+    var linkDelete = _makeElement({
+      tag: "button",
+      attr: [{
+        key: "class",
+        value: "button button-small link-control-item link-delete"
+      }, {
+        key: "tabindex",
+        value: -1
+      }]
+    });
+    var linkDeleteIcon = _makeElement({
+      tag: "span",
+      attr: [{
+        key: "class",
+        value: "button-icon icon-close"
+      }]
+    });
+    linkPanelFront.appendChild(linkLetter);
+    linkPanelFront.appendChild(linkName);
+    linkEdit.appendChild(linkEditIcon);
+    linkDelete.appendChild(linkDeleteIcon);
+    linkControl.appendChild(linkEdit);
+    linkControl.appendChild(linkDelete);
+    linkUrl.appendChild(linkUrlText);
+    linkPanelBack.appendChild(linkUrl);
+    linkPanelBack.appendChild(linkControl);
+    linkItem.appendChild(linkPanelFront);
+    linkItem.appendChild(linkPanelBack);
+    _bind({
+      element: linkEdit,
+      action: "edit"
+    });
+    _bind({
+      element: linkDelete,
+      action: "delete"
+    });
+    return linkItem;
+  };
+
   var render = function(array) {
-    var makeLinks = function(arrayOflinks) {
-      arrayOflinks.forEach(function(item, index) {
-        var gridItemBody = helper.e(".grid-item-body");
-        var linkItem = _makeElement({
-          tag: "div",
-          attr: [{
-            key: "class",
-            value: "link-item"
-          }, {
-            key: "data-index",
-            value: index
-          }]
-        });
-        var linkPanelFront = _makeElement({
-          tag: "a",
-          attr: [{
-            key: "class",
-            value: "link-panel-front"
-          }, {
-            key: "href",
-            value: item.url
-          }, {
-            key: "tabindex",
-            value: 1
-          }]
-        });
-        var linkPanelBack = _makeElement({
-          tag: "div",
-          attr: [{
-            key: "class",
-            value: "link-panel-back"
-          }]
-        });
-        var linkLetter = _makeElement({
-          tag: "p",
-          text: item.letter,
-          attr: [{
-            key: "class",
-            value: "link-letter"
-          }, {
-            key: "data-index",
-            value: item.url
-          }]
-        });
-        var linkName = _makeElement({
-          tag: "p",
-          text: item.name,
-          attr: [{
-            key: "class",
-            value: "link-name"
-          }]
-        });
-        var linkUrl = _makeElement({
-          tag: "div",
-          attr: [{
-            key: "class",
-            value: "link-url"
-          }]
-        });
-        var linkUrlText = _makeElement({
-          tag: "p",
-          text: item.url.replace(/^https?\:\/\//i, "").replace(/\/$/, ""),
-          attr: [{
-            key: "class",
-            value: "link-url-text"
-          }]
-        });
-        var linkControl = _makeElement({
-          tag: "div",
-          attr: [{
-            key: "class",
-            value: "link-control"
-          }]
-        });
-        var linkEdit = _makeElement({
-          tag: "button",
-          attr: [{
-            key: "class",
-            value: "button button-small link-control-item link-edit"
-          }, {
-            key: "tabindex",
-            value: -1
-          }]
-        });
-        var linkEditIcon = _makeElement({
-          tag: "span",
-          attr: [{
-            key: "class",
-            value: "button-icon icon-edit"
-          }]
-        });
-        var linkDelete = _makeElement({
-          tag: "button",
-          attr: [{
-            key: "class",
-            value: "button button-small link-control-item link-delete"
-          }, {
-            key: "tabindex",
-            value: -1
-          }]
-        });
-        var linkDeleteIcon = _makeElement({
-          tag: "span",
-          attr: [{
-            key: "class",
-            value: "button-icon icon-close"
-          }]
-        });
-
-        _bind({
-          element: linkEdit,
-          action: "edit"
-        });
-        _bind({
-          element: linkDelete,
-          action: "delete"
-        });
-
-        linkPanelFront.appendChild(linkLetter);
-        linkPanelFront.appendChild(linkName);
-        linkEdit.appendChild(linkEditIcon);
-        // linkEdit.appendChild(linkEditText);
-        linkDelete.appendChild(linkDeleteIcon);
-        // linkDelete.appendChild(linkDeleteText);
-        linkControl.appendChild(linkEdit);
-        linkControl.appendChild(linkDelete);
-        linkUrl.appendChild(linkUrlText);
-        linkPanelBack.appendChild(linkUrl);
-        linkPanelBack.appendChild(linkControl);
-        linkItem.appendChild(linkPanelFront);
-        linkItem.appendChild(linkPanelBack);
-        gridItemBody.appendChild(linkItem);
-      });
-    };
+    console.log("render");
+    var gridItemBody = helper.e(".grid-item-body");
     if (array) {
-      makeLinks(array);
+      array.forEach(function(arrayItem, index) {
+        if (arrayItem.index) {
+          index = arrayItem.index;
+        };
+        gridItemBody.appendChild(_makeLink(arrayItem, index));
+      });
     } else {
-      makeLinks(bookmarks.get());
+      bookmarks.get().forEach(function(arrayItem, index) {
+        gridItemBody.appendChild(_makeLink(arrayItem, index));
+      });
     };
   };
 
-  var tabindex = function() {
+  var tabIndex = function() {
     var allLinkControlItem = helper.eA(".link-control-item");
     if (control.get().edit) {
       allLinkControlItem.forEach(function(arrayItem, index) {
@@ -402,7 +414,7 @@ var links = (function() {
     save: save,
     remove: remove,
     render: render,
-    tabindex: tabindex
+    tabIndex: tabIndex
   };
 
 })();

js/search.js

@@ -1,51 +1,71 @@
 var search = (function() {
 
+  var state = {
+    search: false
+  };
+
+  var get = function() {
+    return state;
+  };
+
   var bind = function() {
     var searchInput = helper.e(".search-input");
     var searchClear = helper.e(".search-clear");
-    searchClear.addEventListener("click", function() {
-      if (search.value != "") {
-        searchInput.value = "";
-      };
-      updateSearchClear();
-      searchInput.focus();
-      links.clear();
-      links.render();
-    }, false);
     searchInput.addEventListener("input", function() {
-      _findResults(this.value);
+      _updateState(this);
+      _updateSearchClear();
+      render();
     }, false);
-    searchInput.addEventListener("keyup", function() {
-      updateSearchClear();
+    searchClear.addEventListener("click", function() {
+      _updateState(this);
+      _updateSearchClear();
+      clear();
     }, false);
   };
 
-  var updateSearchClear = function() {
+  var _updateState = function(input) {
+    if (input.value != "") {
+      state.search = true;
+    } else {
+      state.search = false;
+    };
+  };
+
+  var _updateSearchClear = function() {
     var searchInput = helper.e(".search-input");
     var searchClear = helper.e(".search-clear");
-    if (searchInput.value != "") {
-      // helper.removeClass(searchClear, "is-hidden");
+    if (state.search) {
       searchClear.removeAttribute("disabled");
     } else {
-      // helper.addClass(searchClear, "is-hidden");
       searchClear.setAttribute("disabled", "");
     };
   };
 
-  var _findResults = function(string) {
-    var searchResult = [];
-    bookmarks.get().forEach(function(arrayItem, index) {
-      if (arrayItem.url.replace(/^https?\:\/\//i, "").replace(/\/$/, "").toLowerCase().includes(string.toLowerCase()) || arrayItem.name.toLowerCase().includes(string.toLowerCase())) {
-        searchResult.push(arrayItem);
-      };
+  var render = function() {
+    var searchInput = helper.e(".search-input");
+    if (state.search) {
+      var searchResult = [];
+      bookmarks.get().forEach(function(arrayItem, index) {
+        if (arrayItem.url.replace(/^https?\:\/\//i, "").replace(/\/$/, "").toLowerCase().includes(searchInput.value.toLowerCase()) || arrayItem.name.toLowerCase().includes(searchInput.value.toLowerCase())) {
+          arrayItem.index = index;
+          searchResult.push(arrayItem);
+        };
+      });
       links.clear();
       links.render(searchResult);
-    });
+    } else {
+      links.clear();
+      links.render();
+    };
   };
 
-  var clear = function() {};
-
-  var render = function() {};
+  var clear = function() {
+    var searchInput = helper.e(".search-input");
+    searchInput.value = "";
+    searchInput.focus();
+    links.clear();
+    links.render();
+  };
 
   var init = function() {
     bind();
@@ -54,6 +74,7 @@ var search = (function() {
   // exposed methods
   return {
     init: init,
+    get: get,
     render: render,
     clear: clear
   };

js/theme.js

@@ -1,13 +1,13 @@
 var theme = (function() {
 
-  var accent = {
+  var state = {
     r: 255,
     g: 170,
     b: 51,
   };
 
   var get = function() {
-    return accent;
+    return state;
   };
 
   var bind = function() {
@@ -20,22 +20,22 @@ var theme = (function() {
   };
 
   var _updateAcent = function(input) {
-    accent = helper.hexToRgb(input.value);
+    state = helper.hexToRgb(input.value);
   };
 
   var _updateInput = function() {
     var themeAccent = helper.e(".theme-input");
-    themeAccent.value = helper.rgbToHex(accent);
+    themeAccent.value = helper.rgbToHex(state);
   };
 
   var render = function(input) {
     var html = helper.e("html");
-    html.style.setProperty("--accent", accent.r + ", " + accent.g + ", " + accent.b);
+    html.style.setProperty("--accent", state.r + ", " + state.g + ", " + state.b);
   };
 
   var restore = function(object) {
     if (object) {
-      accent = object;
+      state = object;
       _updateInput();
       render();
     };