heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

fixing a buch of comments

Browse source
This commit is contained in:
KevinWh0 2024-05-06 13:54:43 +02:00
parent 0117f1896c
commit 342eda431f
2 changed files with 22 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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();
} }
} }

2
packages/frontend/src/ui/_common_/common.vue
View file

@ -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);