[feature] add option to focus search input on load

css/background.css

@@ -6,6 +6,7 @@
   height: 100vh;
   pointer-events: none;
   z-index: var(--z-index-background);
+  animation: appear var(--animation-speed-slow) 1;
 }
 
 .background-image {
@@ -34,3 +35,13 @@
   pointer-events: none;
   display: block;
 }
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

css/form.css

@@ -65,13 +65,15 @@ input[type="text"][disabled]:focus::placeholder {
   box-shadow: none;
 }
 
+input[type="checkbox"][disabled]~.input-helper,
+input[type="radio"][disabled]~.input-helper,
 input[type="email"][disabled]~.input-helper,
 input[type="number"][disabled]~.input-helper,
 input[type="password"][disabled]~.input-helper,
 input[type="search"][disabled]~.input-helper,
 input[type="tel"][disabled]~.input-helper,
 input[type="text"][disabled]~.input-helper {
-  color: rgb(var(--gray-06));
+  color: rgb(var(--gray-04));
 }
 
 input[type="email"]:hover,

index.html

@@ -180,7 +180,12 @@
             </div>
             <div class="checkbox-wrap form-indent-1">
               <input id="control-header-search-grow" class="control-header-search-grow" type="checkbox" tabindex="1">
-              <label for="control-header-search-grow"><span class="label-icon"></span>Fill</label>
+              <label for="control-header-search-grow"><span class="label-icon"></span>Grow to fill available space</label>
+            </div>
+            <div class="checkbox-wrap form-indent-1">
+              <input id="control-header-search-focus" class="control-header-search-focus" type="checkbox" tabindex="1">
+              <label for="control-header-search-focus"><span class="label-icon"></span>Focus on load/refresh</label>
+              <p class="input-helper small muted">May not work in Chrome.</p>
             </div>
             <label class="control-header-search-engine-label form-indent-1 mb-1">Engine</label>
             <div class="radio-wrap form-indent-1">
@@ -243,10 +248,10 @@
             <div class="radio-wrap">
               <input id="control-layout-alignment-vertical-bottom" class="control-layout-alignment-vertical-bottom" type="radio" tabindex="1" name="control-layout-alignment-vertical" value="bottom">
               <label for="control-layout-alignment-vertical-bottom"><span class="label-icon"></span>Bottom</label>
-            </div>
               <p class="input-helper small muted">Available when Bookmarks are not shown.</p>
             </div>
           </div>
+        </div>
         <div class="menu-content-area menu-content-area-bookmarks is-hidden">
           <div class="menu-item">
             <h1 class="menu-header">Bookmarks</h1>

js/control.js

@@ -190,6 +190,7 @@ var control = (function() {
     var _search = function() {
       if (state.get().header.search.active) {
         helper.e(".control-header-search-grow").disabled = false;
+        helper.e(".control-header-search-focus").disabled = false;
         helper.e(".control-header-search-engine-google").disabled = false;
         helper.e(".control-header-search-engine-duckduckgo").disabled = false;
         helper.e(".control-header-search-engine-giphy").disabled = false;
@@ -197,6 +198,7 @@ var control = (function() {
         helper.e(".control-header-search-engine-label").removeAttribute("disabled");
       } else {
         helper.e(".control-header-search-grow").disabled = true;
+        helper.e(".control-header-search-focus").disabled = true;
         helper.e(".control-header-search-engine-google").disabled = true;
         helper.e(".control-header-search-engine-duckduckgo").disabled = true;
         helper.e(".control-header-search-engine-giphy").disabled = true;
@@ -400,10 +402,16 @@ var control = (function() {
         value: this.checked
       });
       render();
-      dependents();
       header.render();
       data.save();
     }, false);
+    helper.e(".control-header-search-focus").addEventListener("change", function() {
+      state.change({
+        path: "header.search.focus",
+        value: this.checked
+      });
+      data.save();
+    }, false);
     helper.eA("input[name='control-header-search-engine']").forEach(function(arrayItem, index) {
       arrayItem.addEventListener("change", function() {
         state.change({
@@ -686,6 +694,7 @@ var control = (function() {
     helper.e(".control-link-sort-" + state.get().link.sort).checked = true;
     helper.e(".control-header-search-active").checked = state.get().header.search.active;
     helper.e(".control-header-search-grow").checked = state.get().header.search.grow;
+    helper.e(".control-header-search-focus").checked = state.get().header.search.focus;
     helper.e(".control-header-search-engine-" + state.get().header.search.engine.selected).checked = true;
     helper.e(".control-header-search-engine-custom-url").value = state.get().header.search.engine.custom.url;
     helper.e(".control-header-date-show-date").checked = state.get().header.date.show.date;

js/init.js

@@ -26,10 +26,6 @@ link.init();
 // render states
 control.init();
 
-// bind search box
-// render search engine
-search.init();
-
 // render date
 // bind date update
 date.init();
@@ -49,3 +45,8 @@ header.init();
 
 // render background image
 background.init();
+
+// bind search box
+// render search engine
+// focus seach input
+search.init();

js/search.js

@@ -71,9 +71,18 @@ var search = (function() {
     link.render();
   };
 
+  var _focus = function() {
+    if (state.get().header.search.focus) {
+      window.addEventListener("load", function(event) {
+        helper.e(".search-input").focus();
+      });
+    };
+  };
+
   var init = function() {
     bind();
     update();
+    _focus();
   };
 
   // exposed methods

js/state.js

@@ -32,6 +32,7 @@ var state = (function() {
         searching: false,
         active: true,
         grow: true,
+        focus: false,
         engine: {
           selected: "google",
           google: {

js/update.js

@@ -48,7 +48,7 @@ var update = (function() {
       url: true
     };
     data.state.layout.alignment = {
-      horizontal: data.state.layout.alignment,
+      horizontal: "left",
       vertical: "top"
     };
     data.state.background = {
@@ -65,6 +65,12 @@ var update = (function() {
     return data;
   };
 
+  var _update_250 = function(data) {
+    data.state.header.search.focus = false;
+    data.version = 2.50;
+    return data;
+  };
+
   // var _update_300 = function(data) {
   //   data.version = 3.00;
   //   return data;
@@ -91,6 +97,10 @@ var update = (function() {
       console.log("\trunning update", 2.40);
       data = _update_240(data);
     };
+    if (data.version < 2.50) {
+      console.log("\trunning update", 2.50);
+      data = _update_250(data);
+    };
     // if (data.version < 3.00) {
     //   console.log("\t# running update", 3.00);
     //   data = _update_300(data);

js/version.js

@@ -1,7 +1,7 @@
 var version = (function() {
 
   // version is normally bumped when the state needs changing or any new functionality is added
-  var current = "2.4.0";
+  var current = "2.5.0";
 
   var get = function() {
     var number = current.split(".");