136 lines
4.0 KiB
TypeScript
136 lines
4.0 KiB
TypeScript
import { selectTree } from "../helpers";
|
|
|
|
export const AutoSettingsMixin = (SuperClass) => {
|
|
return class AutoSettingsMixinClass extends SuperClass {
|
|
_faviconTemplateSubscription;
|
|
_titleTemplateSubscription;
|
|
__currentTitle = undefined;
|
|
|
|
constructor() {
|
|
super();
|
|
|
|
this._auto_settings_setup();
|
|
this.addEventListener("browser-mod-config-update", () =>
|
|
this._auto_settings_setup()
|
|
);
|
|
|
|
window.addEventListener("location-changed", () => {
|
|
this._updateTitle();
|
|
setTimeout(() => this._updateTitle(), 500);
|
|
setTimeout(() => this._updateTitle(), 1000);
|
|
setTimeout(() => this._updateTitle(), 5000);
|
|
});
|
|
}
|
|
|
|
async _auto_settings_setup() {
|
|
await this.connectionPromise;
|
|
|
|
const settings = this.settings;
|
|
|
|
// Sidebar panel order and hiding
|
|
if (settings.sidebarPanelOrder) {
|
|
localStorage.setItem("sidebarPanelOrder", settings.sidebarPanelOrder);
|
|
}
|
|
if (settings.sidebarHiddenPanels) {
|
|
localStorage.setItem(
|
|
"sidebarHiddenPanels",
|
|
settings.sidebarHiddenPanels
|
|
);
|
|
}
|
|
|
|
// Default panel
|
|
if (settings.defaultPanel) {
|
|
localStorage.setItem("defaultPanel", settings.defaultPanel);
|
|
}
|
|
|
|
// Hide sidebar
|
|
if (settings.hideSidebar === true) {
|
|
selectTree(
|
|
document.body,
|
|
"home-assistant$home-assistant-main$app-drawer-layout"
|
|
).then((el) => el?.style?.setProperty("--app-drawer-width", "0px"));
|
|
selectTree(
|
|
document.body,
|
|
"home-assistant$home-assistant-main$app-drawer-layout app-drawer"
|
|
).then((el) => el?.remove?.());
|
|
}
|
|
|
|
// Hide header
|
|
if (settings.hideHeader === true) {
|
|
customElements.whenDefined("app-header-layout").then(() => {
|
|
const appHeader = customElements.get("app-header").prototype;
|
|
const _attached = appHeader.attached;
|
|
appHeader.attached = function () {
|
|
_attached.bind(this)();
|
|
this.style.setProperty("display", "none");
|
|
};
|
|
});
|
|
}
|
|
|
|
// Favicon template
|
|
if (settings.faviconTemplate !== undefined) {
|
|
(async () => {
|
|
if (this._faviconTemplateSubscription) {
|
|
this._faviconTemplateSubscription();
|
|
}
|
|
this._faviconTemplateSubscription = undefined;
|
|
this._faviconTemplateSubscription =
|
|
await this.connection.subscribeMessage(this._updateFavicon, {
|
|
type: "render_template",
|
|
template: settings.faviconTemplate,
|
|
variables: {},
|
|
});
|
|
})();
|
|
}
|
|
|
|
// Title template
|
|
if (settings.titleTemplate !== undefined) {
|
|
(async () => {
|
|
if (this._titleTemplateSubscription) {
|
|
this._titleTemplateSubscription();
|
|
}
|
|
this._titleTemplateSubscription = undefined;
|
|
this._titleTemplateSubscription =
|
|
await this.connection.subscribeMessage(
|
|
this._updateTitle.bind(this),
|
|
{
|
|
type: "render_template",
|
|
template: settings.titleTemplate,
|
|
variables: {},
|
|
}
|
|
);
|
|
})();
|
|
}
|
|
}
|
|
|
|
get _currentFavicon() {
|
|
const link: any = document.head.querySelector("link[rel~='icon']");
|
|
return link?.href;
|
|
}
|
|
|
|
_updateFavicon({ result }) {
|
|
// TEMP: Template for testing
|
|
/*
|
|
{% if is_state("light.bed_light", "on") %}
|
|
/local/workspace/test/icons/green.png
|
|
{% else %}
|
|
/local/workspace/test/icons/red.png
|
|
{% endif %}
|
|
*/
|
|
const link: any = document.head.querySelector("link[rel~='icon']");
|
|
link.href = result;
|
|
window.browser_mod.fireEvent("browser-mod-favicon-update");
|
|
}
|
|
|
|
get _currentTitle() {
|
|
return this.__currentTitle;
|
|
}
|
|
|
|
_updateTitle(data = undefined) {
|
|
if (data) this.__currentTitle = data.result;
|
|
if (this.__currentTitle) document.title = this.__currentTitle;
|
|
window.browser_mod.fireEvent("browser-mod-favicon-update");
|
|
}
|
|
};
|
|
};
|