amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed some of the issues with it

Browse Source
This commit is contained in:
KevinWh0 2024-03-19 22:00:28 +01:00
parent ccf5659ac3
commit 459e684117
1 changed files with 19 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/frontend/src/ui/_common_/common.vue
View File

@ -75,27 +75,28 @@ class NotificationFavIconDot {
src : string | null = null; src : string | null = null;
ctx : CanvasRenderingContext2D | null = null; ctx : CanvasRenderingContext2D | null = null;
favconImage : HTMLImageElement | null = null; favconImage : HTMLImageElement | null = null;
loaded = false; faviconEL : HTMLLinkElement;
hasLoaded : Promise;
constructor() { constructor() {
this.canvas = document.createElement('canvas'); this.canvas = document.createElement('canvas');
this.faviconEL = document.querySelector<HTMLLinkElement>('link[rel$=icon]') ?? this._createFaviconElem();
this.src = this.faviconEL.getAttribute('href'); this.src = this.faviconEL.getAttribute('href');
this.ctx = this.canvas.getContext('2d'); this.ctx = this.canvas.getContext('2d');
this.favconImage = document.createElement('img'); this.favconImage = document.createElement('img');
this.favconImage.src = this.faviconEL.href; this.favconImage.src = this.faviconEL.href;
this.hasLoaded = new Promise((resolve, reject) => {
this.favconImage.onload = () => { this.favconImage.onload = () => {
if (!this.favconImage) return;
this.canvas.width = this.favconImage.width; this.canvas.width = this.favconImage.width;
this.canvas.height = this.favconImage.height; this.canvas.height = this.favconImage.height;
this.loaded = true;
};
}
faviconEL = document.querySelector<HTMLLinkElement>('link[rel$=icon]') ?? this._createFaviconElem(); // resolve();
setTimeout(() => resolve(), 500);
};
});
}
private _createFaviconElem() { private _createFaviconElem() {
const newLink = document.createElement('link'); const newLink = document.createElement('link');
@ -107,6 +108,7 @@ class NotificationFavIconDot {
private _drawIcon() { private _drawIcon() {
if (!this.ctx || !this.favconImage) return; 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); this.ctx.drawImage(this.favconImage, 0, 0, this.favconImage.width, this.favconImage.height);
} }
@ -114,24 +116,23 @@ class NotificationFavIconDot {
if (!this.ctx || !this.favconImage) return; if (!this.ctx || !this.favconImage) return;
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.arc(this.favconImage.width - 10, 10, 10, 0, 2 * Math.PI); this.ctx.arc(this.favconImage.width - 10, 10, 10, 0, 2 * Math.PI);
this.ctx.fillStyle = 'red'; this.ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--navIndicator');
this.ctx.strokeStyle = this.ctx.fillStyle; this.ctx.strokeStyle = 'white';
this.ctx.fill(); this.ctx.fill();
this.ctx.stroke(); this.ctx.stroke();
} }
private _drawFavicon() { private _setFavicon() {
this.faviconEL.href = this.canvas.toDataURL('image/png'); this.faviconEL.href = this.canvas.toDataURL('image/png');
} }
async setVisible(isVisible : boolean) { async setVisible(isVisible : boolean) {
//Wait for it to have loaded the icon //Wait for it to have loaded the icon
const waiter = (done) => (this.loaded ? done() : setTimeout(() => waiter(done), 500)); await this.hasLoaded;
await new Promise(waiter); console.log(this.hasLoaded);
this.ctx?.clearRect(0, 0, this.canvas.width, this.canvas.height);
this._drawIcon(); this._drawIcon();
if (isVisible) this._drawDot(); if (isVisible) this._drawDot();
this._drawFavicon(); this._setFavicon();
} }
} }