fix rebuild of header and templates

Author: maykar

src/config.js

@@ -148,15 +148,23 @@ export class CustomHeaderConfig {
       haElem = ha_elements();
       if (!haElem) return;
       const editor = haElem.panel ? haElem.panel.shadowRoot.querySelector('hui-editor') : null;
-      const edit_mode = haElem.root.querySelector('app-toolbar').className == 'edit-mode';
-      if (!haElem.panel || editor || this.template_failed || edit_mode) return;
+      if (!haElem.panel || editor || this.template_failed) return;
       if (haElem.root && haElem.root.querySelector('custom-header-editor')) return;
       this.buildConfig(ch);
     }, (60 - new Date().getSeconds()) * 1000);
 
     template_timeout;
     window.customHeaderTempTimeout.push(template_timeout);
 
+    if (haElem.root.querySelector('app-toolbar').className == 'edit-mode') return;
+
+    if (window.customHeaderObservers) {
+      for (const observer of window.customHeaderObservers) {
+        observer.disconnect();
+      }
+      window.customHeaderObservers = [];
+    }
+
     styleHeader(config, ch, haElem);
     observers(config, ch, haElem);
   }

src/helpers.js

@@ -37,13 +37,20 @@ export const invertNumArray = show_tabs => {
 
 // Subscribe and render Jinja templates.
 export const subscribeRenderTemplate = (onChange, params, locale) => {
+  const default_vars = defaultVariables(locale);
+  if (!default_vars) {
+    window.setTimeout(() => {
+      subscribeRenderTemplate(onChange, params, locale);
+      return;
+    }, 500);
+  }
   const hass = ha_elements().hass;
   const conn = hass.connection;
   const variables = {
     user: hass.user.name,
     browser: navigator.userAgent,
     ...params.variables,
-    ...defaultVariables(locale),
+    ...default_vars,
   };
   const template = params.template;
   const entity_ids = params.entity_ids;

src/observers.js

@@ -2,7 +2,9 @@ import { hideMenuItems } from './overflow-menu';
 import { redirects } from './redirects';
 import { getLovelace } from 'custom-card-helpers';
 import { CustomHeaderConfig } from './config';
+import { ha_elements } from './ha-elements';
 import { CustomHeader } from './build-header';
+import { styleHeader } from './style-header';
 
 export const selectTab = (config, ch) => {
   const headerType = config.compact_mode || config.button_scroll ? ch.header : ch.footer;
@@ -20,6 +22,15 @@ export const selectTab = (config, ch) => {
   }
 };
 
+const rebuild = config => {
+  const haElem = ha_elements();
+  window.last_template_result = {};
+  const ch = new CustomHeader(haElem);
+  CustomHeaderConfig.buildConfig(ch);
+  if (!window.location.href.includes('disable_ch') && haElem) haElem.appHeader.style.display = 'none';
+  styleHeader(config, ch, haElem);
+};
+
 export const observers = (config, ch, haElem) => {
   const callback = mutations => {
     const headerType = config.split_mode ? ch.footer : ch.header;
@@ -38,15 +49,7 @@ export const observers = (config, ch, haElem) => {
         }
       } else if (addedNodes.length && target.nodeName == 'PARTIAL-PANEL-RESOLVER') {
         // When returning to lovelace/overview from elsewhere in HA.
-        if (addedNodes[0].nodeName == 'HA-PANEL-LOVELACE') {
-          if (window.customHeaderObservers) {
-            for (const observer of window.customHeaderObservers) {
-              observer.disconnect();
-            }
-            window.customHeaderObservers = [];
-          }
-          CustomHeaderConfig.buildConfig(ch, addedNodes[0].lovelace);
-        }
+        if (addedNodes[0].nodeName == 'HA-PANEL-LOVELACE') rebuild(config);
         if (haElem.main.querySelector('ha-panel-lovelace')) {
           if (config.compact_mode && !config.footer_mode) {
             haElem.sidebar.main.querySelector('.menu').style = 'height:49px;';
@@ -83,9 +86,7 @@ export const observers = (config, ch, haElem) => {
         if (haElem.root.querySelector('#ch_animated')) haElem.root.querySelector('#ch_animated').remove();
       } else if (target.nodeName === 'APP-HEADER' && addedNodes.length) {
         // Exited edit mode.
-        if (!window.customHeaderDisabled) haElem.appHeader.style.display = 'none';
-        window.last_template_result = {};
-        CustomHeaderConfig.buildConfig(new CustomHeader(haElem));
+        rebuild(config);
       }
     });
   };

src/style-header.js

@@ -6,8 +6,10 @@ import { insertStyleTags } from './style-tags';
 import { redirects } from './redirects';
 import { fireEvent } from 'custom-card-helpers';
 import { selectTab } from './observers';
+import { ha_elements } from './ha-elements';
 
-export const styleHeader = (config, ch, haElem) => {
+export const styleHeader = (config, ch, haElem = ha_elements()) => {
+  if (!haElem) return;
   insertSettings(ch.header, config, haElem);
   insertSettings(ch.header, config, haElem);
 
@@ -37,7 +39,6 @@ export const styleHeader = (config, ch, haElem) => {
     ch.header.menu.style.display = '';
     if (ch.header.container) ch.header.container.style.visibility = 'visible';
     if (ch.footer.container) ch.footer.container.style.visibility = 'visible';
-    // insertSettings(ch.header, config);
   }
 
   if (!config.compact_mode && !config.button_scroll) {
@@ -50,7 +51,6 @@ export const styleHeader = (config, ch, haElem) => {
 
   if (config.split_mode) {
     ch.header.tabContainer.style.display = 'none';
-    config.compact_mode = false;
     if (config.footer_mode) ch.footer.container.setAttribute('slot', 'header');
     else ch.footer.container.setAttribute('slot', '');
   } else if (!config.footer_mode) {
@@ -60,7 +60,6 @@ export const styleHeader = (config, ch, haElem) => {
   }
 
   const headerType = config.compact_mode || config.button_scroll ? ch.header : ch.footer;
-  // if (!config.split_mode) ch.footer.container.style.display = 'none';
 
   if (!ch.header.tabs.length) config.compact_mode = false;