From e38f4489f8b080c32f634d3d99113a6c65984b64 Mon Sep 17 00:00:00 2001 From: tdro Date: Sat, 18 Feb 2023 05:57:27 -0500 Subject: static/js/fixedsearch: Fix a few UI quirks --- assets/css/default.css | 1 + assets/js/index.js | 37 +++++++++++++----- static/js/fixedsearch.ts | 46 +++++++++++++++++------ themes/default/layouts/_default/home.sources.html | 2 +- 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