[refactor] improve search results

css/link.css

@@ -70,8 +70,8 @@
 .link-item-placeholder {
   background-color: rgba(var(--theme-accent), 0.2);
   border-radius: var(--theme-radius);
-  width:  100%;
-  height:  100%;
+  width: 100%;
+  height: 100%;
   position: relative;
   top: 50%;
   left: 50%;
@@ -398,7 +398,7 @@
 
 .link-empty-heading {
   color: rgb(var(--gray-16));
-  font-size: 1.5rem;
+  margin-bottom: 0.5em;
 }
 
 .is-link-style-list .link-name {

js/control.js

@@ -1279,7 +1279,7 @@ var control = (function() {
     type: "radio",
     func: function() {
       dependents();
-      search.render();
+      search.render.engine();
     }
   }, {
     element: helper.e(".control-header-search-engine-duckduckgo"),
@@ -1287,7 +1287,7 @@ var control = (function() {
     type: "radio",
     func: function() {
       dependents();
-      search.render();
+      search.render.engine();
     }
   }, {
     element: helper.e(".control-header-search-engine-youtube"),
@@ -1295,7 +1295,7 @@ var control = (function() {
     type: "radio",
     func: function() {
       dependents();
-      search.render();
+      search.render.engine();
     }
   }, {
     element: helper.e(".control-header-search-engine-giphy"),
@@ -1303,7 +1303,7 @@ var control = (function() {
     type: "radio",
     func: function() {
       dependents();
-      search.render();
+      search.render.engine();
     }
   }, {
     element: helper.e(".control-header-search-engine-custom"),
@@ -1311,21 +1311,21 @@ var control = (function() {
     type: "radio",
     func: function() {
       dependents();
-      search.render();
+      search.render.engine();
     }
   }, {
     element: helper.e(".control-header-search-engine-custom-name"),
     path: "header.search.engine.custom.name",
     type: "text",
     func: function() {
-      search.render();
+      search.render.engine();
     }
   }, {
     element: helper.e(".control-header-search-engine-custom-url"),
     path: "header.search.engine.custom.url",
     type: "text",
     func: function() {
-      search.render();
+      search.render.engine();
     }
   }, {
     element: helper.e(".control-header-search-text-align-left"),
@@ -1752,7 +1752,7 @@ var control = (function() {
     func: function() {
       render();
       dependents();
-      search.render();
+      search.render.engine();
     }
   }, {
     element: helper.e(".control-link-item-display-show"),

js/link.js

@@ -531,43 +531,21 @@ var link = (function() {
 
   var _makeEmptySearch = function() {
     var searchInput = helper.e(".search-input");
-    var div = helper.makeNode({
-      tag: "div",
-      attr: [{
-        key: "class",
-        value: "link-empty"
-      }]
-    });
-    var h1 = helper.makeNode({
-      tag: "h1",
-      attr: [{
-        key: "class",
-        value: "link-empty-heading"
-      }],
-      text: "No matching bookmarks found"
-    });
+    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;
   };
 
   var _makeEmptyBookmarks = function() {
     var searchInput = helper.e(".search-input");
-    var div = helper.makeNode({
-      tag: "div",
-      attr: [{
-        key: "class",
-        value: "link-empty"
-      }]
-    });
-    var h1 = helper.makeNode({
-      tag: "h1",
-      attr: [{
-        key: "class",
-        value: "link-empty-heading"
-      }],
-      text: "No bookmarks added"
-    });
+    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;
   };
 

js/search.js

@@ -4,22 +4,26 @@ var search = (function() {
     var searchInput = helper.e(".search-input");
     var searchClear = helper.e(".search-clear");
     searchInput.addEventListener("input", function() {
-      _toggle(this);
-      _searchClear();
+      _toggle();
+      render.clear.button();
       link.clear();
       link.render.item.all();
       sortable(".link-area");
     }, false);
     searchClear.addEventListener("click", function() {
-      _toggle(this);
-      _searchClear();
-      clear();
+      render.clear.input();
+      _toggle();
+      render.clear.button();
+      link.clear();
+      link.render.item.all();
+      sortable(".link-area");
     }, false);
   };
 
-  var _toggle = function(input) {
+  var _toggle = function() {
     var html = helper.e("html");
-    if (input.value != "") {
+    var searchInput = helper.e(".search-input");
+    if (searchInput.value != "") {
       helper.setObject({
         object: state.get(),
         path: "search",
@@ -36,16 +40,6 @@ var search = (function() {
     };
   };
 
-  var _searchClear = function() {
-    var searchInput = helper.e(".search-input");
-    var searchClear = helper.e(".search-clear");
-    if (state.get().search) {
-      searchClear.removeAttribute("disabled");
-    } else {
-      searchClear.setAttribute("disabled", "");
-    };
-  };
-
   var get = function() {
     var searchInput = helper.e(".search-input");
     if (state.get().search) {
@@ -71,7 +65,21 @@ var search = (function() {
     };
   };
 
-  var render = function() {
+  var render = {
+    engine: function() {
+      _renderEngine();
+    },
+    clear: {
+      input: function() {
+        _renderClearInput();
+      },
+      button: function() {
+        _renderClearButton();
+      }
+    }
+  };
+
+  var _renderEngine = function() {
     var search = helper.e(".search");
     var searchInput = helper.e(".search-input");
     var placeholder = "";
@@ -85,13 +93,19 @@ var search = (function() {
     search.setAttribute("action", state.get().header.search.engine[state.get().header.search.engine.selected].url);
   };
 
-  var clear = function() {
+  var _renderClearButton = function() {
+    var searchClear = helper.e(".search-clear");
+    if (state.get().search) {
+      searchClear.removeAttribute("disabled");
+    } else {
+      searchClear.setAttribute("disabled", "");
+    };
+  };
+
+  var _renderClearInput = function() {
     var searchInput = helper.e(".search-input");
     searchInput.value = "";
     searchInput.focus();
-    link.clear();
-    link.render.item.all();
-    sortable(".link-area");
   };
 
   var _focus = function() {
@@ -104,7 +118,8 @@ var search = (function() {
 
   var init = function() {
     bind();
-    render();
+    render.engine();
+    _toggle();
     _focus();
   };
 
@@ -112,8 +127,7 @@ var search = (function() {
   return {
     init: init,
     get: get,
-    render: render,
-    clear: clear
+    render: render
   };
 
 })();

js/version.js

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

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.16.3",
+  "version": "3.17.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"