aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortdro <tdro@noreply.example.com>2023-02-18 05:57:27 -0500
committertdro <tdro@noreply.example.com>2023-02-18 05:57:27 -0500
commite38f4489f8b080c32f634d3d99113a6c65984b64 (patch)
tree3bee3face713fc89a281e8cd6e0d9e6940349f5c
parent7bcf4c011367564e9f7969313867bdeebf82251d (diff)
downloadcanory-e38f4489f8b080c32f634d3d99113a6c65984b64.tar.gz
canory-e38f4489f8b080c32f634d3d99113a6c65984b64.tar.bz2
canory-e38f4489f8b080c32f634d3d99113a6c65984b64.zip
static/js/fixedsearch: Fix a few UI quirks
-rw-r--r--assets/css/default.css1
-rw-r--r--assets/js/index.js37
-rw-r--r--static/js/fixedsearch.ts46
-rw-r--r--themes/default/layouts/_default/home.sources.html2
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>