Refactor hotkey handling (#1250)

* Create HotkeyHandler

* Update Display to use HotkeyHandler

ext/bg/js/search.js

@@ -44,7 +44,7 @@ class DisplaySearch extends Display {
         });
         this.autoPlayAudioDelay = 0;
 
-        this.registerActions([
+        this.hotkeyHandler.registerActions([
             ['focusSearchBox', this._onActionFocusSearchBox.bind(this)]
         ]);
     }
@@ -73,6 +73,7 @@ class DisplaySearch extends Display {
         window.addEventListener('copy', this._onCopy.bind(this));
         this._clipboardMonitor.on('change', this._onExternalSearchUpdate.bind(this));
         this._clipboardMonitorEnableCheckbox.addEventListener('change', this._onClipboardMonitorEnableChange.bind(this));
+        this.hotkeyHandler.on('keydownNonHotkey', this._onKeyDown.bind(this));
 
         this._onModeChange();
 
@@ -81,19 +82,6 @@ class DisplaySearch extends Display {
         this._isPrepared = true;
     }
 
-    onKeyDown(e) {
-        if (
-            !super.onKeyDown(e) &&
-            document.activeElement !== this._queryInput &&
-            !e.ctrlKey &&
-            !e.metaKey &&
-            !e.altKey &&
-            e.key.length === 1
-        ) {
-            this._queryInput.focus({preventScroll: true});
-        }
-    }
-
     postProcessQuery(query) {
         if (this._wanakanaEnabled) {
             try {
@@ -115,6 +103,18 @@ class DisplaySearch extends Display {
 
     // Private
 
+    _onKeyDown(e) {
+        if (
+            document.activeElement !== this._queryInput &&
+            !e.ctrlKey &&
+            !e.metaKey &&
+            !e.altKey &&
+            e.key.length === 1
+        ) {
+            this._queryInput.focus({preventScroll: true});
+        }
+    }
+
     async _onOptionsUpdated() {
         await this.updateOptions();
         const query = this._queryInput.value;

ext/bg/search.html

@@ -92,6 +92,7 @@
 <script src="/mixed/js/display-history.js"></script>
 <script src="/mixed/js/display-notification.js"></script>
 <script src="/mixed/js/dynamic-loader.js"></script>
+<script src="/mixed/js/hotkey-handler.js"></script>
 <script src="/mixed/js/media-loader.js"></script>
 <script src="/mixed/js/scroll.js"></script>
 <script src="/mixed/js/text-scanner.js"></script>

ext/fg/float.html

@@ -108,6 +108,7 @@
 <script src="/mixed/js/document-focus-controller.js"></script>
 <script src="/mixed/js/dynamic-loader.js"></script>
 <script src="/mixed/js/frame-endpoint.js"></script>
+<script src="/mixed/js/hotkey-handler.js"></script>
 <script src="/mixed/js/media-loader.js"></script>
 <script src="/mixed/js/panel-element.js"></script>
 <script src="/mixed/js/scroll.js"></script>

ext/mixed/js/display.js

@@ -24,6 +24,7 @@
  * DocumentUtil
  * FrameEndpoint
  * Frontend
+ * HotkeyHandler
  * MediaLoader
  * PopupFactory
  * QueryParser
@@ -59,8 +60,7 @@ class Display extends EventDispatcher {
             japaneseUtil,
             mediaLoader: this._mediaLoader
         });
-        this._hotkeys = new Map();
+        this._hotkeyHandler = new HotkeyHandler(this._pageType);
-        this._actions = new Map();
         this._messageHandlers = new Map();
         this._directMessageHandlers = new Map();
         this._windowMessageHandlers = new Map();
@@ -115,7 +115,7 @@ class Display extends EventDispatcher {
         this._tagNotification = null;
         this._tagNotificationContainer = document.querySelector('#content-footer');
 
-        this.registerActions([
+        this._hotkeyHandler.registerActions([
             ['close',             () => { this.close(); }],
             ['nextEntry',         () => { this._focusEntry(this._index + 1, true); }],
             ['nextEntry3',        () => { this._focusEntry(this._index + 3, true); }],
@@ -183,6 +183,10 @@ class Display extends EventDispatcher {
         return this._depth;
     }
 
+    get hotkeyHandler() {
+        return this._hotkeyHandler;
+    }
+
     async prepare() {
         // State setup
         const {documentElement} = document;
@@ -195,6 +199,7 @@ class Display extends EventDispatcher {
         this._audioSystem.prepare();
         this._queryParser.prepare();
         this._history.prepare();
+        this._hotkeyHandler.prepare();
 
         // Event setup
         this._history.on('stateChanged', this._onStateChanged.bind(this));
@@ -213,7 +218,6 @@ class Display extends EventDispatcher {
             documentElement.addEventListener('auxclick', this._onDocumentElementClick.bind(this), false);
         }
 
-        document.addEventListener('keydown', this.onKeyDown.bind(this), false);
         document.addEventListener('wheel', this._onWheel.bind(this), {passive: false});
         if (this._closeButton !== null) {
             this._closeButton.addEventListener('click', this._onCloseButtonClick.bind(this), false);
@@ -251,27 +255,6 @@ class Display extends EventDispatcher {
         yomichan.logError(error);
     }
 
-    onKeyDown(e) {
-        const key = e.code;
-        const handlers = this._hotkeys.get(key);
-        if (typeof handlers === 'undefined') { return false; }
-
-        const eventModifiers = DocumentUtil.getActiveModifiers(e);
-        for (const {modifiers, action} of handlers) {
-            if (!this._areSame(modifiers, eventModifiers)) { continue; }
-
-            const actionHandler = this._actions.get(action);
-            if (typeof actionHandler === 'undefined') { continue; }
-
-            const result = actionHandler(e);
-            if (result !== false) {
-                e.preventDefault();
-                return true;
-            }
-        }
-        return false;
-    }
-
     getOptions() {
         return this._options;
     }
@@ -375,12 +358,6 @@ class Display extends EventDispatcher {
         }
     }
 
-    registerActions(actions) {
-        for (const [name, handler] of actions) {
-            this._actions.set(name, handler);
-        }
-    }
-
     registerMessageHandlers(handlers) {
         for (const [name, handlerInfo] of handlers) {
             this._messageHandlers.set(name, handlerInfo);
@@ -1595,16 +1572,6 @@ class Display extends EventDispatcher {
         return await api.getDefinitionAudioInfo(source, expression, reading, details);
     }
 
-    _areSame(set, array) {
-        if (set.size !== array.length) { return false; }
-        for (const value of array) {
-            if (!set.has(value)) {
-                return false;
-            }
-        }
-        return true;
-    }
-
     async _setOptionsContextIfDifferent(optionsContext) {
         if (deepEqual(this._optionsContext, optionsContext)) { return; }
         await this.setOptionsContext(optionsContext);
@@ -1911,25 +1878,9 @@ class Display extends EventDispatcher {
         await this._invokeOwner('setFrameSize', {width, height});
     }
 
-    _registerHotkey(key, modifiers, action) {
-        if (!this._actions.has(action)) { return false; }
-
-        let handlers = this._hotkeys.get(key);
-        if (typeof handlers === 'undefined') {
-            handlers = [];
-            this._hotkeys.set(key, handlers);
-        }
-        handlers.push({modifiers: new Set(modifiers), action});
-        return true;
-    }
-
     _updateHotkeys(options) {
-        this._hotkeys.clear();
+        this._hotkeyHandler.clearHotkeys();
-
+        this._hotkeyHandler.registerHotkeys(options.inputs.hotkeys);
-        for (const {action, key, modifiers, scopes, enabled} of options.inputs.hotkeys) {
-            if (!enabled || action === '' || !scopes.includes(this._pageType)) { continue; }
-            this._registerHotkey(key, modifiers, action);
-        }
     }
 
     async _closeTab() {

ext/mixed/js/hotkey-handler.js

@@ -0,0 +1,146 @@
+/*
+ * Copyright (C) 2021  Yomichan Authors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/* global
+ * DocumentUtil
+ */
+
+/**
+ * Class which handles hotkey events and actions.
+ */
+class HotkeyHandler extends EventDispatcher {
+    /**
+     * Creates a new instance of the class.
+     * @param scope The scope required for hotkey definitions.
+     */
+    constructor(scope) {
+        super();
+        this._scope = scope;
+        this._hotkeys = new Map();
+        this._actions = new Map();
+        this._eventListeners = new EventListenerCollection();
+    }
+
+    /**
+     * Gets the scope required for the hotkey definitions.
+     */
+    get scope() {
+        return this._scope;
+    }
+
+    /**
+     * Sets the scope required for the hotkey definitions.
+     */
+    set scope(value) {
+        this._scope = value;
+    }
+
+    /**
+     * Begins listening to key press events in order to detect hotkeys.
+     */
+    prepare() {
+        this._eventListeners.addEventListener(document, 'keydown', this._onKeyDown.bind(this), false);
+    }
+
+    /**
+     * Stops listening to key press events.
+     */
+    cleanup() {
+        this._eventListeners.removeAllEventListeners();
+    }
+
+    /**
+     * Registers a set of actions that this hotkey handler supports.
+     * @param actions An array of `[name, handler]` entries, where `name` is a string and `handler` is a function.
+     */
+    registerActions(actions) {
+        for (const [name, handler] of actions) {
+            this._actions.set(name, handler);
+        }
+    }
+
+    /**
+     * Registers a set of hotkeys
+     * @param hotkeys An array of hotkey definitions of the format `{action, key, modifiers, scopes, enabled}`.
+     * * `action` - a string indicating which action to perform.
+     * * `key` - a keyboard key code indicating which key needs to be pressed.
+     * * `modifiers` - an array of keyboard modifiers which also need to be pressed. Supports: `'alt', 'ctrl', 'shift', 'meta'`.
+     * * `scopes` - an array of scopes for which the hotkey is valid. If this array does not contain `this.scope`, the hotkey will not be registered.
+     * * `enabled` - a boolean indicating whether the hotkey is currently enabled.
+     */
+    registerHotkeys(hotkeys) {
+        for (const {action, key, modifiers, scopes, enabled} of hotkeys) {
+            if (
+                enabled &&
+                action !== '' &&
+                scopes.includes(this._scope)
+            ) {
+                this._registerHotkey(key, modifiers, action);
+            }
+        }
+    }
+
+    /**
+     * Removes all registered hotkeys.
+     */
+    clearHotkeys() {
+        this._hotkeys.clear();
+    }
+
+    // Private
+
+    _onKeyDown(e) {
+        const key = e.code;
+        const handlers = this._hotkeys.get(key);
+        if (typeof handlers !== 'undefined') {
+            const eventModifiers = DocumentUtil.getActiveModifiers(e);
+            for (const {modifiers, action} of handlers) {
+                if (!this._areSame(modifiers, eventModifiers)) { continue; }
+
+                const actionHandler = this._actions.get(action);
+                if (typeof actionHandler === 'undefined') { continue; }
+
+                const result = actionHandler(e);
+                if (result !== false) {
+                    e.preventDefault();
+                    return true;
+                }
+            }
+        }
+        this.trigger('keydownNonHotkey', e);
+        return false;
+    }
+
+    _registerHotkey(key, modifiers, action) {
+        let handlers = this._hotkeys.get(key);
+        if (typeof handlers === 'undefined') {
+            handlers = [];
+            this._hotkeys.set(key, handlers);
+        }
+        handlers.push({modifiers: new Set(modifiers), action});
+    }
+
+    _areSame(set, array) {
+        if (set.size !== array.length) { return false; }
+        for (const value of array) {
+            if (!set.has(value)) {
+                return false;
+            }
+        }
+        return true;
+    }
+}