diff options
| -rw-r--r-- | ext/bg/css/settings2.css | 17 | ||||
| -rw-r--r-- | ext/bg/js/settings2/extension-keyboard-shortcuts-controller.js | 292 | ||||
| -rw-r--r-- | ext/bg/js/settings2/settings-main.js | 4 | ||||
| -rw-r--r-- | ext/bg/settings2.html | 107 | ||||
| -rw-r--r-- | ext/mixed/css/material.css | 4 |
5 files changed, 397 insertions, 27 deletions
diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css index 327c3f37..4a465a2c 100644 --- a/ext/bg/css/settings2.css +++ b/ext/bg/css/settings2.css @@ -791,7 +791,8 @@ select.short-height { flex: 0 0 auto; padding: var(--modal-padding-vertical-half) var(--modal-padding-horizontal); } -.modal-body>.settings-item { +.modal-body>.settings-item, +.modal-settings-group>.settings-item { margin-left: calc(var(--modal-padding-horizontal) * -1); } .modal-body .settings-item { @@ -912,6 +913,15 @@ button.icon-button.modal-header-button:active>.icon-button-inner>.icon { visibility 0s ease-in-out var(--animation-duration2); } +.modal-separator-line { + border-bottom: var(--thin-border-size) solid var(--separator-color1); + margin: 0 calc(var(--modal-padding-horizontal) * -1); +} +.modal-separator-line-light { + border-bottom: var(--thin-border-size) solid var(--separator-color2); + margin: 0 calc(var(--modal-padding-horizontal) * -1); +} + /* Status footer */ .status-footer-container { @@ -1944,11 +1954,6 @@ input.sentence-termination-character-input2 { padding-left: 0.375em; } -.anki-card-primary-separator { - border-bottom: var(--thin-border-size) solid var(--separator-color1); - margin: 0 calc(var(--modal-padding-horizontal) * -1); -} - /* Generic layouts */ .margin-above { diff --git a/ext/bg/js/settings2/extension-keyboard-shortcuts-controller.js b/ext/bg/js/settings2/extension-keyboard-shortcuts-controller.js new file mode 100644 index 00000000..9c930703 --- /dev/null +++ b/ext/bg/js/settings2/extension-keyboard-shortcuts-controller.js @@ -0,0 +1,292 @@ +/* + * 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 + * HotkeyUtil + * KeyboardMouseInputField + * api + */ + +class ExtensionKeyboardShortcutController { + constructor(settingsController) { + this._settingsController = settingsController; + this._resetButton = null; + this._clearButton = null; + this._listContainer = null; + this._hotkeyUtil = new HotkeyUtil(); + this._os = null; + this._entries = []; + } + + get hotkeyUtil() { + return this._hotkeyUtil; + } + + async prepare() { + this._resetButton = document.querySelector('#extension-hotkey-list-reset-all'); + this._clearButton = document.querySelector('#extension-hotkey-list-clear-all'); + this._listContainer = document.querySelector('#extension-hotkey-list'); + + const canResetCommands = this.canResetCommands(); + const canModifyCommands = this.canModifyCommands(); + this._resetButton.hidden = !canResetCommands; + this._clearButton.hidden = !canModifyCommands; + + if (canResetCommands) { + this._resetButton.addEventListener('click', this._onResetClick.bind(this)); + } + if (canModifyCommands) { + this._clearButton.addEventListener('click', this._onClearClick.bind(this)); + } + + const {platform: {os}} = await api.getEnvironmentInfo(); + this._os = os; + this._hotkeyUtil.os = os; + + const commands = await this._getCommands(); + this._setupCommands(commands); + } + + async resetCommand(name) { + await this._resetCommand(name); + + let key = null; + let modifiers = []; + + const commands = await this._getCommands(); + for (const {name: name2, shortcut} of commands) { + if (name === name2) { + ({key, modifiers} = this._hotkeyUtil.convertCommandToInput(shortcut)); + break; + } + } + + return {key, modifiers}; + } + + async updateCommand(name, key, modifiers) { + // Firefox-only; uses Promise API + const shortcut = this._hotkeyUtil.convertInputToCommand(key, modifiers); + return await chrome.commands.update({name, shortcut}); + } + + canResetCommands() { + return isObject(chrome.commands) && typeof chrome.commands.reset === 'function'; + } + + canModifyCommands() { + return isObject(chrome.commands) && typeof chrome.commands.update === 'function'; + } + + // Add + + _onResetClick(e) { + e.preventDefault(); + this._resetAllCommands(); + } + + _onClearClick(e) { + e.preventDefault(); + this._clearAllCommands(); + } + + _getCommands() { + return 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); + } + }); + }); + } + + _setupCommands(commands) { + for (const entry of this._entries) { + entry.cleanup(); + } + this._entries = []; + + const fragment = document.createDocumentFragment(); + + for (const {name, description, shortcut} of commands) { + if (name.startsWith('_')) { continue; } + + const {key, modifiers} = this._hotkeyUtil.convertCommandToInput(shortcut); + + const node = this._settingsController.instantiateTemplate('extension-hotkey-list-item'); + fragment.appendChild(node); + + const entry = new ExtensionKeyboardShortcutHotkeyEntry(this, node, name, description, key, modifiers, this._os); + entry.prepare(); + this._entries.push(entry); + } + + this._listContainer.textContent = ''; + this._listContainer.appendChild(fragment); + } + + async _resetAllCommands() { + if (!this.canModifyCommands()) { return; } + + let commands = await this._getCommands(); + const promises = []; + + for (const {name} of commands) { + if (name.startsWith('_')) { continue; } + promises.push(this._resetCommand(name)); + } + + await Promise.all(promises); + + commands = await this._getCommands(); + this._setupCommands(commands); + } + + async _clearAllCommands() { + if (!this.canModifyCommands()) { return; } + + let commands = await this._getCommands(); + const promises = []; + + for (const {name} of commands) { + if (name.startsWith('_')) { continue; } + promises.push(this.updateCommand(name, null, [])); + } + + await Promise.all(promises); + + commands = await this._getCommands(); + this._setupCommands(commands); + } + + async _resetCommand(name) { + // Firefox-only; uses Promise API + return await chrome.commands.reset(name); + } +} + +class ExtensionKeyboardShortcutHotkeyEntry { + constructor(parent, node, name, description, key, modifiers, os) { + this._parent = parent; + this._node = node; + this._name = name; + this._description = description; + this._key = key; + this._modifiers = modifiers; + this._os = os; + this._input = null; + this._inputField = null; + this._eventListeners = new EventListenerCollection(); + } + + prepare() { + this._node.querySelector('.settings-item-label').textContent = this._description || this._name; + + const button = this._node.querySelector('.extension-hotkey-list-item-button'); + const input = this._node.querySelector('input'); + + this._input = input; + + if (this._parent.canModifyCommands()) { + this._inputField = new KeyboardMouseInputField(input, null, this._os); + this._inputField.prepare(this._key, this._modifiers, false, true); + this._eventListeners.on(this._inputField, 'change', this._onInputFieldChange.bind(this)); + this._eventListeners.addEventListener(button, 'menuClose', this._onMenuClose.bind(this)); + this._eventListeners.addEventListener(input, 'blur', this._onInputFieldBlur.bind(this)); + } else { + input.readOnly = true; + input.value = this._parent.hotkeyUtil.getInputDisplayValue(this._key, this._modifiers); + button.hidden = true; + } + } + + cleanup() { + this._eventListeners.removeAllEventListeners(); + if (this._node.parentNode !== null) { + this._node.parentNode.removeChild(this._node); + } + if (this._inputField !== null) { + this._inputField.cleanup(); + this._inputField = null; + } + } + + // Private + + _onInputFieldChange(e) { + const {key, modifiers} = e; + this._tryUpdateInput(key, modifiers, false); + } + + _onInputFieldBlur() { + this._updateInput(); + } + + _onMenuClose(e) { + switch (e.detail.action) { + case 'clearInput': + this._tryUpdateInput(null, [], true); + break; + case 'resetInput': + this._resetInput(); + break; + } + } + + _updateInput() { + this._inputField.setInput(this._key, this._modifiers); + delete this._input.dataset.invalid; + } + + async _tryUpdateInput(key, modifiers, updateInput) { + let okay = (key === null ? (modifiers.length === 0) : (modifiers.length !== 0)); + if (okay) { + try { + await this._parent.updateCommand(this._name, key, modifiers); + } catch (e) { + okay = false; + } + } + + if (okay) { + this._key = key; + this._modifiers = modifiers; + delete this._input.dataset.invalid; + } else { + this._input.dataset.invalid = 'true'; + } + + if (updateInput) { + this._updateInput(); + } + } + + async _resetInput() { + const {key, modifiers} = await this._parent.resetCommand(this._name); + this._key = key; + this._modifiers = modifiers; + this._updateInput(); + } +} diff --git a/ext/bg/js/settings2/settings-main.js b/ext/bg/js/settings2/settings-main.js index 76a40d81..31c5b0fa 100644 --- a/ext/bg/js/settings2/settings-main.js +++ b/ext/bg/js/settings2/settings-main.js @@ -24,6 +24,7 @@ * DictionaryController * DictionaryImportController * DocumentFocusController + * ExtensionKeyboardShortcutController * GenericSettingController * KeyboardShortcutController * ModalController @@ -133,6 +134,9 @@ async function setupGenericSettingsController(genericSettingController) { const keyboardShortcutController = new KeyboardShortcutController(settingsController); keyboardShortcutController.prepare(); + const extensionKeyboardShortcutController = new ExtensionKeyboardShortcutController(settingsController); + extensionKeyboardShortcutController.prepare(); + const popupWindowController = new PopupWindowController(); popupWindowController.prepare(); diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html index e55df47a..63498020 100644 --- a/ext/bg/settings2.html +++ b/ext/bg/settings2.html @@ -1628,32 +1628,32 @@ <div class="settings-item-left"> <div class="settings-item-label"> <p> - Yomichan includes keyboard shortcuts for some common actions that can be configured - using the web browser's settings. - To configure these shortcuts: + Yomichan has two categories of keyboard shortcuts: </p> - - <ul data-show-for-browser="chrome"> - <li>Open <a data-select-on-click="">chrome://extensions/shortcuts</a> in a new tab.</li> - <li>Find the <em>Yomichan</em> section and configure the shortcuts.</li> - </ul> - - <ul data-show-for-browser="edge"> - <li>Open <a data-select-on-click="">edge://extensions/shortcuts</a> in a new tab.</li> - <li>Find the <em>Yomichan</em> section and configure the shortcuts.</li> - </ul> - - <ul data-show-for-browser="firefox"> - <li>Open the extensions page (<a data-select-on-click="">about:addons</a>)</li> - <li>Click the button on the right with the gear icon, then click <em>Manage Extension Shortcuts</em>.</li> - <li>Find the <em>Yomichan</em> section and configure the shortcuts.</li> + <ul> + <li> + <strong>Standard</strong> keyboard shortcuts are controlled by the extension, and can be added, removed, + and configured to work on webpages that Yomichan functions on. + </li> + <li> + <strong>Native</strong> keyboard shortcuts are controlled by the web browser, and function globally + within the web browser<span data-show-for-browser="chrome edge"> or system-wide</span>. + </li> </ul> </div> </div> </div></div> <div class="settings-item settings-item-button" data-modal-action="show,keyboard-shortcuts"><div class="settings-item-inner"> <div class="settings-item-left"> - <div class="settings-item-label">Configure keyboard shortcuts…</div> + <div class="settings-item-label">Configure standard keyboard shortcuts…</div> + </div> + <div class="settings-item-right open-panel-button-container"> + <button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button> + </div> + </div></div> + <div class="settings-item settings-item-button" data-modal-action="show,extension-keyboard-shortcuts"><div class="settings-item-inner"> + <div class="settings-item-left"> + <div class="settings-item-label">Configure native keyboard shortcuts…</div> </div> <div class="settings-item-right open-panel-button-container"> <button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button> @@ -2534,7 +2534,7 @@ </select> </div> </div></div> - <div class="anki-card-primary-separator"></div> + <div class="modal-separator-line"></div> <div class="settings-item"><div class="settings-item-inner"> <div class="settings-item-left"> <div class="settings-item-label">Deck</div> @@ -3042,6 +3042,55 @@ </div> </div></div> +<div id="extension-keyboard-shortcuts" class="modal-container" tabindex="-1" role="dialog" hidden><div class="modal-content"> + <div class="modal-header"> + <div class="modal-title">Native Keyboard Shortcuts</div> + <div class="modal-header-button-container"> + <div class="modal-header-button-group"> + <button class="icon-button modal-header-button" data-modal-action="expand"><span class="icon-button-inner"><span class="icon" data-icon="expand"></span></span></button> + <button class="icon-button modal-header-button" data-modal-action="collapse"><span class="icon-button-inner"><span class="icon" data-icon="collapse"></span></span></button> + </div> + </div> + </div> + <div class="modal-body"> + <div> + <p data-show-for-browser="chrome edge"> + The native keyboard shortcuts are listed below, + but cannot be configured from within the extension on this browser. + To configure these shortcuts: + </p> + + <p data-show-for-browser="firefox"> + The native keyboard shortcuts can be configured below on this browser, + or by doing the following: + </p> + + <ul data-show-for-browser="chrome"> + <li>Open <a data-select-on-click="">chrome://extensions/shortcuts</a> in a new tab.</li> + <li>Find the <em>Yomichan</em> section and configure the shortcuts.</li> + </ul> + + <ul data-show-for-browser="edge"> + <li>Open <a data-select-on-click="">edge://extensions/shortcuts</a> in a new tab.</li> + <li>Find the <em>Yomichan</em> section and configure the shortcuts.</li> + </ul> + + <ul data-show-for-browser="firefox"> + <li>Open the extensions page (<a data-select-on-click="">about:addons</a>)</li> + <li>Click the button on the right with the gear icon, then click <em>Manage Extension Shortcuts</em>.</li> + <li>Find the <em>Yomichan</em> section and configure the shortcuts.</li> + </ul> + </div> + <div class="modal-separator-line"></div> + <div class="modal-settings-group" id="extension-hotkey-list"></div> + </div> + <div class="modal-footer"> + <button class="low-emphasis danger" id="extension-hotkey-list-reset-all">Reset All</button> + <button class="low-emphasis danger" id="extension-hotkey-list-clear-all">Clear All</button> + <button data-modal-action="hide">Close</button> + </div> +</div></div> + <!-- Keyboard shortcuts templates --> <template id="hotkey-list-item-template"><div class="hotkey-list-item"><div class="hotkey-list-item-grid"> <div class="hotkey-list-item-index-cell generic-list-index-prefix"></div> @@ -3101,12 +3150,29 @@ </div> </div></div></template> +<template id="extension-hotkey-list-item-template"><div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable"> + <div class="settings-item-left"> + <div class="settings-item-label"></div> + </div> + <div class="settings-item-right"> + <div class="flex-row-nowrap"> + <input type="text"> + <button class="icon-button extension-hotkey-list-item-button" data-menu="extension-hotkey-list-item-menu" data-menu-position="below left"><span class="icon-button-inner"><span class="icon" data-icon="kebab-menu"></span></span></button> + </div> + </div> +</div></div></template> + <template id="hotkey-list-item-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body"> <button class="popup-menu-item" data-menu-action="clearInputs">Clear input</button> <button class="popup-menu-item" data-menu-action="resetInput">Reset input</button> <button class="popup-menu-item" data-menu-action="delete">Delete</button> </div></div></div></template> +<template id="extension-hotkey-list-item-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body"> + <button class="popup-menu-item" data-menu-action="clearInput">Clear input</button> + <button class="popup-menu-item" data-menu-action="resetInput">Reset input</button> +</div></div></div></template> + <!-- Scripts --> <script src="/mixed/lib/jszip.min.js"></script> @@ -3165,6 +3231,7 @@ <script src="/bg/js/settings/status-footer.js"></script> <script src="/bg/js/settings/storage-controller.js"></script> +<script src="/bg/js/settings2/extension-keyboard-shortcuts-controller.js"></script> <script src="/bg/js/settings2/keyboard-shortcuts-controller.js"></script> <script src="/bg/js/settings2/nested-popups-controller.js"></script> <script src="/bg/js/settings2/popup-window-controller.js"></script> diff --git a/ext/mixed/css/material.css b/ext/mixed/css/material.css index 2dd10791..1f1d45d7 100644 --- a/ext/mixed/css/material.css +++ b/ext/mixed/css/material.css @@ -822,7 +822,6 @@ input[type=number][data-invalid=true]+button.input-suffix-button { /* Material design icon button */ button.icon-button { - display: inline-block; vertical-align: middle; border: none; margin: 0; @@ -832,6 +831,9 @@ button.icon-button { cursor: pointer; background-color: transparent; } +button.icon-button:not([hidden]) { + display: inline-block; +} button.icon-button>.icon-button-inner { display: block; width: var(--icon-button-size); |