CPATRD/3cx_tapi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Change favicon color depending on status

Browse Source
This commit is contained in:
Daniel Triendl
2026-03-19 13:38:27 +01:00
parent c16c07ea42
commit a02ce50cf3
2 changed files with 32 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/index.js
View File

@@ -22,3 +22,5 @@ waitForKeyElements('.call-history-list call', (element) => { callHistory.showCal
const status = new Status() const status = new Status()
// eslint-disable-next-line no-undef // eslint-disable-next-line no-undef
waitForKeyElements('wc-account-menu', (element) => { status.showStatus(element) }, false) waitForKeyElements('wc-account-menu', (element) => { status.showStatus(element) }, false)
waitForKeyElements('wc-account-menu i.status-indicator', (element) => { status.watchStatus(element) }, false)

30
client/src/status.ts
View File

@@ -157,4 +157,34 @@ export class Status {
this._currentStatus = undefined; this._currentStatus = undefined;
} }
} }
public watchStatus(element: HTMLElement) {
console.log('updateFavicon watching', element);
const attrObserver = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === 'class') {
this.updateStatus(element);
}
});
});
attrObserver.observe(element, { attributes: true });
this.updateStatus(element);
}
private updateStatus(element: HTMLElement) {
console.log('Status changed', element.classList);
var color = window.getComputedStyle(element).getPropertyValue("background-color");
console.log('Background color:', color);
this.setFaviconColor(color);
}
private setFaviconColor(color: string) {
var link = document.querySelector("link[rel~='icon']") as HTMLLinkElement;
if (!link) {
link = document.createElement('link');
link.rel = 'icon';
document.head.appendChild(link);
}
link.href = "data:image/svg+xml,%3Csvg width='32px' height='32px' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpolyline points='9,0 20,0 32,16 20,32 9,32, 20,16' fill='" + encodeURIComponent(color) + "' id='MyLine' /%3E%3C/svg%3E";
}
} }