Toggle option hotkey (#1571)

* Set up toggleOption hotkey action settings

* Update styles

* Disable spell check and autocomplete

* Add OptionToggleHotkeyHandler

* Improve auto-close behaviour

2 files changed, 171 insertions, 0 deletions

diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index 3ae55da0..ee2448d6 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -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));
diff --git a/ext/js/display/option-toggle-hotkey-handler.js b/ext/js/display/option-toggle-hotkey-handler.js
new file mode 100644
index 00000000..fae17f8d
--- /dev/null
+++ b/ext/js/display/option-toggle-hotkey-handler.js
@@ -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();
+    }
+}