From a23a601396f21a5c89d98efda5722178efa7ce88 Mon Sep 17 00:00:00 2001 From: Ofek Ashery Date: Fri, 13 Dec 2024 22:33:14 +0200 Subject: [PATCH] Fix config element loading --- README.md | 4 +- VERSION | 2 +- vertical-stack-in-card.js | 113 ++++++++++++++++++-------------------- 3 files changed, 56 insertions(+), 63 deletions(-) diff --git a/README.md b/README.md index ae644d0..a7279e2 100644 --- 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 index 3eefcb9..7dea76e 100644 --- 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 index 0bbe888..f4b18bf 100644 --- 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,17 +118,22 @@ 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; @@ -160,7 +141,7 @@ class VerticalStackInCard extends HTMLElement { 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', });