From de80727cfc725a2f072c5d8929ad2b87c1cf49ae Mon Sep 17 00:00:00 2001 From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com> Date: Tue, 2 Apr 2024 23:30:14 +0200 Subject: Moved class to seperate file and fixed some ts warnings --- packages/frontend/src/scripts/favicon-dot.ts | 75 ++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 packages/frontend/src/scripts/favicon-dot.ts (limited to 'packages/frontend/src/scripts') diff --git a/packages/frontend/src/scripts/favicon-dot.ts b/packages/frontend/src/scripts/favicon-dot.ts new file mode 100644 index 0000000000..3a7887bca9 --- /dev/null +++ b/packages/frontend/src/scripts/favicon-dot.ts @@ -0,0 +1,75 @@ +class FavIconDot { + canvas : HTMLCanvasElement; + src : string | null = null; + ctx : CanvasRenderingContext2D | null = null; + favconImage : HTMLImageElement | null = null; + faviconEL : HTMLLinkElement; + hasLoaded : Promise; + + constructor() { + this.canvas = document.createElement('canvas'); + this.faviconEL = document.querySelector('link[rel$=icon]') ?? this._createFaviconElem(); + + this.src = this.faviconEL.getAttribute('href'); + this.ctx = this.canvas.getContext('2d'); + + this.favconImage = document.createElement('img'); + this.hasLoaded = new Promise((resolve, _reject) => { + if (this.favconImage != null) { + this.favconImage.onload = () => { + this.canvas.width = (this.favconImage as HTMLImageElement).width; + this.canvas.height = (this.favconImage as HTMLImageElement).height; + // resolve(); + setTimeout(() => resolve(), 200); + }; + } + }); + this.favconImage.src = this.faviconEL.href; + } + + private _createFaviconElem() { + const newLink = document.createElement('link'); + newLink.rel = 'icon'; + newLink.href = '/favicon.ico'; + document.head.appendChild(newLink); + return newLink; + } + + private _drawIcon() { + if (!this.ctx || !this.favconImage) return; + this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); + this.ctx.drawImage(this.favconImage, 0, 0, this.favconImage.width, this.favconImage.height); + } + + private _drawDot() { + if (!this.ctx || !this.favconImage) return; + this.ctx.beginPath(); + this.ctx.arc(this.favconImage.width - 10, 10, 10, 0, 2 * Math.PI); + this.ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--navIndicator'); + this.ctx.strokeStyle = 'white'; + this.ctx.fill(); + this.ctx.stroke(); + } + + private _setFavicon() { + this.faviconEL.href = this.canvas.toDataURL('image/png'); + } + + 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(); + } +} + +let icon: FavIconDot = new FavIconDot(); + +export function setFavIconDot(visible: boolean) { + if (!icon) { + icon = new FavIconDot(); + } + icon.setVisible(visible); +} -- cgit v1.2.3-freya From 590f7abefdadc25f540d40c6962d193d2a47368e Mon Sep 17 00:00:00 2001 From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com> Date: Thu, 2 May 2024 17:22:30 +0200 Subject: removed use of settimeout --- packages/frontend/src/scripts/favicon-dot.ts | 81 ++++++++++++++++++++-------- 1 file changed, 58 insertions(+), 23 deletions(-) (limited to 'packages/frontend/src/scripts') diff --git a/packages/frontend/src/scripts/favicon-dot.ts b/packages/frontend/src/scripts/favicon-dot.ts index 3a7887bca9..d54991f067 100644 --- a/packages/frontend/src/scripts/favicon-dot.ts +++ b/packages/frontend/src/scripts/favicon-dot.ts @@ -2,29 +2,52 @@ class FavIconDot { canvas : HTMLCanvasElement; src : string | null = null; ctx : CanvasRenderingContext2D | null = null; - favconImage : HTMLImageElement | null = null; - faviconEL : HTMLLinkElement; - hasLoaded : Promise; + faviconImage : HTMLImageElement | null = null; + faviconEL : HTMLLinkElement | undefined; + hasLoaded : Promise | undefined; constructor() { this.canvas = document.createElement('canvas'); - this.faviconEL = document.querySelector('link[rel$=icon]') ?? this._createFaviconElem(); + } + //MUST BE CALLED BEFORE CALLING ANY OTHER FUNCTIONS + public async setup() { + const element : HTMLLinkElement = await this.getOrMakeFaviconElement(); + + this.faviconEL = element; this.src = this.faviconEL.getAttribute('href'); this.ctx = this.canvas.getContext('2d'); - - this.favconImage = document.createElement('img'); - this.hasLoaded = new Promise((resolve, _reject) => { - if (this.favconImage != null) { - this.favconImage.onload = () => { - this.canvas.width = (this.favconImage as HTMLImageElement).width; - this.canvas.height = (this.favconImage as HTMLImageElement).height; - // resolve(); - setTimeout(() => resolve(), 200); + + this.faviconImage = document.createElement('img'); + this.faviconImage.src = this.faviconEL.href; + + this.hasLoaded = new Promise((resolve, reject) => { + (this.faviconImage as HTMLImageElement).onload = () => { + this.canvas.width = (this.faviconImage as HTMLImageElement).width; + this.canvas.height = (this.faviconImage as HTMLImageElement).height; + resolve(); + }; + + (this.faviconImage as HTMLImageElement).onerror = () => { + reject('Failed to create favicon img element'); + }; + }); + } + + private async getOrMakeFaviconElement() : Promise { + return new Promise((resolve, reject) => { + const favicon = document.querySelector('link[rel$=icon]') ?? this._createFaviconElem(); + if (favicon === document.querySelector('link[rel$=icon]')) { + favicon.onload = () => { + resolve(favicon); + }; + + favicon.onerror = () => { + reject('Failed to load favicon'); }; } + resolve(favicon); }); - this.favconImage.src = this.faviconEL.href; } private _createFaviconElem() { @@ -36,15 +59,15 @@ class FavIconDot { } private _drawIcon() { - if (!this.ctx || !this.favconImage) return; + if (!this.ctx || !this.faviconImage) return; this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); - this.ctx.drawImage(this.favconImage, 0, 0, this.favconImage.width, this.favconImage.height); + this.ctx.drawImage(this.faviconImage, 0, 0, this.faviconImage.width, this.faviconImage.height); } private _drawDot() { - if (!this.ctx || !this.favconImage) return; + if (!this.ctx || !this.faviconImage) return; this.ctx.beginPath(); - this.ctx.arc(this.favconImage.width - 10, 10, 10, 0, 2 * Math.PI); + this.ctx.arc(this.faviconImage.width - 10, 10, 10, 0, 2 * Math.PI); this.ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--navIndicator'); this.ctx.strokeStyle = 'white'; this.ctx.fill(); @@ -52,7 +75,7 @@ class FavIconDot { } private _setFavicon() { - this.faviconEL.href = this.canvas.toDataURL('image/png'); + if (this.faviconEL) this.faviconEL.href = this.canvas.toDataURL('image/png'); } async setVisible(isVisible : boolean) { @@ -65,11 +88,23 @@ class FavIconDot { } } -let icon: FavIconDot = new FavIconDot(); +let icon: FavIconDot | undefined = undefined; export function setFavIconDot(visible: boolean) { - if (!icon) { - icon = new FavIconDot(); + const setIconVisibility = async () => { + if (!icon) { + icon = new FavIconDot(); + await icon.setup(); + } + + (icon as FavIconDot).setVisible(visible); + }; + + // If document is already loaded, set visibility immediately + if (document.readyState === 'complete') { + setIconVisibility(); + } else { + // Otherwise, set visibility when window loads + window.onload = setIconVisibility; } - icon.setVisible(visible); } -- cgit v1.2.3-freya From 42c29697070f40c994e8661f8b88ea652b46f162 Mon Sep 17 00:00:00 2001 From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com> Date: Thu, 2 May 2024 17:38:16 +0200 Subject: fixes --- packages/frontend/src/scripts/favicon-dot.ts | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) (limited to 'packages/frontend/src/scripts') diff --git a/packages/frontend/src/scripts/favicon-dot.ts b/packages/frontend/src/scripts/favicon-dot.ts index d54991f067..2e05171772 100644 --- a/packages/frontend/src/scripts/favicon-dot.ts +++ b/packages/frontend/src/scripts/favicon-dot.ts @@ -19,7 +19,6 @@ class FavIconDot { this.ctx = this.canvas.getContext('2d'); this.faviconImage = document.createElement('img'); - this.faviconImage.src = this.faviconEL.href; this.hasLoaded = new Promise((resolve, reject) => { (this.faviconImage as HTMLImageElement).onload = () => { @@ -32,20 +31,20 @@ class FavIconDot { reject('Failed to create favicon img element'); }; }); + + this.faviconImage.src = this.faviconEL.href; } private async getOrMakeFaviconElement() : Promise { return new Promise((resolve, reject) => { const favicon = document.querySelector('link[rel$=icon]') ?? this._createFaviconElem(); - if (favicon === document.querySelector('link[rel$=icon]')) { - favicon.onload = () => { - resolve(favicon); - }; + favicon.onload = () => { + resolve(favicon); + }; - favicon.onerror = () => { - reject('Failed to load favicon'); - }; - } + favicon.onerror = () => { + reject('Failed to load favicon'); + }; resolve(favicon); }); } -- cgit v1.2.3-freya From 47d1477ac493ac88d5b97b55de39e86251ab1735 Mon Sep 17 00:00:00 2001 From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com> Date: Fri, 3 May 2024 11:27:41 +0200 Subject: did thread fixes --- packages/frontend/src/scripts/favicon-dot.ts | 16 +++++++--------- packages/frontend/src/ui/_common_/common.vue | 2 +- 2 files changed, 8 insertions(+), 10 deletions(-) (limited to 'packages/frontend/src/scripts') 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); -- cgit v1.2.3-freya From 975b6b3dd0f34731ad442480fc39e9a741ad76dc Mon Sep 17 00:00:00 2001 From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com> Date: Fri, 3 May 2024 12:15:47 +0200 Subject: fixed querySelector that would grab favicon --- packages/frontend/src/scripts/favicon-dot.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/frontend/src/scripts') diff --git a/packages/frontend/src/scripts/favicon-dot.ts b/packages/frontend/src/scripts/favicon-dot.ts index c40a08f427..0229092ca7 100644 --- a/packages/frontend/src/scripts/favicon-dot.ts +++ b/packages/frontend/src/scripts/favicon-dot.ts @@ -36,7 +36,7 @@ class FavIconDot { private async getOrMakeFaviconElement() : Promise { return new Promise((resolve, reject) => { - const favicon = document.querySelector('link[rel$=icon]') ?? this._createFaviconElem(); + const favicon = (document.querySelector('link[rel=icon]') ?? this._createFaviconElem()) as HTMLLinkElement; favicon.addEventListener('load', () => { resolve(favicon); }); -- cgit v1.2.3-freya From 0117f1896c92843b7cb7525a454ba9d3d6c8cf03 Mon Sep 17 00:00:00 2001 From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com> Date: Fri, 3 May 2024 12:20:58 +0200 Subject: potential firefox fix --- packages/frontend/src/scripts/favicon-dot.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'packages/frontend/src/scripts') diff --git a/packages/frontend/src/scripts/favicon-dot.ts b/packages/frontend/src/scripts/favicon-dot.ts index 0229092ca7..143ad50c9a 100644 --- a/packages/frontend/src/scripts/favicon-dot.ts +++ b/packages/frontend/src/scripts/favicon-dot.ts @@ -50,8 +50,10 @@ class FavIconDot { private _createFaviconElem() { const newLink = document.createElement('link'); - newLink.rel = 'icon'; - newLink.href = '/favicon.ico'; + newLink.setAttribute('rel', 'icon'); + newLink.setAttribute('href', '/favicon.ico'); + newLink.setAttribute('type', 'image/x-icon'); + document.head.appendChild(newLink); return newLink; } -- cgit v1.2.3-freya From 342eda431f6e7b19742c909fced38fdef772ccea Mon Sep 17 00:00:00 2001 From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com> Date: Mon, 6 May 2024 13:54:43 +0200 Subject: fixing a buch of comments --- packages/frontend/src/scripts/favicon-dot.ts | 40 +++++++++++++++------------- packages/frontend/src/ui/_common_/common.vue | 2 +- 2 files changed, 22 insertions(+), 20 deletions(-) (limited to 'packages/frontend/src/scripts') diff --git a/packages/frontend/src/scripts/favicon-dot.ts b/packages/frontend/src/scripts/favicon-dot.ts index 143ad50c9a..643ee1b76b 100644 --- a/packages/frontend/src/scripts/favicon-dot.ts +++ b/packages/frontend/src/scripts/favicon-dot.ts @@ -1,18 +1,20 @@ class FavIconDot { - canvas : HTMLCanvasElement; - src : string | null = null; - ctx : CanvasRenderingContext2D | null = null; - faviconImage : HTMLImageElement | null = null; - faviconEL : HTMLLinkElement | undefined; - hasLoaded : Promise | undefined; + canvas: HTMLCanvasElement; + src: string | null = null; + ctx: CanvasRenderingContext2D | null = null; + faviconImage: HTMLImageElement | null = null; + faviconEL: HTMLLinkElement | undefined; + hasLoaded: Promise | undefined; constructor() { this.canvas = document.createElement('canvas'); } - //MUST BE CALLED BEFORE CALLING ANY OTHER FUNCTIONS + /** + * Must be called before calling any other functions + */ public async setup() { - const element : HTMLLinkElement = await this.getOrMakeFaviconElement(); + const element: HTMLLinkElement = await this.getOrMakeFaviconElement(); this.faviconEL = element; this.src = this.faviconEL.getAttribute('href'); @@ -34,9 +36,9 @@ class FavIconDot { this.faviconImage.src = this.faviconEL.href; } - private async getOrMakeFaviconElement() : Promise { + private async getOrMakeFaviconElement(): Promise { return new Promise((resolve, reject) => { - const favicon = (document.querySelector('link[rel=icon]') ?? this._createFaviconElem()) as HTMLLinkElement; + const favicon = (document.querySelector('link[rel=icon]') ?? this.createFaviconElem()) as HTMLLinkElement; favicon.addEventListener('load', () => { resolve(favicon); }); @@ -48,7 +50,7 @@ class FavIconDot { }); } - private _createFaviconElem() { + private createFaviconElem() { const newLink = document.createElement('link'); newLink.setAttribute('rel', 'icon'); newLink.setAttribute('href', '/favicon.ico'); @@ -58,13 +60,13 @@ class FavIconDot { return newLink; } - private _drawIcon() { + private drawIcon() { if (!this.ctx || !this.faviconImage) return; this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.drawImage(this.faviconImage, 0, 0, this.faviconImage.width, this.faviconImage.height); } - private _drawDot() { + private drawDot() { if (!this.ctx || !this.faviconImage) return; this.ctx.beginPath(); this.ctx.arc(this.faviconImage.width - 10, 10, 10, 0, 2 * Math.PI); @@ -74,16 +76,16 @@ class FavIconDot { this.ctx.stroke(); } - private _setFavicon() { + private setFavicon() { if (this.faviconEL) this.faviconEL.href = this.canvas.toDataURL('image/png'); } - async setVisible(isVisible : boolean) { - //Wait for it to have loaded the icon + async setVisible(isVisible: boolean) { + // Wait for it to have loaded the icon await this.hasLoaded; - this._drawIcon(); - if (isVisible) this._drawDot(); - this._setFavicon(); + this.drawIcon(); + if (isVisible) this.drawDot(); + this.setFavicon(); } } diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue index bec8bb6c7c..b1fe8e54fc 100644 --- a/packages/frontend/src/ui/_common_/common.vue +++ b/packages/frontend/src/ui/_common_/common.vue @@ -95,7 +95,7 @@ if ($i) { const connection = useStream().useChannel('main', null, 'UI'); connection.on('notification', onNotification); - //For the favicon notification dot + // For the favicon notification dot watch(() => $i?.hasUnreadNotification && defaultStore.state.enableFaviconNotificationDot, (hasAny) => setFavIconDot(hasAny as boolean)); if ($i.hasUnreadNotification && defaultStore.state.enableFaviconNotificationDot) setFavIconDot(true); -- cgit v1.2.3-freya From a058c855fc27c17d84dfb1655191cabdcf844c7a Mon Sep 17 00:00:00 2001 From: KevinWh0 <45321184+KevinWh0@users.noreply.github.com> Date: Mon, 6 May 2024 13:59:42 +0200 Subject: changed grabbing theme color for dot to match the other things in this project --- packages/frontend/src/scripts/favicon-dot.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'packages/frontend/src/scripts') diff --git a/packages/frontend/src/scripts/favicon-dot.ts b/packages/frontend/src/scripts/favicon-dot.ts index 643ee1b76b..e338f55f72 100644 --- a/packages/frontend/src/scripts/favicon-dot.ts +++ b/packages/frontend/src/scripts/favicon-dot.ts @@ -1,3 +1,5 @@ +import tinycolor from 'tinycolor2'; + class FavIconDot { canvas: HTMLCanvasElement; src: string | null = null; @@ -70,7 +72,8 @@ class FavIconDot { if (!this.ctx || !this.faviconImage) return; this.ctx.beginPath(); this.ctx.arc(this.faviconImage.width - 10, 10, 10, 0, 2 * Math.PI); - this.ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--navIndicator'); + const computedStyle = getComputedStyle(document.documentElement); + this.ctx.fillStyle = tinycolor(computedStyle.getPropertyValue('--navIndicator')).toHexString(); this.ctx.strokeStyle = 'white'; this.ctx.fill(); this.ctx.stroke(); -- cgit v1.2.3-freya