summaryrefslogtreecommitdiff
path: root/ext/mixed/js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-11-23 17:43:17 -0500
committerGitHub <noreply@github.com>2020-11-23 17:43:17 -0500
commit12e5cec99c64af164ddb56fd8262d98a23205083 (patch)
tree2a48e0e49ab598c94787c3984b1890bece150e5a /ext/mixed/js
parent01ff7436ee381c4414e95572cff08aac999b7721 (diff)
Display updates (#1055)
* Fix title assignment * Add event listeners as entries are being added * Focus entry when clicked
Diffstat (limited to 'ext/mixed/js')
-rw-r--r--ext/mixed/js/display.js93
1 files changed, 47 insertions, 46 deletions
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 0bbdf730..e051893e 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -48,7 +48,6 @@ class Display extends EventDispatcher {
});
this._styleNode = null;
this._eventListeners = new EventListenerCollection();
- this._eventListenersActive = false;
this._clickScanPrevent = false;
this._setContentToken = null;
this._autoPlayAudioTimer = null;
@@ -65,8 +64,8 @@ class Display extends EventDispatcher {
this._historyHasChanged = false;
this._navigationHeader = document.querySelector('#navigation-header');
this._contentType = 'clear';
- this._defaultTitle = 'Yomichan Search';
- this._defaultTitleMaxLength = 1000;
+ this._defaultTitle = document.title;
+ this._titleMaxLength = 1000;
this._fullQuery = '';
this._documentUtil = new DocumentUtil();
this._progressIndicator = document.querySelector('#progress-indicator');
@@ -314,12 +313,6 @@ class Display extends EventDispatcher {
this._updateNestedFrontend(options);
}
- addMultipleEventListeners(selector, type, listener, options) {
- for (const node of this._container.querySelectorAll(selector)) {
- this._eventListeners.addEventListener(node, type, listener, options);
- }
- }
-
autoPlayAudio() {
this.clearAutoPlayTimer();
@@ -535,7 +528,7 @@ class Display extends EventDispatcher {
this._updateQueryParser();
this._closePopups();
- this._setEventListenersActive(false);
+ this._eventListeners.removeAllEventListeners();
let assigned = false;
const eventArgs = {type, urlSearchParams, token};
@@ -572,8 +565,6 @@ class Display extends EventDispatcher {
this.trigger('contentUpdating', eventArgs);
this._clearContent();
}
-
- this._setEventListenersActive(true);
}
eventArgs.stale = stale;
@@ -857,6 +848,14 @@ class Display extends EventDispatcher {
}
}
+ _onEntryClick(e) {
+ if (e.button !== 0) { return; }
+ const node = e.currentTarget;
+ const index = parseInt(node.dataset.index, 10);
+ if (!Number.isFinite(index)) { return; }
+ this._entrySetCurrent(index);
+ }
+
_updateDocumentOptions(options) {
const data = document.documentElement.dataset;
data.ankiEnabled = `${options.anki.enable}`;
@@ -874,27 +873,6 @@ class Display extends EventDispatcher {
document.documentElement.dataset.yomichanTheme = themeName;
}
- _setEventListenersActive(active) {
- active = !!active;
- if (this._eventListenersActive === active) { return; }
- this._eventListenersActive = active;
-
- if (active) {
- this.addMultipleEventListeners('.action-add-note', 'click', this._onNoteAdd.bind(this));
- this.addMultipleEventListeners('.action-view-note', 'click', this._onNoteView.bind(this));
- this.addMultipleEventListeners('.action-play-audio', 'click', this._onAudioPlay.bind(this));
- this.addMultipleEventListeners('.kanji-link', 'click', this._onKanjiLookup.bind(this));
- this.addMultipleEventListeners('.debug-log-link', 'click', this._onDebugLogClick.bind(this));
- if (this._options !== null && this._options.scanning.enablePopupSearch) {
- this.addMultipleEventListeners('.term-glossary-item, .tag', 'mouseup', this._onGlossaryMouseUp.bind(this));
- this.addMultipleEventListeners('.term-glossary-item, .tag', 'mousedown', this._onGlossaryMouseDown.bind(this));
- this.addMultipleEventListeners('.term-glossary-item, .tag', 'mousemove', this._onGlossaryMouseMove.bind(this));
- }
- } else {
- this._eventListeners.removeAllEventListeners();
- }
- }
-
async _findDefinitions(isTerms, source, urlSearchParams, optionsContext) {
if (isTerms) {
const findDetails = {};
@@ -990,12 +968,14 @@ class Display extends EventDispatcher {
if (this._setContentToken !== token) { return true; }
}
+ const definition = definitions[i];
const entry = (
isTerms ?
- this._displayGenerator.createTermEntry(definitions[i]) :
- this._displayGenerator.createKanjiEntry(definitions[i])
+ this._displayGenerator.createTermEntry(definition) :
+ this._displayGenerator.createKanjiEntry(definition)
);
entry.dataset.index = `${i}`;
+ this._addEntryEventListeners(entry);
container.appendChild(entry);
}
@@ -1074,18 +1054,19 @@ class Display extends EventDispatcher {
}
_setTitleText(text) {
- // Chrome limits title to 1024 characters
- const ellipsis = '...';
- const maxLength = this._defaultTitleMaxLength - this._defaultTitle.length;
- if (text.length > maxLength) {
- text = `${text.substring(0, Math.max(0, maxLength - maxLength))}${ellipsis}`;
- }
+ let title = '';
+ if (text.length > 0) {
+ // Chrome limits title to 1024 characters
+ const ellipsis = '...';
+ const separator = ' - ';
+ const maxLength = this._titleMaxLength - this._defaultTitle.length - separator.length;
+ if (text.length > maxLength) {
+ text = `${text.substring(0, Math.max(0, maxLength - ellipsis.length))}${ellipsis}`;
+ }
- document.title = (
- text.length === 0 ?
- this._defaultTitle :
- `${text} - ${this._defaultTitle}`
- );
+ title = `${text}${separator}${this._defaultTitle}`;
+ }
+ document.title = title;
}
_updateNavigation(previous, next) {
@@ -1771,4 +1752,24 @@ class Display extends EventDispatcher {
return '';
}
}
+
+ _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, '.action-add-note', 'click', this._onNoteAdd.bind(this));
+ this._addMultipleEventListeners(entry, '.action-view-note', 'click', this._onNoteView.bind(this));
+ this._addMultipleEventListeners(entry, '.action-play-audio', 'click', this._onAudioPlay.bind(this));
+ this._addMultipleEventListeners(entry, '.kanji-link', 'click', this._onKanjiLookup.bind(this));
+ this._addMultipleEventListeners(entry, '.debug-log-link', 'click', this._onDebugLogClick.bind(this));
+ if (this._options !== null && this._options.scanning.enablePopupSearch) {
+ this._addMultipleEventListeners(entry, '.term-glossary-item,.tag', 'mouseup', this._onGlossaryMouseUp.bind(this));
+ this._addMultipleEventListeners(entry, '.term-glossary-item,.tag', 'mousedown', this._onGlossaryMouseDown.bind(this));
+ this._addMultipleEventListeners(entry, '.term-glossary-item,.tag', 'mousemove', this._onGlossaryMouseMove.bind(this));
+ }
+ }
}