aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2022-05-20 18:08:20 -0400
committerGitHub <noreply@github.com>2022-05-20 18:08:20 -0400
commite498e2d029095e6f15417a3d7dfa693c497e54eb (patch)
tree9c3613e8b1ffb0be241bba9a53a03e5aabe41f8f
parent31e20c889e467aa4ba64b0b5baf602adc1359371 (diff)
Display notification updates (#2149)
* Expose container and node on DisplayNotification * Add Display.createNotification * Rename methods * Rename fields * Remove double newline
-rw-r--r--ext/js/display/display-anki.js57
-rw-r--r--ext/js/display/display-notification.js8
-rw-r--r--ext/js/display/display.js21
-rw-r--r--ext/js/display/option-toggle-hotkey-handler.js9
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);