alex/yomichan
1
Fork 0
Code Releases Activity

Display notification updates (#2149)

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
ext/js/display/display-anki.js
View File

@ -18,7 +18,6 @@
/* global /* global
* AnkiNoteBuilder * AnkiNoteBuilder
* AnkiUtil * AnkiUtil
* DisplayNotification
* PopupMenu * PopupMenu
*/ */
@ -29,9 +28,9 @@ class DisplayAnki {
this._ankiFieldTemplates = null; this._ankiFieldTemplates = null;
this._ankiFieldTemplatesDefault = null; this._ankiFieldTemplatesDefault = null;
this._ankiNoteBuilder = new AnkiNoteBuilder({japaneseUtil}); this._ankiNoteBuilder = new AnkiNoteBuilder({japaneseUtil});
this._ankiNoteNotification = null; this._errorNotification = null;
this._ankiNoteNotificationEventListeners = null; this._errorNotificationEventListeners = null;
this._ankiTagNotification = null; this._tagsNotification = null;
this._updateAdderButtonsPromise = Promise.resolve(); this._updateAdderButtonsPromise = Promise.resolve();
this._updateDictionaryEntryDetailsToken = null; this._updateDictionaryEntryDetailsToken = null;
this._eventListeners = new EventListenerCollection(); this._eventListeners = new EventListenerCollection();
@ -160,7 +159,7 @@ class DisplayAnki {
_onContentClear() { _onContentClear() {
this._updateDictionaryEntryDetailsToken = null; this._updateDictionaryEntryDetailsToken = null;
this._dictionaryEntryDetails = null; this._dictionaryEntryDetails = null;
this._hideAnkiNoteErrors(false); this._hideErrorNotification(false);
} }
_onContentUpdateStart() { _onContentUpdateStart() {
@ -200,7 +199,7 @@ class DisplayAnki {
_onShowTags(e) { _onShowTags(e) {
e.preventDefault(); e.preventDefault();
const tags = e.currentTarget.title; const tags = e.currentTarget.title;
this._showAnkiTagsNotification(tags); this._showTagsNotification(tags);
} }
_adderButtonFind(index, mode) { _adderButtonFind(index, mode) {
@ -312,18 +311,15 @@ class DisplayAnki {
} }
} }
_showAnkiTagsNotification(message) { _showTagsNotification(message) {
if (this._ankiTagNotification === null) { if (this._tagsNotification === null) {
const node = this._display.displayGenerator.createEmptyFooterNotification(); this._tagsNotification = this._display.createNotification(true);
node.classList.add('click-scannable');
this._ankiTagNotification = new DisplayNotification(this._display.notificationContainer, node);
} }
this._ankiTagNotification.setContent(message); this._tagsNotification.setContent(message);
this._ankiTagNotification.open(); this._tagsNotification.open();
} }
_tryAddAnkiNoteForSelectedEntry(mode) { _tryAddAnkiNoteForSelectedEntry(mode) {
const index = this._display.selectedIndex; const index = this._display.selectedIndex;
this._addAnkiNote(index, mode); this._addAnkiNote(index, mode);
@ -349,7 +345,7 @@ class DisplayAnki {
const button = this._adderButtonFind(dictionaryEntryIndex, mode); const button = this._adderButtonFind(dictionaryEntryIndex, mode);
if (button === null || button.disabled) { return; } if (button === null || button.disabled) { return; }
this._hideAnkiNoteErrors(true); this._hideErrorNotification(true);
const allErrors = []; const allErrors = [];
const progressIndicatorVisible = this._display.progressIndicatorVisible; const progressIndicatorVisible = this._display.progressIndicatorVisible;
@ -393,9 +389,9 @@ class DisplayAnki {
} }
if (allErrors.length > 0) { if (allErrors.length > 0) {
this._showAnkiNoteErrors(allErrors); this._showErrorNotification(allErrors);
} else { } else {
this._hideAnkiNoteErrors(true); this._hideErrorNotification(true);
} }
} }
@ -422,32 +418,31 @@ class DisplayAnki {
return error; return error;
} }
_showAnkiNoteErrors(errors) { _showErrorNotification(errors) {
if (this._ankiNoteNotificationEventListeners !== null) { if (this._errorNotificationEventListeners !== null) {
this._ankiNoteNotificationEventListeners.removeAllEventListeners(); this._errorNotificationEventListeners.removeAllEventListeners();
} }
if (this._ankiNoteNotification === null) { if (this._errorNotification === null) {
const node = this._display.displayGenerator.createEmptyFooterNotification(); this._errorNotification = this._display.createNotification(false);
this._ankiNoteNotification = new DisplayNotification(this._display.notificationContainer, node); this._errorNotificationEventListeners = new EventListenerCollection();
this._ankiNoteNotificationEventListeners = new EventListenerCollection();
} }
const content = this._display.displayGenerator.createAnkiNoteErrorsNotificationContent(errors); const content = this._display.displayGenerator.createAnkiNoteErrorsNotificationContent(errors);
for (const node of content.querySelectorAll('.anki-note-error-log-link')) { 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}); console.log({ankiNoteErrors: errors});
}, false); }, false);
} }
this._ankiNoteNotification.setContent(content); this._errorNotification.setContent(content);
this._ankiNoteNotification.open(); this._errorNotification.open();
} }
_hideAnkiNoteErrors(animate) { _hideErrorNotification(animate) {
if (this._ankiNoteNotification === null) { return; } if (this._errorNotification === null) { return; }
this._ankiNoteNotification.close(animate); this._errorNotification.close(animate);
this._ankiNoteNotificationEventListeners.removeAllEventListeners(); this._errorNotificationEventListeners.removeAllEventListeners();
} }
async _updateAnkiFieldTemplates(options) { async _updateAnkiFieldTemplates(options) {

8
ext/js/display/display-notification.js
View File

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

21
ext/js/display/display.js
View File

@ -231,10 +231,6 @@ class Display extends EventDispatcher {
return this._parentPopupId; return this._parentPopupId;
} }
get notificationContainer() {
return this._footerNotificationContainer;
}
get selectedIndex() { get selectedIndex() {
return this._index; return this._index;
} }
@ -512,6 +508,19 @@ class Display extends EventDispatcher {
return Number.isFinite(index) ? index : -1; 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 // Message handlers
_onDirectMessage(data) { _onDirectMessage(data) {
@ -857,9 +866,7 @@ class Display extends EventDispatcher {
if (tagNode === null) { return; } if (tagNode === null) { return; }
if (this._tagNotification === null) { if (this._tagNotification === null) {
const node = this._displayGenerator.createEmptyFooterNotification(); this._tagNotification = this.createNotification(true);
node.classList.add('click-scannable');
this._tagNotification = new DisplayNotification(this._footerNotificationContainer, node);
} }
const index = this.getElementDictionaryEntryIndex(tagNode); const index = this.getElementDictionaryEntryIndex(tagNode);

9
ext/js/display/option-toggle-hotkey-handler.js
View File

@ -15,10 +15,6 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
/* global
* DisplayNotification
*/
class OptionToggleHotkeyHandler { class OptionToggleHotkeyHandler {
constructor(display) { constructor(display) {
this._display = display; this._display = display;
@ -126,9 +122,8 @@ class OptionToggleHotkeyHandler {
_showNotification(message, autoClose) { _showNotification(message, autoClose) {
if (this._notification === null) { if (this._notification === null) {
const node = this._display.displayGenerator.createEmptyFooterNotification(); this._notification = this._display.createNotification(false);
node.addEventListener('click', this._onNotificationClick.bind(this), false); this._notification.node.addEventListener('click', this._onNotificationClick.bind(this), false);
this._notification = new DisplayNotification(this._display.notificationContainer, node);
} }
this._notification.setContent(message); this._notification.setContent(message);