static/js/fixedsearch: Fix a few UI quirks

4 files changed, 65 insertions, 21 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 5bc152e..3fe8ccf 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -1585,6 +1585,7 @@ author-list p {
 search-entry {
   display: inherit;
   width: 100%;
+  z-index: 1;
 }
 
 search-entry[data-focus],
diff --git a/assets/js/index.js b/assets/js/index.js
index bcb4509..c771211 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -327,10 +327,32 @@
     self.addEventListener("DOMContentLoaded", function() {
         const form = document.getElementById("search-form");
         const query = document.getElementById("search-input");
-        document.getElementById("search-submit");
+        const submit = document.getElementById("search-submit");
         const dropdown = document.getElementById("search-results");
         const container = document.getElementById("search-frame");
+        function first(element) {
+            return element.firstChild.nextElementSibling.firstChild.nextElementSibling;
+        }
+        function last(element) {
+            return element.lastElementChild.firstChild.nextElementSibling;
+        }
+        function next(element) {
+            return element.activeElement.parentElement.nextElementSibling.firstChild.nextElementSibling.focus();
+        }
+        function previous(element) {
+            return element.activeElement.parentElement.previousElementSibling.firstChild.nextElementSibling.focus();
+        }
+        function press(keyname) {
+            document.dispatchEvent(new KeyboardEvent("keydown", {
+                "key": keyname
+            }));
+        }
+        submit.addEventListener("click", function(event) {
+            first(dropdown).focus();
+            press("ArrowDown");
+        });
         form.addEventListener("focusin", function() {
+            container.setAttribute("data-focus", "");
             initialize();
         });
         form.addEventListener("submit", function(event) {
@@ -338,29 +360,26 @@
             return false;
         });
         form.addEventListener("keydown", function(event) {
-            const head = dropdown.firstChild.nextElementSibling.firstChild.nextElementSibling;
-            const tail = dropdown.lastElementChild.firstChild.nextElementSibling;
+            const head = first(dropdown);
+            const tail = last(dropdown);
             if (query.contains(event.target)) {
                 if (event.keyCode == 27) {
                     document.activeElement.blur();
                     dropdown.setAttribute("hidden", "");
+                    container.removeAttribute("data-focus");
                 }
             }
             if (event.keyCode == 40) {
                 event.preventDefault();
                 if (document.activeElement == query) head.focus();
                 else if (document.activeElement == tail) query.focus();
-                else {
-                    document.activeElement.parentElement.nextElementSibling.firstChild.nextElementSibling.focus();
-                }
+                else next(document);
             }
             if (event.keyCode == 38) {
                 event.preventDefault();
                 if (document.activeElement == query) tail.focus();
                 else if (document.activeElement == head) query.focus();
-                else {
-                    document.activeElement.parentElement.previousElementSibling.firstChild.nextElementSibling.focus();
-                }
+                else previous(document);
             }
             if (event.keyCode == 8) {
                 if (document.activeElement != query) {
diff --git a/static/js/fixedsearch.ts b/static/js/fixedsearch.ts
index 63a3b4b..938e1f5 100644
--- a/static/js/fixedsearch.ts
+++ b/static/js/fixedsearch.ts
@@ -11,7 +11,37 @@
     const dropdown = document.getElementById("search-results"); // targets the <ul>
     const container = document.getElementById("search-frame"); // targets the upper parent container
 
+    function first(element) {
+      return element.firstChild.nextElementSibling.firstChild
+        .nextElementSibling;
+    }
+
+    function last(element) {
+      return element.lastElementChild.firstChild.nextElementSibling;
+    }
+
+    function next(element) {
+      return element.activeElement.parentElement.nextElementSibling.firstChild
+        .nextElementSibling.focus();
+    }
+
+    function previous(element) {
+      return element.activeElement.parentElement.previousElementSibling
+        .firstChild
+        .nextElementSibling.focus();
+    }
+
+    function press(keyname) {
+      document.dispatchEvent(new KeyboardEvent("keydown", { "key": keyname }));
+    }
+
+    submit.addEventListener("click", function (event) {
+      first(dropdown).focus();
+      press("ArrowDown");
+    });
+
     form.addEventListener("focusin", function () {
+      container.setAttribute("data-focus", "");
       initialize();
     });
 
@@ -21,15 +51,15 @@
     });
 
     form.addEventListener("keydown", function (event) {
-      const head =
-        dropdown.firstChild.nextElementSibling.firstChild.nextElementSibling;
-      const tail = dropdown.lastElementChild.firstChild.nextElementSibling;
+      const head = first(dropdown);
+      const tail = last(dropdown);
 
       // ESC (27)
       if (query.contains(event.target)) {
         if (event.keyCode == 27) {
           document.activeElement.blur();
           dropdown.setAttribute("hidden", "");
+          container.removeAttribute("data-focus");
         }
       }
 
@@ -38,10 +68,7 @@
         event.preventDefault();
         if (document.activeElement == query) head.focus();
         else if (document.activeElement == tail) query.focus();
-        else {
-          document.activeElement.parentElement.nextElementSibling.firstChild
-            .nextElementSibling.focus();
-        }
+        else next(document);
       }
 
       // UP (38)
@@ -49,10 +76,7 @@
         event.preventDefault();
         if (document.activeElement == query) tail.focus();
         else if (document.activeElement == head) query.focus();
-        else {
-          document.activeElement.parentElement.previousElementSibling.firstChild
-            .nextElementSibling.focus();
-        }
+        else previous(document);
       }
 
       // BACKSPACE (8)
diff --git a/themes/default/layouts/_default/home.sources.html b/themes/default/layouts/_default/home.sources.html
index 6b7f866..4d485e7 100644
--- a/themes/default/layouts/_default/home.sources.html
+++ b/themes/default/layouts/_default/home.sources.html
@@ -105,7 +105,7 @@
         &middot; Feather Icons by Cole Bemis: <a href="https://github.com/feathericons/feather/blob/8b5d6802fa8fd1eb3924b465ff718d2fa8d61efe/LICENSE">MIT License</a>
         &middot; Tabler Icons by Paweł Kuna: <a href="https://github.com/tabler/tabler-icons/blob/60f39297d0f785f2e8635faca6857b2260b2d164/LICENSE">MIT License</a>
         &middot; Instant Page by Alexandre Dieulot: <a href="https://github.com/instantpage/instant.page/blob/729e97d5b3245552e41d8f92ed03d08f1d62ea46/LICENSE">MIT License</a>
-        &middot; Fixed Search by Heracles Papatheodorou: <a href="https://gist.github.com/Arty2/8b0c43581013753438a3d35c15091a9f#file-license-md">License</a>
+        &middot; Fixed Search by Heracles Papatheodorou: <a href="https://gist.github.com/Arty2/8b0c43581013753438a3d35c15091a9f#file-license-md">MIT License</a>
         &middot; Fuzzy Sort by Stephen Kamenar: <a href="https://github.com/farzher/fuzzysort/blob/e7f484a124f09bf3cb9a4db366a95457d962dbed/LICENSE">MIT License</a>
       </p>
     </footer>