Hotkey help controller (#1272)

* Create HotkeyHelpController

* Expose getAllTemplates

* Update hotkeys on the context page

* Update hotkeys on the display pages

* Fix display issue where a hotkey used to be defined but no longer is
This commit is contained in:
toasted-nutbread 2021-01-18 15:23:49 -05:00 committed by GitHub
parent 0420a29d77
commit cbc5ab5696
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 183 additions and 20 deletions

View File

@ -30,9 +30,9 @@
<optgroup label="Primary Profile" id="profile-select-option-group"></optgroup> <optgroup label="Primary Profile" id="profile-select-option-group"></optgroup>
</select></span> </select></span>
</button> </button>
<a class="nav-button action-open-settings" data-icon="cog" title="Options&#10;(Middle click to open in new tab)"></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 (Alt + Insert)&#10;(Middle click to open in new tab)"></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"></a> <a class="nav-button action-open-info" data-icon="question-mark" title="Information" data-hotkey='["global:openInfoPage","title","Information ({0})"]'></a>
</div> </div>
</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> <span class="link-group-icon"><input type="checkbox" id="enable-search2"></span><span class="link-group-label">Enable content scanning</span>
</label> </label>
<a class="link-group action-open-settings"> <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>
<a class="link-group action-open-search"> <a class="link-group action-open-search">
<span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Search</span> <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/comm.js"></script>
<script src="/mixed/js/api.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> <script src="/bg/js/context-main.js"></script>
</body> </body>

View File

@ -16,6 +16,7 @@
*/ */
/* global /* global
* HotkeyHelpController
* api * api
*/ */
@ -35,6 +36,8 @@ class DisplayController {
const optionsFull = await api.optionsGetFull(); const optionsFull = await api.optionsGetFull();
this._optionsFull = optionsFull; this._optionsFull = optionsFull;
this._setupHotkeys();
const optionsPageUrl = optionsFull.global.useSettingsV2 ? '/bg/settings2.html' : manifest.options_ui.page; const optionsPageUrl = optionsFull.global.useSettingsV2 ? '/bg/settings2.html' : manifest.options_ui.page;
this._setupButtonEvents('.action-open-settings', 'openSettingsPage', chrome.runtime.getURL(optionsPageUrl)); 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) { _updateProfileSelect(profiles, profileCurrent) {
const select = document.querySelector('#profile-select'); const select = document.querySelector('#profile-select');
const optionGroup = document.querySelector('#profile-select-option-group'); const optionGroup = document.querySelector('#profile-select-option-group');

View File

@ -94,6 +94,8 @@
<script src="/mixed/js/display-notification.js"></script> <script src="/mixed/js/display-notification.js"></script>
<script src="/mixed/js/dynamic-loader.js"></script> <script src="/mixed/js/dynamic-loader.js"></script>
<script src="/mixed/js/hotkey-handler.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/media-loader.js"></script>
<script src="/mixed/js/scroll.js"></script> <script src="/mixed/js/scroll.js"></script>
<script src="/mixed/js/text-scanner.js"></script> <script src="/mixed/js/text-scanner.js"></script>

View File

@ -66,11 +66,11 @@
<div class="content-sidebar scrollbar" id="content-sidebar"> <div class="content-sidebar scrollbar" id="content-sidebar">
<div class="content-sidebar-inner"> <div class="content-sidebar-inner">
<div class="content-sidebar-top-pre"> <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>
<div class="content-sidebar-top"> <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-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 (Alt + F)"><span class="sidebar-button-icon" data-icon="right-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>
<div class="content-sidebar-bottom"> <div class="content-sidebar-bottom">
<button class="sidebar-button" id="profile-button"><span class="sidebar-button-icon" data-icon="profile"></span></button> <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/dynamic-loader.js"></script>
<script src="/mixed/js/frame-endpoint.js"></script> <script src="/mixed/js/frame-endpoint.js"></script>
<script src="/mixed/js/hotkey-handler.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/media-loader.js"></script>
<script src="/mixed/js/panel-element.js"></script> <script src="/mixed/js/panel-element.js"></script>
<script src="/mixed/js/scroll.js"></script> <script src="/mixed/js/scroll.js"></script>

View File

@ -2,16 +2,16 @@
<!-- Term entry templates --> <!-- Term entry templates -->
<template id="term-entry-template" data-remove-whitespace-text="true"><div class="entry" data-type="term"> <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-header1">
<div class="entry-header2"> <div class="entry-header2">
<div class="entry-header3"> <div class="entry-header3">
<div class="actions"> <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-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 (Alt + E)"></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 (Alt + R)"></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"></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 (Alt + Up/Down/Home/End/PgUp/PgDn)"></span> <span class="entry-current-indicator-icon" title="Current entry"></span>
</div> </div>
<div class="term-expression-list"></div> <div class="term-expression-list"></div>
</div> </div>
@ -44,7 +44,7 @@
</span> </span>
</div> </div>
<div class="term-expression-details"> <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 class="tags tag-list"></div>
</div> </div>
</div></template> </div></template>
@ -84,14 +84,14 @@
<!-- Kanji entry templates --> <!-- Kanji entry templates -->
<template id="kanji-entry-template" data-remove-whitespace-text="true"><div class="entry" data-type="kanji"> <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-header1">
<div class="entry-header2"> <div class="entry-header2">
<div class="entry-header3"> <div class="entry-header3">
<div class="actions"> <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-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 (Alt + K)"></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 (Alt + Up/Down/Home/End/PgUp/PgDn)"></span> <span class="entry-current-indicator-icon" title="Current entry"></span>
</div> </div>
<div class="kanji-glyph-container"> <div class="kanji-glyph-container">
<span class="term-expression-current-indicator"></span> <span class="term-expression-current-indicator"></span>

View File

@ -22,9 +22,10 @@
*/ */
class DisplayGenerator { class DisplayGenerator {
constructor({japaneseUtil, mediaLoader}) { constructor({japaneseUtil, mediaLoader, hotkeyHelpController}) {
this._japaneseUtil = japaneseUtil; this._japaneseUtil = japaneseUtil;
this._mediaLoader = mediaLoader; this._mediaLoader = mediaLoader;
this._hotkeyHelpController = hotkeyHelpController;
this._templates = null; this._templates = null;
this._termPitchAccentStaticTemplateIsSetup = false; this._termPitchAccentStaticTemplateIsSetup = false;
} }
@ -32,6 +33,14 @@ class DisplayGenerator {
async prepare() { async prepare() {
const html = await api.getDisplayTemplatesHtml(); const html = await api.getDisplayTemplatesHtml();
this._templates = new HtmlTemplateCollection(html); this._templates = new HtmlTemplateCollection(html);
this.updateHotkeys();
}
updateHotkeys() {
const hotkeyHelpController = this._hotkeyHelpController;
for (const template of this._templates.getAllTemplates()) {
hotkeyHelpController.setupNode(template.content);
}
} }
preparePitchAccents() { preparePitchAccents() {

View File

@ -24,6 +24,7 @@
* DocumentUtil * DocumentUtil
* FrameEndpoint * FrameEndpoint
* Frontend * Frontend
* HotkeyHelpController
* MediaLoader * MediaLoader
* PopupFactory * PopupFactory
* QueryParser * QueryParser
@ -50,9 +51,11 @@ class Display extends EventDispatcher {
this._eventListeners = new EventListenerCollection(); this._eventListeners = new EventListenerCollection();
this._setContentToken = null; this._setContentToken = null;
this._mediaLoader = new MediaLoader(); this._mediaLoader = new MediaLoader();
this._hotkeyHelpController = new HotkeyHelpController();
this._displayGenerator = new DisplayGenerator({ this._displayGenerator = new DisplayGenerator({
japaneseUtil, japaneseUtil,
mediaLoader: this._mediaLoader mediaLoader: this._mediaLoader,
hotkeyHelpController: this._hotkeyHelpController
}); });
this._messageHandlers = new Map(); this._messageHandlers = new Map();
this._directMessageHandlers = new Map(); this._directMessageHandlers = new Map();
@ -201,6 +204,7 @@ class Display extends EventDispatcher {
this._browser = browser; this._browser = browser;
// Prepare // Prepare
await this._hotkeyHelpController.prepare();
await this._displayGenerator.prepare(); await this._displayGenerator.prepare();
this._displayAudio.prepare(); this._displayAudio.prepare();
this._queryParser.prepare(); this._queryParser.prepare();
@ -285,6 +289,9 @@ class Display extends EventDispatcher {
this._updateTheme(options.general.popupTheme); this._updateTheme(options.general.popupTheme);
this.setCustomCss(options.general.customPopupCss); this.setCustomCss(options.general.customPopupCss);
this._displayAudio.updateOptions(options); this._displayAudio.updateOptions(options);
this._hotkeyHelpController.setOptions(options);
this._displayGenerator.updateHotkeys();
this._hotkeyHelpController.setupNode(document.documentElement);
this._queryParser.setOptions({ this._queryParser.setOptions({
selectedParser: options.parsing.selectedParser, selectedParser: options.parsing.selectedParser,

View File

@ -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;
}
}

View File

@ -44,6 +44,10 @@ class HtmlTemplateCollection {
return document.importNode(template.content, true); return document.importNode(template.content, true);
} }
getAllTemplates() {
return this._templates.values();
}
// Private // Private
_prepareTemplate(template) { _prepareTemplate(template) {