Added shortcut input controls to make custom shortcuts work

resources/js/components/index.js

@@ -44,6 +44,7 @@ import settingAppColorPicker from "./setting-app-color-picker.js"
 import settingColorPicker from "./setting-color-picker.js"
 import shelfSort from "./shelf-sort.js"
 import shortcuts from "./shortcuts";
+import shortcutInput from "./shortcut-input";
 import sidebar from "./sidebar.js"
 import sortableList from "./sortable-list.js"
 import submitOnChange from "./submit-on-change.js"
@@ -103,6 +104,7 @@ const componentMapping = {
     "setting-color-picker": settingColorPicker,
     "shelf-sort": shelfSort,
     "shortcuts": shortcuts,
+    "shortcut-input": shortcutInput,
     "sidebar": sidebar,
     "sortable-list": sortableList,
     "submit-on-change": submitOnChange,

resources/js/components/shortcut-input.js

@@ -0,0 +1,57 @@
+/**
+ * Keys to ignore when recording shortcuts.
+ * @type {string[]}
+ */
+const ignoreKeys = ['Control', 'Alt', 'Shift', 'Meta', 'Super', ' ', '+', 'Tab', 'Escape'];
+
+/**
+ * @extends {Component}
+ */
+class ShortcutInput {
+
+    setup() {
+        this.input = this.$el;
+
+        this.setupListeners();
+    }
+
+    setupListeners() {
+        this.listenerRecordKey = this.listenerRecordKey.bind(this);
+
+        this.input.addEventListener('focus', () => {
+             this.startListeningForInput();
+        });
+
+        this.input.addEventListener('blur', () => {
+            this.stopListeningForInput();
+        })
+    }
+
+    startListeningForInput() {
+        this.input.addEventListener('keydown', this.listenerRecordKey)
+    }
+
+    /**
+     * @param {KeyboardEvent} event
+     */
+    listenerRecordKey(event) {
+        if (ignoreKeys.includes(event.key)) {
+            return;
+        }
+
+        const keys = [
+            event.ctrlKey ? 'Ctrl' : '',
+            event.metaKey ? 'Cmd' : '',
+            event.key,
+        ];
+
+        this.input.value = keys.filter(s => Boolean(s)).join(' + ');
+    }
+
+    stopListeningForInput() {
+        this.input.removeEventListener('keydown', this.listenerRecordKey);
+    }
+
+}
+
+export default ShortcutInput;

resources/js/components/shortcuts.js

@@ -30,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 => {
@@ -46,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.