Display the stacked add buttons

yomidevs · Mar 7, 2024 · 1bb4d3c · 1bb4d3c
1 parent 55ed8de
commit 1bb4d3c
Show file tree

Hide file tree

Showing 6 changed files with 1,132 additions and 1,513 deletions.
diff --git a/ext/css/display.css b/ext/css/display.css
@@ -669,6 +669,8 @@ button.action-button:active {
 .icon[data-icon=view-note]      { background-image: url('/images/view-note.svg'); }
 .icon[data-icon=add-term-kanji] { background-image: url('/images/add-term-kanji.svg'); }
 .icon[data-icon=add-term-kana]  { background-image: url('/images/add-term-kana.svg'); }
+.icon[data-icon=add-duplicate-term-kanji] { background-image: url('/images/add-duplicate-term-kanji.svg'); }
+.icon[data-icon=add-duplicate-term-kana]  { background-image: url('/images/add-duplicate-term-kana.svg'); }
 .icon[data-icon=play-audio]     { background-image: url('/images/play-audio.svg'); }
 .icon[data-icon=source-term]    { background-image: url('/images/source-term.svg'); }
 .icon[data-icon=entry-current]  { background-image: url('/images/entry-current.svg'); }

diff --git a/ext/images/add-duplicate-term-kana.svg b/ext/images/add-duplicate-term-kana.svg
diff --git a/ext/images/add-duplicate-term-kanji.svg b/ext/images/add-duplicate-term-kanji.svg
diff --git a/ext/js/display/display-anki.js b/ext/js/display/display-anki.js
@@ -370,6 +370,36 @@ export class DisplayAnki {
         }
     }
 
+    /**
+     * @param {HTMLButtonElement} button
+     */
+    _showDuplicateAddButton(button) {
+        const isKanjiAdd = button.dataset.mode === 'term-kanji';
+
+        const title = button.getAttribute('title');
+        if (title) {
+            button.setAttribute('title', title.replace(/Add (?!duplicate)/, 'Add duplicate '));
+        }
+
+        // eslint-disable-next-line no-underscore-dangle
+        const hotkeyLabel = this._display._hotkeyHelpController.getHotkeyLabel(button);
+
+        if (hotkeyLabel) {
+            if (hotkeyLabel === 'Add expression ({0})') {
+                // eslint-disable-next-line no-underscore-dangle
+                this._display._hotkeyHelpController.setHotkeyLabel(button, 'Add duplicate expression ({0})');
+            } else if (hotkeyLabel === 'Add reading ({0})') {
+                // eslint-disable-next-line no-underscore-dangle
+                this._display._hotkeyHelpController.setHotkeyLabel(button, 'Add duplicate reading ({0})');
+            }
+        }
+
+        const actionIcon = button.querySelector('.action-icon');
+        if (actionIcon instanceof HTMLElement) {
+            actionIcon.dataset.icon = isKanjiAdd ? 'add-duplicate-term-kanji' : 'add-duplicate-term-kana';
+        }
+    }
+
     /**
      * @param {import('display-anki').DictionaryEntryDetails[]} dictionaryEntryDetails
      */
@@ -383,6 +413,11 @@ export class DisplayAnki {
                 if (button !== null) {
                     button.disabled = !canAdd;
                     button.hidden = (ankiError !== null);
+
+                    // If entry has noteIds, show the "add duplicate" button.
+                    if (Array.isArray(noteIds) && noteIds.length > 0) {
+                        this._showDuplicateAddButton(button);
+                    }
                 }
 
                 if (Array.isArray(noteIds) && noteIds.length > 0) {
@@ -507,6 +542,9 @@ export class DisplayAnki {
                             allErrors.push(toError(e));
                         }
                     }
+                    // Now that this dictionary entry has a duplicate in Anki, show the "add duplicate" buttons.
+                    this._showDuplicateAddButton(button);
+
                     this._updateViewNoteButton(dictionaryEntryIndex, [noteId], true);
                 }
             }

diff --git a/ext/js/input/hotkey-help-controller.js b/ext/js/input/hotkey-help-controller.js
@@ -181,4 +181,36 @@ export class HotkeyHelpController {
             defaultAttributeValues
         };
     }
+
+    /**
+     * @param {HTMLElement} node
+     * @returns {?string}
+     */
+    getHotkeyLabel(node) {
+        const {hotkey} = node.dataset;
+        if (typeof hotkey !== 'string') { return null; }
+
+        const data = /** @type {unknown} */ (parseJson(hotkey));
+        if (!Array.isArray(data)) { return null; }
+
+        const values = /** @type {unknown[]} */ (data)[2];
+        if (typeof values !== 'string') { return null; }
+
+        return values;
+    }
+
+    /**
+     * @param {HTMLElement} node
+     * @param {string} label
+     */
+    setHotkeyLabel(node, label) {
+        const {hotkey} = node.dataset;
+        if (typeof hotkey !== 'string') { return; }
+
+        const data = /** @type {unknown} */ (parseJson(hotkey));
+        if (!Array.isArray(data)) { return; }
+
+        data[2] = label;
+        node.dataset.hotkey = JSON.stringify(data);
+    }
 }