yomichan/ext/js/display/display-anki.js
toasted-nutbread ca4ed0300b
Display button updates (#1991)
* Update display buttons

* Remove use of _addMultipleEventListeners
2021-10-17 00:15:43 -04:00

687 lines
26 KiB
JavaScript

/*
* Copyright (C) 2021 Yomichan Authors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
/* global
* AnkiNoteBuilder
* AnkiUtil
* DisplayNotification
* PopupMenu
*/
class DisplayAnki {
constructor(display, displayAudio, japaneseUtil) {
this._display = display;
this._displayAudio = displayAudio;
this._ankiFieldTemplates = null;
this._ankiFieldTemplatesDefault = null;
this._ankiNoteBuilder = new AnkiNoteBuilder({japaneseUtil});
this._ankiNoteNotification = null;
this._ankiNoteNotificationEventListeners = null;
this._ankiTagNotification = null;
this._updateAdderButtonsPromise = Promise.resolve();
this._updateDictionaryEntryDetailsToken = null;
this._eventListeners = new EventListenerCollection();
this._dictionaryEntryDetails = null;
this._noteContext = null;
this._checkForDuplicates = false;
this._suspendNewCards = false;
this._compactTags = false;
this._resultOutputMode = 'split';
this._glossaryLayoutMode = 'default';
this._displayTags = 'never';
this._duplicateScope = 'collection';
this._duplicateScopeCheckAllModels = false;
this._screenshotFormat = 'png';
this._screenshotQuality = 100;
this._scanLength = 10;
this._noteTags = [];
this._modeOptions = new Map();
this._dictionaryEntryTypeModeMap = new Map([
['kanji', ['kanji']],
['term', ['term-kanji', 'term-kana']]
]);
this._menuContainer = document.querySelector('#popup-menus');
this._onShowTagsBind = this._onShowTags.bind(this);
this._onNoteAddBind = this._onNoteAdd.bind(this);
this._onViewNoteButtonClickBind = this._onViewNoteButtonClick.bind(this);
this._onViewNoteButtonContextMenuBind = this._onViewNoteButtonContextMenu.bind(this);
this._onViewNoteButtonMenuCloseBind = this._onViewNoteButtonMenuClose.bind(this);
}
prepare() {
this._noteContext = this._getNoteContext();
this._display.hotkeyHandler.registerActions([
['addNoteKanji', () => { this._tryAddAnkiNoteForSelectedEntry('kanji'); }],
['addNoteTermKanji', () => { this._tryAddAnkiNoteForSelectedEntry('term-kanji'); }],
['addNoteTermKana', () => { this._tryAddAnkiNoteForSelectedEntry('term-kana'); }],
['viewNote', this._viewNoteForSelectedEntry.bind(this)]
]);
this._display.on('optionsUpdated', this._onOptionsUpdated.bind(this));
this._display.on('contentClear', this._onContentClear.bind(this));
this._display.on('contentUpdateStart', this._onContentUpdateStart.bind(this));
this._display.on('contentUpdateEntry', this._onContentUpdateEntry.bind(this));
this._display.on('contentUpdateComplete', this._onContentUpdateComplete.bind(this));
this._display.on('logDictionaryEntryData', this._onLogDictionaryEntryData.bind(this));
}
async getLogData(dictionaryEntry) {
const result = {};
// Anki note data
let ankiNoteData;
let ankiNoteDataException;
try {
ankiNoteData = await this._ankiNoteBuilder.getRenderingData({
dictionaryEntry,
mode: 'test',
context: this._noteContext,
resultOutputMode: this._resultOutputMode,
glossaryLayoutMode: this._glossaryLayoutMode,
compactTags: this._compactTags,
marker: 'test'
});
} catch (e) {
ankiNoteDataException = e;
}
result.ankiNoteData = ankiNoteData;
if (typeof ankiNoteDataException !== 'undefined') {
result.ankiNoteDataException = ankiNoteDataException;
}
// Anki notes
const ankiNotes = [];
const modes = this._getModes(dictionaryEntry.type === 'term');
for (const mode of modes) {
let note;
let errors;
let requirements;
try {
({note: note, errors, requirements} = await this._createNote(dictionaryEntry, mode, []));
} catch (e) {
errors = [e];
}
const entry = {mode, note};
if (Array.isArray(errors) && errors.length > 0) {
entry.errors = errors;
}
if (Array.isArray(requirements) && requirements.length > 0) {
entry.requirements = requirements;
}
ankiNotes.push(entry);
}
result.ankiNotes = ankiNotes;
return result;
}
// Private
_onOptionsUpdated({options}) {
const {
general: {resultOutputMode, glossaryLayoutMode, compactTags},
anki: {tags, duplicateScope, duplicateScopeCheckAllModels, suspendNewCards, checkForDuplicates, displayTags, kanji, terms, screenshot: {format, quality}},
scanning: {length: scanLength}
} = options;
this._checkForDuplicates = checkForDuplicates;
this._suspendNewCards = suspendNewCards;
this._compactTags = compactTags;
this._resultOutputMode = resultOutputMode;
this._glossaryLayoutMode = glossaryLayoutMode;
this._displayTags = displayTags;
this._duplicateScope = duplicateScope;
this._duplicateScopeCheckAllModels = duplicateScopeCheckAllModels;
this._screenshotFormat = format;
this._screenshotQuality = quality;
this._scanLength = scanLength;
this._noteTags = [...tags];
this._modeOptions.clear();
this._modeOptions.set('kanji', kanji);
this._modeOptions.set('term-kanji', terms);
this._modeOptions.set('term-kana', terms);
this._updateAnkiFieldTemplates(options);
}
_onContentClear() {
this._updateDictionaryEntryDetailsToken = null;
this._dictionaryEntryDetails = null;
this._hideAnkiNoteErrors(false);
}
_onContentUpdateStart() {
this._noteContext = this._getNoteContext();
}
_onContentUpdateEntry({element}) {
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() {
this._updateDictionaryEntryDetails();
}
_onLogDictionaryEntryData({dictionaryEntry, promises}) {
promises.push(this.getLogData(dictionaryEntry));
}
_onNoteAdd(e) {
e.preventDefault();
const node = e.currentTarget;
const index = this._display.getElementDictionaryEntryIndex(node);
this._addAnkiNote(index, node.dataset.mode);
}
_onShowTags(e) {
e.preventDefault();
const tags = e.currentTarget.title;
this._showAnkiTagsNotification(tags);
}
_adderButtonFind(index, mode) {
const entry = this._getEntry(index);
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-button[data-action=view-tags]') : null;
}
_getEntry(index) {
const entries = this._display.dictionaryEntryNodes;
return index >= 0 && index < entries.length ? entries[index] : null;
}
_getNoteContext() {
const {state} = this._display.history;
let {documentTitle, url, sentence} = (isObject(state) ? state : {});
if (typeof documentTitle !== 'string') {
documentTitle = document.title;
}
if (typeof url !== 'string') {
url = window.location.href;
}
const {query, fullQuery, queryOffset} = this._display;
sentence = this._getValidSentenceData(sentence, fullQuery, queryOffset);
return {
url,
sentence,
documentTitle,
query,
fullQuery
};
}
async _updateDictionaryEntryDetails() {
const {dictionaryEntries} = this._display;
const token = {};
this._updateDictionaryEntryDetailsToken = token;
if (this._updateAdderButtonsPromise !== null) {
await this._updateAdderButtonsPromise;
}
if (this._updateDictionaryEntryDetailsToken !== token) { return; }
const {promise, resolve} = deferPromise();
try {
this._updateAdderButtonsPromise = promise;
const dictionaryEntryDetails = await this._getDictionaryEntryDetails(dictionaryEntries);
if (this._updateDictionaryEntryDetailsToken !== token) { return; }
this._dictionaryEntryDetails = dictionaryEntryDetails;
this._updateAdderButtons();
} finally {
resolve();
if (this._updateAdderButtonsPromise === promise) {
this._updateAdderButtonsPromise = null;
}
}
}
_updateAdderButtons() {
const displayTags = this._displayTags;
const dictionaryEntryDetails = this._dictionaryEntryDetails;
for (let i = 0, ii = dictionaryEntryDetails.length; i < ii; ++i) {
let allNoteIds = null;
for (const {mode, canAdd, noteIds, noteInfos, ankiError} of dictionaryEntryDetails[i].modeMap.values()) {
const button = this._adderButtonFind(i, mode);
if (button !== null) {
button.disabled = !canAdd;
button.hidden = (ankiError !== null);
}
if (Array.isArray(noteIds) && noteIds.length > 0) {
if (allNoteIds === null) { allNoteIds = new Set(); }
for (const noteId of noteIds) { allNoteIds.add(noteId); }
}
if (displayTags !== 'never' && Array.isArray(noteInfos)) {
this._setupTagsIndicator(i, noteInfos);
}
}
this._updateViewNoteButton(i, allNoteIds !== null ? [...allNoteIds] : [], false);
}
}
_setupTagsIndicator(i, noteInfos) {
const tagsIndicator = this._tagsIndicatorFind(i);
if (tagsIndicator === null) {
return;
}
const displayTags = new Set();
for (const {tags} of noteInfos) {
for (const tag of tags) {
displayTags.add(tag);
}
}
if (this._displayTags === 'non-standard') {
for (const tag of this._noteTags) {
displayTags.delete(tag);
}
}
if (displayTags.size > 0) {
tagsIndicator.disabled = false;
tagsIndicator.hidden = false;
tagsIndicator.title = `Card tags: ${[...displayTags].join(', ')}`;
}
}
_showAnkiTagsNotification(message) {
if (this._ankiTagNotification === null) {
const node = this._display.displayGenerator.createEmptyFooterNotification();
node.classList.add('click-scannable');
this._ankiTagNotification = new DisplayNotification(this._display.notificationContainer, node);
}
this._ankiTagNotification.setContent(message);
this._ankiTagNotification.open();
}
_tryAddAnkiNoteForSelectedEntry(mode) {
const index = this._display.selectedIndex;
this._addAnkiNote(index, mode);
}
async _addAnkiNote(dictionaryEntryIndex, mode) {
const dictionaryEntries = this._display.dictionaryEntries;
const dictionaryEntryDetails = this._dictionaryEntryDetails;
if (!(
dictionaryEntryDetails !== null &&
dictionaryEntryIndex >= 0 &&
dictionaryEntryIndex < dictionaryEntries.length &&
dictionaryEntryIndex < dictionaryEntryDetails.length
)) {
return;
}
const dictionaryEntry = dictionaryEntries[dictionaryEntryIndex];
const details = dictionaryEntryDetails[dictionaryEntryIndex].modeMap.get(mode);
if (typeof details === 'undefined') { return; }
const {requirements} = details;
const button = this._adderButtonFind(dictionaryEntryIndex, mode);
if (button === null || button.disabled) { return; }
this._hideAnkiNoteErrors(true);
const allErrors = [];
const progressIndicatorVisible = this._display.progressIndicatorVisible;
const overrideToken = progressIndicatorVisible.setOverride(true);
try {
const {note, errors, requirements: outputRequirements} = await this._createNote(dictionaryEntry, mode, requirements);
allErrors.push(...errors);
const error = this._getAddNoteRequirementsError(requirements, outputRequirements);
if (error !== null) { allErrors.push(error); }
let noteId = null;
let addNoteOkay = false;
try {
noteId = await yomichan.api.addAnkiNote(note);
addNoteOkay = true;
} catch (e) {
allErrors.length = 0;
allErrors.push(e);
}
if (addNoteOkay) {
if (noteId === null) {
allErrors.push(new Error('Note could not be added'));
} else {
if (this._suspendNewCards) {
try {
await yomichan.api.suspendAnkiCardsForNote(noteId);
} catch (e) {
allErrors.push(e);
}
}
button.disabled = true;
this._updateViewNoteButton(dictionaryEntryIndex, [noteId], true);
}
}
} catch (e) {
allErrors.push(e);
} finally {
progressIndicatorVisible.clearOverride(overrideToken);
}
if (allErrors.length > 0) {
this._showAnkiNoteErrors(allErrors);
} else {
this._hideAnkiNoteErrors(true);
}
}
_getAddNoteRequirementsError(requirements, outputRequirements) {
if (outputRequirements.length === 0) { return null; }
let count = 0;
for (const requirement of outputRequirements) {
const {type} = requirement;
switch (type) {
case 'audio':
case 'clipboardImage':
break;
default:
++count;
break;
}
}
if (count === 0) { return null; }
const error = new Error('The created card may not have some content');
error.requirements = requirements;
error.outputRequirements = outputRequirements;
return error;
}
_showAnkiNoteErrors(errors) {
if (this._ankiNoteNotificationEventListeners !== null) {
this._ankiNoteNotificationEventListeners.removeAllEventListeners();
}
if (this._ankiNoteNotification === null) {
const node = this._display.displayGenerator.createEmptyFooterNotification();
this._ankiNoteNotification = new DisplayNotification(this._display.notificationContainer, node);
this._ankiNoteNotificationEventListeners = new EventListenerCollection();
}
const content = this._display.displayGenerator.createAnkiNoteErrorsNotificationContent(errors);
for (const node of content.querySelectorAll('.anki-note-error-log-link')) {
this._ankiNoteNotificationEventListeners.addEventListener(node, 'click', () => {
console.log({ankiNoteErrors: errors});
}, false);
}
this._ankiNoteNotification.setContent(content);
this._ankiNoteNotification.open();
}
_hideAnkiNoteErrors(animate) {
if (this._ankiNoteNotification === null) { return; }
this._ankiNoteNotification.close(animate);
this._ankiNoteNotificationEventListeners.removeAllEventListeners();
}
async _updateAnkiFieldTemplates(options) {
this._ankiFieldTemplates = await this._getAnkiFieldTemplates(options);
}
async _getAnkiFieldTemplates(options) {
let templates = options.anki.fieldTemplates;
if (typeof templates === 'string') { return templates; }
templates = this._ankiFieldTemplatesDefault;
if (typeof templates === 'string') { return templates; }
templates = await yomichan.api.getDefaultAnkiFieldTemplates();
this._ankiFieldTemplatesDefault = templates;
return templates;
}
async _getDictionaryEntryDetails(dictionaryEntries) {
const forceCanAddValue = (this._checkForDuplicates ? null : true);
const fetchAdditionalInfo = (this._displayTags !== 'never');
const notePromises = [];
const noteTargets = [];
for (let i = 0, ii = dictionaryEntries.length; i < ii; ++i) {
const dictionaryEntry = dictionaryEntries[i];
const {type} = dictionaryEntry;
const modes = this._dictionaryEntryTypeModeMap.get(type);
if (typeof modes === 'undefined') { continue; }
for (const mode of modes) {
const notePromise = this._createNote(dictionaryEntry, mode, []);
notePromises.push(notePromise);
noteTargets.push({index: i, mode});
}
}
const noteInfoList = await Promise.all(notePromises);
const notes = noteInfoList.map(({note}) => note);
let infos;
let ankiError = null;
try {
if (forceCanAddValue !== null) {
if (!await yomichan.api.isAnkiConnected()) {
throw new Error('Anki not connected');
}
infos = this._getAnkiNoteInfoForceValue(notes, forceCanAddValue);
} else {
infos = await yomichan.api.getAnkiNoteInfo(notes, fetchAdditionalInfo);
}
} catch (e) {
infos = this._getAnkiNoteInfoForceValue(notes, false);
ankiError = e;
}
const results = [];
for (let i = 0, ii = dictionaryEntries.length; i < ii; ++i) {
results.push({
modeMap: new Map()
});
}
for (let i = 0, ii = noteInfoList.length; i < ii; ++i) {
const {note, errors, requirements} = noteInfoList[i];
const {canAdd, valid, noteIds, noteInfos} = infos[i];
const {mode, index} = noteTargets[i];
results[index].modeMap.set(mode, {mode, note, errors, requirements, canAdd, valid, noteIds, noteInfos, ankiError});
}
return results;
}
_getAnkiNoteInfoForceValue(notes, canAdd) {
const results = [];
for (const note of notes) {
const valid = AnkiUtil.isNoteDataValid(note);
results.push({canAdd, valid, noteIds: null});
}
return results;
}
async _createNote(dictionaryEntry, mode, requirements) {
const context = this._noteContext;
const modeOptions = this._modeOptions.get(mode);
if (typeof modeOptions === 'undefined') { throw new Error(`Unsupported note type: ${mode}`); }
const template = this._ankiFieldTemplates;
const {deck: deckName, model: modelName} = modeOptions;
const fields = Object.entries(modeOptions.fields);
const contentOrigin = this._display.getContentOrigin();
const details = this._ankiNoteBuilder.getDictionaryEntryDetailsForNote(dictionaryEntry);
const audioDetails = (details.type === 'term' ? this._displayAudio.getAnkiNoteMediaAudioDetails(details.term, details.reading) : null);
const optionsContext = this._display.getOptionsContext();
const {note, errors, requirements: outputRequirements} = await this._ankiNoteBuilder.createNote({
dictionaryEntry,
mode,
context,
template,
deckName,
modelName,
fields,
tags: this._noteTags,
checkForDuplicates: this._checkForDuplicates,
duplicateScope: this._duplicateScope,
duplicateScopeCheckAllModels: this._duplicateScopeCheckAllModels,
resultOutputMode: this._resultOutputMode,
glossaryLayoutMode: this._glossaryLayoutMode,
compactTags: this._compactTags,
mediaOptions: {
audio: audioDetails,
screenshot: {
format: this._screenshotFormat,
quality: this._screenshotQuality,
contentOrigin
},
textParsing: {
optionsContext,
scanLength: this._scanLength
}
},
requirements
});
return {note, errors, requirements: outputRequirements};
}
_getModes(isTerms) {
return isTerms ? ['term-kanji', 'term-kana'] : ['kanji'];
}
_getValidSentenceData(sentence, fallback, fallbackOffset) {
let {text, offset} = (isObject(sentence) ? sentence : {});
if (typeof text !== 'string') {
text = fallback;
offset = fallbackOffset;
} else {
if (typeof offset !== 'number') { offset = 0; }
}
return {text, offset};
}
// View note functions
_onViewNoteButtonClick(e) {
e.preventDefault();
if (e.shiftKey) {
this._showViewNoteMenu(e.currentTarget);
} else {
this._viewNote(e.currentTarget);
}
}
_onViewNoteButtonContextMenu(e) {
e.preventDefault();
this._showViewNoteMenu(e.currentTarget);
}
_onViewNoteButtonMenuClose(e) {
const {detail: {action, item}} = e;
switch (action) {
case 'viewNote':
this._viewNote(item);
break;
}
}
_updateViewNoteButton(index, noteIds, prepend) {
const button = this._getViewNoteButton(index);
if (button === null) { return; }
if (prepend) {
const currentNoteIds = button.dataset.noteIds;
if (typeof currentNoteIds === 'string' && currentNoteIds.length > 0) {
noteIds = [...noteIds, currentNoteIds.split(' ')];
}
}
const disabled = (noteIds.length === 0);
button.disabled = disabled;
button.hidden = disabled;
button.dataset.noteIds = noteIds.join(' ');
const badge = button.querySelector('.action-button-badge');
if (badge !== null) {
const badgeData = badge.dataset;
if (noteIds.length > 1) {
badgeData.icon = 'plus-thick';
badgeData.hidden = false;
} else {
delete badgeData.icon;
badgeData.hidden = true;
}
}
}
_viewNote(node) {
const noteIds = this._getNodeNoteIds(node);
if (noteIds.length === 0) { return; }
yomichan.api.noteView(noteIds[0]);
}
_showViewNoteMenu(node) {
const noteIds = this._getNodeNoteIds(node);
if (noteIds.length === 0) { return; }
const menuContainerNode = this._display.displayGenerator.instantiateTemplate('view-note-button-popup-menu');
const menuBodyNode = menuContainerNode.querySelector('.popup-menu-body');
for (let i = 0, ii = noteIds.length; i < ii; ++i) {
const noteId = noteIds[i];
const item = this._display.displayGenerator.instantiateTemplate('view-note-button-popup-menu-item');
item.querySelector('.popup-menu-item-label').textContent = `Note ${i + 1}: ${noteId}`;
item.dataset.menuAction = 'viewNote';
item.dataset.noteIds = `${noteId}`;
menuBodyNode.appendChild(item);
}
this._menuContainer.appendChild(menuContainerNode);
const popupMenu = new PopupMenu(node, menuContainerNode);
popupMenu.prepare();
}
_getNodeNoteIds(node) {
const {noteIds} = node.dataset;
return typeof noteIds === 'string' && noteIds.length > 0 ? noteIds.split(' ') : [];
}
_getViewNoteButton(index) {
const entry = this._getEntry(index);
return entry !== null ? entry.querySelector('.action-button[data-action=view-note]') : null;
}
_viewNoteForSelectedEntry() {
const index = this._display.selectedIndex;
const button = this._getViewNoteButton(index);
if (button !== null) {
this._viewNote(button);
}
}
}