aboutsummaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
Diffstat (limited to 'ext')
-rw-r--r--ext/bg/css/settings2.css17
-rw-r--r--ext/bg/js/settings2/extension-keyboard-shortcuts-controller.js292
-rw-r--r--ext/bg/js/settings2/settings-main.js4
-rw-r--r--ext/bg/settings2.html107
-rw-r--r--ext/mixed/css/material.css4
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&hellip;</div>
+ <div class="settings-item-label">Configure standard keyboard shortcuts&hellip;</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&hellip;</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);