#134, Focus search field by pressing s or / (#135)

* #134, Focus search field by pressing s or /
* #134, Refactoring away an array loop using indexOf

2 files changed, 24 insertions, 1 deletions

diff --git a/assets/search.js b/assets/search.js
index 9b1c5ab..e064a14 100644
--- a/assets/search.js
+++ b/assets/search.js
@@ -10,6 +10,29 @@
   input.addEventListener('focus', init);
   input.addEventListener('keyup', search);
 
+  document.addEventListener('keypress', focusSearchFieldOnKeyPress);
+
+  function focusSearchFieldOnKeyPress(e) {
+    if (input === document.activeElement) {
+      return;
+    }
+
+    const characterPressed = String.fromCharCode(e.charCode);
+    if (!isHotkey(characterPressed)) {
+      return;
+    }
+
+    input.focus();
+    e.preventDefault();
+  }
+
+  function isHotkey(character) {
+    const dataHotkeys = input.getAttribute('data-hotkeys') || '';
+    const hotkeys = dataHotkeys.split(' ');
+
+    return dataHotkeys.indexOf(character) >= 0;
+  }
+
   function init() {
     input.removeEventListener('focus', init); // init once
     input.required = true;
diff --git a/layouts/partials/docs/search.html b/layouts/partials/docs/search.html
index bb1fa76..b22bba3 100644
--- a/layouts/partials/docs/search.html
+++ b/layouts/partials/docs/search.html
@@ -1,6 +1,6 @@
 {{ if default true .Site.Params.BookSearch }}
 <div class="book-search">
-  <input type="text" id="book-search-input" placeholder="{{ i18n "Search" }}" aria-label="{{ i18n "Search" }}" maxlength="64" />
+  <input type="text" id="book-search-input" placeholder="{{ i18n "Search" }}" aria-label="{{ i18n "Search" }}" maxlength="64" data-hotkeys="s /" />
   <div class="book-search-spinner spinner hidden"></div>
   <ul id="book-search-results"></ul>
 </div>