Refactoring config panel

2022-07-22 23:34:52 +00:00
parent fbf37fbdfd
commit 67529032dc
8 changed files with 667 additions and 552 deletions
--- a/js/plugin/frontend-settings.ts
+++ b/js/plugin/frontend-settings.ts
@@ -0,0 +1,130 @@
+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
+        );
+      }
+
+      // 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");
+    }
+  };
+};