Display notification updates (#2149)

* Expose container and node on DisplayNotification

* Add Display.createNotification

* Rename methods

* Rename fields

* Remove double newline

4 files changed, 50 insertions, 45 deletions

diff --git a/ext/js/display/display-anki.js b/ext/js/display/display-anki.js
index 8cb9311e..0af8831a 100644
--- a/ext/js/display/display-anki.js
+++ b/ext/js/display/display-anki.js
@@ -18,7 +18,6 @@
 /* global
  * AnkiNoteBuilder
  * AnkiUtil
- * DisplayNotification
  * PopupMenu
  */
 
@@ -29,9 +28,9 @@ class DisplayAnki {
         this._ankiFieldTemplates = null;
         this._ankiFieldTemplatesDefault = null;
         this._ankiNoteBuilder = new AnkiNoteBuilder({japaneseUtil});
-        this._ankiNoteNotification = null;
-        this._ankiNoteNotificationEventListeners = null;
-        this._ankiTagNotification = null;
+        this._errorNotification = null;
+        this._errorNotificationEventListeners = null;
+        this._tagsNotification = null;
         this._updateAdderButtonsPromise = Promise.resolve();
         this._updateDictionaryEntryDetailsToken = null;
         this._eventListeners = new EventListenerCollection();
@@ -160,7 +159,7 @@ class DisplayAnki {
     _onContentClear() {
         this._updateDictionaryEntryDetailsToken = null;
         this._dictionaryEntryDetails = null;
-        this._hideAnkiNoteErrors(false);
+        this._hideErrorNotification(false);
     }
 
     _onContentUpdateStart() {
@@ -200,7 +199,7 @@ class DisplayAnki {
     _onShowTags(e) {
         e.preventDefault();
         const tags = e.currentTarget.title;
-        this._showAnkiTagsNotification(tags);
+        this._showTagsNotification(tags);
     }
 
     _adderButtonFind(index, mode) {
@@ -312,18 +311,15 @@ class DisplayAnki {
         }
     }
 
-    _showAnkiTagsNotification(message) {
-        if (this._ankiTagNotification === null) {
-            const node = this._display.displayGenerator.createEmptyFooterNotification();
-            node.classList.add('click-scannable');
-            this._ankiTagNotification = new DisplayNotification(this._display.notificationContainer, node);
+    _showTagsNotification(message) {
+        if (this._tagsNotification === null) {
+            this._tagsNotification = this._display.createNotification(true);
         }
 
-        this._ankiTagNotification.setContent(message);
-        this._ankiTagNotification.open();
+        this._tagsNotification.setContent(message);
+        this._tagsNotification.open();
     }
 
-
     _tryAddAnkiNoteForSelectedEntry(mode) {
         const index = this._display.selectedIndex;
         this._addAnkiNote(index, mode);
@@ -349,7 +345,7 @@ class DisplayAnki {
         const button = this._adderButtonFind(dictionaryEntryIndex, mode);
         if (button === null || button.disabled) { return; }
 
-        this._hideAnkiNoteErrors(true);
+        this._hideErrorNotification(true);
 
         const allErrors = [];
         const progressIndicatorVisible = this._display.progressIndicatorVisible;
@@ -393,9 +389,9 @@ class DisplayAnki {
         }
 
         if (allErrors.length > 0) {
-            this._showAnkiNoteErrors(allErrors);
+            this._showErrorNotification(allErrors);
         } else {
-            this._hideAnkiNoteErrors(true);
+            this._hideErrorNotification(true);
         }
     }
 
@@ -422,32 +418,31 @@ class DisplayAnki {
         return error;
     }
 
-    _showAnkiNoteErrors(errors) {
-        if (this._ankiNoteNotificationEventListeners !== null) {
-            this._ankiNoteNotificationEventListeners.removeAllEventListeners();
+    _showErrorNotification(errors) {
+        if (this._errorNotificationEventListeners !== null) {
+            this._errorNotificationEventListeners.removeAllEventListeners();
         }
 
-        if (this._ankiNoteNotification === null) {
-            const node = this._display.displayGenerator.createEmptyFooterNotification();
-            this._ankiNoteNotification = new DisplayNotification(this._display.notificationContainer, node);
-            this._ankiNoteNotificationEventListeners = new EventListenerCollection();
+        if (this._errorNotification === null) {
+            this._errorNotification = this._display.createNotification(false);
+            this._errorNotificationEventListeners = new EventListenerCollection();
         }
 
         const content = this._display.displayGenerator.createAnkiNoteErrorsNotificationContent(errors);
         for (const node of content.querySelectorAll('.anki-note-error-log-link')) {
-            this._ankiNoteNotificationEventListeners.addEventListener(node, 'click', () => {
+            this._errorNotificationEventListeners.addEventListener(node, 'click', () => {
                 console.log({ankiNoteErrors: errors});
             }, false);
         }
 
-        this._ankiNoteNotification.setContent(content);
-        this._ankiNoteNotification.open();
+        this._errorNotification.setContent(content);
+        this._errorNotification.open();
     }
 
-    _hideAnkiNoteErrors(animate) {
-        if (this._ankiNoteNotification === null) { return; }
-        this._ankiNoteNotification.close(animate);
-        this._ankiNoteNotificationEventListeners.removeAllEventListeners();
+    _hideErrorNotification(animate) {
+        if (this._errorNotification === null) { return; }
+        this._errorNotification.close(animate);
+        this._errorNotificationEventListeners.removeAllEventListeners();
     }
 
     async _updateAnkiFieldTemplates(options) {
diff --git a/ext/js/display/display-notification.js b/ext/js/display/display-notification.js
index e3da8371..f9e72e6b 100644
--- a/ext/js/display/display-notification.js
+++ b/ext/js/display/display-notification.js
@@ -25,6 +25,14 @@ class DisplayNotification {
         this._closeTimer = null;
     }
 
+    get container() {
+        return this._container;
+    }
+
+    get node() {
+        return this._node;
+    }
+
     open() {
         if (!this.isClosed()) { return; }
 
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index aad54e1c..600df954 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -231,10 +231,6 @@ class Display extends EventDispatcher {
         return this._parentPopupId;
     }
 
-    get notificationContainer() {
-        return this._footerNotificationContainer;
-    }
-
     get selectedIndex() {
         return this._index;
     }
@@ -512,6 +508,19 @@ class Display extends EventDispatcher {
         return Number.isFinite(index) ? index : -1;
     }
 
+    /**
+     * Creates a new notification.
+     * @param {boolean} scannable Whether or not the notification should permit its content to be scanned.
+     * @returns {DisplayNotification} A new notification instance.
+     */
+    createNotification(scannable) {
+        const node = this._displayGenerator.createEmptyFooterNotification();
+        if (scannable) {
+            node.classList.add('click-scannable');
+        }
+        return new DisplayNotification(this._footerNotificationContainer, node);
+    }
+
     // Message handlers
 
     _onDirectMessage(data) {
@@ -857,9 +866,7 @@ class Display extends EventDispatcher {
         if (tagNode === null) { return; }
 
         if (this._tagNotification === null) {
-            const node = this._displayGenerator.createEmptyFooterNotification();
-            node.classList.add('click-scannable');
-            this._tagNotification = new DisplayNotification(this._footerNotificationContainer, node);
+            this._tagNotification = this.createNotification(true);
         }
 
         const index = this.getElementDictionaryEntryIndex(tagNode);
diff --git a/ext/js/display/option-toggle-hotkey-handler.js b/ext/js/display/option-toggle-hotkey-handler.js
index a6db93f4..3f6b8052 100644
--- a/ext/js/display/option-toggle-hotkey-handler.js
+++ b/ext/js/display/option-toggle-hotkey-handler.js
@@ -15,10 +15,6 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-/* global
- * DisplayNotification
- */
-
 class OptionToggleHotkeyHandler {
     constructor(display) {
         this._display = display;
@@ -126,9 +122,8 @@ class OptionToggleHotkeyHandler {
 
     _showNotification(message, autoClose) {
         if (this._notification === null) {
-            const node = this._display.displayGenerator.createEmptyFooterNotification();
-            node.addEventListener('click', this._onNotificationClick.bind(this), false);
-            this._notification = new DisplayNotification(this._display.notificationContainer, node);
+            this._notification = this._display.createNotification(false);
+            this._notification.node.addEventListener('click', this._onNotificationClick.bind(this), false);
         }
 
         this._notification.setContent(message);