diff options
Diffstat (limited to 'ext')
| -rw-r--r-- | ext/bg/js/settings/keyboard-mouse-input-field.js | 75 | ||||
| -rw-r--r-- | ext/bg/js/settings/scan-inputs-simple-controller.js | 13 | ||||
| -rw-r--r-- | ext/bg/settings2.html | 1 | ||||
| -rw-r--r-- | ext/mixed/js/document-util.js | 36 | ||||
| -rw-r--r-- | ext/mixed/js/hotkey-util.js | 297 |
5 files changed, 310 insertions, 112 deletions
diff --git a/ext/bg/js/settings/keyboard-mouse-input-field.js b/ext/bg/js/settings/keyboard-mouse-input-field.js index d48b130f..94709313 100644 --- a/ext/bg/js/settings/keyboard-mouse-input-field.js +++ b/ext/bg/js/settings/keyboard-mouse-input-field.js @@ -17,6 +17,7 @@ /* global * DocumentUtil + * HotkeyUtil */ class KeyboardMouseInputField extends EventDispatcher { @@ -25,15 +26,7 @@ class KeyboardMouseInputField extends EventDispatcher { this._inputNode = inputNode; this._mouseButton = mouseButton; this._isPointerTypeSupported = isPointerTypeSupported; - this._keySeparator = ' + '; - this._inputNameMap = new Map(DocumentUtil.getModifierKeys(os)); - this._modifierPriorities = new Map([ - ['meta', -4], - ['ctrl', -3], - ['alt', -2], - ['shift', -1] - ]); - this._mouseInputNamePattern = /^mouse(\d+)$/; + this._hotkeyUtil = new HotkeyUtil(os); this._eventListeners = new EventListenerCollection(); this._key = null; this._modifiers = []; @@ -93,74 +86,14 @@ class KeyboardMouseInputField extends EventDispatcher { // Private _sortModifiers(modifiers) { - const pattern = this._mouseInputNamePattern; - const keyPriorities = this._modifierPriorities; - const modifierInfos = modifiers.map((modifier, index) => { - const match = pattern.exec(modifier); - if (match !== null) { - return [modifier, 1, Number.parseInt(match[1], 10), index]; - } else { - let priority = keyPriorities.get(modifier); - if (typeof priority === 'undefined') { priority = 0; } - return [modifier, 0, priority, index]; - } - }); - modifierInfos.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 modifierInfos.map(([modifier]) => modifier); + return this._hotkeyUtil.sortModifiers(modifiers); } _updateDisplayString() { - let displayValue = ''; - let first = true; - for (const modifier of this._modifiers) { - const {name} = this._getModifierName(modifier); - if (first) { - first = false; - } else { - displayValue += this._keySeparator; - } - displayValue += name; - } - if (this._key !== null) { - if (!first) { displayValue += this._keySeparator; } - displayValue += this._getDisplayKey(this._key); - } + const displayValue = this._hotkeyUtil.getInputDisplayValue(this._key, this._modifiers); this._inputNode.value = displayValue; } - _getDisplayKey(key) { - if (typeof key === 'string') { - if (key.length === 4 && key.startsWith('Key')) { - key = key.substring(3); - } - } - return key; - } - - _getModifierName(modifier) { - const pattern = this._mouseInputNamePattern; - const match = pattern.exec(modifier); - if (match !== null) { - return {name: `Mouse ${match[1]}`, type: 'mouse'}; - } - - let name = this._inputNameMap.get(modifier); - if (typeof name === 'undefined') { name = modifier; } - return {name, type: 'key'}; - } - _getModifierKeys(e) { const modifiers = new Set(DocumentUtil.getActiveModifiers(e)); // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/metaKey diff --git a/ext/bg/js/settings/scan-inputs-simple-controller.js b/ext/bg/js/settings/scan-inputs-simple-controller.js index 9e7eb5fc..01f044c2 100644 --- a/ext/bg/js/settings/scan-inputs-simple-controller.js +++ b/ext/bg/js/settings/scan-inputs-simple-controller.js @@ -16,7 +16,7 @@ */ /* global - * DocumentUtil + * HotkeyUtil * ScanInputsController * api */ @@ -27,7 +27,7 @@ class ScanInputsSimpleController { this._middleMouseButtonScan = null; this._mainScanModifierKeyInput = null; this._mainScanModifierKeyInputHasOther = false; - this._os = null; + this._hotkeyUtil = new HotkeyUtil(); } async prepare() { @@ -35,7 +35,7 @@ class ScanInputsSimpleController { this._mainScanModifierKeyInput = document.querySelector('#main-scan-modifier-key'); const {platform: {os}} = await api.getEnvironmentInfo(); - this._os = os; + this._hotkeyUtil.os = os; this._mainScanModifierKeyInputHasOther = false; this._populateSelect(this._mainScanModifierKeyInput, this._mainScanModifierKeyInputHasOther); @@ -106,9 +106,12 @@ class ScanInputsSimpleController { _populateSelect(select, hasOther) { const modifierKeys = [ - {value: 'none', name: 'No key'}, - ...DocumentUtil.getModifierKeys(this._os).map(([value, name]) => ({value, name})) + {value: 'none', name: 'No key'} ]; + for (const value of ['alt', 'ctrl', 'shift', 'meta']) { + const name = this._hotkeyUtil.getModifierDisplayValue(value); + modifierKeys.push({value, name}); + } if (hasOther) { modifierKeys.push({value: 'other', name: 'Other'}); diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html index 08f9ebef..65948b75 100644 --- a/ext/bg/settings2.html +++ b/ext/bg/settings2.html @@ -3060,6 +3060,7 @@ <script src="/mixed/js/document-focus-controller.js"></script> <script src="/mixed/js/document-util.js"></script> <script src="/mixed/js/dom-data-binder.js"></script> +<script src="/mixed/js/hotkey-util.js"></script> <script src="/mixed/js/html-template-collection.js"></script> <script src="/mixed/js/object-property-accessor.js"></script> <script src="/mixed/js/panel-element.js"></script> diff --git a/ext/mixed/js/document-util.js b/ext/mixed/js/document-util.js index 0c0a2153..513a0c05 100644 --- a/ext/mixed/js/document-util.js +++ b/ext/mixed/js/document-util.js @@ -305,42 +305,6 @@ class DocumentUtil { return true; } - static getModifierKeys(os) { - switch (os) { - case 'win': - return [ - ['alt', 'Alt'], - ['ctrl', 'Ctrl'], - ['shift', 'Shift'], - ['meta', 'Windows'] - ]; - case 'mac': - return [ - ['alt', 'Opt'], - ['ctrl', 'Ctrl'], - ['shift', 'Shift'], - ['meta', 'Cmd'] - ]; - case 'linux': - case 'openbsd': - case 'cros': - case 'android': - return [ - ['alt', 'Alt'], - ['ctrl', 'Ctrl'], - ['shift', 'Shift'], - ['meta', 'Super'] - ]; - default: // 'unknown', etc - return [ - ['alt', 'Alt'], - ['ctrl', 'Ctrl'], - ['shift', 'Shift'], - ['meta', 'Meta'] - ]; - } - } - static isMetaKeySupported(os, browser) { return !(browser === 'firefox' || browser === 'firefox-mobile') || os === 'mac'; } diff --git a/ext/mixed/js/hotkey-util.js b/ext/mixed/js/hotkey-util.js new file mode 100644 index 00000000..ea3daf97 --- /dev/null +++ b/ext/mixed/js/hotkey-util.js @@ -0,0 +1,297 @@ +/* + * 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 <http://www.gnu.org/licenses/>. + */ + +/** + * Utility class to help display hotkeys and convert to/from commands. + */ +class HotkeyUtil { + /** + * Creates a new instance. + */ + constructor(os=null) { + this._os = os; + this._inputSeparator = ' + '; + this._modifierKeyNames = new Map(); + this._mouseInputNamePattern = /^mouse(\d+)$/; + this._modifierPriorities = new Map([ + ['meta', -4], + ['ctrl', -3], + ['alt', -2], + ['shift', -1] + ]); + this._stringComparer = new Intl.Collator('en-US'); // Invariant locale + + this._updateModifierKeyNames(); + } + + /** + * Gets the operating system for this instance. + * The operating system is used to display system-localized modifier key names. + */ + get os() { + return this._os; + } + + /** + * Sets the operating system for this instance. + * @param value The value to assign. + * Valid values are: win, mac, linux, openbsd, cros, android. + */ + set os(value) { + if (this._os === value) { return; } + this._os = value; + this._updateModifierKeyNames(); + } + + /** + * Gets a display string for a key and a set of modifiers. + * @param key The key code string, or `null` for no key. + * @param modifiers An array of modifiers. + * Valid values are: ctrl, alt, shift, meta, or mouseN, where N is an integer. + * @returns A user-friendly string for the combination of key and modifiers. + */ + getInputDisplayValue(key, modifiers) { + const separator = this._inputSeparator; + let displayValue = ''; + let first = true; + for (const modifier of modifiers) { + if (first) { + first = false; + } else { + displayValue += separator; + } + displayValue += this.getModifierDisplayValue(modifier); + } + if (typeof key === 'string') { + if (!first) { displayValue += separator; } + displayValue += this.getKeyDisplayValue(key); + } + return displayValue; + } + + /** + * Gets a display string for a single modifier. + * @param modifier A string representing a modifier. + * Valid values are: ctrl, alt, shift, meta, or mouseN, where N is an integer. + * @returns A user-friendly string for the modifier. + */ + getModifierDisplayValue(modifier) { + const match = this._mouseInputNamePattern.exec(modifier); + if (match !== null) { + return `Mouse ${match[1]}`; + } + + const name = this._modifierKeyNames.get(modifier); + return (typeof name !== 'undefined' ? name : modifier); + } + + /** + * Gets a display string for a key. + * @param key The key code string, or `null` for no key. + * @returns A user-friendly string for the combination of key and modifiers, or `null` if key was already `null`. + */ + getKeyDisplayValue(key) { + if (typeof key === 'string' && key.length === 4 && key.startsWith('Key')) { + key = key.substring(3); + } + return key; + } + + /** + * Gets a display string for a single modifier. + * @param modifier A string representing a modifier. + * Valid values are: ctrl, alt, shift, meta, or mouseN, where N is an integer. + * @returns `'mouse'` if the modifier represents a mouse button, `'key'` otherwise. + */ + getModifierType(modifier) { + return (this._mouseInputNamePattern.test(modifier) ? 'mouse' : 'key'); + } + + /** + * Converts an extension command string into a standard input. + * @param command An extension command string. + * @returns An object `{key, modifiers}`, where key is a string (or `null`) representing the key, and modifiers is an array of modifier keys. + */ + convertCommandToInput(command) { + let key = null; + const modifiers = new Set(); + if (typeof command === 'string' && command.length > 0) { + const parts = command.split('+'); + const ii = parts.length - 1; + key = this._convertCommandKeyToInputKey(parts[ii]); + for (let i = 0; i < ii; ++i) { + modifiers.add(this._convertCommandModifierToInputModifier(parts[i])); + } + } + return {key, modifiers: this.sortModifiers([...modifiers])}; + } + + /** + * Gets a command string for a specified input. + * @param key The key code string, or `null` for no key. + * @param modifiers An array of modifier keys. + * Valid values are: ctrl, alt, shift, meta. + * @returns An extension command string representing the input. + */ + convertInputToCommand(key, modifiers) { + const separator = '+'; + let command = ''; + let first = true; + for (const modifier of modifiers) { + if (first) { + first = false; + } else { + command += separator; + } + command += this._convertInputModifierToCommandModifier(modifier); + } + if (typeof key === 'string') { + if (!first) { command += separator; } + command += this._convertInputKeyToCommandKey(key); + } + return command; + } + + /** + * Sorts an array of modifiers. + * @param modifiers An array of modifiers. + * Valid values are: ctrl, alt, shift, meta. + * @returns A sorted array of modifiers. The array instance is the same as the input array. + */ + sortModifiers(modifiers) { + const pattern = this._mouseInputNamePattern; + const keyPriorities = this._modifierPriorities; + const stringComparer = this._stringComparer; + + const count = modifiers.length; + const modifierInfos = []; + for (let i = 0; i < count; ++i) { + const modifier = modifiers[i]; + const match = pattern.exec(modifier); + let info; + if (match !== null) { + info = [modifier, 1, Number.parseInt(match[1], 10), i]; + } else { + let priority = keyPriorities.get(modifier); + if (typeof priority === 'undefined') { priority = 0; } + info = [modifier, 0, priority, i]; + } + modifierInfos.push(info); + } + + modifierInfos.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 = stringComparer.compare(a[0], b[0]); + if (i !== 0) { return i; } + + i = a[3] - b[3]; + return i; + }); + + for (let i = 0; i < count; ++i) { + modifiers[i] = modifierInfos[i][0]; + } + + return modifiers; + } + + // Private + + _getModifierKeyNames(os) { + switch (os) { + case 'win': + return [ + ['alt', 'Alt'], + ['ctrl', 'Ctrl'], + ['shift', 'Shift'], + ['meta', 'Windows'] + ]; + case 'mac': + return [ + ['alt', 'Opt'], + ['ctrl', 'Ctrl'], + ['shift', 'Shift'], + ['meta', 'Cmd'] + ]; + case 'linux': + case 'openbsd': + case 'cros': + case 'android': + return [ + ['alt', 'Alt'], + ['ctrl', 'Ctrl'], + ['shift', 'Shift'], + ['meta', 'Super'] + ]; + default: // 'unknown', etc + return [ + ['alt', 'Alt'], + ['ctrl', 'Ctrl'], + ['shift', 'Shift'], + ['meta', 'Meta'] + ]; + } + } + + _updateModifierKeyNames() { + const map = this._modifierKeyNames; + map.clear(); + for (const [key, value] of this._getModifierKeyNames(this._os)) { + map.set(key, value); + } + } + + _convertCommandKeyToInputKey(key) { + if (key.length === 1) { + key = `Key${key}`; + } + return key; + } + + _convertCommandModifierToInputModifier(modifier) { + switch (modifier) { + case 'Ctrl': return (this._os === 'mac' ? 'meta' : 'ctrl'); + case 'Alt': return 'alt'; + case 'Shift': return 'shift'; + case 'MacCtrl': return 'ctrl'; + case 'Command': return 'meta'; + default: return modifier; + } + } + + _convertInputKeyToCommandKey(key) { + if (key.length === 4 && key.startsWith('Key')) { + key = key.substring(3); + } + return key; + } + + _convertInputModifierToCommandModifier(modifier) { + switch (modifier) { + case 'ctrl': return (this._os === 'mac' ? 'MacCtrl' : 'Ctrl'); + case 'alt': return 'Alt'; + case 'shift': return 'Shift'; + case 'meta': return 'Command'; + default: return modifier; + } + } +} |