diff options
| -rw-r--r-- | ext/css/display.css | 12 | ||||
| -rw-r--r-- | ext/display-templates.html | 43 | ||||
| -rw-r--r-- | ext/js/display/display-anki.js | 29 | ||||
| -rw-r--r-- | ext/js/display/display-audio.js | 37 | ||||
| -rw-r--r-- | ext/js/display/display.js | 25 |
5 files changed, 95 insertions, 51 deletions
diff --git a/ext/css/display.css b/ext/css/display.css index b82a09d5..c8996f10 100644 --- a/ext/css/display.css +++ b/ext/css/display.css @@ -673,7 +673,7 @@ button.action-button:active { .action-icon:not(.color-icon) { background-color: var(--text-color); } -:root[data-result-output-mode=merge] .entry[data-type=term] .actions>button.action-button.action-play-audio { +:root[data-result-output-mode=merge] .entry[data-type=term] .actions>button.action-button[data-action=play-audio] { display: none; } .action-button-badge { @@ -1061,12 +1061,12 @@ button.action-button:active { :root[data-result-output-mode=merge] .headword:hover .headword-details { visibility: visible; } -:root[data-result-output-mode=merge] .headword-list .headword-details>.action-play-audio { +:root[data-result-output-mode=merge] .headword-list .headword-details>.action-button[data-action=play-audio] { position: absolute; left: 0; bottom: 0.5em; } -:root:not([data-result-output-mode=merge]) .headword-list .headword-details>.action-play-audio { +:root:not([data-result-output-mode=merge]) .headword-list .headword-details>.action-button[data-action=play-audio] { display: none; } @@ -1884,11 +1884,11 @@ button.footer-notification-close-button { :root:not([data-debug=true]) .debug-info { display: none; } -:root[data-anki-enabled=false] .action-view-note, -:root[data-anki-enabled=false] .action-add-note { +:root[data-anki-enabled=false] .action-button[data-action=view-note], +:root[data-anki-enabled=false] .action-button[data-action=add-note] { display: none; } -:root[data-audio-enabled=false] .action-play-audio { +:root[data-audio-enabled=false] .action-button[data-action=play-audio] { display: none; } :root[data-glossary-layout-mode=compact] .definition-tag-list, diff --git a/ext/display-templates.html b/ext/display-templates.html index c181a64e..04c0b5d6 100644 --- a/ext/display-templates.html +++ b/ext/display-templates.html @@ -5,12 +5,26 @@ <div class="entry-current-indicator" title="Current entry"><span class="entry-current-indicator-inner"></span></div> <div class="entry-header"> <div class="actions"> - <button class="action-button action-button-collapsible action-view-tags" hidden disabled><span class="action-icon icon" data-icon="tag"></span></button> - <button class="action-button action-view-note" hidden disabled title="View added note" data-hotkey='["viewNote","title","View added note ({0})"]' data-menu-position="left below h-cover v-cover"><span class="action-icon icon color-icon" data-icon="view-note"></span><span class="action-button-badge icon" hidden></span></button> - <button class="action-button action-add-note" hidden disabled data-mode="term-kanji" title="Add expression" data-hotkey='["addNoteTermKanji","title","Add expression ({0})"]'><span class="action-icon icon color-icon" data-icon="add-term-kanji"></span></button> - <button class="action-button action-add-note" hidden disabled data-mode="term-kana" title="Add reading" data-hotkey='["addNoteTermKana","title","Add reading ({0})"]'><span class="action-icon icon color-icon" data-icon="add-term-kana"></span></button> - <button class="action-button action-play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]' data-menu-position="left below h-cover v-cover"><span class="action-icon icon color-icon" data-icon="play-audio"></span><span class="action-button-badge icon" hidden></span></button> - <span class="entry-current-indicator-icon" title="Current entry"><span class="icon color-icon" data-icon="entry-current"></span></span> + <button class="action-button action-button-collapsible" data-action="view-tags" hidden disabled> + <span class="action-icon icon" data-icon="tag"></span> + </button> + <button class="action-button" data-action="view-note" hidden disabled title="View added note" data-hotkey='["viewNote","title","View added note ({0})"]' data-menu-position="left below h-cover v-cover"> + <span class="action-icon icon color-icon" data-icon="view-note"></span> + <span class="action-button-badge icon" hidden></span> + </button> + <button class="action-button" data-action="add-note" hidden disabled data-mode="term-kanji" title="Add expression" data-hotkey='["addNoteTermKanji","title","Add expression ({0})"]'> + <span class="action-icon icon color-icon" data-icon="add-term-kanji"></span> + </button> + <button class="action-button" data-action="add-note" hidden disabled data-mode="term-kana" title="Add reading" data-hotkey='["addNoteTermKana","title","Add reading ({0})"]'> + <span class="action-icon icon color-icon" data-icon="add-term-kana"></span> + </button> + <button class="action-button" data-action="play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]' data-menu-position="left below h-cover v-cover"> + <span class="action-icon icon color-icon" data-icon="play-audio"></span> + <span class="action-button-badge icon" hidden></span> + </button> + <span class="entry-current-indicator-icon" title="Current entry"> + <span class="icon color-icon" data-icon="entry-current"></span> + </span> </div> <div class="headword-list"></div> <div class="headword-list-details"> @@ -42,7 +56,10 @@ </span> </div> <div class="headword-details"> - <button class="action-button action-play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]' data-menu-position="right below h-cover v-cover"><span class="action-icon icon color-icon" data-icon="play-audio"></span><span class="action-button-badge icon" hidden></span></button> + <button class="action-button" data-action="play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]' data-menu-position="right below h-cover v-cover"> + <span class="action-icon icon color-icon" data-icon="play-audio"></span> + <span class="action-button-badge icon" hidden></span> + </button> </div> </div></template> <template id="definition-item-template" data-remove-whitespace-text="true"><li class="definition-item"> @@ -91,9 +108,15 @@ <div class="entry-current-indicator" title="Current entry"><span class="entry-current-indicator-inner"></span></div> <div class="entry-header"> <div class="actions"> - <button class="action-button action-view-note" hidden disabled title="View added note" data-hotkey='["viewNote","title","View added note ({0})"]'><span class="action-icon icon color-icon" data-icon="view-note"></span></button> - <button class="action-button action-add-note" hidden disabled data-mode="kanji" title="Add kanji" data-hotkey='["addNoteKanji","title","Add kanji ({0})"]'><span class="action-icon icon color-icon" data-icon="add-term-kanji"></span></button> - <span class="entry-current-indicator-icon" title="Current entry"><span class="icon color-icon" data-icon="entry-current"></span></span> + <button class="action-button" data-action="view-note" hidden disabled title="View added note" data-hotkey='["viewNote","title","View added note ({0})"]'> + <span class="action-icon icon color-icon" data-icon="view-note"></span> + </button> + <button class="action-button" data-action="add-note" hidden disabled data-mode="kanji" title="Add kanji" data-hotkey='["addNoteKanji","title","Add kanji ({0})"]'> + <span class="action-icon icon color-icon" data-icon="add-term-kanji"></span> + </button> + <span class="entry-current-indicator-icon" title="Current entry"> + <span class="icon color-icon" data-icon="entry-current"></span> + </span> </div> <div class="kanji-glyph-container"> <span class="headword-current-indicator"></span> diff --git a/ext/js/display/display-anki.js b/ext/js/display/display-anki.js index 46e88ae0..e30e29fc 100644 --- a/ext/js/display/display-anki.js +++ b/ext/js/display/display-anki.js @@ -168,11 +168,18 @@ class DisplayAnki { } _onContentUpdateEntry({element}) { - this._addMultipleEventListeners(element, '.action-view-tags', 'click', this._onShowTagsBind); - this._addMultipleEventListeners(element, '.action-add-note', 'click', this._onNoteAddBind); - this._addMultipleEventListeners(element, '.action-view-note', 'click', this._onViewNoteButtonClickBind); - this._addMultipleEventListeners(element, '.action-view-note', 'contextmenu', this._onViewNoteButtonContextMenuBind); - this._addMultipleEventListeners(element, '.action-view-note', 'menuClose', this._onViewNoteButtonMenuCloseBind); + const eventListeners = this._eventListeners; + for (const node of element.querySelectorAll('.action-button[data-action=view-tags]')) { + eventListeners.addEventListener(node, 'click', this._onShowTagsBind); + } + for (const node of element.querySelectorAll('.action-button[data-action=add-note]')) { + eventListeners.addEventListener(node, 'click', this._onNoteAddBind); + } + for (const node of element.querySelectorAll('.action-button[data-action=view-note]')) { + eventListeners.addEventListener(node, 'click', this._onViewNoteButtonClickBind); + eventListeners.addEventListener(node, 'contextmenu', this._onViewNoteButtonContextMenuBind); + eventListeners.addEventListener(node, 'menuClose', this._onViewNoteButtonMenuCloseBind); + } } _onContentUpdateComplete() { @@ -196,20 +203,14 @@ class DisplayAnki { this._showAnkiTagsNotification(tags); } - _addMultipleEventListeners(container, selector, ...args) { - for (const node of container.querySelectorAll(selector)) { - this._eventListeners.addEventListener(node, ...args); - } - } - _adderButtonFind(index, mode) { const entry = this._getEntry(index); - return entry !== null ? entry.querySelector(`.action-add-note[data-mode="${mode}"]`) : null; + return entry !== null ? entry.querySelector(`.action-button[data-action=add-note][data-mode="${mode}"]`) : null; } _tagsIndicatorFind(index) { const entry = this._getEntry(index); - return entry !== null ? entry.querySelector('.action-view-tags') : null; + return entry !== null ? entry.querySelector('.action-button[data-action=view-tags]') : null; } _getEntry(index) { @@ -672,7 +673,7 @@ class DisplayAnki { _getViewNoteButton(index) { const entry = this._getEntry(index); - return entry !== null ? entry.querySelector('.action-view-note') : null; + return entry !== null ? entry.querySelector('.action-button[data-action=view-note]') : null; } _viewNoteForSelectedEntry() { diff --git a/ext/js/display/display-audio.js b/ext/js/display/display-audio.js index 0bc95abb..3beeca97 100644 --- a/ext/js/display/display-audio.js +++ b/ext/js/display/display-audio.js @@ -44,6 +44,9 @@ class DisplayAudio { ['custom', 'Custom URL'], ['custom-json', 'Custom URL (JSON)'] ]); + this._onAudioPlayButtonClickBind = this._onAudioPlayButtonClick.bind(this); + this._onAudioPlayButtonContextMenuBind = this._onAudioPlayButtonContextMenu.bind(this); + this._onAudioPlayMenuCloseClickBind = this._onAudioPlayMenuCloseClick.bind(this); } get autoPlayAudioDelay() { @@ -150,12 +153,12 @@ class DisplayAudio { this._eventListeners.removeAllEventListeners(); } - _onContentUpdateEntry({element, index}) { - for (const button of element.querySelectorAll('.action-play-audio')) { - const headwordIndex = this._getAudioPlayButtonHeadwordIndex(button); - this._eventListeners.addEventListener(button, 'click', this._onAudioPlayButtonClick.bind(this, index, headwordIndex), false); - this._eventListeners.addEventListener(button, 'contextmenu', this._onAudioPlayButtonContextMenu.bind(this, index, headwordIndex), false); - this._eventListeners.addEventListener(button, 'menuClose', this._onAudioPlayMenuCloseClick.bind(this, index, headwordIndex), false); + _onContentUpdateEntry({element}) { + const eventListeners = this._eventListeners; + for (const button of element.querySelectorAll('.action-button[data-action=play-audio]')) { + eventListeners.addEventListener(button, 'click', this._onAudioPlayButtonClickBind, false); + eventListeners.addEventListener(button, 'contextmenu', this._onAudioPlayButtonContextMenuBind, false); + eventListeners.addEventListener(button, 'menuClose', this._onAudioPlayMenuCloseClickBind, false); } } @@ -233,9 +236,13 @@ class DisplayAudio { this._audioSources.push(source); } - _onAudioPlayButtonClick(dictionaryEntryIndex, headwordIndex, e) { + _onAudioPlayButtonClick(e) { e.preventDefault(); + const button = e.currentTarget; + const headwordIndex = this._getAudioPlayButtonHeadwordIndex(button); + const dictionaryEntryIndex = this._display.getElementDictionaryEntryIndex(button); + if (e.shiftKey) { this._showAudioMenu(e.currentTarget, dictionaryEntryIndex, headwordIndex); } else { @@ -243,13 +250,21 @@ class DisplayAudio { } } - _onAudioPlayButtonContextMenu(dictionaryEntryIndex, headwordIndex, e) { + _onAudioPlayButtonContextMenu(e) { e.preventDefault(); + const button = e.currentTarget; + const headwordIndex = this._getAudioPlayButtonHeadwordIndex(button); + const dictionaryEntryIndex = this._display.getElementDictionaryEntryIndex(button); + this._showAudioMenu(e.currentTarget, dictionaryEntryIndex, headwordIndex); } - _onAudioPlayMenuCloseClick(dictionaryEntryIndex, headwordIndex, e) { + _onAudioPlayMenuCloseClick(e) { + const button = e.currentTarget; + const headwordIndex = this._getAudioPlayButtonHeadwordIndex(button); + const dictionaryEntryIndex = this._display.getElementDictionaryEntryIndex(button); + const {detail: {action, item, menu, shiftKey}} = e; switch (action) { case 'playAudioFromSource': @@ -414,8 +429,8 @@ class DisplayAudio { const {dictionaryEntryNodes} = this._display; if (dictionaryEntryIndex >= 0 && dictionaryEntryIndex < dictionaryEntryNodes.length) { const node = dictionaryEntryNodes[dictionaryEntryIndex]; - const button1 = (headwordIndex === 0 ? node.querySelector('.action-play-audio') : null); - const button2 = node.querySelector(`.headword:nth-of-type(${headwordIndex + 1}) .action-play-audio`); + const button1 = (headwordIndex === 0 ? node.querySelector('.action-button[data-action=play-audio]') : null); + const button2 = node.querySelector(`.headword:nth-of-type(${headwordIndex + 1}) .action-button[data-action=play-audio]`); if (button1 !== null) { results.push(button1); } if (button2 !== null) { results.push(button2); } } diff --git a/ext/js/display/display.js b/ext/js/display/display.js index 882d69c9..a5c3f980 100644 --- a/ext/js/display/display.js +++ b/ext/js/display/display.js @@ -107,6 +107,10 @@ class Display extends EventDispatcher { this._optionToggleHotkeyHandler = new OptionToggleHotkeyHandler(this); this._elementOverflowController = new ElementOverflowController(); this._frameVisible = (pageType === 'search'); + this._onEntryClickBind = this._onEntryClick.bind(this); + this._onKanjiLookupBind = this._onKanjiLookup.bind(this); + this._onDebugLogClickBind = this._onDebugLogClick.bind(this); + this._onTagClickBind = this._onTagClick.bind(this); this._hotkeyHandler.registerActions([ ['close', () => { this._onHotkeyClose(); }], @@ -1353,17 +1357,18 @@ class Display extends EventDispatcher { parent.removeChild(textarea); } - _addMultipleEventListeners(container, selector, ...args) { - for (const node of container.querySelectorAll(selector)) { - this._eventListeners.addEventListener(node, ...args); - } - } - _addEntryEventListeners(entry) { - this._eventListeners.addEventListener(entry, 'click', this._onEntryClick.bind(this)); - this._addMultipleEventListeners(entry, '.headword-kanji-link', 'click', this._onKanjiLookup.bind(this)); - this._addMultipleEventListeners(entry, '.debug-log-link', 'click', this._onDebugLogClick.bind(this)); - this._addMultipleEventListeners(entry, '.tag-label', 'click', this._onTagClick.bind(this)); + const eventListeners = this._eventListeners; + eventListeners.addEventListener(entry, 'click', this._onEntryClickBind); + for (const node of entry.querySelectorAll('.headword-kanji-link')) { + eventListeners.addEventListener(node, 'click', this._onKanjiLookupBind); + } + for (const node of entry.querySelectorAll('.debug-log-link')) { + eventListeners.addEventListener(node, 'click', this._onDebugLogClickBind); + } + for (const node of entry.querySelectorAll('.tag-label')) { + eventListeners.addEventListener(node, 'click', this._onTagClickBind); + } } _updateContentTextScanner(options) { |