fixing a buch of comments
This commit is contained in:
parent
0117f1896c
commit
342eda431f
|
@ -1,18 +1,20 @@
|
||||||
class FavIconDot {
|
class FavIconDot {
|
||||||
canvas : HTMLCanvasElement;
|
canvas: HTMLCanvasElement;
|
||||||
src : string | null = null;
|
src: string | null = null;
|
||||||
ctx : CanvasRenderingContext2D | null = null;
|
ctx: CanvasRenderingContext2D | null = null;
|
||||||
faviconImage : HTMLImageElement | null = null;
|
faviconImage: HTMLImageElement | null = null;
|
||||||
faviconEL : HTMLLinkElement | undefined;
|
faviconEL: HTMLLinkElement | undefined;
|
||||||
hasLoaded : Promise<void> | undefined;
|
hasLoaded: Promise<void> | undefined;
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this.canvas = document.createElement('canvas');
|
this.canvas = document.createElement('canvas');
|
||||||
}
|
}
|
||||||
|
|
||||||
//MUST BE CALLED BEFORE CALLING ANY OTHER FUNCTIONS
|
/**
|
||||||
|
* Must be called before calling any other functions
|
||||||
|
*/
|
||||||
public async setup() {
|
public async setup() {
|
||||||
const element : HTMLLinkElement = await this.getOrMakeFaviconElement();
|
const element: HTMLLinkElement = await this.getOrMakeFaviconElement();
|
||||||
|
|
||||||
this.faviconEL = element;
|
this.faviconEL = element;
|
||||||
this.src = this.faviconEL.getAttribute('href');
|
this.src = this.faviconEL.getAttribute('href');
|
||||||
|
@ -34,9 +36,9 @@ class FavIconDot {
|
||||||
this.faviconImage.src = this.faviconEL.href;
|
this.faviconImage.src = this.faviconEL.href;
|
||||||
}
|
}
|
||||||
|
|
||||||
private async getOrMakeFaviconElement() : Promise<HTMLLinkElement> {
|
private async getOrMakeFaviconElement(): Promise<HTMLLinkElement> {
|
||||||
return new Promise((resolve, reject) => {
|
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', () => {
|
favicon.addEventListener('load', () => {
|
||||||
resolve(favicon);
|
resolve(favicon);
|
||||||
});
|
});
|
||||||
|
@ -48,7 +50,7 @@ class FavIconDot {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private _createFaviconElem() {
|
private createFaviconElem() {
|
||||||
const newLink = document.createElement('link');
|
const newLink = document.createElement('link');
|
||||||
newLink.setAttribute('rel', 'icon');
|
newLink.setAttribute('rel', 'icon');
|
||||||
newLink.setAttribute('href', '/favicon.ico');
|
newLink.setAttribute('href', '/favicon.ico');
|
||||||
|
@ -58,13 +60,13 @@ class FavIconDot {
|
||||||
return newLink;
|
return newLink;
|
||||||
}
|
}
|
||||||
|
|
||||||
private _drawIcon() {
|
private drawIcon() {
|
||||||
if (!this.ctx || !this.faviconImage) 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.faviconImage, 0, 0, this.faviconImage.width, this.faviconImage.height);
|
this.ctx.drawImage(this.faviconImage, 0, 0, this.faviconImage.width, this.faviconImage.height);
|
||||||
}
|
}
|
||||||
|
|
||||||
private _drawDot() {
|
private drawDot() {
|
||||||
if (!this.ctx || !this.faviconImage) return;
|
if (!this.ctx || !this.faviconImage) return;
|
||||||
this.ctx.beginPath();
|
this.ctx.beginPath();
|
||||||
this.ctx.arc(this.faviconImage.width - 10, 10, 10, 0, 2 * Math.PI);
|
this.ctx.arc(this.faviconImage.width - 10, 10, 10, 0, 2 * Math.PI);
|
||||||
|
@ -74,16 +76,16 @@ class FavIconDot {
|
||||||
this.ctx.stroke();
|
this.ctx.stroke();
|
||||||
}
|
}
|
||||||
|
|
||||||
private _setFavicon() {
|
private setFavicon() {
|
||||||
if (this.faviconEL) 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) {
|
||||||
//Wait for it to have loaded the icon
|
// Wait for it to have loaded the icon
|
||||||
await this.hasLoaded;
|
await this.hasLoaded;
|
||||||
this._drawIcon();
|
this.drawIcon();
|
||||||
if (isVisible) this._drawDot();
|
if (isVisible) this.drawDot();
|
||||||
this._setFavicon();
|
this.setFavicon();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -95,7 +95,7 @@ if ($i) {
|
||||||
const connection = useStream().useChannel('main', null, 'UI');
|
const connection = useStream().useChannel('main', null, 'UI');
|
||||||
connection.on('notification', onNotification);
|
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));
|
watch(() => $i?.hasUnreadNotification && defaultStore.state.enableFaviconNotificationDot, (hasAny) => setFavIconDot(hasAny as boolean));
|
||||||
|
|
||||||
if ($i.hasUnreadNotification && defaultStore.state.enableFaviconNotificationDot) setFavIconDot(true);
|
if ($i.hasUnreadNotification && defaultStore.state.enableFaviconNotificationDot) setFavIconDot(true);
|
||||||
|
|
Loading…
Reference in New Issue