feat: custom shortcut with mouse buttons #91;

MapoMagpie · Sep 27, 2024 · 21216d8 · 21216d8
1 parent c0e411f
commit 21216d8
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 24 deletions.
diff --git a/eh-view-enhance.user.js b/eh-view-enhance.user.js
@@ -6331,9 +6331,15 @@ before contentType: ${contentType}, after contentType: ${blob.type}
     if (event.shiftKey) keys.push("Shift");
     if (event.altKey) keys.push("Alt");
     if (event.metaKey) keys.push("Meta");
-    let key = event.key;
-    if (key === " ") key = "Space";
-    keys.push(key);
+    if (event instanceof KeyboardEvent) {
+      let key = event.key;
+      if (key === " ") key = "Space";
+      keys.push(key);
+    }
+    if (event instanceof MouseEvent) {
+      let key = "M" + event.button;
+      keys.push(key);
+    }
     return keys.join("+");
   }
 
@@ -6641,7 +6647,9 @@ before contentType: ${contentType}, after contentType: ${blob.type}
       keys.forEach((key) => addKeyboardDescElement(button, category, id, key));
       const addKeyBoardDesc = (event) => {
         event.preventDefault();
-        if (event.key === "Alt" || event.key === "Shift" || event.key === "Control") return;
+        if (event instanceof KeyboardEvent) {
+          if (event.key === "Alt" || event.key === "Shift" || event.key === "Control") return;
+        }
         const key = parseKey(event);
         if (conf.keyboards[category][id] !== void 0) {
           conf.keyboards[category][id].push(key);
@@ -6655,6 +6663,7 @@ before contentType: ${contentType}, after contentType: ${blob.type}
       button.addEventListener("click", () => {
         button.textContent = "Press Key";
         button.addEventListener("keydown", addKeyBoardDesc);
+        button.addEventListener("mousedown", addKeyBoardDesc);
       });
       button.addEventListener("mouseleave", () => {
         button.textContent = "+";
@@ -7255,7 +7264,7 @@ before contentType: ${contentType}, after contentType: ${blob.type}
       });
       if (triggered) {
         event.preventDefault();
-      } else if (event.key.length === 1 && event.key >= "0" && event.key <= "9") {
+      } else if (event instanceof KeyboardEvent && event.key.length === 1 && event.key >= "0" && event.key <= "9") {
         numberRecord = numberRecord ? [...numberRecord, Number(event.key)] : [Number(event.key)];
         event.preventDefault();
       }
@@ -9184,12 +9193,21 @@ ${chapters.map((c, i) => `<div><label>
       EBUS.emit("toggle-main-view", stage === "open");
     });
     HTML.currPageElement.addEventListener("wheel", (event) => BIFM.stepNext(event.deltaY > 0 ? "next" : "prev", event.deltaY > 0 ? -1 : 1, parseInt(HTML.currPageElement.textContent) - 1));
-    document.addEventListener("keydown", (event) => events.keyboardEvent(event));
-    HTML.fullViewGrid.addEventListener("keydown", (event) => {
+    document.addEventListener("keyup", (event) => events.keyboardEvent(event));
+    document.addEventListener("mouseup", (event) => events.keyboardEvent(event));
+    HTML.fullViewGrid.addEventListener("keyup", (event) => {
       events.fullViewGridKeyBoardEvent(event);
       event.stopPropagation();
     });
-    HTML.bigImageFrame.addEventListener("keydown", (event) => {
+    HTML.fullViewGrid.addEventListener("mouseup", (event) => {
+      events.fullViewGridKeyBoardEvent(event);
+      event.stopPropagation();
+    });
+    HTML.bigImageFrame.addEventListener("keyup", (event) => {
+      events.bigImageFrameKeyBoardEvent(event);
+      event.stopPropagation();
+    });
+    HTML.bigImageFrame.addEventListener("mouseup", (event) => {
       events.bigImageFrameKeyBoardEvent(event);
       event.stopPropagation();
     });

diff --git a/src/ui/event.ts b/src/ui/event.ts
@@ -27,9 +27,9 @@ export type KeyboardEvents = {
 }
 export class KeyboardDesc {
   defaultKeys: string[];
-  cb: (event: KeyboardEvent) => void;
+  cb: (event: KeyboardEvent | MouseEvent) => void;
   noPreventDefault?: boolean = false;
-  constructor(defaultKeys: string[], cb: (event: KeyboardEvent) => void, noPreventDefault?: boolean) {
+  constructor(defaultKeys: string[], cb: (event: KeyboardEvent | MouseEvent) => void, noPreventDefault?: boolean) {
     this.defaultKeys = defaultKeys;
     this.cb = cb;
     this.noPreventDefault = noPreventDefault || false;
@@ -222,7 +222,6 @@ export function initEvents(HTML: Elements, BIFM: BigImageFrameManager, IFQ: IMGF
     // document.body.focus();
   }
 
-  // keyboardEvents
   function shouldStep(oriented: Oriented, shouldPrevent: boolean): boolean {
     if (BIFM.isReachedBoundary(oriented)) {
       if (shouldPrevent && BIFM.tryPreventStep()) return false;
@@ -379,7 +378,7 @@ export function initEvents(HTML: Elements, BIFM: BigImageFrameManager, IFQ: IMGF
   // use keyboardEvents
   let numberRecord: number[] | null = null;
 
-  function bigImageFrameKeyBoardEvent(event: KeyboardEvent) {
+  function bigImageFrameKeyBoardEvent(event: KeyboardEvent | MouseEvent) {
     if (HTML.bigImageFrame.classList.contains("big-img-frame-collapse")) return;
     const key = parseKey(event);
     const triggered = Object.entries(keyboardEvents.inBigImageMode).some(([id, desc]) => {
@@ -397,7 +396,7 @@ export function initEvents(HTML: Elements, BIFM: BigImageFrameManager, IFQ: IMGF
     }
   }
 
-  function fullViewGridKeyBoardEvent(event: KeyboardEvent) {
+  function fullViewGridKeyBoardEvent(event: KeyboardEvent | MouseEvent) {
     if (HTML.root.classList.contains("ehvp-root-collapse")) return;
     const key = parseKey(event);
     const triggered = Object.entries(keyboardEvents.inFullViewGrid).some(([id, desc]) => {
@@ -410,13 +409,13 @@ export function initEvents(HTML: Elements, BIFM: BigImageFrameManager, IFQ: IMGF
     });
     if (triggered) {
       event.preventDefault();
-    } else if (event.key.length === 1 && event.key >= "0" && event.key <= "9") {
+    } else if (event instanceof KeyboardEvent && event.key.length === 1 && event.key >= "0" && event.key <= "9") {
       numberRecord = numberRecord ? [...numberRecord, Number(event.key)] : [Number(event.key)];
       event.preventDefault();
     }
   }
 
-  function keyboardEvent(event: KeyboardEvent) {
+  function keyboardEvent(event: KeyboardEvent | MouseEvent) {
     if (!HTML.root.classList.contains("ehvp-root-collapse")) return;
     if (!HTML.bigImageFrame.classList.contains("big-img-frame-collapse")) return;
     const key = parseKey(event);

diff --git a/src/ui/html.ts b/src/ui/html.ts
@@ -173,12 +173,21 @@ export function addEventListeners(events: Events, HTML: Elements, BIFM: BigImage
   HTML.currPageElement.addEventListener("wheel", (event) => BIFM.stepNext(event.deltaY > 0 ? "next" : "prev", event.deltaY > 0 ? -1 : 1, parseInt(HTML.currPageElement.textContent!) - 1));
 
   // Shortcut
-  document.addEventListener("keydown", (event) => events.keyboardEvent(event));
-  HTML.fullViewGrid.addEventListener("keydown", (event) => {
+  document.addEventListener("keyup", (event) => events.keyboardEvent(event));
+  document.addEventListener("mouseup", (event) => events.keyboardEvent(event));
+  HTML.fullViewGrid.addEventListener("keyup", (event) => {
     events.fullViewGridKeyBoardEvent(event)
     event.stopPropagation();
   });
-  HTML.bigImageFrame.addEventListener("keydown", (event) => {
+  HTML.fullViewGrid.addEventListener("mouseup", (event) => {
+    events.fullViewGridKeyBoardEvent(event)
+    event.stopPropagation();
+  });
+  HTML.bigImageFrame.addEventListener("keyup", (event) => {
+    events.bigImageFrameKeyBoardEvent(event);
+    event.stopPropagation();
+  });
+  HTML.bigImageFrame.addEventListener("mouseup", (event) => {
     events.bigImageFrameKeyBoardEvent(event);
     event.stopPropagation();
   });

diff --git a/src/ui/keyboard-custom.ts b/src/ui/keyboard-custom.ts
@@ -106,9 +106,11 @@ export default function createKeyboardCustomPanel(keyboardEvents: KeyboardEvents
       keys = (keyboardEvents[category] as IDDesc)[id].defaultKeys;
     }
     keys.forEach((key) => addKeyboardDescElement(button, category, id, key));
-    const addKeyBoardDesc = (event: KeyboardEvent) => {
+    const addKeyBoardDesc = (event: KeyboardEvent | MouseEvent) => {
       event.preventDefault();
-      if (event.key === "Alt" || event.key === "Shift" || event.key === "Control") return;
+      if (event instanceof KeyboardEvent) {
+        if (event.key === "Alt" || event.key === "Shift" || event.key === "Control") return;
+      }
       const key = parseKey(event);
       if ((conf.keyboards[category] as IDKeys)[id] !== undefined) {
         (conf.keyboards[category] as IDKeys)[id]!.push(key);
@@ -122,6 +124,7 @@ export default function createKeyboardCustomPanel(keyboardEvents: KeyboardEvents
     button.addEventListener("click", () => {
       button.textContent = "Press Key";
       button.addEventListener("keydown", addKeyBoardDesc);
+      button.addEventListener("mousedown", addKeyBoardDesc);
     });
     button.addEventListener("mouseleave", () => {
       button.textContent = "+";

diff --git a/src/utils/keyboard.ts b/src/utils/keyboard.ts
@@ -1,11 +1,17 @@
-export default function parseKey(event: KeyboardEvent) {
+export default function parseKey(event: KeyboardEvent | MouseEvent) {
   const keys = [];
   if (event.ctrlKey) keys.push("Ctrl");
   if (event.shiftKey) keys.push("Shift");
   if (event.altKey) keys.push("Alt");
   if (event.metaKey) keys.push("Meta");
-  let key = event.key;
-  if (key === " ") key = "Space";
-  keys.push(key);
+  if (event instanceof KeyboardEvent) {
+    let key = event.key;
+    if (key === " ") key = "Space";
+    keys.push(key);
+  }
+  if (event instanceof MouseEvent) {
+    let key = "M" + event.button;
+    keys.push(key);
+  }
   return keys.join("+");
 }