DisplayAnki (#1791)

* Remove anki functionality from display

* Rename function

* Display API updates

* Use DisplayAnki

* TODO

1 files changed, 582 insertions, 0 deletions

diff --git a/ext/js/display/display-anki.js b/ext/js/display/display-anki.js
new file mode 100644
index 00000000..8dd94214
--- /dev/null
+++ b/ext/js/display/display-anki.js
@@ -0,0 +1,582 @@
+/*
+ * 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
+ */
+
+class DisplayAnki {
+    constructor(display) {
+        this._display = display;
+        this._ankiFieldTemplates = null;
+        this._ankiFieldTemplatesDefault = null;
+        this._ankiNoteBuilder = new AnkiNoteBuilder();
+        this._ankiNoteNotification = null;
+        this._ankiNoteNotificationEventListeners = null;
+        this._ankiTagNotification = null;
+        this._updateAdderButtonsPromise = Promise.resolve();
+        this._updateAdderButtonsToken = null;
+        this._eventListeners = new EventListenerCollection();
+        this._checkForDuplicates = false;
+        this._suspendNewCards = false;
+        this._compactTags = false;
+        this._resultOutputMode = 'split';
+        this._glossaryLayoutMode = 'default';
+        this._displayTags = 'never';
+        this._duplicateScope = 'collection';
+        this._screenshotFormat = 'png';
+        this._screenshotQuality = 100;
+        this._noteTags = [];
+        this._modeOptions = new Map();
+        this._onShowTagsBind = this._onShowTags.bind(this);
+        this._onNoteAddBind = this._onNoteAdd.bind(this);
+        this._onNoteViewBind = this._onNoteView.bind(this);
+    }
+
+    prepare() {
+        this._display.hotkeyHandler.registerActions([
+            ['addNoteKanji',      () => { this._tryAddAnkiNoteForSelectedEntry('kanji'); }],
+            ['addNoteTermKanji',  () => { this._tryAddAnkiNoteForSelectedEntry('term-kanji'); }],
+            ['addNoteTermKana',   () => { this._tryAddAnkiNoteForSelectedEntry('term-kana'); }],
+            ['viewNote',          () => { this._tryViewAnkiNoteForSelectedEntry(); }]
+        ]);
+        this._display.on('optionsUpdated', this._onOptionsUpdated.bind(this));
+    }
+
+    cleanupEntries() {
+        this._updateAdderButtonsToken = null;
+        this._hideAnkiNoteErrors(false);
+    }
+
+    setupEntry(entry) {
+        this._addMultipleEventListeners(entry, '.action-view-tags', 'click', this._onShowTagsBind);
+        this._addMultipleEventListeners(entry, '.action-add-note', 'click', this._onNoteAddBind);
+        this._addMultipleEventListeners(entry, '.action-view-note', 'click', this._onNoteViewBind);
+    }
+
+    setupEntriesComplete(isTerms, dictionaryEntries) { // TODO : Don't pass (isTerms, dictionaryEntries)
+        this._updateAdderButtons(isTerms, dictionaryEntries);
+    }
+
+    async getLogData(dictionaryEntry) {
+        const result = {};
+
+        // Anki note data
+        let ankiNoteData;
+        let ankiNoteDataException;
+        try {
+            const context = this._getNoteContext();
+            ankiNoteData = await this._ankiNoteBuilder.getRenderingData({
+                dictionaryEntry,
+                mode: 'test',
+                context,
+                resultOutputMode: this.resultOutputMode,
+                glossaryLayoutMode: this._glossaryLayoutMode,
+                compactTags: this._compactTags,
+                injectedMedia: null,
+                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;
+            try {
+                const noteContext = this._getNoteContext();
+                ({note: note, errors} = await this._createNote(dictionaryEntry, mode, noteContext, false));
+            } catch (e) {
+                errors = [e];
+            }
+            const entry = {mode, note};
+            if (Array.isArray(errors) && errors.length > 0) {
+                entry.errors = errors;
+            }
+            ankiNotes.push(entry);
+        }
+        result.ankiNotes = ankiNotes;
+
+        return result;
+    }
+
+    // Private
+
+    _onOptionsUpdated({options}) {
+        const {
+            general: {resultOutputMode, glossaryLayoutMode, compactTags},
+            anki: {tags, duplicateScope, suspendNewCards, checkForDuplicates, displayTags, kanji, terms, screenshot: {format, quality}}
+        } = options;
+
+        this._checkForDuplicates = checkForDuplicates;
+        this._suspendNewCards = suspendNewCards;
+        this._compactTags = compactTags;
+        this._resultOutputMode = resultOutputMode;
+        this._glossaryLayoutMode = glossaryLayoutMode;
+        this._displayTags = displayTags;
+        this._duplicateScope = duplicateScope;
+        this._screenshotFormat = format;
+        this._screenshotQuality = quality;
+        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);
+    }
+
+    _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);
+    }
+
+    _onNoteView(e) {
+        e.preventDefault();
+        const link = e.currentTarget;
+        yomichan.api.noteView(link.dataset.noteId);
+    }
+
+    _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;
+    }
+
+    _tagsIndicatorFind(index) {
+        const entry = this._getEntry(index);
+        return entry !== null ? entry.querySelector('.action-view-tags') : null;
+    }
+
+    _viewerButtonFind(index) {
+        const entry = this._getEntry(index);
+        return entry !== null ? entry.querySelector('.action-view-note') : null;
+    }
+
+    _getEntry(index) {
+        const entries = this._display.dictionaryEntryNodes;
+        return index >= 0 && index < entries.length ? entries[index] : null;
+    }
+
+    _viewerButtonShow(index, noteId) {
+        const viewerButton = this._viewerButtonFind(index);
+        if (viewerButton === null) {
+            return;
+        }
+        viewerButton.disabled = false;
+        viewerButton.hidden = false;
+        viewerButton.dataset.noteId = noteId;
+    }
+
+    _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;
+        }
+        sentence = this._getValidSentenceData(sentence);
+        return {
+            url,
+            sentence,
+            documentTitle,
+            query: this._display.query,
+            fullQuery: this._display.fullQuery
+        };
+    }
+
+    _getDictionaryEntryDetailsForNote(dictionaryEntry) {
+        const {type} = dictionaryEntry;
+        if (type === 'kanji') {
+            const {character} = dictionaryEntry;
+            return {type, character};
+        }
+
+        const {headwords} = dictionaryEntry;
+        let bestIndex = -1;
+        for (let i = 0, ii = headwords.length; i < ii; ++i) {
+            const {term, reading, sources} = headwords[i];
+            for (const {deinflectedText} of sources) {
+                if (term === deinflectedText) {
+                    bestIndex = i;
+                    i = ii;
+                    break;
+                } else if (reading === deinflectedText && bestIndex < 0) {
+                    bestIndex = i;
+                    break;
+                }
+            }
+        }
+
+        const {term, reading} = headwords[Math.max(0, bestIndex)];
+        return {type, term, reading};
+    }
+
+    async _updateAdderButtons(isTerms, dictionaryEntries) {
+        const token = {};
+        this._updateAdderButtonsToken = token;
+        await this._updateAdderButtonsPromise;
+        if (this._updateAdderButtonsToken !== token) { return; }
+
+        const {promise, resolve} = deferPromise();
+        try {
+            this._updateAdderButtonsPromise = promise;
+
+            const modes = this._getModes(isTerms);
+            let states;
+            try {
+                const noteContext = this._getNoteContext();
+                states = await this._areDictionaryEntriesAddable(
+                    dictionaryEntries,
+                    modes,
+                    noteContext,
+                    this._checkForDuplicates ? null : true,
+                    this._displayTags !== 'never'
+                );
+            } catch (e) {
+                return;
+            }
+
+            if (this._updateAdderButtonsToken !== token) { return; }
+
+            this._updateAdderButtons2(states, modes);
+        } finally {
+            resolve();
+        }
+    }
+
+    _updateAdderButtons2(states, modes) {
+        const displayTags = this._displayTags;
+        for (let i = 0, ii = states.length; i < ii; ++i) {
+            const infos = states[i];
+            let noteId = null;
+            for (let j = 0, jj = infos.length; j < jj; ++j) {
+                const {canAdd, noteIds, noteInfos} = infos[j];
+                const mode = modes[j];
+                const button = this._adderButtonFind(i, mode);
+                if (button === null) {
+                    continue;
+                }
+
+                if (Array.isArray(noteIds) && noteIds.length > 0) {
+                    noteId = noteIds[0];
+                }
+                button.disabled = !canAdd;
+                button.hidden = false;
+
+                if (displayTags !== 'never' && Array.isArray(noteInfos)) {
+                    this._setupTagsIndicator(i, noteInfos);
+                }
+            }
+            if (noteId !== null) {
+                this._viewerButtonShow(i, noteId);
+            }
+        }
+    }
+
+    _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);
+    }
+
+    _tryViewAnkiNoteForSelectedEntry() {
+        const index = this._display.selectedIndex;
+        const button = this._viewerButtonFind(index);
+        if (button !== null && !button.disabled) {
+            yomichan.api.noteView(button.dataset.noteId);
+        }
+    }
+
+    async _addAnkiNote(dictionaryEntryIndex, mode) {
+        const dictionaryEntries = this._display.dictionaryEntries;
+        if (dictionaryEntryIndex < 0 || dictionaryEntryIndex >= dictionaryEntries.length) { return; }
+        const dictionaryEntry = dictionaryEntries[dictionaryEntryIndex];
+
+        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 noteContext = this._getNoteContext();
+            const {note, errors} = await this._createNote(dictionaryEntry, mode, noteContext, true);
+            allErrors.push(...errors);
+
+            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._viewerButtonShow(dictionaryEntryIndex, noteId);
+                }
+            }
+        } catch (e) {
+            allErrors.push(e);
+        } finally {
+            progressIndicatorVisible.clearOverride(overrideToken);
+        }
+
+        if (allErrors.length > 0) {
+            this._showAnkiNoteErrors(allErrors);
+        } else {
+            this._hideAnkiNoteErrors(true);
+        }
+    }
+
+    _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 _areDictionaryEntriesAddable(dictionaryEntries, modes, context, forceCanAddValue, fetchAdditionalInfo) {
+        const modeCount = modes.length;
+        const notePromises = [];
+        for (const dictionaryEntry of dictionaryEntries) {
+            for (const mode of modes) {
+                const notePromise = this._createNote(dictionaryEntry, mode, context, false);
+                notePromises.push(notePromise);
+            }
+        }
+        const notes = (await Promise.all(notePromises)).map(({note}) => note);
+
+        let infos;
+        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);
+        }
+
+        const results = [];
+        for (let i = 0, ii = infos.length; i < ii; i += modeCount) {
+            results.push(infos.slice(i, i + modeCount));
+        }
+        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, context, injectMedia) {
+        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 errors = [];
+        let injectedMedia = null;
+        if (injectMedia) {
+            let errors2;
+            ({result: injectedMedia, errors: errors2} = await this._injectAnkiNoteMedia(dictionaryEntry, fields));
+            for (const error of errors2) {
+                errors.push(deserializeError(error));
+            }
+        }
+
+        const {note, errors: createNoteErrors} = await this._ankiNoteBuilder.createNote({
+            dictionaryEntry,
+            mode,
+            context,
+            template,
+            deckName,
+            modelName,
+            fields,
+            tags: this._noteTags,
+            checkForDuplicates: this._checkForDuplicates,
+            duplicateScope: this._duplicateScope,
+            resultOutputMode: this.resultOutputMode,
+            glossaryLayoutMode: this._glossaryLayoutMode,
+            compactTags: this._compactTags,
+            injectedMedia,
+            errors
+        });
+        errors.push(...createNoteErrors);
+        return {note, errors};
+    }
+
+    async _injectAnkiNoteMedia(dictionaryEntry, fields) {
+        const timestamp = Date.now();
+
+        const dictionaryEntryDetails = this._getDictionaryEntryDetailsForNote(dictionaryEntry);
+
+        const audioDetails = (
+            dictionaryEntryDetails.type !== 'kanji' && AnkiUtil.fieldsObjectContainsMarker(fields, 'audio') ?
+            this._display.getAnkiNoteMediaAudioDetails(dictionaryEntryDetails.term, dictionaryEntryDetails.reading) :
+            null
+        );
+
+        const {tabId, frameId} = this._display.getContentOrigin();
+        const screenshotDetails = (
+            AnkiUtil.fieldsObjectContainsMarker(fields, 'screenshot') && typeof tabId === 'number' ?
+            {tabId, frameId, format: this._screenshotFormat, quality: this._screenshotQuality} :
+            null
+        );
+
+        const clipboardDetails = {
+            image: AnkiUtil.fieldsObjectContainsMarker(fields, 'clipboard-image'),
+            text: AnkiUtil.fieldsObjectContainsMarker(fields, 'clipboard-text')
+        };
+
+        return await yomichan.api.injectAnkiNoteMedia(
+            timestamp,
+            dictionaryEntryDetails,
+            audioDetails,
+            screenshotDetails,
+            clipboardDetails
+        );
+    }
+
+    _getModes(isTerms) {
+        return isTerms ? ['term-kanji', 'term-kana'] : ['kanji'];
+    }
+
+    _getValidSentenceData(sentence) {
+        let {text, offset} = (isObject(sentence) ? sentence : {});
+        if (typeof text !== 'string') { text = ''; }
+        if (typeof offset !== 'number') { offset = 0; }
+        return {text, offset};
+    }
+}