diff --git a/VERSION b/VERSION index 6e8bf73..17e51c3 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.1.0 +0.1.1 diff --git a/changelog.md b/changelog.md index 456adf0..a1ee515 100644 --- a/changelog.md +++ b/changelog.md @@ -1,3 +1,7 @@ +## 0.1.1 +- Fix creating custom cards (@Nikfinn99 @thomasloven). +- Support dividers. + ## 0.1.0 - Fixes problems with some embedded cards that result in storm of errors in console and non-removed frames. diff --git a/vertical-stack-in-card.js b/vertical-stack-in-card.js index b61f1bb..22110fd 100644 --- a/vertical-stack-in-card.js +++ b/vertical-stack-in-card.js @@ -15,7 +15,7 @@ class VerticalStackInCard extends HTMLElement { this.style.background = "var(--paper-card-background-color)"; const root = this.shadowRoot; - while (root.lastChild) { + while (root.hasChildNodes()) { root.removeChild(root.lastChild); } @@ -28,16 +28,84 @@ class VerticalStackInCard extends HTMLElement { root.appendChild(title); } - let element; - config.cards.forEach(item => { - if (item.type.startsWith("custom:")){ - element = document.createElement(`${item.type.substr("custom:".length)}`); + const _createThing = (tag, config) => { + const element = document.createElement(tag); + try { + element.setConfig(config); + } catch (err) { + console.error(tag, err); + return _createError(err.message, config); + } + return element; + }; + + const _createError = (error, config) => { + return _createThing("hui-error-card", { + type: "error", + error, + config, + }); + }; + + const _fireEvent = (ev, detail, entity=null) => { + ev = new Event(ev, { + bubbles: true, + cancelable: false, + composed: true, + }); + ev.detail = detail || {}; + + if (entity) { + entity.dispatchEvent(ev); } else { - element = document.createElement(`hui-${item.type}-card`); + document + .querySelector("home-assistant") + .shadowRoot.querySelector("home-assistant-main") + .shadowRoot.querySelector("app-drawer-layout partial-panel-resolver") + .shadowRoot.querySelector("ha-panel-lovelace") + .shadowRoot.querySelector("hui-root") + .shadowRoot.querySelector("ha-app-layout #view") + .firstElementChild + .dispatchEvent(ev); + } + } + + config.cards.forEach((item) => { + let tag = item.type; + + if (tag.startsWith("divider")) { + tag = `hui-divider-row`; + } else if (tag.startsWith("custom:")) { + tag = tag.substr("custom:".length); + } else { + tag = `hui-${tag}-card`; + } + + if (customElements.get(tag)) { + const element = _createThing(tag, item); + root.appendChild(element); + this._refCards.push(element); + } else { + // If element doesn't exist (yet) create an error + const element = _createError( + `Custom element doesn't exist: ${tag}.`, + item + ); + element.style.display = "None"; + + const time = setTimeout(() => { + element.style.display = ""; + }, 2000); + + // Remove error if element is defined later + customElements.whenDefined(tag).then(() => { + clearTimeout(time); + _fireEvent("ll-rebuild", {}, element); + }); + + root.appendChild(element); + this._refCards.push(element); } - element.setConfig(item); - root.appendChild(element); - this._refCards.push(element); }); }