Arrow key navigation + auto scroll

SeanSun6814 · May 30, 2022 · 37e3c72 · 37e3c72
1 parent 1cc1803
commit 37e3c72
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 10 deletions.
diff --git a/src/keyHandlers.js b/src/keyHandlers.js
@@ -6,9 +6,44 @@ document.addEventListener("keydown", function onPress(event) {
   } else if (event.ctrlKey && event.key === "r") {
     event.preventDefault();
     event.stopPropagation();
+  } else if (
+    event.key === "ArrowUp" ||
+    event.key === "ArrowDown" ||
+    event.key === "ArrowLeft" ||
+    event.key === "ArrowRight" ||
+    event.key === "Tab" ||
+    event.key === "Backspace"
+  ) {
+    handleKeyboardNavigation(event.key);
+    event.preventDefault();
+  } else {
+    console.log(event.key);
   }
 });
 
+function handleKeyboardNavigation(direction) {
+  let lastElem = widget.getLastFocusedItem();
+  if (lastElem == null) {
+    widget.focusItem(0, 0);
+  } else if (direction === "ArrowUp") {
+    widget.focusItem(lastElem.layerIdx, lastElem.idx - 1);
+    let newLastElem = widget.getLastFocusedItem();
+    newLastElem.parentColumn.scrollToView(newLastElem.idx);
+  } else if (direction === "ArrowDown") {
+    widget.focusItem(lastElem.layerIdx, lastElem.idx + 1);
+    let newLastElem = widget.getLastFocusedItem();
+    newLastElem.parentColumn.scrollToView(newLastElem.idx);
+  } else if ((direction === "Tab" || direction === "ArrowRight") && lastElem.isFolder) {
+    widget.focusItem(lastElem.layerIdx + 1, 0);
+    onPathHover();
+  } else if ((direction === "Backspace" || direction === "ArrowLeft") && lastElem.layerIdx > 0) {
+    let parentColumn = widget.getColumn(lastElem.layerIdx - 1);
+    let parentElemIdx = parentColumn.getFocusedIdx();
+    widget.focusItem(lastElem.layerIdx - 1, parentElemIdx);
+    onPathHover();
+  }
+}
+
 document.addEventListener("keyup", function onPress(event) {
   if (alertBlockKeyPress) {
     return;

diff --git a/src/widget.js b/src/widget.js
@@ -109,7 +109,9 @@ class Column {
   }
 
   focusItem(idx, sortByIdx) {
-    if (!idxInBounds(idx, this.#data)) return;
+    if (this.#data.length === 0) return;
+    else if (idx < 0) idx = 0;
+    else if (idx >= this.#data.length) idx = this.#data.length - 1;
     this.unfocusItem();
     this.#focusedIdx = idx;
     this.#onFocusCallback(this.#data[this.#focusedIdx], true, sortByIdx);
@@ -166,14 +168,6 @@ class Column {
     liCount.innerHTML = this.#generateCountStr();
   }
 
-  focusPrev() {
-    if (this.#focusedIdx > 0) this.#focusedIdx--;
-  }
-
-  focusNext() {
-    if (this.#focusedIdx < this.#data.length - 1) this.#focusedIdx++;
-  }
-
   scrollToView(idx) {
     if (!idxInBounds(idx, this.#data)) return;
     let top = this.#data[idx].html.offsetTop;
@@ -323,7 +317,8 @@ class Widget {
   }
 
   focusItem(layerIdx, idx, sortByIdx) {
-    if (!idxInBounds(layerIdx, this.#data)) return;
+    if (layerIdx < 0) layerIdx = 0;
+    else if (layerIdx >= this.#data.length) layerIdx = this.#data.length - 1;
     if (sortByIdx === undefined) sortByIdx = config.defaultSortByIdx;
     this.deleteExtraColumns(layerIdx);
     this.#data[layerIdx].focusItem(idx, sortByIdx);