]>
Commit | Line | Data |
---|---|---|
f67539c2 TL |
1 | import { DOCUMENT } from '@angular/common'; |
2 | import { Inject, Injectable, OnDestroy } from '@angular/core'; | |
3 | ||
4 | import { Subscription } from 'rxjs'; | |
5 | ||
b3b6e05e TL |
6 | import { CssHelper } from '~/app/shared/classes/css-helper'; |
7 | import { HealthColor } from '~/app/shared/enum/health-color.enum'; | |
f67539c2 TL |
8 | import { SummaryService } from './summary.service'; |
9 | ||
10 | @Injectable() | |
11 | export class FaviconService implements OnDestroy { | |
12 | sub: Subscription; | |
13 | oldStatus: string; | |
14 | url: string; | |
15 | ||
16 | constructor( | |
17 | @Inject(DOCUMENT) private document: HTMLDocument, | |
b3b6e05e TL |
18 | private summaryService: SummaryService, |
19 | private cssHelper: CssHelper | |
f67539c2 TL |
20 | ) {} |
21 | ||
22 | init() { | |
23 | this.url = this.document.getElementById('cdFavicon')?.getAttribute('href'); | |
24 | ||
25 | this.sub = this.summaryService.subscribe((summary) => { | |
26 | this.changeIcon(summary.health_status); | |
27 | }); | |
28 | } | |
29 | ||
30 | changeIcon(status?: string) { | |
31 | if (status === this.oldStatus) { | |
32 | return; | |
33 | } | |
34 | ||
35 | this.oldStatus = status; | |
36 | ||
37 | const favicon = this.document.getElementById('cdFavicon'); | |
38 | const faviconSize = 16; | |
39 | const radius = faviconSize / 4; | |
40 | ||
41 | const canvas = this.document.createElement('canvas'); | |
42 | canvas.width = faviconSize; | |
43 | canvas.height = faviconSize; | |
44 | ||
45 | const context = canvas.getContext('2d'); | |
46 | const img = this.document.createElement('img'); | |
47 | img.src = this.url; | |
48 | ||
49 | img.onload = () => { | |
50 | // Draw Original Favicon as Background | |
51 | context.drawImage(img, 0, 0, faviconSize, faviconSize); | |
52 | ||
b3b6e05e | 53 | if (Object.keys(HealthColor).includes(status as HealthColor)) { |
f67539c2 TL |
54 | // Cut notification circle area |
55 | context.save(); | |
56 | context.globalCompositeOperation = 'destination-out'; | |
57 | context.beginPath(); | |
58 | context.arc(canvas.width - radius, radius, radius + 2, 0, 2 * Math.PI); | |
59 | context.fill(); | |
60 | context.restore(); | |
61 | ||
62 | // Draw Notification Circle | |
63 | context.beginPath(); | |
64 | context.arc(canvas.width - radius, radius, radius, 0, 2 * Math.PI); | |
65 | ||
b3b6e05e | 66 | context.fillStyle = this.cssHelper.propertyValue(HealthColor[status]); |
f67539c2 TL |
67 | context.fill(); |
68 | } | |
69 | ||
70 | // Replace favicon | |
71 | favicon.setAttribute('href', canvas.toDataURL('image/png')); | |
72 | }; | |
73 | } | |
74 | ||
75 | ngOnDestroy() { | |
76 | this.changeIcon(); | |
77 | this.sub?.unsubscribe(); | |
78 | } | |
79 | } |