diff options
Diffstat (limited to 'ext')
| -rw-r--r-- | ext/bg/context.html | 11 | ||||
| -rw-r--r-- | ext/bg/js/context-main.js | 16 | ||||
| -rw-r--r-- | ext/bg/search.html | 2 | ||||
| -rw-r--r-- | ext/fg/float.html | 8 | ||||
| -rw-r--r-- | ext/mixed/display-templates.html | 22 | ||||
| -rw-r--r-- | ext/mixed/js/display-generator.js | 11 | ||||
| -rw-r--r-- | ext/mixed/js/display.js | 9 | ||||
| -rw-r--r-- | ext/mixed/js/hotkey-help-controller.js | 120 | ||||
| -rw-r--r-- | ext/mixed/js/html-template-collection.js | 4 | 
9 files changed, 183 insertions, 20 deletions
| diff --git a/ext/bg/context.html b/ext/bg/context.html index 4b2bcb8c..afd89207 100644 --- a/ext/bg/context.html +++ b/ext/bg/context.html @@ -30,9 +30,9 @@                  <optgroup label="Primary Profile" id="profile-select-option-group"></optgroup>              </select></span>          </button> -        <a class="nav-button action-open-settings" data-icon="cog" title="Options
(Middle click to open in new tab)"></a> -        <a class="nav-button action-open-search" data-icon="magnifying-glass" title="Search (Alt + Insert)
(Middle click to open in new tab)"></a> -        <a class="nav-button action-open-info" data-icon="question-mark" title="Information"></a> +        <a class="nav-button action-open-settings" data-icon="cog" title="Settings" data-hotkey='["global:openSettingsPage","title","Settings ({0})"]'></a> +        <a class="nav-button action-open-search" data-icon="magnifying-glass" title="Search" data-hotkey='["global:openSearchPage","title","Search ({0})"]'></a> +        <a class="nav-button action-open-info" data-icon="question-mark" title="Information" data-hotkey='["global:openInfoPage","title","Information ({0})"]'></a>      </div>  </div> @@ -42,7 +42,7 @@          <span class="link-group-icon"><input type="checkbox" id="enable-search2"></span><span class="link-group-label">Enable content scanning</span>      </label>      <a class="link-group action-open-settings"> -        <span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Options</span> +        <span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Settings</span>      </a>      <a class="link-group action-open-search">          <span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Search</span> @@ -57,6 +57,9 @@  <script src="/mixed/js/comm.js"></script>  <script src="/mixed/js/api.js"></script> +<script src="/mixed/js/hotkey-help-controller.js"></script> +<script src="/mixed/js/hotkey-util.js"></script> +  <script src="/bg/js/context-main.js"></script>  </body> diff --git a/ext/bg/js/context-main.js b/ext/bg/js/context-main.js index 839b534e..65853514 100644 --- a/ext/bg/js/context-main.js +++ b/ext/bg/js/context-main.js @@ -16,6 +16,7 @@   */  /* global + * HotkeyHelpController   * api   */ @@ -35,6 +36,8 @@ class DisplayController {          const optionsFull = await api.optionsGetFull();          this._optionsFull = optionsFull; +        this._setupHotkeys(); +          const optionsPageUrl = optionsFull.global.useSettingsV2 ? '/bg/settings2.html' : manifest.options_ui.page;          this._setupButtonEvents('.action-open-settings', 'openSettingsPage', chrome.runtime.getURL(optionsPageUrl)); @@ -99,6 +102,19 @@ class DisplayController {          }      } +    async _setupHotkeys() { +        const hotkeyHelpController = new HotkeyHelpController(); +        await hotkeyHelpController.prepare(); + +        const {profiles, profileCurrent} = this._optionsFull; +        const primaryProfile = (profileCurrent >= 0 && profileCurrent < profiles.length) ? profiles[profileCurrent] : null; +        if (primaryProfile !== null) { +            hotkeyHelpController.setOptions(primaryProfile.options); +        } + +        hotkeyHelpController.setupNode(document.documentElement); +    } +      _updateProfileSelect(profiles, profileCurrent) {          const select = document.querySelector('#profile-select');          const optionGroup = document.querySelector('#profile-select-option-group'); diff --git a/ext/bg/search.html b/ext/bg/search.html index f8e4d21c..4a0cac58 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -94,6 +94,8 @@  <script src="/mixed/js/display-notification.js"></script>  <script src="/mixed/js/dynamic-loader.js"></script>  <script src="/mixed/js/hotkey-handler.js"></script> +<script src="/mixed/js/hotkey-help-controller.js"></script> +<script src="/mixed/js/hotkey-util.js"></script>  <script src="/mixed/js/media-loader.js"></script>  <script src="/mixed/js/scroll.js"></script>  <script src="/mixed/js/text-scanner.js"></script> diff --git a/ext/fg/float.html b/ext/fg/float.html index 52fe3e66..512818bd 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -66,11 +66,11 @@      <div class="content-sidebar scrollbar" id="content-sidebar">          <div class="content-sidebar-inner">              <div class="content-sidebar-top-pre"> -                <button class="sidebar-button danger" id="close-button" title="Close popup"><span class="sidebar-button-icon" data-icon="cross"></span></button> +                <button class="sidebar-button danger" id="close-button" title="Close popup" data-hotkey='["close","title","Close popup ({0})"]'><span class="sidebar-button-icon" data-icon="cross"></span></button>              </div>              <div class="content-sidebar-top"> -                <button class="sidebar-button" disabled id="navigate-previous-button" title="Previous definition (Alt + B)"><span class="sidebar-button-icon" data-icon="left-chevron"></span></button> -                <button class="sidebar-button" disabled id="navigate-next-button" title="Next definition (Alt + F)"><span class="sidebar-button-icon" data-icon="right-chevron"></span></button> +                <button class="sidebar-button" disabled id="navigate-previous-button" title="Previous definition" data-hotkey='["historyBackward","title","Previous definition ({0})"]'><span class="sidebar-button-icon" data-icon="left-chevron"></span></button> +                <button class="sidebar-button" disabled id="navigate-next-button" title="Next definition" data-hotkey='["historyForward","title","Next definition ({0})"]'><span class="sidebar-button-icon" data-icon="right-chevron"></span></button>              </div>              <div class="content-sidebar-bottom">                  <button class="sidebar-button" id="profile-button"><span class="sidebar-button-icon" data-icon="profile"></span></button> @@ -110,6 +110,8 @@  <script src="/mixed/js/dynamic-loader.js"></script>  <script src="/mixed/js/frame-endpoint.js"></script>  <script src="/mixed/js/hotkey-handler.js"></script> +<script src="/mixed/js/hotkey-help-controller.js"></script> +<script src="/mixed/js/hotkey-util.js"></script>  <script src="/mixed/js/media-loader.js"></script>  <script src="/mixed/js/panel-element.js"></script>  <script src="/mixed/js/scroll.js"></script> diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html index 66cd9785..c261bcdb 100644 --- a/ext/mixed/display-templates.html +++ b/ext/mixed/display-templates.html @@ -2,16 +2,16 @@  <!-- Term entry templates -->  <template id="term-entry-template" data-remove-whitespace-text="true"><div class="entry" data-type="term"> -    <div class="entry-current-indicator" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"><span class="entry-current-indicator-inner"></span></div> +    <div class="entry-current-indicator" title="Current entry"><span class="entry-current-indicator-inner"></span></div>      <div class="entry-header1">          <div class="entry-header2">              <div class="entry-header3">                  <div class="actions"> -                    <button class="action-button action-view-note" hidden disabled data-icon="view-note" title="View added note (Alt + V)"></button> -                    <button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="term-kanji" title="Add expression (Alt + E)"></button> -                    <button class="action-button action-add-note" hidden disabled data-icon="add-term-kana" data-mode="term-kana" title="Add reading (Alt + R)"></button> -                    <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio" data-title-default="Play audio"></button> -                    <span class="entry-current-indicator-icon" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></span> +                    <button class="action-button action-view-note" hidden disabled data-icon="view-note" title="View added note" data-hotkey='["viewNote","title","View added note ({0})"]'></button> +                    <button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="term-kanji" title="Add expression" data-hotkey='["addNoteTermKanji","title","Add expression ({0})"]'></button> +                    <button class="action-button action-add-note" hidden disabled data-icon="add-term-kana" data-mode="term-kana" title="Add reading" data-hotkey='["addNoteTermKana","title","Add reading ({0})"]'></button> +                    <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]'></button> +                    <span class="entry-current-indicator-icon" title="Current entry"></span>                  </div>                  <div class="term-expression-list"></div>              </div> @@ -44,7 +44,7 @@          </span>      </div>      <div class="term-expression-details"> -        <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio" data-title-default="Play audio"></button> +        <button class="action-button action-play-audio" data-icon="play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]'></button>          <div class="tags tag-list"></div>      </div>  </div></template> @@ -84,14 +84,14 @@  <!-- Kanji entry templates -->  <template id="kanji-entry-template" data-remove-whitespace-text="true"><div class="entry" data-type="kanji"> -    <div class="entry-current-indicator" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"><span class="entry-current-indicator-inner"></span></div> +    <div class="entry-current-indicator" title="Current entry"><span class="entry-current-indicator-inner"></span></div>      <div class="entry-header1">          <div class="entry-header2">              <div class="entry-header3">                  <div class="actions"> -                    <button class="action-button action-view-note" hidden disabled data-icon="view-note" title="View added note (Alt + V)"></button> -                    <button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="kanji" title="Add Kanji (Alt + K)"></button> -                    <span class="entry-current-indicator-icon" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)"></span> +                    <button class="action-button action-view-note" hidden disabled data-icon="view-note" title="View added note" data-hotkey='["viewNote","title","View added note ({0})"]'></button> +                    <button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="kanji" title="Add kanji" data-hotkey='["addNoteKanji","title","Add kanji ({0})"]'></button> +                    <span class="entry-current-indicator-icon" title="Current entry"></span>                  </div>                  <div class="kanji-glyph-container">                      <span class="term-expression-current-indicator"></span> diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js index b48ddadc..0102afbc 100644 --- a/ext/mixed/js/display-generator.js +++ b/ext/mixed/js/display-generator.js @@ -22,9 +22,10 @@   */  class DisplayGenerator { -    constructor({japaneseUtil, mediaLoader}) { +    constructor({japaneseUtil, mediaLoader, hotkeyHelpController}) {          this._japaneseUtil = japaneseUtil;          this._mediaLoader = mediaLoader; +        this._hotkeyHelpController = hotkeyHelpController;          this._templates = null;          this._termPitchAccentStaticTemplateIsSetup = false;      } @@ -32,6 +33,14 @@ class DisplayGenerator {      async prepare() {          const html = await api.getDisplayTemplatesHtml();          this._templates = new HtmlTemplateCollection(html); +        this.updateHotkeys(); +    } + +    updateHotkeys() { +        const hotkeyHelpController = this._hotkeyHelpController; +        for (const template of this._templates.getAllTemplates()) { +            hotkeyHelpController.setupNode(template.content); +        }      }      preparePitchAccents() { diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index a9d59aff..6af35074 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -24,6 +24,7 @@   * DocumentUtil   * FrameEndpoint   * Frontend + * HotkeyHelpController   * MediaLoader   * PopupFactory   * QueryParser @@ -50,9 +51,11 @@ class Display extends EventDispatcher {          this._eventListeners = new EventListenerCollection();          this._setContentToken = null;          this._mediaLoader = new MediaLoader(); +        this._hotkeyHelpController = new HotkeyHelpController();          this._displayGenerator = new DisplayGenerator({              japaneseUtil, -            mediaLoader: this._mediaLoader +            mediaLoader: this._mediaLoader, +            hotkeyHelpController: this._hotkeyHelpController          });          this._messageHandlers = new Map();          this._directMessageHandlers = new Map(); @@ -201,6 +204,7 @@ class Display extends EventDispatcher {          this._browser = browser;          // Prepare +        await this._hotkeyHelpController.prepare();          await this._displayGenerator.prepare();          this._displayAudio.prepare();          this._queryParser.prepare(); @@ -285,6 +289,9 @@ class Display extends EventDispatcher {          this._updateTheme(options.general.popupTheme);          this.setCustomCss(options.general.customPopupCss);          this._displayAudio.updateOptions(options); +        this._hotkeyHelpController.setOptions(options); +        this._displayGenerator.updateHotkeys(); +        this._hotkeyHelpController.setupNode(document.documentElement);          this._queryParser.setOptions({              selectedParser: options.parsing.selectedParser, diff --git a/ext/mixed/js/hotkey-help-controller.js b/ext/mixed/js/hotkey-help-controller.js new file mode 100644 index 00000000..032573c1 --- /dev/null +++ b/ext/mixed/js/hotkey-help-controller.js @@ -0,0 +1,120 @@ +/* + * 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 <http://www.gnu.org/licenses/>. + */ + +/* global + * HotkeyUtil + * api + */ + +class HotkeyHelpController { +    constructor() { +        this._hotkeyUtil = new HotkeyUtil(); +        this._localActionHotseys = new Map(); +        this._globalActionHotkeys = new Map(); +        this._replacementPattern = /\{0\}/g; +    } + +    async prepare() { +        const {platform: {os}} = await api.getEnvironmentInfo(); +        this._hotkeyUtil.os = os; +        await this._setupGlobalCommands(this._globalActionHotkeys); +    } + +    setOptions(options) { +        const hotkeys = options.inputs.hotkeys; +        const hotkeyMap = this._localActionHotseys; +        hotkeyMap.clear(); +        for (const {enabled, action, key, modifiers} of hotkeys) { +            if (!enabled || key === null || action === '' || hotkeyMap.has(action)) { continue; } +            hotkeyMap.set(action, this._hotkeyUtil.getInputDisplayValue(key, modifiers)); +        } +    } + +    setupNode(node) { +        const globalPrexix = 'global:'; +        const replacementPattern = this._replacementPattern; +        for (const node2 of node.querySelectorAll('[data-hotkey]')) { +            const data = JSON.parse(node2.dataset.hotkey); +            let [action, attributes, values] = data; +            if (!Array.isArray(attributes)) { attributes = [attributes]; } +            const multipleValues = Array.isArray(values); + +            const actionIsGlobal = action.startsWith(globalPrexix); +            if (actionIsGlobal) { action = action.substring(globalPrexix.length); } + +            const defaultAttributeValues = this._getDefaultAttributeValues(node2, data, attributes); + +            const hotkey = (actionIsGlobal ? this._globalActionHotkeys : this._localActionHotseys).get(action); + +            for (let i = 0, ii = attributes.length; i < ii; ++i) { +                const attribute = attributes[i]; +                let value = null; +                if (typeof hotkey !== 'undefined') { +                    value = (multipleValues ? values[i] : values); +                    value = value.replace(replacementPattern, hotkey); +                } else { +                    value = defaultAttributeValues[i]; +                } + +                if (typeof value === 'string') { +                    node2.setAttribute(attribute, value); +                } else { +                    node2.removeAttribute(attribute); +                } +            } +        } +    } + +    // Private + +    async _setupGlobalCommands(commandMap) { +        const commands = await new Promise((resolve, reject) => { +            chrome.commands.getAll((result) => { +                const e = chrome.runtime.lastError; +                if (e) { +                    reject(new Error(e.message)); +                } else { +                    resolve(result); +                } +            }); +        }); + +        commandMap.clear(); +        for (const {name, shortcut} of commands) { +            if (shortcut.length === 0) { continue; } +            const {key, modifiers} = this._hotkeyUtil.convertCommandToInput(shortcut); +            commandMap.set(name, this._hotkeyUtil.getInputDisplayValue(key, modifiers)); +        } +        return commandMap; +    } + +    _getDefaultAttributeValues(node, data, attributes) { +        if (data.length > 3) { +            return data[3]; +        } + +        const defaultAttributeValues = []; +        for (let i = 0, ii = attributes.length; i < ii; ++i) { +            const attribute = attributes[i]; +            const value = node.hasAttribute(attribute) ? node.getAttribute(attribute) : null; +            defaultAttributeValues.push(value); +        } +        data[3] = defaultAttributeValues; +        node.dataset.hotkey = JSON.stringify(data); +        return defaultAttributeValues; +    } +} diff --git a/ext/mixed/js/html-template-collection.js b/ext/mixed/js/html-template-collection.js index 65b316c8..52d5f3b0 100644 --- a/ext/mixed/js/html-template-collection.js +++ b/ext/mixed/js/html-template-collection.js @@ -44,6 +44,10 @@ class HtmlTemplateCollection {          return document.importNode(template.content, true);      } +    getAllTemplates() { +        return this._templates.values(); +    } +      // Private      _prepareTemplate(template) { |