aboutsummaryrefslogtreecommitdiff
path: root/ext/js/pages/settings/keyboard-shortcuts-controller.js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-03-27 22:30:45 -0400
committerGitHub <noreply@github.com>2021-03-27 22:30:45 -0400
commit2098d2faaeb1658ef753eb9f4ac123698938480e (patch)
tree72a92c3c9a2f3de4c6e5419d4e4bda55d5d04c6a /ext/js/pages/settings/keyboard-shortcuts-controller.js
parentaf04a4f414ae0a2dce6c46dc30c9fdee119912c2 (diff)
Hotkey arguments (#1565)
* Update display * Move scope definitions * Update scopes button after changing action * Don't show menu if empty * Improve scope updating * Update style * Simplify * Add argument to settings * Update convertToNumber implementation * Add support for arguments * Pass argument to action handler * Update hotkey action definitions * Remove x3 options
Diffstat (limited to 'ext/js/pages/settings/keyboard-shortcuts-controller.js')
-rw-r--r--ext/js/pages/settings/keyboard-shortcuts-controller.js174
1 files changed, 142 insertions, 32 deletions
diff --git a/ext/js/pages/settings/keyboard-shortcuts-controller.js b/ext/js/pages/settings/keyboard-shortcuts-controller.js
index 514928d7..2f636541 100644
--- a/ext/js/pages/settings/keyboard-shortcuts-controller.js
+++ b/ext/js/pages/settings/keyboard-shortcuts-controller.js
@@ -16,6 +16,7 @@
*/
/* global
+ * DOMDataBinder
* KeyboardMouseInputField
*/
@@ -30,6 +31,26 @@ class KeyboardShortcutController {
this._emptyIndicator = null;
this._stringComparer = new Intl.Collator('en-US'); // Invariant locale
this._scrollContainer = null;
+ this._actionDetails = new Map([
+ ['', {scopes: new Set()}],
+ ['close', {scopes: new Set(['popup', 'search'])}],
+ ['focusSearchBox', {scopes: new Set(['search'])}],
+ ['nextEntry', {scopes: new Set(['popup', 'search']), argument: {template: 'hotkey-argument-move-offset', default: '1'}}],
+ ['previousEntry', {scopes: new Set(['popup', 'search']), argument: {template: 'hotkey-argument-move-offset', default: '1'}}],
+ ['lastEntry', {scopes: new Set(['popup', 'search'])}],
+ ['firstEntry', {scopes: new Set(['popup', 'search'])}],
+ ['nextEntryDifferentDictionary', {scopes: new Set(['popup', 'search'])}],
+ ['previousEntryDifferentDictionary', {scopes: new Set(['popup', 'search'])}],
+ ['historyBackward', {scopes: new Set(['popup', 'search'])}],
+ ['historyForward', {scopes: new Set(['popup', 'search'])}],
+ ['addNoteKanji', {scopes: new Set(['popup', 'search'])}],
+ ['addNoteTermKanji', {scopes: new Set(['popup', 'search'])}],
+ ['addNoteTermKana', {scopes: new Set(['popup', 'search'])}],
+ ['viewNote', {scopes: new Set(['popup', 'search'])}],
+ ['playAudio', {scopes: new Set(['popup', 'search'])}],
+ ['copyHostSelection', {scopes: new Set(['popup'])}],
+ ['scanSelectedText', {scopes: new Set(['web'])}]
+ ]);
}
get settingsController() {
@@ -96,6 +117,10 @@ class KeyboardShortcutController {
return defaultOptions.profiles[0].options.inputs.hotkeys;
}
+ getActionDetails(action) {
+ return this._actionDetails.get(action);
+ }
+
// Private
_onOptionsChanged({options}) {
@@ -134,6 +159,7 @@ class KeyboardShortcutController {
async _addNewEntry() {
const newEntry = {
action: '',
+ argument: '',
key: null,
modifiers: [],
scopes: ['popup', 'search'],
@@ -169,6 +195,9 @@ class KeyboardShortcutHotkeyEntry {
this._enabledButton = null;
this._scopeMenu = null;
this._scopeMenuEventListeners = new EventListenerCollection();
+ this._argumentContainer = null;
+ this._argumentInput = null;
+ this._argumentEventListeners = new EventListenerCollection();
}
prepare() {
@@ -183,6 +212,7 @@ class KeyboardShortcutHotkeyEntry {
this._actionSelect = action;
this._enabledButton = enabledButton;
+ this._argumentContainer = node.querySelector('.hotkey-list-item-action-argument-container');
this._inputField = new KeyboardMouseInputField(input, null, this._os);
this._inputField.prepare(this._data.key, this._data.modifiers, false, true);
@@ -193,6 +223,7 @@ class KeyboardShortcutHotkeyEntry {
enabledToggle.dataset.setting = `${this._basePath}.enabled`;
this._updateScopesButton();
+ this._updateActionArgument();
this._eventListeners.addEventListener(scopesButton, 'menuOpen', this._onScopesMenuOpen.bind(this));
this._eventListeners.addEventListener(scopesButton, 'menuClose', this._onScopesMenuClose.bind(this));
@@ -205,6 +236,7 @@ class KeyboardShortcutHotkeyEntry {
this._eventListeners.removeAllEventListeners();
this._inputField.cleanup();
this._clearScopeMenu();
+ this._clearArgumentEventListeners();
if (this._node.parentNode !== null) {
this._node.parentNode.removeChild(this._node);
}
@@ -228,6 +260,11 @@ class KeyboardShortcutHotkeyEntry {
_onScopesMenuOpen(e) {
const {menu} = e.detail;
+ const validScopes = this._getValidScopesForAction(this._data.action);
+ if (validScopes.size === 0) {
+ menu.close();
+ return;
+ }
this._scopeMenu = menu;
this._updateScopeMenuItems(menu);
this._updateDisplay(menu.containerNode); // Fix a animation issue due to changing checkbox values
@@ -260,6 +297,21 @@ class KeyboardShortcutHotkeyEntry {
this._setAction(value);
}
+ _onArgumentValueChange(template, e) {
+ const node = e.currentTarget;
+ const value = this._getArgumentInputValue(node);
+ let newValue = value;
+ switch (template) {
+ case 'hotkey-argument-move-offset':
+ newValue = `${DOMDataBinder.convertToNumber(value, node)}`;
+ break;
+ }
+ if (value !== newValue) {
+ this._setArgumentInputValue(node, newValue);
+ }
+ this._setArgument(newValue);
+ }
+
async _delete() {
this._parent.deleteEntry(this._index);
}
@@ -294,13 +346,13 @@ class KeyboardShortcutHotkeyEntry {
scopes.splice(index, 1);
}
- this._updateScopesButton();
-
await this._modifyProfileSettings([{
action: 'set',
path: `${this._basePath}.scopes`,
value: scopes
}]);
+
+ this._updateScopesButton();
}
async _modifyProfileSettings(targets) {
@@ -326,58 +378,81 @@ class KeyboardShortcutHotkeyEntry {
}
async _setAction(value) {
- const targets = [{
- action: 'set',
- path: `${this._basePath}.action`,
- value
- }];
+ const validScopesOld = this._getValidScopesForAction(this._data.action);
+
+ const scopes = this._data.scopes;
+
+ let details = this._parent.getActionDetails(value);
+ if (typeof details === 'undefined') { details = {}; }
+
+ let validScopes = details.scopes;
+ if (typeof validScopes === 'undefined') { validScopes = new Set(); }
+
+ const {argument: argumentDetails} = details;
+ let defaultArgument = typeof argumentDetails !== 'undefined' ? argumentDetails.default : '';
+ if (typeof defaultArgument !== 'string') { defaultArgument = ''; }
this._data.action = value;
+ this._data.argument = defaultArgument;
- const scopes = this._data.scopes;
- const validScopes = this._getValidScopesForAction(value);
- if (validScopes !== null) {
- let changed = false;
+ let scopesChanged = false;
+ if ((validScopesOld !== null ? validScopesOld.size : 0) === scopes.length) {
+ scopes.length = 0;
+ scopesChanged = true;
+ } else {
for (let i = 0, ii = scopes.length; i < ii; ++i) {
if (!validScopes.has(scopes[i])) {
scopes.splice(i, 1);
--i;
--ii;
- changed = true;
+ scopesChanged = true;
}
}
- if (changed) {
- if (scopes.length === 0) {
- scopes.push(...validScopes);
- }
- targets.push({
- action: 'set',
- path: `${this._basePath}.scopes`,
- value: scopes
- });
- this._updateCheckboxStates();
- }
+ }
+ if (scopesChanged && scopes.length === 0) {
+ scopes.push(...validScopes);
}
- await this._modifyProfileSettings(targets);
+ await this._modifyProfileSettings([
+ {
+ action: 'set',
+ path: `${this._basePath}.action`,
+ value: this._data.action
+ },
+ {
+ action: 'set',
+ path: `${this._basePath}.argument`,
+ value: this._data.argument
+ },
+ {
+ action: 'set',
+ path: `${this._basePath}.scopes`,
+ value: this._data.scopes
+ }
+ ]);
- this._updateCheckboxVisibility();
+ this._updateScopesButton();
+ this._updateScopesMenu();
+ this._updateActionArgument();
}
- _updateCheckboxStates() {
- if (this._scopeMenu === null) { return; }
- this._updateScopeMenuItems(this._scopeMenu);
+ async _setArgument(value) {
+ this._data.argument = value;
+ await this._modifyProfileSettings([{
+ action: 'set',
+ path: `${this._basePath}.argument`,
+ value
+ }]);
}
- _updateCheckboxVisibility() {
+ _updateScopesMenu() {
if (this._scopeMenu === null) { return; }
this._updateScopeMenuItems(this._scopeMenu);
}
_getValidScopesForAction(action) {
- const optionNode = this._actionSelect.querySelector(`option[value="${action}"]`);
- const scopesString = (optionNode !== null ? optionNode.dataset.scopes : void 0);
- return (typeof scopesString === 'string' ? new Set(scopesString.split(' ')) : null);
+ const details = this._parent.getActionDetails(action);
+ return typeof details !== 'undefined' ? details.scopes : null;
}
_updateScopeMenuItems(menu) {
@@ -419,4 +494,39 @@ class KeyboardShortcutHotkeyEntry {
getComputedStyle(node).getPropertyValue('display');
style.display = display;
}
+
+ _updateActionArgument() {
+ this._clearArgumentEventListeners();
+
+ const {action, argument} = this._data;
+ const details = this._parent.getActionDetails(action);
+ const {argument: argumentDetails} = typeof details !== 'undefined' ? details : {};
+
+ this._argumentContainer.textContent = '';
+ if (typeof argumentDetails !== 'undefined') {
+ const {template} = argumentDetails;
+ const node = this._parent.settingsController.instantiateTemplate(template);
+ const inputSelector = '.hotkey-argument-input';
+ const inputNode = node.matches(inputSelector) ? node : node.querySelector(inputSelector);
+ if (inputNode !== null) {
+ this._setArgumentInputValue(inputNode, argument);
+ this._argumentInput = inputNode;
+ this._argumentEventListeners.addEventListener(inputNode, 'change', this._onArgumentValueChange.bind(this, template), false);
+ }
+ this._argumentContainer.appendChild(node);
+ }
+ }
+
+ _clearArgumentEventListeners() {
+ this._argumentEventListeners.removeAllEventListeners();
+ this._argumentInput = null;
+ }
+
+ _getArgumentInputValue(node) {
+ return node.value;
+ }
+
+ _setArgumentInputValue(node, value) {
+ node.value = value;
+ }
}