Display notification updates (#2149)

* Expose container and node on DisplayNotification

* Add Display.createNotification

* Rename methods

* Rename fields

* Remove double newline
This commit is contained in:
toasted-nutbread 2022-05-20 18:08:20 -04:00 committed by GitHub
parent 31e20c889e
commit e498e2d029
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 50 additions and 45 deletions

View File

@ -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) {

View File

@ -25,6 +25,14 @@ class DisplayNotification {
this._closeTimer = null;
}
get container() {
return this._container;
}
get node() {
return this._node;
}
open() {
if (!this.isClosed()) { return; }

View File

@ -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);

View File

@ -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);