diff --git a/packages/frontend/src/scripts/favicon-dot.ts b/packages/frontend/src/scripts/favicon-dot.ts index 2e05171772..c40a08f427 100644 --- a/packages/frontend/src/scripts/favicon-dot.ts +++ b/packages/frontend/src/scripts/favicon-dot.ts @@ -21,15 +21,14 @@ class FavIconDot { this.faviconImage = document.createElement('img'); this.hasLoaded = new Promise((resolve, reject) => { - (this.faviconImage as HTMLImageElement).onload = () => { + (this.faviconImage as HTMLImageElement).addEventListener('load', () => { this.canvas.width = (this.faviconImage as HTMLImageElement).width; this.canvas.height = (this.faviconImage as HTMLImageElement).height; resolve(); - }; - - (this.faviconImage as HTMLImageElement).onerror = () => { + }); + (this.faviconImage as HTMLImageElement).addEventListener('error', () => { reject('Failed to create favicon img element'); - }; + }); }); this.faviconImage.src = this.faviconEL.href; @@ -38,9 +37,9 @@ class FavIconDot { private async getOrMakeFaviconElement() : Promise { return new Promise((resolve, reject) => { const favicon = document.querySelector('link[rel$=icon]') ?? this._createFaviconElem(); - favicon.onload = () => { + favicon.addEventListener('load', () => { resolve(favicon); - }; + }); favicon.onerror = () => { reject('Failed to load favicon'); @@ -80,7 +79,6 @@ class FavIconDot { async setVisible(isVisible : boolean) { //Wait for it to have loaded the icon await this.hasLoaded; - console.log(this.hasLoaded); this._drawIcon(); if (isVisible) this._drawDot(); this._setFavicon(); @@ -104,6 +102,6 @@ export function setFavIconDot(visible: boolean) { setIconVisibility(); } else { // Otherwise, set visibility when window loads - window.onload = setIconVisibility; + window.addEventListener('load', setIconVisibility); } } diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue index 63b19dfb26..bec8bb6c7c 100644 --- a/packages/frontend/src/ui/_common_/common.vue +++ b/packages/frontend/src/ui/_common_/common.vue @@ -96,7 +96,7 @@ if ($i) { connection.on('notification', onNotification); //For the favicon notification dot - watch(() => $i?.hasUnreadNotification, (hasAny) => setFavIconDot((defaultStore.state.enableFaviconNotificationDot ? hasAny : false) ?? false)); + watch(() => $i?.hasUnreadNotification && defaultStore.state.enableFaviconNotificationDot, (hasAny) => setFavIconDot(hasAny as boolean)); if ($i.hasUnreadNotification && defaultStore.state.enableFaviconNotificationDot) setFavIconDot(true);