Add flag notification on click

yomidevs · Nov 5, 2024 · 28e005d · 28e005d
1 parent 9931698
commit 28e005d
Showing 1 changed file with 39 additions and 0 deletions.
diff --git a/ext/js/display/display-anki.js b/ext/js/display/display-anki.js
@@ -49,6 +49,8 @@ export class DisplayAnki {
         this._errorNotificationEventListeners = null;
         /** @type {?import('./display-notification.js').DisplayNotification} */
         this._tagsNotification = null;
+        /** @type {?import('./display-notification.js').DisplayNotification} */
+        this._flagsNotification = null;
         /** @type {?Promise<void>} */
         this._updateSaveButtonsPromise = null;
         /** @type {?import('core').TokenObject} */
@@ -103,6 +105,8 @@ export class DisplayAnki {
         /** @type {(event: MouseEvent) => void} */
         this._onShowTagsBind = this._onShowTags.bind(this);
         /** @type {(event: MouseEvent) => void} */
+        this._onShowFlagsBind = this._onShowFlags.bind(this);
+        /** @type {(event: MouseEvent) => void} */
         this._onNoteSaveBind = this._onNoteSave.bind(this);
         /** @type {(event: MouseEvent) => void} */
         this._onViewNotesButtonClickBind = this._onViewNotesButtonClick.bind(this);
@@ -260,6 +264,9 @@ export class DisplayAnki {
         for (const node of element.querySelectorAll('.action-button[data-action=view-tags]')) {
             eventListeners.addEventListener(node, 'click', this._onShowTagsBind);
         }
+        for (const node of element.querySelectorAll('.action-button[data-action=view-flags]')) {
+            eventListeners.addEventListener(node, 'click', this._onShowFlagsBind);
+        }
         for (const node of element.querySelectorAll('.action-button[data-action=save-note]')) {
             eventListeners.addEventListener(node, 'click', this._onNoteSaveBind);
         }
@@ -304,6 +311,16 @@ export class DisplayAnki {
         this._showTagsNotification(tags);
     }
 
+    /**
+     * @param {MouseEvent} e
+     */
+    _onShowFlags(e) {
+        e.preventDefault();
+        const element = /** @type {HTMLElement} */ (e.currentTarget);
+        const flags = element.title;
+        this._showFlagsNotification(flags);
+    }
+
     /**
      * @param {number} index
      * @param {import('display-anki').CreateMode} mode
@@ -323,6 +340,15 @@ export class DisplayAnki {
         return entry !== null ? entry.querySelector('.action-button[data-action=view-tags]') : null;
     }
 
+    /**
+     * @param {number} index
+     * @returns {?HTMLButtonElement}
+     */
+    _flagsIndicatorFind(index) {
+        const entry = this._getEntry(index);
+        return entry !== null ? entry.querySelector('.action-button[data-action=view-flags]') : null;
+    }
+
     /**
      * @param {number} index
      * @returns {?HTMLElement}
@@ -459,6 +485,7 @@ export class DisplayAnki {
 
                 if (displayTags !== 'never' && Array.isArray(noteInfos)) {
                     this._setupTagsIndicator(i, noteInfos);
+                    this._setupFlagsIndicator(i, noteInfos);
                 }
             }
 
@@ -535,6 +562,18 @@ export class DisplayAnki {
         }
     }
 
+    /**
+     * @param {string} message
+     */
+    _showFlagsNotification(message) {
+        if (this._flagsNotification === null) {
+            this._flagsNotification = this._display.createNotification(true);
+        }
+
+        this._flagsNotification.setContent(message);
+        this._flagsNotification.open();
+    }
+
     /**
      * @param {import('display-anki').CreateMode} mode
      */