diff --git a/custom_components/browser_mod/browser_mod.js b/custom_components/browser_mod/browser_mod.js index 623fd64..5561554 100644 --- a/custom_components/browser_mod/browser_mod.js +++ b/custom_components/browser_mod/browser_mod.js @@ -242,6 +242,42 @@ __decorate([ customElements.define("browser-player", BrowserPlayer); })(); +const TIMEOUT_ERROR = "SELECTTREE-TIMEOUT"; +async function _await_el(el) { + var _a; + if ((_a = el.localName) === null || _a === void 0 ? void 0 : _a.includes("-")) + await customElements.whenDefined(el.localName); + if (el.updateComplete) + await el.updateComplete; +} +async function _selectTree(root, path, all = false) { + let el = [root]; + if (typeof path === "string") { + path = path.split(/(\$| )/); + } + while (path[path.length - 1] === "") + path.pop(); + for (const [i, p] of path.entries()) { + const e = el[0]; + if (!e) + return null; + if (!p.trim().length) + continue; + _await_el(e); + el = p === "$" ? [e.shadowRoot] : e.querySelectorAll(p); + } + return all ? el : el[0]; +} +async function selectTree(root, path, all = false, timeout = 10000) { + return Promise.race([ + _selectTree(root, path, all), + new Promise((_, reject) => setTimeout(() => reject(new Error(TIMEOUT_ERROR)), timeout)), + ]).catch((err) => { + if (!err.message || err.message !== TIMEOUT_ERROR) + throw err; + return null; + }); +} async function hass_base_el() { await Promise.race([ customElements.whenDefined("home-assistant"), @@ -1838,6 +1874,20 @@ const AutoSettingsMixin = (SuperClass) => { if (settings.sidebarHiddenPanels) { localStorage.setItem("sidebarHiddenPanels", settings.sidebarHiddenPanels); } + 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()); + } + 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"); + }; + }); + } } }; }; @@ -1878,7 +1928,7 @@ const AutoSettingsMixin = (SuperClass) => { - Saved frontend settings X Framework x Save sidebar - - Kiosk mode + x Kiosk mode - Default panel? - Screensaver? - Tweaks diff --git a/custom_components/browser_mod/browser_mod_panel.js b/custom_components/browser_mod/browser_mod_panel.js index cd1e961..4af3c37 100644 --- a/custom_components/browser_mod/browser_mod_panel.js +++ b/custom_components/browser_mod/browser_mod_panel.js @@ -69,8 +69,6 @@ const i=(i,e)=>"method"===e.kind&&e.descriptor&&!("value"in e.descriptor)?{...e, // Also provides ha-settings-row const loadDevTools = async () => { var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l; - if (customElements.get("ha-config-dashboard")) - return; await customElements.whenDefined("partial-panel-resolver"); const ppResolver = document.createElement("partial-panel-resolver"); const routes = ppResolver.getRoutes([ @@ -101,7 +99,7 @@ class BrowserModSettingsCard extends s { render() { const level = ["browser", "user", "global"][this._selectedTab]; return $ ` - +
- Kiosk mode - Hide sidebar and header - Currenty: ${DESC_BOOLEAN(current.kiosk)} ${OVERRIDDEN("kiosk")} + Hide Sidebar + Hide the sidebar and hamburger menu + Currenty: ${DESC_BOOLEAN(current.hideSidebar)} + ${OVERRIDDEN("hideSidebar")} window.browser_mod.set_setting("kiosk", true, level)} + @click=${() => window.browser_mod.set_setting("hideSidebar", true, level)} > Enable window.browser_mod.set_setting("kiosk", false, level)} + @click=${() => window.browser_mod.set_setting("hideSidebar", false, level)} > Disable window.browser_mod.set_setting("kiosk", undefined, level)} + @click=${() => window.browser_mod.set_setting("hideSidebar", undefined, level)} + > + Clear + + + + + Hide Header + Hide the header on all pages + Currenty: ${DESC_BOOLEAN(current.hideHeader)} + ${OVERRIDDEN("hideHeader")} + + + window.browser_mod.set_setting("hideHeader", true, level)} + > + Enable + + window.browser_mod.set_setting("hideHeader", false, level)} + > + Disable + + window.browser_mod.set_setting("hideHeader", undefined, level)} > Clear @@ -508,34 +531,18 @@ loadDevTools().then(() => { --app-header-border-bottom: 1px solid var(--divider-color); --ha-card-border-radius: var(--ha-config-card-border-radius, 8px); } + ha-config-section { + padding: 16px 0; + } .card-header { display: flex; justify-content: space-between; } - .card-actions { - display: flex; - } - .spacer { - flex-grow: 1; - } ha-textfield { width: 250px; display: block; margin-top: 8px; } - .option { - display: flex; - margin-top: 16px; - } - .option h3 { - flex-grow: 1; - margin: 0; - } - .option ha-switch { - margin-top: 0.25em; - margin-right: 7px; - margin-left: 0.5em; - } ha-icon-button > * { display: flex; } diff --git a/custom_components/browser_mod/connection.py b/custom_components/browser_mod/connection.py index be71359..224dbff 100644 --- a/custom_components/browser_mod/connection.py +++ b/custom_components/browser_mod/connection.py @@ -1,5 +1,4 @@ import logging -from typing import Any import voluptuous as vol from datetime import datetime, timezone diff --git a/custom_components/browser_mod/store.py b/custom_components/browser_mod/store.py index 4ceecd5..b140df5 100644 --- a/custom_components/browser_mod/store.py +++ b/custom_components/browser_mod/store.py @@ -11,7 +11,8 @@ _LOGGER = logging.getLogger(__name__) @attr.s class Settings: - kiosk = attr.ib(type=bool, default=None) + hideSidebar = attr.ib(type=bool, default=None) + hideHeader = attr.ib(type=bool, default=None) defaultPanel = attr.ib(type=str, default=None) sidebarPanelOrder = attr.ib(type=list, default=None) sidebarHiddenPanels = attr.ib(type=list, default=None) diff --git a/js/config_panel/main.ts b/js/config_panel/main.ts index 1e64969..3b13d45 100644 --- a/js/config_panel/main.ts +++ b/js/config_panel/main.ts @@ -313,34 +313,18 @@ loadDevTools().then(() => { --app-header-border-bottom: 1px solid var(--divider-color); --ha-card-border-radius: var(--ha-config-card-border-radius, 8px); } + ha-config-section { + padding: 16px 0; + } .card-header { display: flex; justify-content: space-between; } - .card-actions { - display: flex; - } - .spacer { - flex-grow: 1; - } ha-textfield { width: 250px; display: block; margin-top: 8px; } - .option { - display: flex; - margin-top: 16px; - } - .option h3 { - flex-grow: 1; - margin: 0; - } - .option ha-switch { - margin-top: 0.25em; - margin-right: 7px; - margin-left: 0.5em; - } ha-icon-button > * { display: flex; } diff --git a/js/config_panel/settings-card.ts b/js/config_panel/settings-card.ts index 4efedfc..a102756 100644 --- a/js/config_panel/settings-card.ts +++ b/js/config_panel/settings-card.ts @@ -19,7 +19,7 @@ class BrowserModSettingsCard extends LitElement { render() { const level = ["browser", "user", "global"][this._selectedTab]; return html` - +
- Kiosk mode - Hide sidebar and header - Currenty: ${DESC_BOOLEAN(current.kiosk)} ${OVERRIDDEN("kiosk")} + Hide Sidebar + Hide the sidebar and hamburger menu + Currenty: ${DESC_BOOLEAN(current.hideSidebar)} + ${OVERRIDDEN("hideSidebar")} window.browser_mod.set_setting("kiosk", true, level)} + @click=${() => + window.browser_mod.set_setting("hideSidebar", true, level)} > Enable window.browser_mod.set_setting("kiosk", false, level)} + @click=${() => + window.browser_mod.set_setting("hideSidebar", false, level)} > Disable - window.browser_mod.set_setting("kiosk", undefined, level)} + window.browser_mod.set_setting("hideSidebar", undefined, level)} + > + Clear + + + + + Hide Header + Hide the header on all pages + Currenty: ${DESC_BOOLEAN(current.hideHeader)} + ${OVERRIDDEN("hideHeader")} + + + + window.browser_mod.set_setting("hideHeader", true, level)} + > + Enable + + + window.browser_mod.set_setting("hideHeader", false, level)} + > + Disable + + + window.browser_mod.set_setting("hideHeader", undefined, level)} > Clear diff --git a/js/helpers.ts b/js/helpers.ts index 912187d..4f1e87c 100644 --- a/js/helpers.ts +++ b/js/helpers.ts @@ -89,8 +89,6 @@ export const loadHaForm = async () => { // Loads in ha-config-dashboard which is used to copy styling // Also provides ha-settings-row export const loadDevTools = async () => { - if (customElements.get("ha-config-dashboard")) return; - await customElements.whenDefined("partial-panel-resolver"); const ppResolver = document.createElement("partial-panel-resolver"); const routes = (ppResolver as any).getRoutes([ diff --git a/js/plugin/auto-settings.ts b/js/plugin/auto-settings.ts index 287f731..2da274c 100644 --- a/js/plugin/auto-settings.ts +++ b/js/plugin/auto-settings.ts @@ -1,3 +1,5 @@ +import { selectTree } from "../helpers"; + export const AutoSettingsMixin = (SuperClass) => { return class AutoSettingsMixinClass extends SuperClass { constructor() { @@ -20,6 +22,27 @@ export const AutoSettingsMixin = (SuperClass) => { settings.sidebarHiddenPanels ); } + + 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()); + } + 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"); + }; + }); + } } }; }; diff --git a/js/plugin/main.ts b/js/plugin/main.ts index 1aef3b2..7e57cd2 100644 --- a/js/plugin/main.ts +++ b/js/plugin/main.ts @@ -52,7 +52,7 @@ import { AutoSettingsMixin } from "./auto-settings"; - Saved frontend settings X Framework x Save sidebar - - Kiosk mode + x Kiosk mode - Default panel? - Screensaver? - Tweaks