thomas/hass-browser_mod
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Favicon templates

Browse Source
This commit is contained in:
Thomas Lovén 2022-07-22 21:40:59 +00:00
parent 5f2e7d7bfa
commit b82da219ce
8 changed files with 447 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
custom_components/browser_mod/browser_mod.js
View File

@ -1864,20 +1864,24 @@ const AutoSettingsMixin = (SuperClass) => {
constructor() {
super();
this._auto_settings_setup();
this.addEventListener("browser-mod-config-update", () => this._auto_settings_setup());
}
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);
}
// 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;
@ -1888,6 +1892,40 @@ const AutoSettingsMixin = (SuperClass) => {
};
});
}
// 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) ;
}
get _currentFavicon() {
const link = document.head.querySelector("link[rel~='icon']");
return link === null || link === void 0 ? void 0 : 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 = document.head.querySelector("link[rel~='icon']");
link.href = result;
window.browser_mod.fireEvent("browser-mod-favicon-update");
}
};
};
@ -1931,9 +1969,9 @@ const AutoSettingsMixin = (SuperClass) => {
x Kiosk mode
- Default panel?
- Screensaver?
- Tweaks
- Favicon templates
x Favicon templates
- Title templates
- Tweaks
- Quickbar tweaks (ctrl+enter)?
- Video player?
- Media_seek

255
custom_components/browser_mod/browser_mod_panel.js
View File

@ -67,7 +67,7 @@ const i=(i,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e,
// Loads in ha-config-dashboard which is used to copy styling
// Also provides ha-settings-row
const loadDevTools = async () => {
const loadConfigDashboard = async () => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
await customElements.whenDefined("partial-panel-resolver");
const ppResolver = document.createElement("partial-panel-resolver");
@ -83,8 +83,25 @@ const loadDevTools = async () => {
await ((_g = (_f = (_e = (_d = configRouter === null || configRouter === void 0 ? void 0 : configRouter.routerOptions) === null || _d === void 0 ? void 0 : _d.routes) === null || _e === void 0 ? void 0 : _e.dashboard) === null || _f === void 0 ? void 0 : _f.load) === null || _g === void 0 ? void 0 : _g.call(_f)); // Load ha-config-dashboard
await ((_l = (_k = (_j = (_h = configRouter === null || configRouter === void 0 ? void 0 : configRouter.routerOptions) === null || _h === void 0 ? void 0 : _h.routes) === null || _j === void 0 ? void 0 : _j.cloud) === null || _k === void 0 ? void 0 : _k.load) === null || _l === void 0 ? void 0 : _l.call(_k)); // Load ha-settings-row
await customElements.whenDefined("ha-config-dashboard");
};
const loadDeveloperToolsTemplate = async () => {
var _a, _b, _c, _d, _e, _f, _g;
await customElements.whenDefined("partial-panel-resolver");
await customElements.whenDefined("partial-panel-resolver");
const ppResolver = document.createElement("partial-panel-resolver");
const routes = ppResolver.getRoutes([
{
component_name: "developer-tools",
url_path: "a",
},
]);
await ((_c = (_b = (_a = routes === null || routes === void 0 ? void 0 : routes.routes) === null || _a === void 0 ? void 0 : _a.a) === null || _b === void 0 ? void 0 : _b.load) === null || _c === void 0 ? void 0 : _c.call(_b));
const dtRouter = document.createElement("developer-tools-router");
await ((_g = (_f = (_e = (_d = dtRouter === null || dtRouter === void 0 ? void 0 : dtRouter.routerOptions) === null || _d === void 0 ? void 0 : _d.routes) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.load) === null || _g === void 0 ? void 0 : _g.call(_f));
await customElements.whenDefined("developer-tools-template");
};
loadDeveloperToolsTemplate();
class BrowserModSettingsCard extends s {
constructor() {
super(...arguments);
@ -92,6 +109,7 @@ class BrowserModSettingsCard extends s {
}
firstUpdated() {
window.browser_mod.addEventListener("browser-mod-config-update", () => this.requestUpdate());
window.browser_mod.addEventListener("browser-mod-favicon-update", () => this.requestUpdate());
}
_handleSwitchTab(ev) {
this._selectedTab = parseInt(ev.detail.index, 10);
@ -101,12 +119,30 @@ class BrowserModSettingsCard extends s {
return $ `
<ha-card header="Frontend settings" outlined>
<div class="card-content">
<p>
Please note: Those settings severely change the way the Home
Assistant frontend works and looks. It is very easy to forget that
you made a setting here when you switch devices or user.
</p>
<p>
Do not report any issues to Home Assistant before clearing
<b>EVERY</b> setting here and thouroghly clearing all your browser
caches. Failure to do so means you risk wasting a lot of peoples
time, and you will be severly and rightfully ridiculed.
</p>
<p>
Global settings are applied for all users and browsers.</br>
User settings are applied to the current user and overrides any Global settings.</br>
Browser settings are applied for the current browser and overrides any User or Global settings.
</p>
<mwc-tab-bar
.activeIndex=${this._selectedTab}
@MDCTabBar:activated=${this._handleSwitchTab}
>
<mwc-tab .label=${"Browser"}></mwc-tab>
<ha-icon .icon=${"mdi:chevron-double-right"}></ha-icon>
<mwc-tab .label=${"User (" + this.hass.user.name + ")"}></mwc-tab>
<ha-icon .icon=${"mdi:chevron-double-right"}></ha-icon>
<mwc-tab .label=${"Global"}></mwc-tab>
</mwc-tab-bar>
@ -120,7 +156,7 @@ class BrowserModSettingsCard extends s {
const user = window.browser_mod.user_settings;
const browser = window.browser_mod.browser_settings;
const current = { global, user, browser }[level];
const DESC_BOOLEAN = (val) => ({ true: "Enabled", false: "Disabled", undefined: "unset" }[String(val)]);
const DESC_BOOLEAN = (val) => ({ true: "Enabled", false: "Disabled", undefined: "Unset" }[String(val)]);
const DESC_SET_UNSET = (val) => (val === undefined ? "Unset" : "Set");
const OVERRIDDEN = (key) => {
if (level !== "browser" && browser[key] !== undefined)
@ -129,112 +165,133 @@ class BrowserModSettingsCard extends s {
return $ `<br />Overridden by user setting`;
};
return $ `
<ha-settings-row>
<span slot="heading">Hide Sidebar</span>
<span slot="description">Hide the sidebar and hamburger menu</span>
Currenty: ${DESC_BOOLEAN(current.hideSidebar)}
${OVERRIDDEN("hideSidebar")}
</ha-settings-row>
<ha-settings-row>
<mwc-button
@click=${() => window.browser_mod.set_setting("hideSidebar", true, level)}
>
Enable
</mwc-button>
<mwc-button
@click=${() => window.browser_mod.set_setting("hideSidebar", false, level)}
>
Disable
</mwc-button>
<mwc-button
@click=${() => window.browser_mod.set_setting("hideSidebar", undefined, level)}
>
Clear
</mwc-button>
</ha-settings-row>
<div class="box">
<ha-settings-row>
<span slot="heading">Favicon template</span>
${OVERRIDDEN("faviconTemplate")}
<img src="${window.browser_mod._currentFavicon}" class="favicon" />
</ha-settings-row>
<ha-code-editor
.hass=${this.hass}
.value=${current.faviconTemplate}
@value-changed=${(ev) => {
const tpl = ev.detail.value || undefined;
window.browser_mod.set_setting("faviconTemplate", tpl, level);
}}
></ha-code-editor>
<ha-settings-row>
<mwc-button
@click=${() => window.browser_mod.set_setting("faviconTemplate", undefined, level)}
>
Clear
</mwc-button>
</ha-settings-row>
<ha-settings-row>
<span slot="heading">Hide Header</span>
<span slot="description">Hide the header on all pages</span>
Currenty: ${DESC_BOOLEAN(current.hideHeader)}
${OVERRIDDEN("hideHeader")}
</ha-settings-row>
<ha-settings-row>
<mwc-button
@click=${() => window.browser_mod.set_setting("hideHeader", true, level)}
>
Enable
</mwc-button>
<mwc-button
@click=${() => window.browser_mod.set_setting("hideHeader", false, level)}
>
Disable
</mwc-button>
<mwc-button
@click=${() => window.browser_mod.set_setting("hideHeader", undefined, level)}
>
Clear
</mwc-button>
</ha-settings-row>
<div class="separator"></div>
<ha-settings-row>
<span slot="heading">Sidebar order</span>
<span slot="description">Order and visibility of sidebar buttons</span>
Currenty: ${DESC_SET_UNSET(current.sidebarPanelOrder)}
${OVERRIDDEN("sidebarPanelOrder")}
</ha-settings-row>
<ha-settings-row>
<mwc-button
@click=${() => {
<ha-settings-row>
<span slot="heading">Hide Sidebar</span>
<span slot="description">Hide the sidebar and hamburger menu</span>
Currenty: ${DESC_BOOLEAN(current.hideSidebar)}
${OVERRIDDEN("hideSidebar")}
</ha-settings-row>
<ha-settings-row>
<mwc-button
@click=${() => window.browser_mod.set_setting("hideSidebar", true, level)}
>
Enable
</mwc-button>
<mwc-button
@click=${() => window.browser_mod.set_setting("hideSidebar", false, level)}
>
Disable
</mwc-button>
<mwc-button
@click=${() => window.browser_mod.set_setting("hideSidebar", undefined, level)}
>
Clear
</mwc-button>
</ha-settings-row>
<div class="separator"></div>
<ha-settings-row>
<span slot="heading">Hide Header</span>
<span slot="description">Hide the header on all pages</span>
Currenty: ${DESC_BOOLEAN(current.hideHeader)}
${OVERRIDDEN("hideHeader")}
</ha-settings-row>
<ha-settings-row>
<mwc-button
@click=${() => window.browser_mod.set_setting("hideHeader", true, level)}
>
Enable
</mwc-button>
<mwc-button
@click=${() => window.browser_mod.set_setting("hideHeader", false, level)}
>
Disable
</mwc-button>
<mwc-button
@click=${() => window.browser_mod.set_setting("hideHeader", undefined, level)}
>
Clear
</mwc-button>
</ha-settings-row>
<div class="separator"></div>
<ha-settings-row>
<span slot="heading">Sidebar order</span>
<span slot="description"
>Order and visibility of sidebar buttons</span
>
Currenty: ${DESC_SET_UNSET(current.sidebarPanelOrder)}
${OVERRIDDEN("sidebarPanelOrder")}
</ha-settings-row>
<ha-settings-row>
<span slot="description">
Clearing this does NOT restore the original button order.
</span>
<mwc-button
@click=${() => {
window.browser_mod.set_setting("sidebarPanelOrder", localStorage.getItem("sidebarPanelOrder"), level);
window.browser_mod.set_setting("sidebarHiddenPanels", localStorage.getItem("sidebarHiddenPanels"), level);
}}
>
Set
</mwc-button>
<mwc-button
@click=${() => {
>
Set
</mwc-button>
<mwc-button
@click=${() => {
window.browser_mod.set_setting("sidebarPanelOrder", undefined, level);
window.browser_mod.set_setting("sidebarHiddenPanels", undefined, level);
}}
>
Clear
</mwc-button>
</ha-settings-row>
>
Clear
</mwc-button>
</ha-settings-row>
</div>
`;
}
_render_user() {
return $ `
User
<ha-settings-row>
<span slot="heading">Kiosk mode</span>
<span slot="description"> Hide sidebar and header </span>
Currenty: Overridden
</ha-settings-row>
<ha-settings-row>
<span slot="heading">Set screensaver</span>
<span slot="description"> Set screensaver card </span>
<mwc-button>Enable</mwc-button>
<mwc-button>Disable</mwc-button>
<mwc-button>Clear</mwc-button>
</ha-settings-row>
`;
}
_render_browser() {
return $ `
Browser
<ha-settings-row>
<span slot="heading">Kiosk mode</span>
<span slot="description"> Hide sidebar and header </span>
Currenty: Overridden
</ha-settings-row>
<ha-settings-row>
<span slot="heading">Set screensaver</span>
<span slot="description"> Set screensaver card </span>
<mwc-button>Enable</mwc-button>
<mwc-button>Disable</mwc-button>
<mwc-button>Clear</mwc-button>
</ha-settings-row>
static get styles() {
return r$2 `
.box {
border: 1px solid var(--divider-color);
padding: 8px;
}
.separator {
border-bottom: 1px solid var(--divider-color);
margin: 0 -8px;
}
img.favicon {
width: 64px;
height: 64px;
margin-left: 16px;
}
mwc-tab-bar ha-icon {
display: flex;
align-items: center;
}
`;
}
}
@ -247,7 +304,7 @@ __decorate([
customElements.define("browser-mod-settings-card", BrowserModSettingsCard);
const bmWindow = window;
loadDevTools().then(() => {
loadConfigDashboard().then(() => {
class BrowserModPanel extends s {
constructor() {
super(...arguments);

2
custom_components/browser_mod/store.py
View File

@ -16,6 +16,8 @@ class Settings:
defaultPanel = attr.ib(type=str, default=None)
sidebarPanelOrder = attr.ib(type=list, default=None)
sidebarHiddenPanels = attr.ib(type=list, default=None)
faviconTemplate = attr.ib(type=str, default=None)
titleTemplate = attr.ib(type=str, default=None)
@classmethod
def from_dict(cls, data):

4
js/config_panel/main.ts
View File

@ -1,13 +1,13 @@
import { LitElement, html, css } from "lit";
import { property } from "lit/decorators.js";
import { loadDevTools } from "../helpers";
import { loadConfigDashboard } from "../helpers";
import { loadHaForm } from "../helpers";
import "./settings-card";
const bmWindow = window as any;
loadDevTools().then(() => {
loadConfigDashboard().then(() => {
class BrowserModPanel extends LitElement {
@property() hass;
@property() narrow;

303
js/config_panel/settings-card.ts
View File

@ -1,5 +1,8 @@
import { LitElement, html, css } from "lit";
import { property, state } from "lit/decorators.js";
import { loadDeveloperToolsTemplate } from "../helpers";
loadDeveloperToolsTemplate();
class BrowserModSettingsCard extends LitElement {
@property() hass;
@ -10,6 +13,9 @@ class BrowserModSettingsCard extends LitElement {
window.browser_mod.addEventListener("browser-mod-config-update", () =>
this.requestUpdate()
);
window.browser_mod.addEventListener("browser-mod-favicon-update", () =>
this.requestUpdate()
);
}
_handleSwitchTab(ev: CustomEvent) {
@ -21,12 +27,30 @@ class BrowserModSettingsCard extends LitElement {
return html`
<ha-card header="Frontend settings" outlined>
<div class="card-content">
<p>
Please note: Those settings severely change the way the Home
Assistant frontend works and looks. It is very easy to forget that
you made a setting here when you switch devices or user.
</p>
<p>
Do not report any issues to Home Assistant before clearing
<b>EVERY</b> setting here and thouroghly clearing all your browser
caches. Failure to do so means you risk wasting a lot of peoples
time, and you will be severly and rightfully ridiculed.
</p>
<p>
Global settings are applied for all users and browsers.</br>
User settings are applied to the current user and overrides any Global settings.</br>
Browser settings are applied for the current browser and overrides any User or Global settings.
</p>
<mwc-tab-bar
.activeIndex=${this._selectedTab}
@MDCTabBar:activated=${this._handleSwitchTab}
>
<mwc-tab .label=${"Browser"}></mwc-tab>
<ha-icon .icon=${"mdi:chevron-double-right"}></ha-icon>
<mwc-tab .label=${"User (" + this.hass.user.name + ")"}></mwc-tab>
<ha-icon .icon=${"mdi:chevron-double-right"}></ha-icon>
<mwc-tab .label=${"Global"}></mwc-tab>
</mwc-tab-bar>
@ -43,7 +67,7 @@ class BrowserModSettingsCard extends LitElement {
const current = { global, user, browser }[level];
const DESC_BOOLEAN = (val) =>
({ true: "Enabled", false: "Disabled", undefined: "unset" }[String(val)]);
({ true: "Enabled", false: "Disabled", undefined: "Unset" }[String(val)]);
const DESC_SET_UNSET = (val) => (val === undefined ? "Unset" : "Set");
const OVERRIDDEN = (key) => {
if (level !== "browser" && browser[key] !== undefined)
@ -53,136 +77,161 @@ class BrowserModSettingsCard extends LitElement {
};
return html`
<ha-settings-row>
<span slot="heading">Hide Sidebar</span>
<span slot="description">Hide the sidebar and hamburger menu</span>
Currenty: ${DESC_BOOLEAN(current.hideSidebar)}
${OVERRIDDEN("hideSidebar")}
</ha-settings-row>
<ha-settings-row>
<mwc-button
@click=${() =>
window.browser_mod.set_setting("hideSidebar", true, level)}
>
Enable
</mwc-button>
<mwc-button
@click=${() =>
window.browser_mod.set_setting("hideSidebar", false, level)}
>
Disable
</mwc-button>
<mwc-button
@click=${() =>
window.browser_mod.set_setting("hideSidebar", undefined, level)}
>
Clear
</mwc-button>
</ha-settings-row>
<ha-settings-row>
<span slot="heading">Hide Header</span>
<span slot="description">Hide the header on all pages</span>
Currenty: ${DESC_BOOLEAN(current.hideHeader)}
${OVERRIDDEN("hideHeader")}
</ha-settings-row>
<ha-settings-row>
<mwc-button
@click=${() =>
window.browser_mod.set_setting("hideHeader", true, level)}
>
Enable
</mwc-button>
<mwc-button
@click=${() =>
window.browser_mod.set_setting("hideHeader", false, level)}
>
Disable
</mwc-button>
<mwc-button
@click=${() =>
window.browser_mod.set_setting("hideHeader", undefined, level)}
>
Clear
</mwc-button>
</ha-settings-row>
<ha-settings-row>
<span slot="heading">Sidebar order</span>
<span slot="description">Order and visibility of sidebar buttons</span>
Currenty: ${DESC_SET_UNSET(current.sidebarPanelOrder)}
${OVERRIDDEN("sidebarPanelOrder")}
</ha-settings-row>
<ha-settings-row>
<mwc-button
@click=${() => {
window.browser_mod.set_setting(
"sidebarPanelOrder",
localStorage.getItem("sidebarPanelOrder"),
level
);
window.browser_mod.set_setting(
"sidebarHiddenPanels",
localStorage.getItem("sidebarHiddenPanels"),
level
);
<div class="box">
<ha-settings-row>
<span slot="heading">Favicon template</span>
${OVERRIDDEN("faviconTemplate")}
<img src="${window.browser_mod._currentFavicon}" class="favicon" />
</ha-settings-row>
<ha-code-editor
.hass=${this.hass}
.value=${current.faviconTemplate}
@value-changed=${(ev) => {
const tpl = ev.detail.value || undefined;
window.browser_mod.set_setting("faviconTemplate", tpl, level);
}}
>
Set
</mwc-button>
<mwc-button
@click=${() => {
window.browser_mod.set_setting(
"sidebarPanelOrder",
undefined,
level
);
window.browser_mod.set_setting(
"sidebarHiddenPanels",
undefined,
level
);
}}
>
Clear
</mwc-button>
</ha-settings-row>
></ha-code-editor>
<ha-settings-row>
<mwc-button
@click=${() =>
window.browser_mod.set_setting(
"faviconTemplate",
undefined,
level
)}
>
Clear
</mwc-button>
</ha-settings-row>
<div class="separator"></div>
<ha-settings-row>
<span slot="heading">Hide Sidebar</span>
<span slot="description">Hide the sidebar and hamburger menu</span>
Currenty: ${DESC_BOOLEAN(current.hideSidebar)}
${OVERRIDDEN("hideSidebar")}
</ha-settings-row>
<ha-settings-row>
<mwc-button
@click=${() =>
window.browser_mod.set_setting("hideSidebar", true, level)}
>
Enable
</mwc-button>
<mwc-button
@click=${() =>
window.browser_mod.set_setting("hideSidebar", false, level)}
>
Disable
</mwc-button>
<mwc-button
@click=${() =>
window.browser_mod.set_setting("hideSidebar", undefined, level)}
>
Clear
</mwc-button>
</ha-settings-row>
<div class="separator"></div>
<ha-settings-row>
<span slot="heading">Hide Header</span>
<span slot="description">Hide the header on all pages</span>
Currenty: ${DESC_BOOLEAN(current.hideHeader)}
${OVERRIDDEN("hideHeader")}
</ha-settings-row>
<ha-settings-row>
<mwc-button
@click=${() =>
window.browser_mod.set_setting("hideHeader", true, level)}
>
Enable
</mwc-button>
<mwc-button
@click=${() =>
window.browser_mod.set_setting("hideHeader", false, level)}
>
Disable
</mwc-button>
<mwc-button
@click=${() =>
window.browser_mod.set_setting("hideHeader", undefined, level)}
>
Clear
</mwc-button>
</ha-settings-row>
<div class="separator"></div>
<ha-settings-row>
<span slot="heading">Sidebar order</span>
<span slot="description"
>Order and visibility of sidebar buttons</span
>
Currenty: ${DESC_SET_UNSET(current.sidebarPanelOrder)}
${OVERRIDDEN("sidebarPanelOrder")}
</ha-settings-row>
<ha-settings-row>
<span slot="description">
Clearing this does NOT restore the original button order.
</span>
<mwc-button
@click=${() => {
window.browser_mod.set_setting(
"sidebarPanelOrder",
localStorage.getItem("sidebarPanelOrder"),
level
);
window.browser_mod.set_setting(
"sidebarHiddenPanels",
localStorage.getItem("sidebarHiddenPanels"),
level
);
}}
>
Set
</mwc-button>
<mwc-button
@click=${() => {
window.browser_mod.set_setting(
"sidebarPanelOrder",
undefined,
level
);
window.browser_mod.set_setting(
"sidebarHiddenPanels",
undefined,
level
);
}}
>
Clear
</mwc-button>
</ha-settings-row>
</div>
`;
}
_render_user() {
return html`
User
<ha-settings-row>
<span slot="heading">Kiosk mode</span>
<span slot="description"> Hide sidebar and header </span>
Currenty: Overridden
</ha-settings-row>
<ha-settings-row>
<span slot="heading">Set screensaver</span>
<span slot="description"> Set screensaver card </span>
<mwc-button>Enable</mwc-button>
<mwc-button>Disable</mwc-button>
<mwc-button>Clear</mwc-button>
</ha-settings-row>
`;
}
_render_browser() {
return html`
Browser
<ha-settings-row>
<span slot="heading">Kiosk mode</span>
<span slot="description"> Hide sidebar and header </span>
Currenty: Overridden
</ha-settings-row>
<ha-settings-row>
<span slot="heading">Set screensaver</span>
<span slot="description"> Set screensaver card </span>
<mwc-button>Enable</mwc-button>
<mwc-button>Disable</mwc-button>
<mwc-button>Clear</mwc-button>
</ha-settings-row>
static get styles() {
return css`
.box {
border: 1px solid var(--divider-color);
padding: 8px;
}
.separator {
border-bottom: 1px solid var(--divider-color);
margin: 0 -8px;
}
img.favicon {
width: 64px;
height: 64px;
margin-left: 16px;
}
mwc-tab-bar ha-icon {
display: flex;
align-items: center;
}
`;
}
}

24
js/helpers.ts
View File

@ -88,7 +88,7 @@ export const loadHaForm = async () => {
// Loads in ha-config-dashboard which is used to copy styling
// Also provides ha-settings-row
export const loadDevTools = async () => {
export const loadConfigDashboard = async () => {
await customElements.whenDefined("partial-panel-resolver");
const ppResolver = document.createElement("partial-panel-resolver");
const routes = (ppResolver as any).getRoutes([
@ -99,8 +99,24 @@ export const loadDevTools = async () => {
]);
await routes?.routes?.a?.load?.();
await customElements.whenDefined("ha-panel-config");
const configRouter = document.createElement("ha-panel-config");
await (configRouter as any)?.routerOptions?.routes?.dashboard?.load?.(); // Load ha-config-dashboard
await (configRouter as any)?.routerOptions?.routes?.cloud?.load?.(); // Load ha-settings-row
const configRouter: any = document.createElement("ha-panel-config");
await configRouter?.routerOptions?.routes?.dashboard?.load?.(); // Load ha-config-dashboard
await configRouter?.routerOptions?.routes?.cloud?.load?.(); // Load ha-settings-row
await customElements.whenDefined("ha-config-dashboard");
};
export const loadDeveloperToolsTemplate = async () => {
await customElements.whenDefined("partial-panel-resolver");
await customElements.whenDefined("partial-panel-resolver");
const ppResolver = document.createElement("partial-panel-resolver");
const routes = (ppResolver as any).getRoutes([
{
component_name: "developer-tools",
url_path: "a",
},
]);
await routes?.routes?.a?.load?.();
const dtRouter: any = document.createElement("developer-tools-router");
await dtRouter?.routerOptions?.routes?.template?.load?.();
await customElements.whenDefined("developer-tools-template");
};

49
js/plugin/auto-settings.ts
View File

@ -2,10 +2,16 @@ import { selectTree } from "../helpers";
export const AutoSettingsMixin = (SuperClass) => {
return class AutoSettingsMixinClass extends SuperClass {
_faviconTemplateSubscription;
_titleTemplateSubscription;
constructor() {
super();
this._auto_settings_setup();
this.addEventListener("browser-mod-config-update", () =>
this._auto_settings_setup()
);
}
async _auto_settings_setup() {
@ -13,6 +19,7 @@ export const AutoSettingsMixin = (SuperClass) => {
const settings = this.settings;
// Sidebar panel order and hiding
if (settings.sidebarPanelOrder) {
localStorage.setItem("sidebarPanelOrder", settings.sidebarPanelOrder);
}
@ -23,6 +30,7 @@ export const AutoSettingsMixin = (SuperClass) => {
);
}
// Hide sidebar
if (settings.hideSidebar === true) {
selectTree(
document.body,
@ -33,6 +41,8 @@ export const AutoSettingsMixin = (SuperClass) => {
"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;
@ -43,6 +53,45 @@ export const AutoSettingsMixin = (SuperClass) => {
};
});
}
// 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) {
}
}
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");
}
};
};

4
js/plugin/main.ts
View File

@ -55,9 +55,9 @@ import { AutoSettingsMixin } from "./auto-settings";
x Kiosk mode
- Default panel?
- Screensaver?
- Tweaks
- Favicon templates
x Favicon templates
- Title templates
- Tweaks
- Quickbar tweaks (ctrl+enter)?
- Video player?
- Media_seek