feat(network-navigation): package-info switch (#476)

Author: PierreDemailly

public/components/package/package.js

@@ -15,6 +15,40 @@ export class PackageInfo {
     window.dispatchEvent(new CustomEvent("package-info-closed", { detail: null }));
   }
 
+  /**
+   * @param {"previous"|"next"} direction
+   */
+  static switch(direction) {
+    const packageHTMLElement = document.getElementById(PackageInfo.DOMElementName);
+    const packageNavigation = packageHTMLElement.querySelector(".package-navigation");
+    const activeElement = packageNavigation.querySelector(".active");
+
+    const enabledChilren = [...packageNavigation.children].filter((child) => child.classList.contains("disabled") === false);
+    const activeElementIndex = [...enabledChilren].indexOf(activeElement);
+
+    const nextElement = direction === "next"
+      ? enabledChilren[enabledChilren.length === activeElementIndex + 1 ? 1 : activeElementIndex + 1]
+      : enabledChilren[activeElementIndex === 1 ? enabledChilren.length - 1 : activeElementIndex - 1];
+
+    nextElement.click();
+  }
+
+  /**
+   *
+   * @param {"up"|"down"} direction
+   */
+  static scroll(direction) {
+    const packageHTMLElement = document.getElementById(PackageInfo.DOMElementName);
+    const scrollableContainer = [...packageHTMLElement.querySelectorAll(".package-container")]
+      .find((child) => child.classList.contains("hidden") === false);
+
+    if (scrollableContainer.scrollHeight <= scrollableContainer.clientHeight) {
+      return;
+    }
+
+    scrollableContainer.scrollTop += direction === "up" ? -50 : 50;
+  }
+
   /**
    * @param {*} dependencyVersionData
    * @param {*} dependency

public/core/network-navigation.js

@@ -1,3 +1,6 @@
+// Import Internal Dependencies
+import { PackageInfo } from "../components/package/package.js";
+
 export class NetworkNavigation {
   /**
    * @type {import("@nodesecure/vis-network").NodeSecureDataSet}
@@ -62,6 +65,11 @@ export class NetworkNavigation {
    * Represents the active locked node index.
    */
   #lockedNodesActiveIndex = 0;
+  /**
+   * -`true` package info navigation\
+   * -`false` network navigation
+   */
+  #packageInfoFocus = false;
 
   set currentNodeParams(params) {
     this.#currentNodeParams = params;
@@ -119,6 +127,24 @@ export class NetworkNavigation {
         return;
       }
 
+      if (event.code === "Enter") {
+        this.#packageInfoFocus = !this.#packageInfoFocus;
+        console.log(`[INFO] keyboard navigation switched (focus:${this.#packageInfoFocus ? "package-info" : "network"})`);
+      }
+
+      if (this.#packageInfoFocus) {
+        if (["ArrowLeft", "ArrowRight"].includes(event.code)) {
+          const direction = event.code === "ArrowLeft" ? "previous" : "next";
+          PackageInfo.switch(direction);
+        }
+        else if (["ArrowUp", "ArrowDown"].includes(event.code)) {
+          const direction = event.code === "ArrowUp" ? "up" : "down";
+          PackageInfo.scroll(direction);
+        }
+
+        return;
+      }
+
       const nodeParam = this.#currentNodeParams ?? this.rootNodeParams;
 
       if (this.#nsn.lastHighlightedIds === null) {