diff options
Diffstat (limited to 'static/js')
-rw-r--r-- | static/js/fixedsearch.ts | 61 |
1 files changed, 41 insertions, 20 deletions
diff --git a/static/js/fixedsearch.ts b/static/js/fixedsearch.ts index fb53b6b..f8be575 100644 --- a/static/js/fixedsearch.ts +++ b/static/js/fixedsearch.ts @@ -5,11 +5,11 @@ (function () { self.addEventListener("DOMContentLoaded", function () { - const form = document.getElementById("search-form"); // search form - const query = document.getElementById("search-input"); // input box for search - const submit = document.getElementById("search-submit"); // form submit button - const dropdown = document.getElementById("search-results"); // targets the <ul> - const container = document.getElementById("search-frame"); // targets the upper parent container + const form = document.getElementById("search-form"); // targets <form> + const query = document.getElementById("search-input"); // targets <input> + const submit = document.getElementById("search-submit"); // targets <button> + const dropdown = document.getElementById("search-results"); // targets <ul> + const container = document.getElementById("search-frame"); // targets parent function first(element) { return element.firstChild.nextElementSibling.firstChild @@ -35,9 +35,26 @@ document.dispatchEvent(new KeyboardEvent("keydown", { "key": keyname })); } - submit.addEventListener("click", function () { + let selected; + + submit.addEventListener("click", function (event) { + if (selected) { + event.preventDefault(); + selected.focus(); + return selected.click(); + } first(dropdown).focus(); press("ArrowDown"); + document.activeElement.click(); + }); + + ["keyup", "click"].forEach(function (event) { + form.addEventListener(event, function () { + if (document.activeElement.nodeName === "A") { + return selected = document.activeElement; + } + selected = undefined; + }); }); form.addEventListener("focusin", function () { @@ -51,11 +68,8 @@ }); form.addEventListener("keydown", function (event) { - const head = first(dropdown); - const tail = last(dropdown); - // ESC (27) - if (query.contains(event.target)) { + if (form.contains(event.target)) { if (event.keyCode == 27) { document.activeElement.blur(); dropdown.setAttribute("hidden", ""); @@ -63,6 +77,17 @@ } } + // BACKSPACE (8) + if (event.keyCode == 8) { + if (document.activeElement != query) { + event.preventDefault(); + query.focus(); + } + } + + const head = first(dropdown); + const tail = last(dropdown); + // DOWN (40) if (event.keyCode == 40) { event.preventDefault(); @@ -79,14 +104,6 @@ else previous(document); } - // BACKSPACE (8) - if (event.keyCode == 8) { - if (document.activeElement != query) { - event.preventDefault(); - query.focus(); - } - } - // ENTER (13) if (event.keyCode == 13) { if (dropdown && document.activeElement == query) { @@ -109,8 +126,12 @@ scrolls++; }); - document.addEventListener("click", function (event) { - if (!form.contains(event.target) && !(document.activeElement === query)) { + self.addEventListener("click", function (event) { + if ( + !form.contains(event.target) && + !(document.activeElement === query) && + !(document.activeElement === submit) + ) { dropdown.setAttribute("hidden", ""); container.removeAttribute("data-focus"); } |