76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
|
class FavIconDot {
|
||
|
|
canvas : HTMLCanvasElement;
|
||
|
|
src : string | null = null;
|
||
|
|
ctx : CanvasRenderingContext2D | null = null;
|
||
|
|
favconImage : HTMLImageElement | null = null;
|
||
|
|
faviconEL : HTMLLinkElement;
|
||
|
|
hasLoaded : Promise<void>;
|
||
|
|
|
||
|
|
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.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);
|
||
|
|
}
|