Display button updates (#1991)

* Update display buttons

* Remove use of _addMultipleEventListeners

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) {