From 8699198cb13890155a21511505668cc3edd370c4 Mon Sep 17 00:00:00 2001
From: jahugg <jan@huggenberg.ch>
Date: Tue, 21 Feb 2023 16:38:20 +0100
Subject: [PATCH] improved keyboard controls

---
 src/main.js | 91 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 53 insertions(+), 38 deletions(-)

diff --git a/src/main.js b/src/main.js
index e5d08f8..e6d7df9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -123,44 +123,10 @@ function init() {
   document.addEventListener("keydown", onKeyDown);
 }
 
-// get current navigation items
-function getCurrentNavigationItems() {
-  return listItems;
-}
-
-// on keydown event
-function onKeyDown(event) {
-  event.preventDefault();
-  if (event.code === "Tab") {
-    selectNextNavigationItem();
-  }
-}
-
-// on menu item mouseclick
-function onMouseClick(event) {
-  event.preventDefault();
-  const path = event.target.getAttribute("href");
-  navigateTo(path);
-}
-
 // navigate to page
 function navigateTo(path) {
   let navObj = helpers.findNestedObject(navigation, "path", path);
-
-  // is menu
-  if (navObj.hasOwnProperty("submenu")) updateNavigation(navObj);
-  else {
-    //is final page
-    let appEl = document.getElementById("app");
-    let messageEl = document.createElement("div");
-    messageEl.innerHTML = navObj.message;
-    appEl.replaceChildren(messageEl);
-
-    let exitEl = document.createElement("a");
-    exitEl.href = "/";
-    exitEl.innerHTML = "Exit";
-    appEl.appendChild(exitEl);
-  }
+  updateNavigation(navObj);
 }
 
 // update Navigation
@@ -174,8 +140,8 @@ function updateNavigation(object) {
     listEl.appendChild(itemEl);
   }
 
-  // add "back" button
-  if (object.depth === 1 || object.depth === 2) {
+  // add "special back" button
+  if (object.depth > 0) {
     let backItemEl;
     if (object.depth === 1)
       backItemEl = buildNavigationItemEl({
@@ -189,6 +155,12 @@ function updateNavigation(object) {
         path: "/menu",
         command: "back",
       });
+    else if (object.depth === 3)
+      backItemEl = buildNavigationItemEl({
+        label: "Exit",
+        path: "/",
+        command: "exit",
+      });
 
     listEl.appendChild(backItemEl);
   }
@@ -221,6 +193,34 @@ function updateNavigation(object) {
   }
 }
 
+// ==================
+// Mouse Navigation Handling
+
+// on menu item mouseclick
+function onMouseClick(event) {
+  event.preventDefault();
+  const path = event.target.getAttribute("href");
+  navigateTo(path);
+}
+
+// ===================
+// Keyboard Navigation Handling
+
+// on keydown event
+function onKeyDown(event) {
+  event.preventDefault();
+  if (event.code === "Tab" || event.code === "ArrowDown")
+    selectNextNavigationItem();
+  else if (event.code === "ArrowUp") selectPreviousNavigationItem();
+  else if (event.code === "Enter" || event.code === "ArrowRight") {
+    const currentItem = document.querySelector(
+      "#navigation > ul > li[data-selected] a"
+    );
+    const path = currentItem.getAttribute("href");
+    navigateTo(path);
+  }
+}
+
 // select specific navigation item
 function selectNavigationItem(n) {
   // unselect all items
@@ -237,7 +237,7 @@ function selectNavigationItem(n) {
 // select next navigation item
 function selectNextNavigationItem() {
   // get currently selected element
-  let currentItem = document.querySelector(
+  const currentItem = document.querySelector(
     "#navigation > ul > li[data-selected]"
   );
   if (currentItem.nextSibling) {
@@ -246,4 +246,19 @@ function selectNextNavigationItem() {
   } else selectNavigationItem(1);
 }
 
+// select previous navigation item
+function selectPreviousNavigationItem() {
+  // get currently selected element
+  let currentItem = document.querySelector(
+    "#navigation > ul > li[data-selected]"
+  );
+  if (currentItem.previousSibling) {
+    delete currentItem.dataset.selected;
+    currentItem.previousSibling.dataset.selected = "";
+  } else {
+    let childCount = document.querySelector("#navigation > ul").children.length;
+    selectNavigationItem(childCount);
+  }
+}
+
 init();
-- 
GitLab