diff options
Diffstat (limited to 'ext/js/input')
| -rw-r--r-- | ext/js/input/hotkey-handler.js | 267 | ||||
| -rw-r--r-- | ext/js/input/hotkey-help-controller.js | 125 | ||||
| -rw-r--r-- | ext/js/input/hotkey-util.js | 297 | 
3 files changed, 689 insertions, 0 deletions
diff --git a/ext/js/input/hotkey-handler.js b/ext/js/input/hotkey-handler.js new file mode 100644 index 00000000..423410b7 --- /dev/null +++ b/ext/js/input/hotkey-handler.js @@ -0,0 +1,267 @@ +/* + * 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 + * api + */ + +/** + * Class which handles hotkey events and actions. + */ +class HotkeyHandler extends EventDispatcher { +    /** +     * Creates a new instance of the class. +     */ +    constructor() { +        super(); +        this._actions = new Map(); +        this._hotkeys = new Map(); +        this._hotkeyRegistrations = new Map(); +        this._eventListeners = new EventListenerCollection(); +        this._isPrepared = false; +        this._hasEventListeners = false; +        this._forwardFrameId = null; +    } + +    /** +     * Gets the frame ID used for forwarding hotkeys. +     */ +    get forwardFrameId() { +        return this._forwardFrameId; +    } + +    /** +     * Sets the frame ID used for forwarding hotkeys. +     */ +    set forwardFrameId(value) { +        this._forwardFrameId = value; +        this._updateHotkeyRegistrations(); +    } + +    /** +     * Begins listening to key press events in order to detect hotkeys. +     */ +    prepare() { +        this._isPrepared = true; +        this._updateEventHandlers(); +        api.crossFrame.registerHandlers([ +            ['hotkeyHandler.forwardHotkey', {async: false, handler: this._onMessageForwardHotkey.bind(this)}] +        ]); +    } + +    /** +     * 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 for a given scope. +     * @param scope The scope that the hotkey definitions must be for in order to be activated. +     * @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(scope, hotkeys) { +        let registrations = this._hotkeyRegistrations.get(scope); +        if (typeof registrations === 'undefined') { +            registrations = []; +            this._hotkeyRegistrations.set(scope, registrations); +        } +        registrations.push(...hotkeys); +        this._updateHotkeyRegistrations(); +    } + +    /** +     * Removes all registered hotkeys for a given scope. +     */ +    clearHotkeys(scope) { +        const registrations = this._hotkeyRegistrations.get(scope); +        if (typeof registrations !== 'undefined') { +            registrations.length = 0; +        } +        this._updateHotkeyRegistrations(); +    } + +    /** +     * Assigns a set of hotkeys for a given scope. This is an optimized shorthand for calling +     * `clearHotkeys`, then calling `registerHotkeys`. +     * @see registerHotkeys for argument information. +     */ +    setHotkeys(scope, hotkeys) { +        let registrations = this._hotkeyRegistrations.get(scope); +        if (typeof registrations === 'undefined') { +            registrations = []; +            this._hotkeyRegistrations.set(scope, registrations); +        } else { +            registrations.length = 0; +        } +        registrations.push(...hotkeys); +        this._updateHotkeyRegistrations(); +    } + +    /** +     * Adds a single event listener to a specific event. +     * @param eventName The string representing the event's name. +     * @param callback The event listener callback to add. +     */ +    on(eventName, callback) { +        const result = super.on(eventName, callback); +        this._updateHasEventListeners(); +        this._updateEventHandlers(); +        return result; +    } + +    /** +     * Removes a single event listener from a specific event. +     * @param eventName The string representing the event's name. +     * @param callback The event listener callback to add. +     * @returns `true` if the callback was removed, `false` otherwise. +     */ +    off(eventName, callback) { +        const result = super.off(eventName, callback); +        this._updateHasEventListeners(); +        this._updateEventHandlers(); +        return result; +    } + +    /** +     * Attempts to simulate an action for a given combination of key and modifiers. +     * @param key A keyboard key code indicating which key needs to be pressed. +     * @param modifiers An array of keyboard modifiers which also need to be pressed. Supports: `'alt', 'ctrl', 'shift', 'meta'`. +     * @returns `true` if an action was performed, `false` otherwise. +     */ +    simulate(key, modifiers) { +        const hotkeyInfo = this._hotkeys.get(key); +        return ( +            typeof hotkeyInfo !== 'undefined' && +            this._invokeHandlers(key, modifiers, hotkeyInfo, false) +        ); +    } + +    // Message handlers + +    _onMessageForwardHotkey({key, modifiers}) { +        return this.simulate(key, modifiers); +    } + +    // Private + +    _onKeyDown(e) { +        const key = e.code; +        const hotkeyInfo = this._hotkeys.get(key); +        if (typeof hotkeyInfo !== 'undefined') { +            const eventModifiers = DocumentUtil.getActiveModifiers(e); +            const canForward = (this._forwardFrameId !== null); +            if (this._invokeHandlers(key, eventModifiers, hotkeyInfo, canForward)) { +                e.preventDefault(); +                return; +            } +        } +        this.trigger('keydownNonHotkey', e); +    } + +    _invokeHandlers(key, modifiers, hotkeyInfo, canForward) { +        for (const {modifiers: handlerModifiers, action} of hotkeyInfo.handlers) { +            if (!this._areSame(handlerModifiers, modifiers)) { continue; } + +            const actionHandler = this._actions.get(action); +            if (typeof actionHandler !== 'undefined') { +                const result = actionHandler(); +                if (result !== false) { +                    return true; +                } +            } +        } + +        if (canForward && hotkeyInfo.forward) { +            this._forwardHotkey(key, modifiers); +            return true; +        } + +        return false; +    } + +    _areSame(set, array) { +        if (set.size !== array.length) { return false; } +        for (const value of array) { +            if (!set.has(value)) { +                return false; +            } +        } +        return true; +    } + +    _updateHotkeyRegistrations() { +        if (this._hotkeys.size === 0 && this._hotkeyRegistrations.size === 0) { return; } + +        const canForward = (this._forwardFrameId !== null); +        this._hotkeys.clear(); +        for (const [scope, registrations] of this._hotkeyRegistrations.entries()) { +            for (const {action, key, modifiers, scopes, enabled} of registrations) { +                if (!(enabled && key !== null && action !== '')) { continue; } + +                const correctScope = scopes.includes(scope); +                if (!correctScope && !canForward) { continue; } + +                let hotkeyInfo = this._hotkeys.get(key); +                if (typeof hotkeyInfo === 'undefined') { +                    hotkeyInfo = {handlers: [], forward: false}; +                    this._hotkeys.set(key, hotkeyInfo); +                } + +                if (correctScope) { +                    hotkeyInfo.handlers.push({modifiers: new Set(modifiers), action}); +                } else { +                    hotkeyInfo.forward = true; +                } +            } +        } +        this._updateEventHandlers(); +    } + +    _updateHasEventListeners() { +        this._hasEventListeners = this.hasListeners('keydownNonHotkey'); +    } + +    _updateEventHandlers() { +        if (this._isPrepared && (this._hotkeys.size > 0 || this._hasEventListeners)) { +            if (this._eventListeners.size !== 0) { return; } +            this._eventListeners.addEventListener(document, 'keydown', this._onKeyDown.bind(this), false); +        } else { +            this._eventListeners.removeAllEventListeners(); +        } +    } + +    async _forwardHotkey(key, modifiers) { +        const frameId = this._forwardFrameId; +        if (frameId === null) { throw new Error('No forwarding target'); } +        try { +            await api.crossFrame.invoke(frameId, 'hotkeyHandler.forwardHotkey', {key, modifiers}); +        } catch (e) { +            // NOP +        } +    } +} diff --git a/ext/js/input/hotkey-help-controller.js b/ext/js/input/hotkey-help-controller.js new file mode 100644 index 00000000..8137b50b --- /dev/null +++ b/ext/js/input/hotkey-help-controller.js @@ -0,0 +1,125 @@ +/* + * 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/>. + */ + +/* global + * HotkeyUtil + * api + */ + +class HotkeyHelpController { +    constructor() { +        this._hotkeyUtil = new HotkeyUtil(); +        this._localActionHotseys = new Map(); +        this._globalActionHotkeys = new Map(); +        this._replacementPattern = /\{0\}/g; +    } + +    async prepare() { +        const {platform: {os}} = await api.getEnvironmentInfo(); +        this._hotkeyUtil.os = os; +        await this._setupGlobalCommands(this._globalActionHotkeys); +    } + +    setOptions(options) { +        const hotkeys = options.inputs.hotkeys; +        const hotkeyMap = this._localActionHotseys; +        hotkeyMap.clear(); +        for (const {enabled, action, key, modifiers} of hotkeys) { +            if (!enabled || key === null || action === '' || hotkeyMap.has(action)) { continue; } +            hotkeyMap.set(action, this._hotkeyUtil.getInputDisplayValue(key, modifiers)); +        } +    } + +    setupNode(node) { +        const globalPrexix = 'global:'; +        const replacementPattern = this._replacementPattern; +        for (const node2 of node.querySelectorAll('[data-hotkey]')) { +            const data = JSON.parse(node2.dataset.hotkey); +            let [action, attributes, values] = data; +            if (!Array.isArray(attributes)) { attributes = [attributes]; } +            const multipleValues = Array.isArray(values); + +            const actionIsGlobal = action.startsWith(globalPrexix); +            if (actionIsGlobal) { action = action.substring(globalPrexix.length); } + +            const defaultAttributeValues = this._getDefaultAttributeValues(node2, data, attributes); + +            const hotkey = (actionIsGlobal ? this._globalActionHotkeys : this._localActionHotseys).get(action); + +            for (let i = 0, ii = attributes.length; i < ii; ++i) { +                const attribute = attributes[i]; +                let value = null; +                if (typeof hotkey !== 'undefined') { +                    value = (multipleValues ? values[i] : values); +                    value = value.replace(replacementPattern, hotkey); +                } else { +                    value = defaultAttributeValues[i]; +                } + +                if (typeof value === 'string') { +                    node2.setAttribute(attribute, value); +                } else { +                    node2.removeAttribute(attribute); +                } +            } +        } +    } + +    // Private + +    async _setupGlobalCommands(commandMap) { +        const commands = await new Promise((resolve, reject) => { +            if (!(isObject(chrome.commands) && typeof chrome.commands.getAll === 'function')) { +                resolve([]); +                return; +            } + +            chrome.commands.getAll((result) => { +                const e = chrome.runtime.lastError; +                if (e) { +                    reject(new Error(e.message)); +                } else { +                    resolve(result); +                } +            }); +        }); + +        commandMap.clear(); +        for (const {name, shortcut} of commands) { +            if (shortcut.length === 0) { continue; } +            const {key, modifiers} = this._hotkeyUtil.convertCommandToInput(shortcut); +            commandMap.set(name, this._hotkeyUtil.getInputDisplayValue(key, modifiers)); +        } +        return commandMap; +    } + +    _getDefaultAttributeValues(node, data, attributes) { +        if (data.length > 3) { +            return data[3]; +        } + +        const defaultAttributeValues = []; +        for (let i = 0, ii = attributes.length; i < ii; ++i) { +            const attribute = attributes[i]; +            const value = node.hasAttribute(attribute) ? node.getAttribute(attribute) : null; +            defaultAttributeValues.push(value); +        } +        data[3] = defaultAttributeValues; +        node.dataset.hotkey = JSON.stringify(data); +        return defaultAttributeValues; +    } +} diff --git a/ext/js/input/hotkey-util.js b/ext/js/input/hotkey-util.js new file mode 100644 index 00000000..ea3daf97 --- /dev/null +++ b/ext/js/input/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; +        } +    } +}  |