Change favicon color depending on status
This commit is contained in:
@@ -22,3 +22,5 @@ waitForKeyElements('.call-history-list call', (element) => { callHistory.showCal
|
||||
const status = new Status()
|
||||
// eslint-disable-next-line no-undef
|
||||
waitForKeyElements('wc-account-menu', (element) => { status.showStatus(element) }, false)
|
||||
|
||||
waitForKeyElements('wc-account-menu i.status-indicator', (element) => { status.watchStatus(element) }, false)
|
||||
|
||||
@@ -157,4 +157,34 @@ export class Status {
|
||||
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";
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user