alex/yomichan
1
Fork 0
Code Releases Activity

Display updates (#1055)

Browse Source 
* Fix title assignment

* Add event listeners as entries are being added

* Focus entry when clicked
This commit is contained in:
toasted-nutbread 2020-11-23 17:43:17 -05:00 committed by GitHub
parent 01ff7436ee
commit 12e5cec99c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 47 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
ext/mixed/js/display.js
View File

@ -48,7 +48,6 @@ class Display extends EventDispatcher {
}); });
this._styleNode = null; this._styleNode = null;
this._eventListeners = new EventListenerCollection(); this._eventListeners = new EventListenerCollection();
this._eventListenersActive = false;
this._clickScanPrevent = false; this._clickScanPrevent = false;
this._setContentToken = null; this._setContentToken = null;
this._autoPlayAudioTimer = null; this._autoPlayAudioTimer = null;
@ -65,8 +64,8 @@ class Display extends EventDispatcher {
this._historyHasChanged = false; this._historyHasChanged = false;
this._navigationHeader = document.querySelector('#navigation-header'); this._navigationHeader = document.querySelector('#navigation-header');
this._contentType = 'clear'; this._contentType = 'clear';
this._defaultTitle = 'Yomichan Search'; this._defaultTitle = document.title;
this._defaultTitleMaxLength = 1000; this._titleMaxLength = 1000;
this._fullQuery = ''; this._fullQuery = '';
this._documentUtil = new DocumentUtil(); this._documentUtil = new DocumentUtil();
this._progressIndicator = document.querySelector('#progress-indicator'); this._progressIndicator = document.querySelector('#progress-indicator');
@ -314,12 +313,6 @@ class Display extends EventDispatcher {
this._updateNestedFrontend(options); this._updateNestedFrontend(options);
} }
addMultipleEventListeners(selector, type, listener, options) {
for (const node of this._container.querySelectorAll(selector)) {
this._eventListeners.addEventListener(node, type, listener, options);
}
}
autoPlayAudio() { autoPlayAudio() {
this.clearAutoPlayTimer(); this.clearAutoPlayTimer();
@ -535,7 +528,7 @@ class Display extends EventDispatcher {
this._updateQueryParser(); this._updateQueryParser();
this._closePopups(); this._closePopups();
this._setEventListenersActive(false); this._eventListeners.removeAllEventListeners();
let assigned = false; let assigned = false;
const eventArgs = {type, urlSearchParams, token}; const eventArgs = {type, urlSearchParams, token};
@ -572,8 +565,6 @@ class Display extends EventDispatcher {
this.trigger('contentUpdating', eventArgs); this.trigger('contentUpdating', eventArgs);
this._clearContent(); this._clearContent();
} }
this._setEventListenersActive(true);
} }
eventArgs.stale = stale; 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) { _updateDocumentOptions(options) {
const data = document.documentElement.dataset; const data = document.documentElement.dataset;
data.ankiEnabled = `${options.anki.enable}`; data.ankiEnabled = `${options.anki.enable}`;
@ -874,27 +873,6 @@ class Display extends EventDispatcher {
document.documentElement.dataset.yomichanTheme = themeName; 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) { async _findDefinitions(isTerms, source, urlSearchParams, optionsContext) {
if (isTerms) { if (isTerms) {
const findDetails = {}; const findDetails = {};
@ -990,12 +968,14 @@ class Display extends EventDispatcher {
if (this._setContentToken !== token) { return true; } if (this._setContentToken !== token) { return true; }
} }
const definition = definitions[i];
const entry = ( const entry = (
isTerms ? isTerms ?
this._displayGenerator.createTermEntry(definitions[i]) : this._displayGenerator.createTermEntry(definition) :
this._displayGenerator.createKanjiEntry(definitions[i]) this._displayGenerator.createKanjiEntry(definition)
); );
entry.dataset.index = `${i}`; entry.dataset.index = `${i}`;
this._addEntryEventListeners(entry);
container.appendChild(entry); container.appendChild(entry);
} }
@ -1074,18 +1054,19 @@ class Display extends EventDispatcher {
} }
_setTitleText(text) { _setTitleText(text) {
// Chrome limits title to 1024 characters let title = '';
const ellipsis = '...'; if (text.length > 0) {
const maxLength = this._defaultTitleMaxLength - this._defaultTitle.length; // Chrome limits title to 1024 characters
if (text.length > maxLength) { const ellipsis = '...';
text = `${text.substring(0, Math.max(0, maxLength - maxLength))}${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 = ( title = `${text}${separator}${this._defaultTitle}`;
text.length === 0 ? }
this._defaultTitle : document.title = title;
`${text} - ${this._defaultTitle}`
);
} }
_updateNavigation(previous, next) { _updateNavigation(previous, next) {
@ -1771,4 +1752,24 @@ class Display extends EventDispatcher {
return ''; 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));
}
}
} }