alex/yomichan
1
Fork 0
Code Releases Activity

Show any custom tags on words that have anki cards created (#1628)

Browse Source 
* 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.
This commit is contained in:
soriac 2021-04-30 18:57:53 -03:00 committed by GitHub
parent 69a739f00a
commit ba3f7b3e96
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 122 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ext/css/display.css
View File

@ -644,6 +644,9 @@ button.action-button[hidden] {
-webkit-filter var(--animation-duration) linear,
background-color var(--animation-duration) linear;
}
button.collapsible-action-button[hidden] {
display: none;
}
button.action-button:disabled {
pointer-events: none;
cursor: default;
@ -667,7 +670,7 @@ button.action-button:active {
background-color: var(--action-button-active-color);
box-shadow: none;
}
button.action-button::before {
button.action-button[data-icon]::before {
content: '';
width: var(--action-button-size);
height: var(--action-button-size);
@ -691,6 +694,12 @@ button.action-button[data-icon=play-audio]::before {
button.action-button[data-icon=source-term]::before {
background-image: url('/images/source-term.svg');
}
.action-view-tags>.icon {
display: block;
width: var(--action-button-size);
height: var(--action-button-size);
background-color: var(--text-color);
}
:root[data-result-output-mode=merge] .entry[data-type=term] .actions>button.action-button.action-play-audio {
display: none;
}

8
ext/data/schemas/options-schema.json
View File

@ -806,7 +806,8 @@
"duplicateScope",
"checkForDuplicates",
"fieldTemplates",
"suspendNewCards"
"suspendNewCards",
"displayTags"
],
"properties": {
"enable": {
@ -912,6 +913,11 @@
"suspendNewCards": {
"type": "boolean",
"default": false
},
"displayTags": {
"type": "string",
"enum": ["never", "always", "non-standard"],
"default": "never"
}
}
},

1
ext/display-templates.html
View File

@ -5,6 +5,7 @@
<div class="entry-current-indicator" title="Current entry"><span class="entry-current-indicator-inner"></span></div>
<div class="entry-header">
<div class="actions">
<button class="action-button collapsible-action-button action-view-tags" hidden disabled><span class="icon" data-icon="tag"></span></button>
<button class="action-button action-view-note" hidden disabled data-icon="view-note" title="View added note" data-hotkey='["viewNote","title","View added note ({0})"]'></button>
<button class="action-button action-add-note" hidden disabled data-icon="add-term-kanji" data-mode="term-kanji" title="Add expression" data-hotkey='["addNoteTermKanji","title","Add expression ({0})"]'></button>
<button class="action-button action-add-note" hidden disabled data-icon="add-term-kana" data-mode="term-kana" title="Add reading" data-hotkey='["addNoteTermKana","title","Add reading ({0})"]'></button>

5
ext/js/background/backend.js
View File

@ -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);
}
}
}
}

6
ext/js/comm/anki.js
View File

@ -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();

4
ext/js/comm/api.js
View File

@ -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) {

3
ext/js/data/options-util.js
View File

@ -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;
}

65
ext/js/display/display.js
View File

@ -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));

28
ext/settings.html
View File

@ -1565,6 +1565,34 @@
<label class="toggle"><input type="checkbox" data-setting="anki.suspendNewCards"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
</div>
</div></div>
<div class="settings-item advanced-only">
<div class="settings-item-inner">
<div class="settings-item-left">
<div class="settings-item-label">
Show card tags
<a class="more-toggle more-only" data-parent-distance="4">(?)</a>
</div>
</div>
<div class="settings-item-right">
<select data-setting="anki.displayTags">
<option value="never">Never</option>
<option value="always">Always</option>
<option value="non-standard">Non-Standard</option>
</select>
</div>
</div>
<div class="settings-item-children more" hidden>
<p>
When coming across a word that is already in an Anki deck, a button will appear that shows
the tags the card has. If set to <em>Non-Standard</em>, all tags that are included in the
<em>Card tags</em> option will be filtered out from the list. If no tags remain after filtering,
then the button will not be shown.
</p>
<p>
<a class="more-toggle" data-parent-distance="3">Less&hellip;</a>
</p>
</div>
</div>
<div class="settings-item settings-item-button" data-modal-action="show,anki-cards"><div class="settings-item-inner">
<div class="settings-item-left">
<div class="settings-item-label">Configure Anki card format&hellip;</div>

1
test/test-options-util.js
View File

@ -431,6 +431,7 @@ function createProfileOptionsUpdatedTestData1() {
terms: {deck: '', model: '', fields: {}},
kanji: {deck: '', model: '', fields: {}},
duplicateScope: 'collection',
displayTags: 'never',
checkForDuplicates: true,
fieldTemplates: null,
suspendNewCards: false