aboutsummaryrefslogtreecommitdiff
path: root/ext/js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-10-17 00:15:43 -0400
committerGitHub <noreply@github.com>2021-10-17 00:15:43 -0400
commitca4ed0300b06e8424f4c2e49ff8533a37883e850 (patch)
tree5c352e96130231977a9c4da066338f7198f80ac5 /ext/js
parent75aabd983da29023b8423bd44d565202aad6b664 (diff)
Display button updates (#1991)
* Update display buttons * Remove use of _addMultipleEventListeners
Diffstat (limited to 'ext/js')
-rw-r--r--ext/js/display/display-anki.js29
-rw-r--r--ext/js/display/display-audio.js37
-rw-r--r--ext/js/display/display.js25
3 files changed, 56 insertions, 35 deletions
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) {