aboutsummaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2021-07-14 22:37:18 -0400
committerGitHub <noreply@github.com>2021-07-14 22:37:18 -0400
commit25d74140ce9843b4bcb86b1b2bbf644602cdb3d0 (patch)
tree00e5cf7c981712821e7d6b75db85333d434d069c /ext
parent260d10c3a34e7da6fd94b6151422ab09f3941c0b (diff)
Multi view note (#1829)
* Add support for a menu to view multiple note IDs * Show a + badge when there are multiple notes available * Organize
Diffstat (limited to 'ext')
-rw-r--r--ext/display-templates.html4
-rw-r--r--ext/js/display/display-anki.js148
2 files changed, 113 insertions, 39 deletions
diff --git a/ext/display-templates.html b/ext/display-templates.html
index b2316975..a7a184a4 100644
--- a/ext/display-templates.html
+++ b/ext/display-templates.html
@@ -6,7 +6,7 @@
<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-view-note" hidden disabled data-icon="view-note" title="View added note" data-hotkey='["viewNote","title","View added note ({0})"]' data-menu-position="left below h-cover v-cover"><div class="action-button-badge icon" hidden></div></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>
<button class="action-button action-play-audio" data-icon="play-audio" title="Play audio" data-title-default="Play audio" data-hotkey='["playAudio",["title","data-title-default"],"Play audio ({0})"]' data-menu-position="left below h-cover v-cover"><div class="action-button-badge icon" hidden></div></button>
@@ -171,5 +171,7 @@
<button class="popup-menu-item popup-menu-item-audio-button" data-menu-action="playAudioFromSource"><div class="popup-menu-item-icon icon" data-icon="none"></div><span class="popup-menu-item-label"></span></button>
<button class="popup-menu-item popup-menu-item-set-primary-audio-button" data-menu-action="setPrimaryAudio" title="Use as audio for Anki card"><div class="popup-menu-item-icon icon" data-icon="note-card"></div></button>
</div></template>
+<template id="view-note-button-popup-menu-template"><div class="popup-menu-container scan-disable view-note-button-popup-menu" tabindex="-1" role="dialog"><div class="popup-menu popup-menu-auto-size"><div class="popup-menu-body"></div></div></div></template>
+<template id="view-note-button-popup-menu-item-template"><button class="popup-menu-item"><span class="popup-menu-item-label"></span></button></template>
</body></html>
diff --git a/ext/js/display/display-anki.js b/ext/js/display/display-anki.js
index b2ed9ec3..ee3ca68d 100644
--- a/ext/js/display/display-anki.js
+++ b/ext/js/display/display-anki.js
@@ -19,6 +19,7 @@
* AnkiNoteBuilder
* AnkiUtil
* DisplayNotification
+ * PopupMenu
*/
class DisplayAnki {
@@ -52,9 +53,12 @@ class DisplayAnki {
['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._onNoteViewBind = this._onNoteView.bind(this);
+ this._onViewNoteButtonClickBind = this._onViewNoteButtonClick.bind(this);
+ this._onViewNoteButtonContextMenuBind = this._onViewNoteButtonContextMenu.bind(this);
+ this._onViewNoteButtonMenuCloseBind = this._onViewNoteButtonMenuClose.bind(this);
}
prepare() {
@@ -63,7 +67,7 @@ class DisplayAnki {
['addNoteKanji', () => { this._tryAddAnkiNoteForSelectedEntry('kanji'); }],
['addNoteTermKanji', () => { this._tryAddAnkiNoteForSelectedEntry('term-kanji'); }],
['addNoteTermKana', () => { this._tryAddAnkiNoteForSelectedEntry('term-kana'); }],
- ['viewNote', () => { this._tryViewAnkiNoteForSelectedEntry(); }]
+ ['viewNote', this._viewNoteForSelectedEntry.bind(this)]
]);
this._display.on('optionsUpdated', this._onOptionsUpdated.bind(this));
}
@@ -81,7 +85,9 @@ class DisplayAnki {
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);
+ this._addMultipleEventListeners(entry, '.action-view-note', 'click', this._onViewNoteButtonClickBind);
+ this._addMultipleEventListeners(entry, '.action-view-note', 'contextmenu', this._onViewNoteButtonContextMenuBind);
+ this._addMultipleEventListeners(entry, '.action-view-note', 'menuClose', this._onViewNoteButtonMenuCloseBind);
}
setupEntriesComplete() {
@@ -180,12 +186,6 @@ class DisplayAnki {
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);
@@ -202,26 +202,11 @@ class DisplayAnki {
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 : {});
@@ -269,7 +254,7 @@ class DisplayAnki {
const displayTags = this._displayTags;
const dictionaryEntryDetails = this._dictionaryEntryDetails;
for (let i = 0, ii = dictionaryEntryDetails.length; i < ii; ++i) {
- let noteId = null;
+ const allNoteIds = [];
for (const {mode, canAdd, noteIds, noteInfos, ankiError} of dictionaryEntryDetails[i].modeMap.values()) {
const button = this._adderButtonFind(i, mode);
if (button !== null) {
@@ -278,16 +263,14 @@ class DisplayAnki {
}
if (Array.isArray(noteIds) && noteIds.length > 0) {
- noteId = noteIds[0];
+ allNoteIds.push(...noteIds);
}
if (displayTags !== 'never' && Array.isArray(noteInfos)) {
this._setupTagsIndicator(i, noteInfos);
}
}
- if (noteId !== null) {
- this._viewerButtonShow(i, noteId);
- }
+ this._updateViewNoteButton(i, allNoteIds, false);
}
}
@@ -333,14 +316,6 @@ class DisplayAnki {
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;
const dictionaryEntryDetails = this._dictionaryEntryDetails;
@@ -395,7 +370,7 @@ class DisplayAnki {
}
}
button.disabled = true;
- this._viewerButtonShow(dictionaryEntryIndex, noteId);
+ this._updateViewNoteButton(dictionaryEntryIndex, [noteId], true);
}
}
} catch (e) {
@@ -594,4 +569,101 @@ class DisplayAnki {
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-view-note') : null;
+ }
+
+ _viewNoteForSelectedEntry() {
+ const index = this._display.selectedIndex;
+ const button = this._getViewNoteButton(index);
+ if (button !== null) {
+ this._viewNote(button);
+ }
+ }
}