Add notice to Page delete confirmation when in use as a template

[bookstack] / resources / js / components / shortcuts.js

diff --git a/resources/js/components/shortcuts.js b/resources/js/components/shortcuts.js
index 7feb9bed047f4c7f7fb480c305fa0b9fcbcf703b..a87213b2e8968070b5a0934cc3db0e6a1ef75fa0 100644 (file)
--- a/resources/js/components/shortcuts.js
+++ b/resources/js/components/shortcuts.js
@@ -1,34 +1,4 @@
-/**
- * The default mapping of unique id to shortcut key.
- * @type {Object<string, string>}
- */
-const defaultMap = {
-    // Header actions
-    "home": "1",
-    "shelves_view": "2",
-    "books_view": "3",
-    "settings_view": "4",
-    "favorites_view": "5",
-    "profile_view": "6",
-    "global_search": "/",
-    "logout": "0",
-
-    // Generic actions
-    "edit": "e",
-    "new": "n",
-    "copy": "c",
-    "delete": "d",
-    "favorite": "f",
-    "export": "x",
-    "sort": "s",
-    "permissions": "p",
-    "move": "m",
-    "revisions": "r",
-
-    // Navigation
-    "next": "ArrowRight",
-    "prev": "ArrowLeft",
-};
+import {Component} from "./component";
 
 function reverseMap(map) {
     const reversed = {};
@@ -38,21 +8,17 @@ function reverseMap(map) {
     return reversed;
 }
 
-/**
- * @extends {Component}
- */
-class Shortcuts {
+
+export class Shortcuts extends Component {
 
     setup() {
         this.container = this.$el;
-        this.mapById = defaultMap;
+        this.mapById = JSON.parse(this.$opts.keyMap);
         this.mapByShortcut = reverseMap(this.mapById);
 
         this.hintsShowing = false;
 
         this.hideHints = this.hideHints.bind(this);
-        // TODO - Allow custom key maps
-        // TODO - Allow turning off shortcuts
 
         this.setupListeners();
     }
@@ -64,13 +30,7 @@ class Shortcuts {
                 return;
             }
 
-            const shortcutId = this.mapByShortcut[event.key];
-            if (shortcutId) {
-                const wasHandled = this.runShortcut(shortcutId);
-                if (wasHandled) {
-                    event.preventDefault();
-                }
-            }
+            this.handleShortcutPress(event);
         });
 
         window.addEventListener('keydown', event => {
@@ -80,6 +40,28 @@ class Shortcuts {
         });
     }
 
+    /**
+     * @param {KeyboardEvent} event
+     */
+    handleShortcutPress(event) {
+
+        const keys = [
+            event.ctrlKey ? 'Ctrl' : '',
+            event.metaKey ? 'Cmd' : '',
+            event.key,
+        ];
+
+        const combo = keys.filter(s => Boolean(s)).join(' + ');
+
+        const shortcutId = this.mapByShortcut[combo];
+        if (shortcutId) {
+            const wasHandled = this.runShortcut(shortcutId);
+            if (wasHandled) {
+                event.preventDefault();
+            }
+        }
+    }
+
     /**
      * Run the given shortcut, and return a boolean to indicate if the event
      * was successfully handled by a shortcut action.
@@ -88,7 +70,6 @@ class Shortcuts {
      */
     runShortcut(id) {
         const el = this.container.querySelector(`[data-shortcut="${id}"]`);
-        console.info('Shortcut run', el);
         if (!el) {
             return false;
         }
@@ -115,6 +96,10 @@ class Shortcuts {
     }
 
     showHints() {
+        const wrapper = document.createElement('div');
+        wrapper.classList.add('shortcut-container');
+        this.container.append(wrapper);
+
         const shortcutEls = this.container.querySelectorAll('[data-shortcut]');
         const displayedIds = new Set();
         for (const shortcutEl of shortcutEls) {
@@ -124,7 +109,7 @@ class Shortcuts {
             }
 
             const key = this.mapById[id];
-            this.showHintLabel(shortcutEl, key);
+            this.showHintLabel(shortcutEl, key, wrapper);
             displayedIds.add(id);
         }
 
@@ -136,24 +121,36 @@ class Shortcuts {
         this.hintsShowing = true;
     }
 
-    showHintLabel(targetEl, key) {
+    /**
+     * @param {Element} targetEl
+     * @param {String} key
+     * @param {Element} wrapper
+     */
+    showHintLabel(targetEl, key, wrapper) {
         const targetBounds = targetEl.getBoundingClientRect();
+
         const label = document.createElement('div');
         label.classList.add('shortcut-hint');
         label.textContent = key;
-        this.container.append(label);
+
+        const linkage = document.createElement('div');
+        linkage.classList.add('shortcut-linkage');
+        linkage.style.left = targetBounds.x + 'px';
+        linkage.style.top = targetBounds.y + 'px';
+        linkage.style.width = targetBounds.width + 'px';
+        linkage.style.height = targetBounds.height + 'px';
+
+        wrapper.append(label, linkage);
 
         const labelBounds = label.getBoundingClientRect();
 
-        label.style.insetInlineStart = `${((targetBounds.x + targetBounds.width) - (labelBounds.width + 12))}px`;
+        label.style.insetInlineStart = `${((targetBounds.x + targetBounds.width) - (labelBounds.width + 6))}px`;
         label.style.insetBlockStart = `${(targetBounds.y + (targetBounds.height - labelBounds.height) / 2)}px`;
     }
 
     hideHints() {
-        const hints = this.container.querySelectorAll('.shortcut-hint');
-        for (const hint of hints) {
-            hint.remove();
-        }
+        const wrapper = this.container.querySelector('.shortcut-container');
+        wrapper.remove();
 
         window.removeEventListener('scroll', this.hideHints);
         window.removeEventListener('focus', this.hideHints);
@@ -162,6 +159,4 @@ class Shortcuts {
 
         this.hintsShowing = false;
     }
-}
-
-export default Shortcuts;
\ No newline at end of file
+}
\ No newline at end of file