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 @@
-
+
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();
+ }
+ }
+ });
});