From ba3f7b3e96df7f034b56132d8c2c90289e16c288 Mon Sep 17 00:00:00 2001 From: soriac Date: Fri, 30 Apr 2021 18:57:53 -0300 Subject: Show any custom tags on words that have anki cards created (#1628) * Proof-of-concept for showing card tags (#1626) * Resolved most PR comments: - Added a snackbar notification when clicking tag button - Replaced magnifying glass icon with new tag icon - Button now contains a span w/icon, to use text color - Removed unnecessary attributes from button - Backend now returns full noteInfos object - Frontend now handles filtering tags * Add options to show/hide tag button & filter tags * Do not show tags button if, after filtering, we have zero tags. * Change tags option to enums, optimize tags intersection check & fix code style. * Update options-util.js to include new tag options. * Fix wording on new tag setting. * Add CSS to remove hidden buttons from the display layout. * getAnkiNoteInfo extra parameter for additional info. * Add new tag option to tests. * Remove unnecessary changes related to anki tags option. * Code style fixes. --- ext/js/background/backend.js | 5 +++- ext/js/comm/anki.js | 6 ++++ ext/js/comm/api.js | 4 +-- ext/js/data/options-util.js | 3 ++ ext/js/display/display.js | 65 ++++++++++++++++++++++++++++++++++++++++---- 5 files changed, 75 insertions(+), 8 deletions(-) (limited to 'ext/js') diff --git a/ext/js/background/backend.js b/ext/js/background/backend.js index 5b133d79..e94ad065 100644 --- a/ext/js/background/backend.js +++ b/ext/js/background/backend.js @@ -458,7 +458,7 @@ class Backend { return await this._anki.addNote(note); } - async _onApiGetAnkiNoteInfo({notes}) { + async _onApiGetAnkiNoteInfo({notes, fetchAdditionalInfo}) { const results = []; const cannotAdd = []; const canAddArray = await this._anki.canAddNotes(notes); @@ -482,6 +482,9 @@ class Backend { const noteIds = noteIdsArray[i]; if (noteIds.length > 0) { cannotAdd[i].info.noteIds = noteIds; + if (fetchAdditionalInfo) { + cannotAdd[i].info.noteInfos = await this._anki.notesInfo(noteIds); + } } } } diff --git a/ext/js/comm/anki.js b/ext/js/comm/anki.js index da234eff..e8cf7afd 100644 --- a/ext/js/comm/anki.js +++ b/ext/js/comm/anki.js @@ -71,6 +71,12 @@ class AnkiConnect { return await this._invoke('canAddNotes', {notes}); } + async notesInfo(notes) { + if (!this._enabled) { return []; } + await this._checkVersion(); + return await this._invoke('notesInfo', {notes}); + } + async getDeckNames() { if (!this._enabled) { return []; } await this._checkVersion(); diff --git a/ext/js/comm/api.js b/ext/js/comm/api.js index 137cda41..3795dcf4 100644 --- a/ext/js/comm/api.js +++ b/ext/js/comm/api.js @@ -52,8 +52,8 @@ class API { return this._invoke('addAnkiNote', {note}); } - getAnkiNoteInfo(notes) { - return this._invoke('getAnkiNoteInfo', {notes}); + getAnkiNoteInfo(notes, fetchAdditionalInfo) { + return this._invoke('getAnkiNoteInfo', {notes, fetchAdditionalInfo}); } injectAnkiNoteMedia(timestamp, definitionDetails, audioDetails, screenshotDetails, clipboardDetails) { diff --git a/ext/js/data/options-util.js b/ext/js/data/options-util.js index 42f9a38f..cb7946f7 100644 --- a/ext/js/data/options-util.js +++ b/ext/js/data/options-util.js @@ -792,6 +792,7 @@ class OptionsUtil { // Version 11 changes: // Changed dictionaries to an array. // Changed audio.customSourceUrl's {expression} marker to {term}. + // Added anki.displayTags. const customSourceUrlPattern = /\{expression\}/g; for (const profile of options.profiles) { const dictionariesNew = []; @@ -805,6 +806,8 @@ class OptionsUtil { customSourceUrl = customSourceUrl.replace(customSourceUrlPattern, '{term}'); } profile.options.audio.customSourceUrl = customSourceUrl; + + profile.options.anki.displayTags = 'never'; } return options; } diff --git a/ext/js/display/display.js b/ext/js/display/display.js index fcfa0244..720e1de5 100644 --- a/ext/js/display/display.js +++ b/ext/js/display/display.js @@ -113,6 +113,7 @@ class Display extends EventDispatcher { this._displayAudio = new DisplayAudio(this); this._ankiNoteNotification = null; this._ankiNoteNotificationEventListeners = null; + this._ankiTagNotification = null; this._queryPostProcessor = null; this._optionToggleHotkeyHandler = new OptionToggleHotkeyHandler(this); this._elementOverflowController = new ElementOverflowController(); @@ -1081,8 +1082,8 @@ class Display extends EventDispatcher { let states; try { const noteContext = this._getNoteContext(); - const {checkForDuplicates} = this._options.anki; - states = await this._areDictionaryEntriesAddable(dictionaryEntries, modes, noteContext, checkForDuplicates ? null : true); + const {checkForDuplicates, displayTags} = this._options.anki; + states = await this._areDictionaryEntriesAddable(dictionaryEntries, modes, noteContext, checkForDuplicates ? null : true, displayTags !== 'never'); } catch (e) { return; } @@ -1096,11 +1097,12 @@ class Display extends EventDispatcher { } _updateAdderButtons2(states, modes) { + const {displayTags} = this._options.anki; 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} = infos[j]; + const {canAdd, noteIds, noteInfos} = infos[j]; const mode = modes[j]; const button = this._adderButtonFind(i, mode); if (button === null) { @@ -1112,6 +1114,10 @@ class Display extends EventDispatcher { } button.disabled = !canAdd; button.hidden = false; + + if (displayTags !== 'never' && Array.isArray(noteInfos)) { + this._setupTagsIndicator(i, noteInfos); + } } if (noteId !== null) { this._viewerButtonShow(i, noteId); @@ -1119,6 +1125,49 @@ class Display extends EventDispatcher { } } + _setupTagsIndicator(i, noteInfos) { + const tagsIndicator = this._tagsIndicatorFind(i); + if (tagsIndicator === null) { + return; + } + + const {tags: optionTags, displayTags} = this._options.anki; + const noteTags = new Set(); + for (const {tags} of noteInfos) { + for (const tag of tags) { + noteTags.add(tag); + } + } + if (displayTags === 'non-standard') { + for (const tag of optionTags) { + noteTags.delete(tag); + } + } + + if (noteTags.size > 0) { + tagsIndicator.disabled = false; + tagsIndicator.hidden = false; + tagsIndicator.title = `Card tags: ${[...noteTags].join(', ')}`; + } + } + + _onShowTags(e) { + e.preventDefault(); + const tags = e.currentTarget.title; + this._showAnkiTagsNotification(tags); + } + + _showAnkiTagsNotification(message) { + if (this._ankiTagNotification === null) { + const node = this._displayGenerator.createEmptyFooterNotification(); + node.classList.add('click-scannable'); + this._ankiTagNotification = new DisplayNotification(this._footerNotificationContainer, node); + } + + this._ankiTagNotification.setContent(message); + this._ankiTagNotification.open(); + } + _entrySetCurrent(index) { const entryPre = this._getEntry(this._index); if (entryPre !== null) { @@ -1320,6 +1369,11 @@ class Display extends EventDispatcher { 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; @@ -1424,7 +1478,7 @@ class Display extends EventDispatcher { return templates; } - async _areDictionaryEntriesAddable(dictionaryEntries, modes, context, forceCanAddValue) { + async _areDictionaryEntriesAddable(dictionaryEntries, modes, context, forceCanAddValue, fetchAdditionalInfo) { const modeCount = modes.length; const notePromises = []; for (const dictionaryEntry of dictionaryEntries) { @@ -1442,7 +1496,7 @@ class Display extends EventDispatcher { } infos = this._getAnkiNoteInfoForceValue(notes, forceCanAddValue); } else { - infos = await yomichan.api.getAnkiNoteInfo(notes); + infos = await yomichan.api.getAnkiNoteInfo(notes, fetchAdditionalInfo); } const results = []; @@ -1703,6 +1757,7 @@ class Display extends EventDispatcher { _addEntryEventListeners(entry) { this._eventListeners.addEventListener(entry, 'click', this._onEntryClick.bind(this)); + this._addMultipleEventListeners(entry, '.action-view-tags', 'click', this._onShowTags.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, '.headword-kanji-link', 'click', this._onKanjiLookup.bind(this)); -- cgit v1.2.3