From 839683b4e1f90595a0b87f9fa1ce03210859f2a5 Mon Sep 17 00:00:00 2001
From: Ben Busby <contact@benbusby.com>
Date: Mon, 1 Aug 2022 13:01:12 -0600
Subject: [PATCH] Allow result navigation w/ Tab and Shift+Tab

Closes #457
---
 app/static/js/keyboard.js | 86 +++++++++++++++++++++++----------------
 1 file changed, 50 insertions(+), 36 deletions(-)

diff --git a/app/static/js/keyboard.js b/app/static/js/keyboard.js
index 7fd05ef..14df9d5 100644
--- a/app/static/js/keyboard.js
+++ b/app/static/js/keyboard.js
@@ -1,44 +1,58 @@
 (function () {
-	let searchBar, results;
-	const keymap = {
-		ArrowUp: goUp,
-		ArrowDown: goDown,
-		k: goUp,
-		j: goDown,
-		'/': focusSearch,
-	};
-	let activeIdx = -1;
+    let searchBar, results;
+    let shift = false;
+    const keymap = {
+        ArrowUp: goUp,
+        ArrowDown: goDown,
+        ShiftTab: goUp,
+        Tab: goDown,
+        k: goUp,
+        j: goDown,
+        '/': focusSearch,
+    };
+    let activeIdx = -1;
 
-	document.addEventListener('DOMContentLoaded', () => {
-		searchBar = document.querySelector('#search-bar');
-		results = document.querySelectorAll('#main>div>div>div>a');
-	});
+    document.addEventListener('DOMContentLoaded', () => {
+        searchBar = document.querySelector('#search-bar');
+        results = document.querySelectorAll('#main>div>div>div>a');
+    });
 
-	document.addEventListener('keydown', (e) => {
-		if (e.target.tagName === 'INPUT') return true;
-		if (typeof keymap[e.key] === 'function') {
-			e.preventDefault();
-			keymap[e.key]();
-		}
-	});
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Shift') {
+            shift = true;
+        }
 
-	function goUp () {
-		if (activeIdx > 0) focusResult(activeIdx - 1);
-		else focusSearch();
-	}
+        if (e.target.tagName === 'INPUT') return true;
+        if (typeof keymap[e.key] === 'function') {
+            e.preventDefault();
 
-	function goDown () {
-		if (activeIdx < results.length - 1) focusResult(activeIdx + 1);
-	}
+            keymap[`${shift && e.key == 'Tab' ? 'Shift' : ''}${e.key}`]();
+        }
+    });
 
-	function focusResult (idx) {
-		activeIdx = idx;
-		results[activeIdx].scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
-		results[activeIdx].focus();
-	}
+    document.addEventListener('keyup', (e) => {
+        if (e.key === 'Shift') {
+            shift = false;
+        }
+    });
 
-	function focusSearch () {
-		activeIdx = -1;
-		searchBar.focus();
-	}
+    function goUp () {
+        if (activeIdx > 0) focusResult(activeIdx - 1);
+        else focusSearch();
+    }
+
+    function goDown () {
+        if (activeIdx < results.length - 1) focusResult(activeIdx + 1);
+    }
+
+    function focusResult (idx) {
+        activeIdx = idx;
+        results[activeIdx].scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
+        results[activeIdx].focus();
+    }
+
+    function focusSearch () {
+        activeIdx = -1;
+        searchBar.focus();
+    }
 }());