Mouse inputs (#783)

* Add mouse icon

* Add _updateModifiers

* Add support for mouse button modifiers

* Improve names of mouse inputs

* Improve mouse input sorting

* Rename getModifierKeyStrings to getModifierInputStrings

* Refactor keyboard/mouse inputs into KeyboardMouseInputField

1 files changed, 204 insertions, 0 deletions

diff --git a/ext/bg/js/settings/keyboard-mouse-input-field.js b/ext/bg/js/settings/keyboard-mouse-input-field.js
new file mode 100644
index 00000000..d1dc76e0
--- /dev/null
+++ b/ext/bg/js/settings/keyboard-mouse-input-field.js
@@ -0,0 +1,204 @@
+/*
+ * Copyright (C) 2020  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 KeyboardMouseInputField extends EventDispatcher {
+    constructor(inputNode, mouseButton, inputNameMap, keySeparator) {
+        super();
+        this._inputNode = inputNode;
+        this._keySeparator = keySeparator;
+        this._keyPriorities = new Map([
+            ['meta', -4],
+            ['ctrl', -3],
+            ['alt', -2],
+            ['shift', -1]
+        ]);
+        this._mouseButton = mouseButton;
+        this._inputNameMap = inputNameMap;
+        this._mouseInputNamePattern = /^mouse(\d+)$/;
+        this._eventListeners = new EventListenerCollection();
+        this._value = '';
+        this._type = null;
+    }
+
+    get value() {
+        return this._value;
+    }
+
+    prepare(value, type) {
+        this.cleanup();
+
+        this._value = value;
+        const modifiers = this._splitValue(value);
+        const {displayValue} = this._getInputStrings(modifiers);
+        const events = [
+            [this._inputNode, 'keydown', this._onModifierKeyDown.bind(this), false]
+        ];
+        if (type === 'modifierInputs' && this._mouseButton !== null) {
+            events.push(
+                [this._mouseButton, 'mousedown', this._onMouseButtonMouseDown.bind(this), false],
+                [this._mouseButton, 'mouseup', this._onMouseButtonMouseUp.bind(this), false],
+                [this._mouseButton, 'contextmenu', this._onMouseButtonContextMenu.bind(this), false]
+            );
+        }
+        this._inputNode.value = displayValue;
+        for (const args of events) {
+            this._eventListeners.addEventListener(...args);
+        }
+    }
+
+    cleanup() {
+        this._eventListeners.removeAllEventListeners();
+        this._value = '';
+        this._type = null;
+    }
+
+    // Private
+
+    _splitValue(value) {
+        return value.split(/[,;\s]+/).map((v) => v.trim().toLowerCase()).filter((v) => v.length > 0);
+    }
+
+    _sortInputs(inputs) {
+        const pattern = this._mouseInputNamePattern;
+        const keyPriorities = this._keyPriorities;
+        const inputInfos = inputs.map((value, index) => {
+            const match = pattern.exec(value);
+            if (match !== null) {
+                return [value, 1, Number.parseInt(match[1], 10), index];
+            } else {
+                let priority = keyPriorities.get(value);
+                if (typeof priority === 'undefined') { priority = 0; }
+                return [value, 0, priority, index];
+            }
+        });
+        inputInfos.sort((a, b) => {
+            let i = a[1] - b[1];
+            if (i !== 0) { return i; }
+
+            i = a[2] - b[2];
+            if (i !== 0) { return i; }
+
+            i = a[0].localeCompare(b[0], 'en-US'); // Ensure an invariant culture
+            if (i !== 0) { return i; }
+
+            i = a[3] - b[3];
+            return i;
+        });
+        return inputInfos.map(([value]) => value);
+    }
+
+    _getInputStrings(inputs) {
+        let value = '';
+        let displayValue = '';
+        let first = true;
+        for (const input of inputs) {
+            const {name} = this._getInputName(input);
+            if (first) {
+                first = false;
+            } else {
+                value += ', ';
+                displayValue += this._keySeparator;
+            }
+            value += input;
+            displayValue += name;
+        }
+        return {value, displayValue};
+    }
+
+    _getInputName(value) {
+        const pattern = this._mouseInputNamePattern;
+        const match = pattern.exec(value);
+        if (match !== null) {
+            return {name: `Mouse ${match[1]}`, type: 'mouse'};
+        }
+
+        let name = this._inputNameMap.get(value);
+        if (typeof name === 'undefined') { name = value; }
+        return {name, type: 'key'};
+    }
+
+    _getModifierKeys(e) {
+        const modifiers = DocumentUtil.getActiveModifiers(e);
+        // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey
+        // https://askubuntu.com/questions/567731/why-is-shift-alt-being-mapped-to-meta
+        // It works with mouse events on some platforms, so try to determine if metaKey is pressed.
+        // This is a hack and only works when both Shift and Alt are not pressed.
+        if (
+            !modifiers.has('meta') &&
+            DocumentUtil.getKeyFromEvent(e) === 'Meta' &&
+            !(
+                modifiers.size === 2 &&
+                modifiers.has('shift') &&
+                modifiers.has('alt')
+            )
+        ) {
+            modifiers.add('meta');
+        }
+        return modifiers;
+    }
+
+    _onModifierKeyDown(e) {
+        e.preventDefault();
+
+        const key = DocumentUtil.getKeyFromEvent(e);
+        switch (key) {
+            case 'Escape':
+            case 'Backspace':
+                this._updateInputs([]);
+                break;
+            default:
+                this._addInputs(this._getModifierKeys(e));
+                break;
+        }
+    }
+
+    _onMouseButtonMouseDown(e) {
+        e.preventDefault();
+        this._addInputs([`mouse${e.button}`]);
+    }
+
+    _onMouseButtonMouseUp(e) {
+        e.preventDefault();
+    }
+
+    _onMouseButtonContextMenu(e) {
+        e.preventDefault();
+    }
+
+    _addInputs(newInputs) {
+        const inputs = new Set(this._splitValue(this._value));
+        for (const input of newInputs) {
+            inputs.add(input);
+        }
+        this._updateInputs([...inputs]);
+    }
+
+    _updateInputs(inputs) {
+        inputs = this._sortInputs(inputs);
+
+        const node = this._inputNode;
+        const {value, displayValue} = this._getInputStrings(inputs);
+        node.value = displayValue;
+        if (this._value === value) { return; }
+        this._value = value;
+        this.trigger('change', {value, displayValue});
+    }
+}