alex/yomichan
1
Fork 0
Code Releases Activity

Toggle option hotkey (#1571)

Browse Source 
* Set up toggleOption hotkey action settings

* Update styles

* Disable spell check and autocomplete

* Add OptionToggleHotkeyHandler

* Improve auto-close behaviour
This commit is contained in:
toasted-nutbread 2021-03-28 14:04:20 -04:00 committed by GitHub
parent 98994d0b65
commit b4d6a5d3b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 235 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ext/css/material.css
View File

@ -177,6 +177,15 @@
}
/* Text styles */
.light {
color: var(--text-color-light2);
}
.danger-text {
color: var(--danger-color);
}
/* Icons */
.icon {
--icon-image: none;

6
ext/css/settings.css
View File

@ -158,15 +158,9 @@ pre {
/* Text styles */
.light {
color: var(--text-color-light2);
}
.warning-text {
color: var(--warning-color);
}
.danger-text {
color: var(--danger-color);
}
/* Headings */

7
ext/js/display/display.js
View File

@ -27,6 +27,7 @@
* Frontend
* HotkeyHelpController
* MediaLoader
* OptionToggleHotkeyHandler
* PopupFactory
* PopupMenu
* QueryParser
@ -112,6 +113,7 @@ class Display extends EventDispatcher {
this._ankiNoteNotification = null;
this._ankiNoteNotificationEventListeners = null;
this._queryPostProcessor = null;
this._optionToggleHotkeyHandler = new OptionToggleHotkeyHandler(this);
this._hotkeyHandler.registerActions([
['close', () => { this._onHotkeyClose(); }],
@ -201,6 +203,10 @@ class Display extends EventDispatcher {
return this._parentPopupId;
}
get notificationContainer() {
return this._footerNotificationContainer;
}
async prepare() {
// State setup
const {documentElement} = document;
@ -213,6 +219,7 @@ class Display extends EventDispatcher {
this._displayAudio.prepare();
this._queryParser.prepare();
this._history.prepare();
this._optionToggleHotkeyHandler.prepare();
// Event setup
this._history.on('stateChanged', this._onStateChanged.bind(this));

164
ext/js/display/option-toggle-hotkey-handler.js Normal file
View File

@ -0,0 +1,164 @@
/*
* 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
* DisplayNotification
*/
class OptionToggleHotkeyHandler {
constructor(display) {
this._display = display;
this._notification = null;
this._notificationHideTimer = null;
this._notificationHideTimeout = 5000;
}
get notificationHideTimeout() {
return this._notificationHideTimeout;
}
set notificationHideTimeout(value) {
this._notificationHideTimeout = value;
}
prepare() {
this._display.hotkeyHandler.registerActions([
['toggleOption', this._onHotkeyActionToggleOption.bind(this)]
]);
}
// Private
_onHotkeyActionToggleOption(argument) {
this._toggleOption(argument);
}
async _toggleOption(path) {
let value;
try {
const optionsContext = this._display.getOptionsContext();
const result = (await yomichan.api.getSettings([{
scope: 'profile',
path,
optionsContext
}]))[0];
const {error} = result;
if (typeof error !== 'undefined') {
throw deserializeError(error);
}
value = result.result;
if (typeof value !== 'boolean') {
throw new Error(`Option value of type ${typeof value} cannot be toggled`);
}
value = !value;
const result2 = (await yomichan.api.modifySettings([{
scope: 'profile',
action: 'set',
path,
value,
optionsContext
}]))[0];
const {error: error2} = result2;
if (typeof error2 !== 'undefined') {
throw deserializeError(error2);
}
this._showNotification(this._createSuccessMessage(path, value), true);
} catch (e) {
this._showNotification(this._createErrorMessage(path, e), false);
}
}
_createSuccessMessage(path, value) {
const fragment = document.createDocumentFragment();
const n1 = document.createElement('em');
n1.textContent = path;
const n2 = document.createElement('strong');
n2.textContent = value;
fragment.appendChild(document.createTextNode('Option '));
fragment.appendChild(n1);
fragment.appendChild(document.createTextNode(' changed to '));
fragment.appendChild(n2);
return fragment;
}
_createErrorMessage(path, error) {
let message;
try {
({message} = error);
} catch (e) {
// NOP
}
if (typeof message !== 'string') {
message = `${error}`;
}
const fragment = document.createDocumentFragment();
const n1 = document.createElement('em');
n1.textContent = path;
const n2 = document.createElement('div');
n2.textContent = message;
n2.className = 'danger-text';
fragment.appendChild(document.createTextNode('Failed to toggle option '));
fragment.appendChild(n1);
fragment.appendChild(document.createTextNode(': '));
fragment.appendChild(n2);
return fragment;
}
_showNotification(message, autoClose) {
if (this._notification === null) {
const node = this._display.displayGenerator.createEmptyFooterNotification();
node.addEventListener('click', this._onNotificationClick.bind(this), false);
this._notification = new DisplayNotification(this._display.notificationContainer, node);
}
this._notification.setContent(message);
this._notification.open();
this._stopHideNotificationTimer();
if (autoClose) {
this._notificationHideTimer = setTimeout(this._onNotificationHideTimeout.bind(this), this._notificationHideTimeout);
}
}
_hideNotification(animate) {
if (this._notification === null) { return; }
this._notification.close(animate);
this._stopHideNotificationTimer();
}
_stopHideNotificationTimer() {
if (this._notificationHideTimer !== null) {
clearTimeout(this._notificationHideTimer);
this._notificationHideTimer = null;
}
}
_onNotificationHideTimeout() {
this._notificationHideTimer = null;
this._hideNotification(true);
}
_onNotificationClick() {
this._stopHideNotificationTimer();
}
}

51
ext/js/pages/settings/keyboard-shortcuts-controller.js
View File

@ -18,6 +18,7 @@
/* global
* DOMDataBinder
* KeyboardMouseInputField
* ObjectPropertyAccessor
*/
class KeyboardShortcutController {
@ -50,7 +51,8 @@ class KeyboardShortcutController {
['playAudio', {scopes: new Set(['popup', 'search'])}],
['playAudioFromSource', {scopes: new Set(['popup', 'search']), argument: {template: 'hotkey-argument-audio-source', default: 'jpod101'}}],
['copyHostSelection', {scopes: new Set(['popup'])}],
['scanSelectedText', {scopes: new Set(['web'])}]
['scanSelectedText', {scopes: new Set(['web'])}],
['toggleOption', {scopes: new Set(['popup', 'search']), argument: {template: 'hotkey-argument-setting-path', default: ''}}]
]);
}
@ -316,14 +318,13 @@ class KeyboardShortcutHotkeyEntry {
_onArgumentValueChange(template, e) {
const node = e.currentTarget;
const value = this._getArgumentInputValue(node);
let newValue = value;
let value = this._getArgumentInputValue(node);
switch (template) {
case 'hotkey-argument-move-offset':
newValue = `${DOMDataBinder.convertToNumber(value, node)}`;
value = `${DOMDataBinder.convertToNumber(value, node)}`;
break;
}
this._setArgument(newValue);
this._setArgument(value);
}
async _delete() {
@ -467,6 +468,8 @@ class KeyboardShortcutHotkeyEntry {
this._setArgumentInputValue(node, value);
}
this._updateArgumentInputValidity();
await this._modifyProfileSettings([{
action: 'set',
path: `${this._basePath}.argument`,
@ -540,6 +543,7 @@ class KeyboardShortcutHotkeyEntry {
if (inputNode !== null) {
this._setArgumentInputValue(inputNode, argument);
this._argumentInput = inputNode;
this._updateArgumentInputValidity();
this._argumentEventListeners.addEventListener(inputNode, 'change', this._onArgumentValueChange.bind(this, template), false);
}
this._argumentContainer.appendChild(node);
@ -558,4 +562,41 @@ class KeyboardShortcutHotkeyEntry {
_setArgumentInputValue(node, value) {
node.value = value;
}
async _updateArgumentInputValidity() {
if (this._argumentInput === null) { return; }
let okay = true;
const {action, argument} = this._data;
const details = this._parent.getActionDetails(action);
const {argument: argumentDetails} = typeof details !== 'undefined' ? details : {};
if (typeof argumentDetails !== 'undefined') {
const {template} = argumentDetails;
switch (template) {
case 'hotkey-argument-setting-path':
okay = await this._isHotkeyArgumentSettingPathValid(argument);
break;
}
}
this._argumentInput.dataset.invalid = `${!okay}`;
}
async _isHotkeyArgumentSettingPathValid(path) {
if (path.length === 0) { return true; }
const options = await this._parent.settingsController.getOptions();
const accessor = new ObjectPropertyAccessor(options);
const pathArray = ObjectPropertyAccessor.getPathArray(path);
try {
const value = accessor.get(pathArray, pathArray.length);
if (typeof value === 'boolean') {
return true;
}
} catch (e) {
// NOP
}
return false;
}
}

1
ext/popup.html
View File

@ -105,6 +105,7 @@
<script src="/js/display/display-notification.js"></script>
<script src="/js/display/display-profile-selection.js"></script>
<script src="/js/display/display-resizer.js"></script>
<script src="/js/display/option-toggle-hotkey-handler.js"></script>
<script src="/js/display/query-parser.js"></script>
<script src="/js/dom/document-focus-controller.js"></script>
<script src="/js/dom/document-util.js"></script>

1
ext/search.html
View File

@ -89,6 +89,7 @@
<script src="/js/display/display-generator.js"></script>
<script src="/js/display/display-history.js"></script>
<script src="/js/display/display-notification.js"></script>
<script src="/js/display/option-toggle-hotkey-handler.js"></script>
<script src="/js/display/query-parser.js"></script>
<script src="/js/display/search-display-controller.js"></script>
<script src="/js/dom/document-focus-controller.js"></script>

8
ext/settings.html
View File

@ -3172,6 +3172,7 @@
<option value="playAudioFromSource">Play audio from source</option>
<option value="copyHostSelection">Copy host window selection</option>
<option value="scanSelectedText">Scan selected text</option>
<option value="toggleOption">Toggle option</option>
</select>
<div class="hotkey-list-item-action-argument-container"></div>
</div>
@ -3221,9 +3222,14 @@
<input type="number" step="1" min="1" class="hotkey-argument-input">
</div></template>
<template id="hotkey-argument-setting-path-template"><div class="flex-row-nowrap">
<span class="hotkey-argument-label">Path:</span>
<input type="text" class="hotkey-argument-input horizontal-flex-fill" spellcheck="false" autocomplete="off">
</div></template>
<template id="hotkey-argument-audio-source-template"><div class="flex-row-nowrap">
<span class="hotkey-argument-label">Source:</span>
<select class="audio-source-select hotkey-argument-input">
<select class="audio-source-select hotkey-argument-input horizontal-flex-fill">
<option value="jpod101">JapanesePod101</option>
<option value="jpod101-alternate">JapanesePod101 (Alternate)</option>
<option value="jisho">Jisho.org</option>