HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

removed use of settimeout

Browse source
This commit is contained in:
KevinWh0 2024-05-02 17:22:30 +02:00
parent 7730472c77
commit 590f7abefd
1 changed files with 58 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
packages/frontend/src/scripts/favicon-dot.ts
View file

@ -2,29 +2,52 @@ class FavIconDot {
canvas : HTMLCanvasElement; canvas : HTMLCanvasElement;
src : string | null = null; src : string | null = null;
ctx : CanvasRenderingContext2D | null = null; ctx : CanvasRenderingContext2D | null = null;
favconImage : HTMLImageElement | null = null; faviconImage : HTMLImageElement | null = null;
faviconEL : HTMLLinkElement; faviconEL : HTMLLinkElement | undefined;
hasLoaded : Promise<void>; hasLoaded : Promise<void> | undefined;
constructor() { constructor() {
this.canvas = document.createElement('canvas'); this.canvas = document.createElement('canvas');
this.faviconEL = document.querySelector<HTMLLinkElement>('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.src = this.faviconEL.getAttribute('href');
this.ctx = this.canvas.getContext('2d'); this.ctx = this.canvas.getContext('2d');
this.favconImage = document.createElement('img'); this.faviconImage = document.createElement('img');
this.hasLoaded = new Promise((resolve, _reject) => { this.faviconImage.src = this.faviconEL.href;
if (this.favconImage != null) {
this.favconImage.onload = () => { this.hasLoaded = new Promise((resolve, reject) => {
this.canvas.width = (this.favconImage as HTMLImageElement).width; (this.faviconImage as HTMLImageElement).onload = () => {
this.canvas.height = (this.favconImage as HTMLImageElement).height; this.canvas.width = (this.faviconImage as HTMLImageElement).width;
// resolve(); this.canvas.height = (this.faviconImage as HTMLImageElement).height;
setTimeout(() => resolve(), 200); resolve();
};
(this.faviconImage as HTMLImageElement).onerror = () => {
reject('Failed to create favicon img element');
};
});
}
private async getOrMakeFaviconElement() : Promise<HTMLLinkElement> {
return new Promise((resolve, reject) => {
const favicon = document.querySelector<HTMLLinkElement>('link[rel$=icon]') ?? this._createFaviconElem();
if (favicon === document.querySelector<HTMLLinkElement>('link[rel$=icon]')) {
favicon.onload = () => {
resolve(favicon);
};
favicon.onerror = () => {
reject('Failed to load favicon');
}; };
} }
resolve(favicon);
}); });
this.favconImage.src = this.faviconEL.href;
} }
private _createFaviconElem() { private _createFaviconElem() {
@ -36,15 +59,15 @@ class FavIconDot {
} }
private _drawIcon() { 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.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() { private _drawDot() {
if (!this.ctx || !this.favconImage) return; if (!this.ctx || !this.faviconImage) return;
this.ctx.beginPath(); 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.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--navIndicator');
this.ctx.strokeStyle = 'white'; this.ctx.strokeStyle = 'white';
this.ctx.fill(); this.ctx.fill();
@ -52,7 +75,7 @@ class FavIconDot {
} }
private _setFavicon() { 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) { 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) { export function setFavIconDot(visible: boolean) {
const setIconVisibility = async () => {
if (!icon) { if (!icon) {
icon = new FavIconDot(); 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);
} }