alex/yomichan
1
Fork 0
Code Releases Activity

Display button updates (#1991)

Browse Source 
* Update display buttons

* Remove use of _addMultipleEventListeners
This commit is contained in:
toasted-nutbread 2021-10-17 00:15:43 -04:00 committed by GitHub
parent 75aabd983d
commit ca4ed0300b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 95 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ext/css/display.css
View File

@ -673,7 +673,7 @@ button.action-button:active {
.action-icon:not(.color-icon) { .action-icon:not(.color-icon) {
background-color: var(--text-color); 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; display: none;
} }
.action-button-badge { .action-button-badge {
@ -1061,12 +1061,12 @@ button.action-button:active {
:root[data-result-output-mode=merge] .headword:hover .headword-details { :root[data-result-output-mode=merge] .headword:hover .headword-details {
visibility: visible; 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; position: absolute;
left: 0; left: 0;
bottom: 0.5em; 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; display: none;
} }
@ -1884,11 +1884,11 @@ button.footer-notification-close-button {
:root:not([data-debug=true]) .debug-info { :root:not([data-debug=true]) .debug-info {
display: none; display: none;
} }
:root[data-anki-enabled=false] .action-view-note, :root[data-anki-enabled=false] .action-button[data-action=view-note],
:root[data-anki-enabled=false] .action-add-note { :root[data-anki-enabled=false] .action-button[data-action=add-note] {
display: none; display: none;
} }
:root[data-audio-enabled=false] .action-play-audio { :root[data-audio-enabled=false] .action-button[data-action=play-audio] {
display: none; display: none;
} }
:root[data-glossary-layout-mode=compact] .definition-tag-list, :root[data-glossary-layout-mode=compact] .definition-tag-list,

43
ext/display-templates.html
View File

@ -5,12 +5,26 @@
<div class="entry-current-indicator" title="Current entry"><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-header"> <div class="entry-header">
<div class="actions"> <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-button-collapsible" data-action="view-tags" hidden disabled>
<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> <span class="action-icon icon" data-icon="tag"></span>
<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>
<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" 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">
<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="action-icon icon color-icon" data-icon="view-note"></span>
<span class="entry-current-indicator-icon" title="Current entry"><span class="icon color-icon" data-icon="entry-current"></span></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>
<div class="headword-list"></div> <div class="headword-list"></div>
<div class="headword-list-details"> <div class="headword-list-details">
@ -42,7 +56,10 @@
</span> </span>
</div> </div>
<div class="headword-details"> <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>
</div></template> </div></template>
<template id="definition-item-template" data-remove-whitespace-text="true"><li class="definition-item"> <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-current-indicator" title="Current entry"><span class="entry-current-indicator-inner"></span></div>
<div class="entry-header"> <div class="entry-header">
<div class="actions"> <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" data-action="view-note" hidden disabled title="View added note" data-hotkey='["viewNote","title","View added note ({0})"]'>
<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="action-icon icon color-icon" data-icon="view-note"></span>
<span class="entry-current-indicator-icon" title="Current entry"><span class="icon color-icon" data-icon="entry-current"></span></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>
<div class="kanji-glyph-container"> <div class="kanji-glyph-container">
<span class="headword-current-indicator"></span> <span class="headword-current-indicator"></span>

29
ext/js/display/display-anki.js
View File

@ -168,11 +168,18 @@ class DisplayAnki {
} }
_onContentUpdateEntry({element}) { _onContentUpdateEntry({element}) {
this._addMultipleEventListeners(element, '.action-view-tags', 'click', this._onShowTagsBind); const eventListeners = this._eventListeners;
this._addMultipleEventListeners(element, '.action-add-note', 'click', this._onNoteAddBind); for (const node of element.querySelectorAll('.action-button[data-action=view-tags]')) {
this._addMultipleEventListeners(element, '.action-view-note', 'click', this._onViewNoteButtonClickBind); eventListeners.addEventListener(node, 'click', this._onShowTagsBind);
this._addMultipleEventListeners(element, '.action-view-note', 'contextmenu', this._onViewNoteButtonContextMenuBind); }
this._addMultipleEventListeners(element, '.action-view-note', 'menuClose', this._onViewNoteButtonMenuCloseBind); 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() { _onContentUpdateComplete() {
@ -196,20 +203,14 @@ class DisplayAnki {
this._showAnkiTagsNotification(tags); this._showAnkiTagsNotification(tags);
} }
_addMultipleEventListeners(container, selector, ...args) {
for (const node of container.querySelectorAll(selector)) {
this._eventListeners.addEventListener(node, ...args);
}
}
_adderButtonFind(index, mode) { _adderButtonFind(index, mode) {
const entry = this._getEntry(index); 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) { _tagsIndicatorFind(index) {
const entry = this._getEntry(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) { _getEntry(index) {
@ -672,7 +673,7 @@ class DisplayAnki {
_getViewNoteButton(index) { _getViewNoteButton(index) {
const entry = this._getEntry(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() { _viewNoteForSelectedEntry() {

37
ext/js/display/display-audio.js
View File

@ -44,6 +44,9 @@ class DisplayAudio {
['custom', 'Custom URL'], ['custom', 'Custom URL'],
['custom-json', 'Custom URL (JSON)'] ['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() { get autoPlayAudioDelay() {
@ -150,12 +153,12 @@ class DisplayAudio {
this._eventListeners.removeAllEventListeners(); this._eventListeners.removeAllEventListeners();
} }
_onContentUpdateEntry({element, index}) { _onContentUpdateEntry({element}) {
for (const button of element.querySelectorAll('.action-play-audio')) { const eventListeners = this._eventListeners;
const headwordIndex = this._getAudioPlayButtonHeadwordIndex(button); for (const button of element.querySelectorAll('.action-button[data-action=play-audio]')) {
this._eventListeners.addEventListener(button, 'click', this._onAudioPlayButtonClick.bind(this, index, headwordIndex), false); eventListeners.addEventListener(button, 'click', this._onAudioPlayButtonClickBind, false);
this._eventListeners.addEventListener(button, 'contextmenu', this._onAudioPlayButtonContextMenu.bind(this, index, headwordIndex), false); eventListeners.addEventListener(button, 'contextmenu', this._onAudioPlayButtonContextMenuBind, false);
this._eventListeners.addEventListener(button, 'menuClose', this._onAudioPlayMenuCloseClick.bind(this, index, headwordIndex), false); eventListeners.addEventListener(button, 'menuClose', this._onAudioPlayMenuCloseClickBind, false);
} }
} }
@ -233,9 +236,13 @@ class DisplayAudio {
this._audioSources.push(source); this._audioSources.push(source);
} }
_onAudioPlayButtonClick(dictionaryEntryIndex, headwordIndex, e) { _onAudioPlayButtonClick(e) {
e.preventDefault(); e.preventDefault();
const button = e.currentTarget;
const headwordIndex = this._getAudioPlayButtonHeadwordIndex(button);
const dictionaryEntryIndex = this._display.getElementDictionaryEntryIndex(button);
if (e.shiftKey) { if (e.shiftKey) {
this._showAudioMenu(e.currentTarget, dictionaryEntryIndex, headwordIndex); this._showAudioMenu(e.currentTarget, dictionaryEntryIndex, headwordIndex);
} else { } else {
@ -243,13 +250,21 @@ class DisplayAudio {
} }
} }
_onAudioPlayButtonContextMenu(dictionaryEntryIndex, headwordIndex, e) { _onAudioPlayButtonContextMenu(e) {
e.preventDefault(); e.preventDefault();
const button = e.currentTarget;
const headwordIndex = this._getAudioPlayButtonHeadwordIndex(button);
const dictionaryEntryIndex = this._display.getElementDictionaryEntryIndex(button);
this._showAudioMenu(e.currentTarget, dictionaryEntryIndex, headwordIndex); 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; const {detail: {action, item, menu, shiftKey}} = e;
switch (action) { switch (action) {
case 'playAudioFromSource': case 'playAudioFromSource':
@ -414,8 +429,8 @@ class DisplayAudio {
const {dictionaryEntryNodes} = this._display; const {dictionaryEntryNodes} = this._display;
if (dictionaryEntryIndex >= 0 && dictionaryEntryIndex < dictionaryEntryNodes.length) { if (dictionaryEntryIndex >= 0 && dictionaryEntryIndex < dictionaryEntryNodes.length) {
const node = dictionaryEntryNodes[dictionaryEntryIndex]; const node = dictionaryEntryNodes[dictionaryEntryIndex];
const button1 = (headwordIndex === 0 ? node.querySelector('.action-play-audio') : null); const button1 = (headwordIndex === 0 ? node.querySelector('.action-button[data-action=play-audio]') : null);
const button2 = node.querySelector(`.headword:nth-of-type(${headwordIndex + 1}) .action-play-audio`); const button2 = node.querySelector(`.headword:nth-of-type(${headwordIndex + 1}) .action-button[data-action=play-audio]`);
if (button1 !== null) { results.push(button1); } if (button1 !== null) { results.push(button1); }
if (button2 !== null) { results.push(button2); } if (button2 !== null) { results.push(button2); }
} }

25
ext/js/display/display.js
View File

@ -107,6 +107,10 @@ class Display extends EventDispatcher {
this._optionToggleHotkeyHandler = new OptionToggleHotkeyHandler(this); this._optionToggleHotkeyHandler = new OptionToggleHotkeyHandler(this);
this._elementOverflowController = new ElementOverflowController(); this._elementOverflowController = new ElementOverflowController();
this._frameVisible = (pageType === 'search'); 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([ this._hotkeyHandler.registerActions([
['close', () => { this._onHotkeyClose(); }], ['close', () => { this._onHotkeyClose(); }],
@ -1353,17 +1357,18 @@ class Display extends EventDispatcher {
parent.removeChild(textarea); parent.removeChild(textarea);
} }
_addMultipleEventListeners(container, selector, ...args) {
for (const node of container.querySelectorAll(selector)) {
this._eventListeners.addEventListener(node, ...args);
}
}
_addEntryEventListeners(entry) { _addEntryEventListeners(entry) {
this._eventListeners.addEventListener(entry, 'click', this._onEntryClick.bind(this)); const eventListeners = this._eventListeners;
this._addMultipleEventListeners(entry, '.headword-kanji-link', 'click', this._onKanjiLookup.bind(this)); eventListeners.addEventListener(entry, 'click', this._onEntryClickBind);
this._addMultipleEventListeners(entry, '.debug-log-link', 'click', this._onDebugLogClick.bind(this)); for (const node of entry.querySelectorAll('.headword-kanji-link')) {
this._addMultipleEventListeners(entry, '.tag-label', 'click', this._onTagClick.bind(this)); 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) { _updateContentTextScanner(options) {