Disable Reveal shortcuts when drop is active

r-wasm · Jul 24, 2024 · 26ac724 · 26ac724
1 parent 028c487
commit 26ac724
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 41 deletions.
diff --git a/_extensions/drop/drop-runtime.js b/_extensions/drop/drop-runtime.js
diff --git a/drop-runtime/package-lock.json b/drop-runtime/package-lock.json
diff --git a/drop-runtime/package.json b/drop-runtime/package.json
@@ -24,6 +24,7 @@
     "@lezer/python": "^1.1.14",
     "codemirror": "^6.0.1",
     "codemirror-lang-r": "^0.1.0-2",
+    "keycode": "^2.2.1",
     "lezer-r": "^0.1.1",
     "xterm": "^5.3.0"
   }

diff --git a/drop-runtime/src/drop-runtime.ts b/drop-runtime/src/drop-runtime.ts
@@ -1,10 +1,17 @@
 import "./drop-runtime.css";
+import keycode from 'keycode';
 import { startWebRApp, startPyodideApp } from './App';
 
 declare global {
   interface Window {
     Reveal: any;
-    RevealDrop?: any;
+    RevealDrop?: {
+      id: string;
+      dropElement: HTMLDivElement;
+      init: (reveal: any) => void;
+      toggleDrop: () => void;
+      isActive: () => boolean;
+    };
   }
 }
 
@@ -27,11 +34,9 @@ type DropConfig = {
 window.RevealDrop = window.RevealDrop || {
   id: 'RevealDrop',
   dropElement: document.createElement('div'),
-  config: {},
-  init: function() {
-    // Configuration
-    const config = window.Reveal.getConfig().drop as DropConfig;
-    window.RevealDrop.config = config;
+  init: function (reveal) {
+    const revealConfig = reveal.getConfig();
+    const config = revealConfig.drop as DropConfig;
 
     // Add Drop down panel to DOM
     const drop = window.RevealDrop.dropElement;
@@ -67,15 +72,28 @@ window.RevealDrop = window.RevealDrop || {
     }
 
     // Keyboard listeners
+    reveal.addKeyBinding({
+      keyCode: keycode(config.shortcut),
+      key: config.shortcut,
+      description: 'Toggle console'
+    }, () => {});
+
     document.addEventListener("keydown", (event) => {
       if (event.key == config.shortcut && !event.altKey) {
         window.RevealDrop.toggleDrop();
+        reveal.toggleHelp(false);
+        reveal.toggleOverview(false);
+        reveal.configure({ keyboard: !window.RevealDrop.isActive() });
         event.preventDefault();
         event.stopPropagation();
       }
     }, { capture: true });
+
   },
   toggleDrop() {
     window.RevealDrop.dropElement.classList.toggle("active");
+  },
+  isActive() {
+    return window.RevealDrop.dropElement.classList.contains("active");
   }
 };