Template titles

2022-07-22 22:34:03 +00:00 · 2022-07-22 22:34:03 +00:00 · fbf37fbdfd
commit fbf37fbdfd
parent b82da219ce
5 changed files with 127 additions and 13 deletions
--- a/custom_components/browser_mod/browser_mod.js
+++ b/custom_components/browser_mod/browser_mod.js
@ -1863,8 +1863,15 @@ const AutoSettingsMixin = (SuperClass) => {
    return class AutoSettingsMixinClass extends SuperClass {
        constructor() {
            super();
+            this.__currentTitle = undefined;
            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;
@ -1908,7 +1915,20 @@ const AutoSettingsMixin = (SuperClass) => {
                })();
            }
            // Title template
-            if (settings.titleTemplate !== undefined) ;
+            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 = document.head.querySelector("link[rel~='icon']");
@ -1927,6 +1947,16 @@ const AutoSettingsMixin = (SuperClass) => {
            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");
+        }
    };
 };

@ -1967,12 +1997,13 @@ const AutoSettingsMixin = (SuperClass) => {
    X Framework
    x Save sidebar
    x Kiosk mode
-    - Default panel?
+    - Default panel
    - Screensaver?
    x Favicon templates
-    - Title templates
+    x Title templates
  - Tweaks
    - Quickbar tweaks (ctrl+enter)?
+    - Card-mod preload
  - Video player?
  - Media_seek
  - Screensavers
--- a/custom_components/browser_mod/browser_mod_panel.js
+++ b/custom_components/browser_mod/browser_mod_panel.js
@ -119,8 +119,9 @@ class BrowserModSettingsCard extends s {
        return $ `
      <ha-card header="Frontend settings" outlined>
        <div class="card-content">
+        <ha-alert alert-type="warning">
          <p>
-            Please note: Those settings severely change the way the Home
+            Please note: The settings in this section 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>
@ -130,6 +131,7 @@ class BrowserModSettingsCard extends s {
            caches. Failure to do so means you risk wasting a lot of peoples
            time, and you will be severly and rightfully ridiculed.
          </p>
+          </ha-alert>
          <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>
@ -189,10 +191,32 @@ class BrowserModSettingsCard extends s {

        <div class="separator"></div>

+        <ha-settings-row>
+          <span slot="heading">Title template</span>
+          ${OVERRIDDEN("titleTemplate")}
+        </ha-settings-row>
+        <ha-code-editor
+          .hass=${this.hass}
+          .value=${current.titleTemplate}
+          @value-changed=${(ev) => {
+            const tpl = ev.detail.value || undefined;
+            window.browser_mod.set_setting("titleTemplate", tpl, level);
+        }}
+        ></ha-code-editor>
+        <ha-settings-row>
+          <mwc-button
+            @click=${() => window.browser_mod.set_setting("titleTemplate", 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)}
+          Currently: ${DESC_BOOLEAN(current.hideSidebar)}
          ${OVERRIDDEN("hideSidebar")}
        </ha-settings-row>
        <ha-settings-row>
@ -218,7 +242,7 @@ class BrowserModSettingsCard extends s {
        <ha-settings-row>
          <span slot="heading">Hide Header</span>
          <span slot="description">Hide the header on all pages</span>
-          Currenty: ${DESC_BOOLEAN(current.hideHeader)}
+          Currently: ${DESC_BOOLEAN(current.hideHeader)}
          ${OVERRIDDEN("hideHeader")}
        </ha-settings-row>
        <ha-settings-row>
@ -246,7 +270,7 @@ class BrowserModSettingsCard extends s {
          <span slot="description"
            >Order and visibility of sidebar buttons</span
          >
-          Currenty: ${DESC_SET_UNSET(current.sidebarPanelOrder)}
+          Currently: ${DESC_SET_UNSET(current.sidebarPanelOrder)}
          ${OVERRIDDEN("sidebarPanelOrder")}
        </ha-settings-row>
        <ha-settings-row>
--- a/js/config_panel/settings-card.ts
+++ b/js/config_panel/settings-card.ts
@ -27,8 +27,9 @@ class BrowserModSettingsCard extends LitElement {
    return html`
      <ha-card header="Frontend settings" outlined>
        <div class="card-content">
+        <ha-alert alert-type="warning">
          <p>
-            Please note: Those settings severely change the way the Home
+            Please note: The settings in this section 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>
@ -38,6 +39,7 @@ class BrowserModSettingsCard extends LitElement {
            caches. Failure to do so means you risk wasting a lot of peoples
            time, and you will be severly and rightfully ridiculed.
          </p>
+          </ha-alert>
          <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>
@ -106,10 +108,33 @@ class BrowserModSettingsCard extends LitElement {

        <div class="separator"></div>

+        <ha-settings-row>
+          <span slot="heading">Title template</span>
+          ${OVERRIDDEN("titleTemplate")}
+        </ha-settings-row>
+        <ha-code-editor
+          .hass=${this.hass}
+          .value=${current.titleTemplate}
+          @value-changed=${(ev) => {
+            const tpl = ev.detail.value || undefined;
+            window.browser_mod.set_setting("titleTemplate", tpl, level);
+          }}
+        ></ha-code-editor>
+        <ha-settings-row>
+          <mwc-button
+            @click=${() =>
+              window.browser_mod.set_setting("titleTemplate", 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)}
+          Currently: ${DESC_BOOLEAN(current.hideSidebar)}
          ${OVERRIDDEN("hideSidebar")}
        </ha-settings-row>
        <ha-settings-row>
@ -138,7 +163,7 @@ class BrowserModSettingsCard extends LitElement {
        <ha-settings-row>
          <span slot="heading">Hide Header</span>
          <span slot="description">Hide the header on all pages</span>
-          Currenty: ${DESC_BOOLEAN(current.hideHeader)}
+          Currently: ${DESC_BOOLEAN(current.hideHeader)}
          ${OVERRIDDEN("hideHeader")}
        </ha-settings-row>
        <ha-settings-row>
@ -169,7 +194,7 @@ class BrowserModSettingsCard extends LitElement {
          <span slot="description"
            >Order and visibility of sidebar buttons</span
          >
-          Currenty: ${DESC_SET_UNSET(current.sidebarPanelOrder)}
+          Currently: ${DESC_SET_UNSET(current.sidebarPanelOrder)}
          ${OVERRIDDEN("sidebarPanelOrder")}
        </ha-settings-row>
        <ha-settings-row>
--- a/js/plugin/auto-settings.ts
+++ b/js/plugin/auto-settings.ts
@ -4,6 +4,7 @@ export const AutoSettingsMixin = (SuperClass) => {
  return class AutoSettingsMixinClass extends SuperClass {
    _faviconTemplateSubscription;
    _titleTemplateSubscription;
+    __currentTitle = undefined;

    constructor() {
      super();
@ -12,6 +13,13 @@ export const AutoSettingsMixin = (SuperClass) => {
      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() {
@ -72,6 +80,21 @@ export const AutoSettingsMixin = (SuperClass) => {

      // 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: {},
+              }
+            );
+        })();
      }
    }

@ -93,5 +116,15 @@ export const AutoSettingsMixin = (SuperClass) => {
      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");
+    }
  };
 };
--- a/js/plugin/main.ts
+++ b/js/plugin/main.ts
@ -53,12 +53,13 @@ import { AutoSettingsMixin } from "./auto-settings";
    X Framework
    x Save sidebar
    x Kiosk mode
-    - Default panel?
+    - Default panel
    - Screensaver?
    x Favicon templates
-    - Title templates
+    x Title templates
  - Tweaks
    - Quickbar tweaks (ctrl+enter)?
+    - Card-mod preload
  - Video player?
  - Media_seek
  - Screensavers