From 27b84dc22eb86e4d2bb38c8a64410c524b409f65 Mon Sep 17 00:00:00 2001
From: Lauris BH <lauris@nix.lv>
Date: Sat, 29 Jul 2023 16:32:45 +0000
Subject: [PATCH] tab over search results via keyboard #122
---
assets/js/search/index.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 56 insertions(+), 0 deletions(-)
diff --git a/assets/js/search/index.js b/assets/js/search/index.js
index 466a1f2..f1579f8 100644
--- a/assets/js/search/index.js
+++ b/assets/js/search/index.js
@@ -172,6 +172,60 @@
});
}
+function tabOverSearchResults() {
+ search_field.addEventListener('keydown', function (e) {
+ // Prevent curet from moving when up or down is pressed
+ if (e.keyCode === 38 || e.keyCode === 40 || e.keyCode === 13) {
+ e.preventDefault();
+ return;
+ }
+ });
+ search_field.addEventListener('keyup', function (e) {
+ if (e.keyCode !== 38 && e.keyCode !== 40 && e.keyCode !== 13) {
+ return
+ }
+ e.preventDefault();
+
+ var results = e.target.parentNode.getElementsByClassName('search_result');
+ if (results.length === 0) {
+ return;
+ }
+
+ // Find the currently selected result and select the next or previous one
+ var selected = -1;
+ for (var i = 0; i < results.length; i++) {
+ if (results[i].classList.contains('active')) {
+ selected = i;
+ results[i].classList.remove('active');
+ break;
+ }
+ }
+
+ if (e.keyCode === 38) {
+ // For up arrow select the previous result
+ selected = selected === -1 ? results.length - 1 : selected - 1;
+ if (selected < 0) {
+ selected = results.length - 1;
+ }
+
+ results[selected].classList.add('active');
+ return;
+ } else if (e.keyCode === 40) {
+ // For down arrow select the next result
+ selected = selected === -1 ? 0 : selected + 1;
+ if (selected === results.length) {
+ selected = 0;
+ }
+
+ results[selected].classList.add('active');
+ return;
+ }
+
+ window.location.href = results[selected === -1 ? 0 : selected].href;
+ return;
+ });
+}
+
function initializeSearch() {
let main = elem('main');
main = main ? main : elem('.main');
@@ -194,6 +248,8 @@
const is_search = target.closest(search_class) || target.matches(search_class);
!is_search && !search_page_element ? clearSearchResults() : false;
});
+
+ tabOverSearchResults();
}
window.addEventListener('load', () => initializeSearch());
--
Gitblit v1.10.0