Fix config element loading

ofekashery · Dec 13, 2024 · a23a601 · a23a601
1 parent 8b06d44
commit a23a601
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 63 deletions.
diff --git a/README.md b/README.md
@@ -42,7 +42,7 @@ If you configure Lovelace via YAML, add a reference to `vertical-stack-in-card.j
 
 ```yaml
 resources:
-  - url: /local/vertical-stack-in-card.js?v=1.0.0
+  - url: /local/vertical-stack-in-card.js?v=1.0.1
     type: js
 ```
 
@@ -54,7 +54,7 @@ Alternatively, if you prefer the graphical editor, use the menu to add the resou
 
 3. Click on **Add resource**, and fill out the form as follows:
 
-   - **Url:** `/local/vertical-stack-in-card.js?v=1.0.0`
+   - **Url:** `/local/vertical-stack-in-card.js?v=1.0.1`
    - **Resource type:** `JavaScript Module`
 
 4. Finish by clicking **Create** and refresh your browser.

diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-1.0.0
+1.0.1
diff --git a/vertical-stack-in-card.js b/vertical-stack-in-card.js
@@ -1,4 +1,8 @@
-console.log(`%cvertical-stack-in-card\n%cVersion: ${'1.0.0'}`, 'color: #1976d2; font-weight: bold;', '');
+console.log(
+  `%cvertical-stack-in-card\n%cVersion: ${'1.0.1'}`,
+  'color: #1976d2; font-weight: bold;',
+  ''
+);
 
 class VerticalStackInCard extends HTMLElement {
   constructor() {
@@ -7,7 +11,9 @@ class VerticalStackInCard extends HTMLElement {
 
   setConfig(config) {
     this._cardSize = {};
-    this._cardSize.promise = new Promise((resolve) => (this._cardSize.resolve = resolve));
+    this._cardSize.promise = new Promise(
+      (resolve) => (this._cardSize.resolve = resolve)
+    );
 
     if (!config || !config.cards || !Array.isArray(config.cards)) {
       throw new Error('Card config incorrect');
@@ -19,18 +25,17 @@ class VerticalStackInCard extends HTMLElement {
 
   async renderCard() {
     const config = this._config;
-    if (window.loadCardHelpers) {
-      this.helpers = await window.loadCardHelpers();
-    }
-    const promises = config.cards.map((config) => this.createCardElement(config));
+    const promises = config.cards.map((config) =>
+      this._createCardElement(config)
+    );
     this._refCards = await Promise.all(promises);
 
     // Style cards
     this._refCards.forEach((card) => {
       if (card.updateComplete) {
-        card.updateComplete.then(() => this.styleCard(card));
+        card.updateComplete.then(() => this._styleCard(card));
       } else {
-        this.styleCard(card);
+        this._styleCard(card);
       }
     });
 
@@ -48,8 +53,8 @@ class VerticalStackInCard extends HTMLElement {
       });
     }
     card.appendChild(cardContent);
-    
-    const shadowRoot = this.shadowRoot || this.attachShadow({mode: 'open'});
+
+    const shadowRoot = this.shadowRoot || this.attachShadow({ mode: 'open' });
     while (shadowRoot.hasChildNodes()) {
       shadowRoot.removeChild(shadowRoot.lastChild);
     }
@@ -59,50 +64,19 @@ class VerticalStackInCard extends HTMLElement {
     this._cardSize.resolve();
   }
 
-  async createCardElement(cardConfig) {
-    const createError = (error, origConfig) => {
-      return createThing('hui-error-card', {
-        type: 'error',
-        error,
-        origConfig
-      });
-    };
-
-    const createThing = (tag, config) => {
-      if (this.helpers) {
-        if (config.type === 'divider') {
-          return this.helpers.createRowElement(config);
-        } else {
-          return this.helpers.createCardElement(config);
-        }
-      }
+  async _createCardElement(cardConfig) {
+    const helpers = await window.loadCardHelpers();
+    const element =
+      cardConfig.type === 'divider'
+        ? helpers.createRowElement(cardConfig)
+        : helpers.createCardElement(cardConfig);
 
-      const element = document.createElement(tag);
-      try {
-        element.setConfig(config);
-      } catch (err) {
-        console.error(tag, err);
-        return createError(err.message, config);
-      }
-      return element;
-    };
-
-    let tag = cardConfig.type;
-    if (tag.startsWith('divider')) {
-      tag = `hui-divider-row`;
-    } else if (tag.startsWith('custom:')) {
-      tag = tag.substr('custom:'.length);
-    } else {
-      tag = `hui-${tag}-card`;
-    }
-
-    const element = createThing(tag, cardConfig);
     element.hass = this._hass;
     element.addEventListener(
       'll-rebuild',
       (ev) => {
         ev.stopPropagation();
-        this.createCardElement(cardConfig).then(() => {
+        this._createCardElement(cardConfig).then(() => {
           this.renderCard();
         });
       },
@@ -120,16 +94,18 @@ class VerticalStackInCard extends HTMLElement {
     }
   }
 
-  styleCard(element) {
+  _styleCard(element) {
     const config = this._config;
     if (element.shadowRoot) {
       if (element.shadowRoot.querySelector('ha-card')) {
         let ele = element.shadowRoot.querySelector('ha-card');
         ele.style.boxShadow = 'none';
         ele.style.borderRadius = '0';
-        ele.style.border = "none";
+        ele.style.border = 'none';
         if ('styles' in config) {
-          Object.entries(config.styles).forEach(([key, value]) => ele.style.setProperty(key, value));
+          Object.entries(config.styles).forEach(([key, value]) =>
+            ele.style.setProperty(key, value)
+          );
         }
       } else {
         let searchEles = element.shadowRoot.getElementById('root');
@@ -142,25 +118,30 @@ class VerticalStackInCard extends HTMLElement {
           if (searchEles[i].style) {
             searchEles[i].style.margin = '0px';
           }
-          this.styleCard(searchEles[i]);
+          this._styleCard(searchEles[i]);
         }
       }
     } else {
-      if (typeof element.querySelector === 'function' && element.querySelector('ha-card')) {
+      if (
+        typeof element.querySelector === 'function' &&
+        element.querySelector('ha-card')
+      ) {
         let ele = element.querySelector('ha-card');
         ele.style.boxShadow = 'none';
         ele.style.borderRadius = '0';
-        ele.style.border = "none";
+        ele.style.border = 'none';
         if ('styles' in config) {
-          Object.entries(config.styles).forEach(([key, value]) => ele.style.setProperty(key, value));
+          Object.entries(config.styles).forEach(([key, value]) =>
+            ele.style.setProperty(key, value)
+          );
         }
       }
       let searchEles = element.childNodes;
       for (let i = 0; i < searchEles.length; i++) {
         if (searchEles[i] && searchEles[i].style) {
           searchEles[i].style.margin = '0px';
         }
-        this.styleCard(searchEles[i]);
+        this._styleCard(searchEles[i]);
       }
     }
   }
@@ -182,14 +163,26 @@ class VerticalStackInCard extends HTMLElement {
   }
 
   static async getConfigElement() {
-    // Ensure hui-card-element-editor and hui-card-picker are loaded.
+    // Ensure the hui-stack-card-editor is loaded.
     let cls = customElements.get('hui-vertical-stack-card');
     if (!cls) {
-      this.helpers.createCardElement({ type: 'vertical-stack', cards: [] });
+      const helpers = await window.loadCardHelpers();
+      helpers.createCardElement({ type: 'vertical-stack', cards: [] });
       await customElements.whenDefined('hui-vertical-stack-card');
       cls = customElements.get('hui-vertical-stack-card');
     }
-    return cls.getConfigElement();
+    const configElement = await cls.getConfigElement();
+
+    // Patch setConfig to remove non-VSIC config options.
+    const originalSetConfig = configElement.setConfig;
+    configElement.setConfig = (config) =>
+      originalSetConfig.call(configElement, {
+        type: config.type,
+        title: config.title,
+        cards: config.cards || [],
+      });
+
+    return configElement;
   }
 
   static getStubConfig() {
@@ -206,5 +199,5 @@ window.customCards.push({
   name: 'Vertical Stack In Card',
   description: 'Group multiple cards into a single sleek card.',
   preview: false,
-  documentationURL: 'https://github.com/ofekashery/vertical-stack-in-card'
+  documentationURL: 'https://github.com/ofekashery/vertical-stack-in-card',
 });