Display fixes and refactoring (#685)

* Fix scroll target override sometimes using undefined value

* Clear event listeners in clearContent()

* Remove unused arguments

* Remove unused disableScroll

* Destructure definitions and context

* Merge _setContentTerms and _setContentKanji

* Move history tracking

* Destructure context

* Rename context to noteContext for clarity

* Destructure before passing args

* Move window focus

* Update scroll defaults
This commit is contained in:
toasted-nutbread 2020-07-24 21:12:13 -04:00 committed by GitHub
parent e493cbc998
commit 64ddb4d901
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -208,12 +208,26 @@ class Display {
try { try {
this._mediaLoader.unloadAll(); this._mediaLoader.unloadAll();
const {definitions, context, focus} = details;
if (context.disableHistory) {
delete context.disableHistory;
this._context = new DisplayContext(type, definitions, context);
} else {
this._context = DisplayContext.push(this._context, type, definitions, context);
}
if (focus !== false) {
window.focus();
}
switch (type) { switch (type) {
case 'terms': case 'terms':
await this._setContentTerms(details.definitions, details.context, token);
break;
case 'kanji': case 'kanji':
await this._setContentKanji(details.definitions, details.context, token); {
const {sentence, url, index=0, scroll=null} = context;
await this._setContentTermsOrKanji(type, definitions, sentence, url, index, scroll, token);
}
break; break;
} }
} catch (e) { } catch (e) {
@ -226,7 +240,9 @@ class Display {
} }
clearContent() { clearContent() {
this._setEventListenersActive(false);
this._container.textContent = ''; this._container.textContent = '';
this._setEventListenersActive(true);
} }
setCustomCss(css) { setCustomCss(css) {
@ -385,7 +401,7 @@ class Display {
} }
} }
async _onTermLookup(e, {disableScroll, selectText, disableHistory}={}) { async _onTermLookup(e) {
try { try {
if (!this._context) { return; } if (!this._context) { return; }
@ -403,27 +419,13 @@ class Display {
scroll: this._windowScroll.y scroll: this._windowScroll.y
}); });
const context = { const context = {
disableScroll, disableHistory: false,
disableHistory,
sentence, sentence,
url: this._context.get('url') url: this._context.get('url'),
};
if (disableHistory) {
Object.assign(context, {
previous: this._context.previous,
next: this._context.next
});
} else {
Object.assign(context, {
previous: this._context previous: this._context
}); };
}
this.setContent('terms', {definitions, context}); this.setContent('terms', {definitions, context});
if (selectText) {
textSource.select();
}
} catch (error) { } catch (error) {
this.onError(error); this.onError(error);
} }
@ -579,26 +581,15 @@ class Display {
} }
} }
async _setContentTerms(definitions, context, token) { async _setContentTermsOrKanji(type, definitions, sentence, url, index, scroll, token) {
if (!context) { throw new Error('Context expected'); } const isTerms = (type === 'terms');
this._setEventListenersActive(false); this._setEventListenersActive(false);
if (context.focus !== false) {
window.focus();
}
this._definitions = definitions; this._definitions = definitions;
if (context.disableHistory) {
delete context.disableHistory;
this._context = new DisplayContext('terms', definitions, context);
} else {
this._context = DisplayContext.push(this._context, 'terms', definitions, context);
}
for (const definition of definitions) { for (const definition of definitions) {
definition.cloze = this._clozeBuild(context.sentence, definition.source); definition.cloze = this._clozeBuild(sentence, isTerms ? definition.source : definition.character);
definition.url = context.url; definition.url = url;
} }
this._updateNavigation(this._context.previous, this._context.next); this._updateNavigation(this._context.previous, this._context.next);
@ -613,74 +604,28 @@ class Display {
if (this._setContentToken !== token) { return; } if (this._setContentToken !== token) { return; }
} }
const entry = this._displayGenerator.createTermEntry(definitions[i]); const entry = (
isTerms ?
this._displayGenerator.createTermEntry(definitions[i]) :
this._displayGenerator.createKanjiEntry(definitions[i])
);
container.appendChild(entry); container.appendChild(entry);
} }
const {index, scroll, disableScroll} = context; this._entryScrollIntoView(index, scroll);
if (!disableScroll) {
this._entryScrollIntoView(index || 0, scroll);
} else {
delete context.disableScroll;
this._entrySetCurrent(index || 0);
}
if (this._options.audio.enabled && this._options.audio.autoPlay) { if (
isTerms &&
this._options.audio.enabled &&
this._options.audio.autoPlay
) {
this.autoPlayAudio(); this.autoPlayAudio();
} }
this._setEventListenersActive(true); this._setEventListenersActive(true);
const states = await this._getDefinitionsAddable(definitions, ['term-kanji', 'term-kana']); const modes = isTerms ? ['term-kanji', 'term-kana'] : ['kanji'];
if (this._setContentToken !== token) { return; } const states = await this._getDefinitionsAddable(definitions, modes);
this._updateAdderButtons(states);
}
async _setContentKanji(definitions, context, token) {
if (!context) { throw new Error('Context expected'); }
this._setEventListenersActive(false);
if (context.focus !== false) {
window.focus();
}
this._definitions = definitions;
if (context.disableHistory) {
delete context.disableHistory;
this._context = new DisplayContext('kanji', definitions, context);
} else {
this._context = DisplayContext.push(this._context, 'kanji', definitions, context);
}
for (const definition of definitions) {
definition.cloze = this._clozeBuild(context.sentence, definition.character);
definition.url = context.url;
}
this._updateNavigation(this._context.previous, this._context.next);
this._setNoContentVisible(definitions.length === 0);
const container = this._container;
container.textContent = '';
for (let i = 0, ii = definitions.length; i < ii; ++i) {
if (i > 0) {
await promiseTimeout(1);
if (this._setContentToken !== token) { return; }
}
const entry = this._displayGenerator.createKanjiEntry(definitions[i]);
container.appendChild(entry);
}
const {index, scroll} = context;
this._entryScrollIntoView(index || 0, scroll);
this._setEventListenersActive(true);
const states = await this._getDefinitionsAddable(definitions, ['kanji']);
if (this._setContentToken !== token) { return; } if (this._setContentToken !== token) { return; }
this._updateAdderButtons(states); this._updateAdderButtons(states);
@ -763,7 +708,7 @@ class Display {
const entry = this._entrySetCurrent(index); const entry = this._entrySetCurrent(index);
let target; let target;
if (scroll !== null) { if (typeof scroll === 'number') {
target = scroll; target = scroll;
} else { } else {
target = this._index === 0 || entry === null ? 0 : this._getElementTop(entry); target = this._index === 0 || entry === null ? 0 : this._getElementTop(entry);
@ -840,8 +785,8 @@ class Display {
} }
} }
const context = await this._getNoteContext(); const noteContext = await this._getNoteContext();
const noteId = await api.definitionAdd(definition, mode, context, details, this.getOptionsContext()); const noteId = await api.definitionAdd(definition, mode, noteContext, details, this.getOptionsContext());
if (noteId) { if (noteId) {
const index = this._definitions.indexOf(definition); const index = this._definitions.indexOf(definition);
const adderButton = this._adderButtonFind(index, mode); const adderButton = this._adderButtonFind(index, mode);
@ -1005,8 +950,8 @@ class Display {
async _getDefinitionsAddable(definitions, modes) { async _getDefinitionsAddable(definitions, modes) {
try { try {
const context = await this._getNoteContext(); const noteContext = await this._getNoteContext();
return await api.definitionsAddable(definitions, modes, context, this.getOptionsContext()); return await api.definitionsAddable(definitions, modes, noteContext, this.getOptionsContext());
} catch (e) { } catch (e) {
return []; return [];
} }