From a85bb7cc22738b2b62815dd75cec1156b90f1d7b Mon Sep 17 00:00:00 2001
From: Koen Lageveen <koen.lageveen@me.com>
Date: Wed, 23 Jan 2019 21:08:51 +0100
Subject: [PATCH] fix #30 add basic keyboard browsing

---
 index.css  |  3 +++
 index.html |  2 +-
 index.js   | 40 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/index.css b/index.css
index 8bc71a2..9931af1 100644
--- a/index.css
+++ b/index.css
@@ -84,6 +84,9 @@ section.select-list {
 	overflow: auto;
 	-webkit-overflow-scrolling: touch;
 }
+section.select-list:focus {
+	outline: none;
+}
 section.select-list .entry {
 	position: relative;
 	display: flex;
diff --git a/index.html b/index.html
index 0f48d29..3de2514 100755
--- a/index.html
+++ b/index.html
@@ -89,7 +89,7 @@
 
 	<div class="article-wrapper">
 		<article>
-			<section class="select-list">
+			<section class="select-list" tabindex="0">
 				<div id="select-font">
 					<!-- filled from json -->
 				</div>
diff --git a/index.js b/index.js
index 8c81227..991e425 100644
--- a/index.js
+++ b/index.js
@@ -145,6 +145,26 @@ function toggleFavorite(alias) {
 	return false;
 }
 
+function nextFont() {
+	const activeLink = document.querySelector(".entry .active");
+	const activeEntry = activeLink.parentNode;
+	const next = activeEntry.nextSibling;
+	if (next && next.matches(".entry")) {
+		next.querySelector("a").click();
+		next.scrollIntoView();
+	}
+}
+
+function previousFont() {
+	const activeLink = document.querySelector(".entry .active");
+	const activeEntry = activeLink.parentNode;
+	const next = activeEntry.previousSibling;
+	if (next && next.matches(".entry")) {
+		next.querySelector("a").click();
+		next.scrollIntoView();
+	}
+}
+
 $(document).ready(function() {
 	var cookieValueSpacing = document.cookie.replace(/(?:(?:^|.*;\s*)spacing\s*=\s*([^;]*).*$)|^.*$/, "$1");
 	var cookieValueSize = document.cookie.replace(/(?:(?:^|.*;\s*)size\s*=\s*([^;]*).*$)|^.*$/, "$1");
@@ -186,4 +206,24 @@ $(document).ready(function() {
 		$("#select-theme :selected").prev().prop("selected", true);
 		selectTheme();
 	});
+
+	$("body").on("keydown", function(event) {
+		if (
+			event.target === document.querySelector(".select-list")
+			&& ! event.ctrlKey
+			&& ! event.altKey
+			&& ! event.metaKey
+			&& ! event.shiftKey
+		) {
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				event.stopPropagation();
+				previousFont();
+			} else if (event.key === "ArrowDown") {
+				event.preventDefault();
+				event.stopPropagation();
+				nextFont();
+			}
+		}
+	});
 });