graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-22 17:43:09 +02:00
Code Issues Projects Releases Packages 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;
ctx : CanvasRenderingContext2D | null = null;
favconImage : HTMLImageElement | null = null;
loaded = false;
faviconEL : HTMLLinkElement;
hasLoaded : Promise;
constructor() {
this.canvas = document.createElement('canvas');
this.faviconEL = document.querySelector<HTMLLinkElement>('link[rel$=icon]') ?? this._createFaviconElem();
this.src = this.faviconEL.getAttribute('href');
this.ctx = this.canvas.getContext('2d');
this.favconImage = document.createElement('img');
this.favconImage.src = this.faviconEL.href;
this.hasLoaded = new Promise((resolve, reject) => {
this.favconImage.onload = () => {
if (!this.favconImage) return;
this.canvas.width = this.favconImage.width;
this.canvas.height = this.favconImage.height;
this.loaded = true;
};
}
faviconEL = document.querySelector<HTMLLinkElement>('link[rel$=icon]') ?? this._createFaviconElem();
// resolve();
setTimeout(() => resolve(), 500);
};
});
}
private _createFaviconElem() {
const newLink = document.createElement('link');
@ -107,6 +108,7 @@ class NotificationFavIconDot {
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);
}
@ -114,24 +116,23 @@ class NotificationFavIconDot {
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 = 'red';
this.ctx.strokeStyle = this.ctx.fillStyle;
this.ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--navIndicator');
this.ctx.strokeStyle = 'white';
this.ctx.fill();
this.ctx.stroke();
}
private _drawFavicon() {
private _setFavicon() {
this.faviconEL.href = this.canvas.toDataURL('image/png');
}
async setVisible(isVisible : boolean) {
//Wait for it to have loaded the icon
const waiter = (done) => (this.loaded ? done() : setTimeout(() => waiter(done), 500));
await new Promise(waiter);
this.ctx?.clearRect(0, 0, this.canvas.width, this.canvas.height);
await this.hasLoaded;
console.log(this.hasLoaded);
this._drawIcon();
if (isVisible) this._drawDot();
this._drawFavicon();
this._setFavicon();
}
}