summaryrefslogtreecommitdiff
path: root/ext/bg/js/settings/keyboard-mouse-input-field.js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-09-07 20:12:43 -0400
committerGitHub <noreply@github.com>2020-09-07 20:12:43 -0400
commit0a5e832dfddcc6184410e8836cc8dea030457486 (patch)
treee57f69567874327fe994926b97ec386e86a959ec /ext/bg/js/settings/keyboard-mouse-input-field.js
parent59559fc56080640806f6a06d25989b9b64307300 (diff)
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
Diffstat (limited to 'ext/bg/js/settings/keyboard-mouse-input-field.js')
-rw-r--r--ext/bg/js/settings/keyboard-mouse-input-field.js204
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});
+ }
+}