From 5538ac862ec4dc613adc571b9df3d7abc2565dee Mon Sep 17 00:00:00 2001
From: Tomasz Borychowski <tborychowski@gmail.com>
Date: Sun, 14 Feb 2021 15:50:53 +0000
Subject: [PATCH] add basic keyboard support

---
 app/static/css/header.css  |  6 ++++++
 app/static/js/keyboard.js  | 43 ++++++++++++++++++++++++++++++++++++++
 app/templates/display.html |  5 +++--
 3 files changed, 52 insertions(+), 2 deletions(-)
 create mode 100644 app/static/js/keyboard.js

diff --git a/app/static/css/header.css b/app/static/css/header.css
index 3b24fdc..a7c8461 100644
--- a/app/static/css/header.css
+++ b/app/static/css/header.css
@@ -60,3 +60,9 @@ header {
     margin: 15px;
     display: block;
 }
+
+
+#main>div:focus-within {
+    border-radius: 8px;
+    box-shadow: 0 0 6px 1px #2375e8;
+}
diff --git a/app/static/js/keyboard.js b/app/static/js/keyboard.js
new file mode 100644
index 0000000..98a4a17
--- /dev/null
+++ b/app/static/js/keyboard.js
@@ -0,0 +1,43 @@
+(function () {
+	let searchBar, results;
+	const keymap = {
+		ArrowUp: goUp,
+		ArrowDown: 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('keydown', (e) => {
+		if (typeof keymap[e.key] === 'function') {
+			e.preventDefault();
+			keymap[e.key]();
+		}
+	});
+
+	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();
+	}
+}());
diff --git a/app/templates/display.html b/app/templates/display.html
index f1dc572..30eba0a 100644
--- a/app/templates/display.html
+++ b/app/templates/display.html
@@ -5,8 +5,6 @@
         <link rel="search" href="opensearch.xml" type="application/opensearchdescription+xml" title="Whoogle Search">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="referrer" content="no-referrer">
-        <script type="text/javascript" src="static/js/autocomplete.js"></script>
-        <script type="text/javascript" src="static/js/utils.js"></script>
         <link rel="stylesheet" href="static/css/{{ 'search-dark' if dark_mode else 'search' }}.css">
         <link rel="stylesheet" href="static/css/header.css">
         {% if dark_mode %}
@@ -24,4 +22,7 @@
             <a style="color: #685e79" href="https://github.com/benbusby/whoogle-search">View on GitHub</a>
         </p>
     </footer>
+	<script src="static/js/autocomplete.js"></script>
+	<script src="static/js/utils.js"></script>
+	<script src="static/js/keyboard.js"></script>
 </html>