refactor(wiki): move keydown events to wiki component (#562)

Author: fraxken

public/components/wiki/wiki.js

@@ -13,7 +13,9 @@ export class Wiki {
     const { header, navigation } = documentationUI.render(
       this.documentationRenderContainer, { preCacheAllFlags: true }
     );
+    /** @type {documentationUI.Header} */
     this.header = header;
+    /** @type {Record<string, documentationUI.Navigation>} */
     this.navigation = navigation;
 
     const packageInfoDomElement = document.getElementById(PackageInfo.DOMElementName);
@@ -31,18 +33,51 @@ export class Wiki {
     });
 
     document.addEventListener("keydown", (event) => {
-      const isTargetInput = event.target.tagName === "INPUT";
-      const isTargetPopup = event.target.id === "popup--background";
-      if (isTargetInput || isTargetPopup) {
-        return;
+      this.#keydownHotkeys(event);
+      if (this.isOpen) {
+        this.#keydownArrows(event);
       }
+    });
+  }
+
+  /**
+   * @param {KeyboardEvent} event
+   */
+  #keydownHotkeys(event) {
+    const isTargetInput = event.target.tagName === "INPUT";
+    const isTargetPopup = event.target.id === "popup--background";
+    if (isTargetInput || isTargetPopup) {
+      return;
+    }
 
-      const hotkeys = JSON.parse(localStorage.getItem("hotkeys"));
+    const hotkeys = JSON.parse(localStorage.getItem("hotkeys"));
 
-      if (event.key.toUpperCase() === hotkeys.wiki) {
-        this[this.isOpen ? "close" : "open"]();
-      }
-    });
+    if (event.key.toUpperCase() === hotkeys.wiki) {
+      this[this.isOpen ? "close" : "open"]();
+    }
+  }
+
+  /**
+   * @param {KeyboardEvent} event
+   */
+  #keydownArrows(event) {
+    /** @type {documentationUI.Navigation} */
+    const activeNav = this.navigation[this.header.active.getAttribute("data-menu")];
+
+    switch (event.key) {
+      case "ArrowLeft":
+      case "ArrowRight":
+        this.header.switchActiveView();
+        break;
+      case "ArrowUp":
+        activeNav.previous();
+        break;
+      case "ArrowDown":
+        activeNav.next();
+        break;
+      default:
+        break;
+    }
   }
 
   get isOpen() {

workspaces/documentation-ui/index.d.ts

@@ -4,6 +4,7 @@ declare class Header {
   defaultName: string | null;
 
   setNewActiveView(name: string): void;
+  switchActiveView(): void;
 }
 
 declare class Navigation {
@@ -14,6 +15,9 @@ declare class Navigation {
   fetchCallback: (name: string, menu: HTMLElement) => any;
 
   setNewActiveMenu(name: string): void;
+  generateFromIterable(items: Iterable<HTMLElement>): DocumentFragment;
+  next(): void;
+  previous(): void;
 }
 
 export interface RenderDocumentationUIOptions {

workspaces/documentation-ui/index.js

@@ -54,7 +54,9 @@ const kHeaderMenus = Object.entries(kWikiMenus)
 export function render(rootElement, options = {}) {
   const { prefetch = false } = options;
 
+  /** @type {Record<string, Navigation>} */
   const navigation = {};
+  /** @type {HTMLElement[]} */
   const containers = [];
   for (const [name, properties] of Object.entries(kWikiMenus)) {
     const nav = new Navigation({
@@ -91,30 +93,6 @@ export function render(rootElement, options = {}) {
   }
   rootElement.appendChild(mainContainer);
 
-  document.addEventListener("keydown", (event) => {
-    const isWikiOpen = document.getElementById("documentation-root-element").classList.contains("slide-in");
-    if (!isWikiOpen) {
-      return;
-    }
-
-    const activeNav = navigation[header.active.getAttribute("data-menu")];
-
-    switch (event.key) {
-      case "ArrowLeft":
-      case "ArrowRight":
-        header.switchActiveView();
-        break;
-      case "ArrowUp":
-        activeNav.previous();
-        break;
-      case "ArrowDown":
-        activeNav.next();
-        break;
-      default:
-        break;
-    }
-  });
-
   return {
     header,
     navigation