Example on waiting for load

This commit is contained in:
Thomas Lovén 2019-01-22 12:56:00 +01:00
parent e01229ebc8
commit 8863c652e2
2 changed files with 70 additions and 1 deletions

68
card-modder.js Normal file
View File

@ -0,0 +1,68 @@
customElements.whenDefined('card-tools').then(() => {
class CardModder extends window.cardTools.LitElement {
setConfig(config) {
if(!window.cardTools) throw new Error(`Can't find card-tools. See https://github.com/thomasloven/lovelace-card-tools`);
window.cardTools.checkVersion(0.2);
if(!config || !config.card) {
throw new Error("Card config incorrect");
}
if(Array.isArray(config.card)) {
throw new Error("It says 'card', not 'cardS'. Remove the dash.");
}
this._config = config;
this.card = window.cardTools.createCard(config.card);
this.templated = [];
this.attempts = 0;
}
render() {
return window.cardTools.litHtml`
<div id="root">${this.card}</div>
`;
}
firstUpdated() {
this._cardMod();
}
_cardMod() {
if(!this._config.style) return;
let target = null;
target = target || this.card.querySelector("ha-card");
target = target || this.card.shadowRoot && this.card.shadowRoot.querySelector("ha-card");
target = target || this.card.firstChild && this.card.firstChild.shadowRoot && this.card.firstChild.shadowRoot.querySelector("ha-card");
if(!target && !this.attempts) // Try twice
setTimeout(() => this._cardMod(), 100);
this.attempts++;
target = target || this.card;
for(var k in this._config.style) {
if(window.cardTools.hasTemplate(this._config.style[k]))
this.templated.push(k);
target.style.setProperty(k, window.cardTools.parseTemplate(this._config.style[k]));
}
this.target = target;
}
set hass(hass) {
if(this.card) this.card.hass = hass;
if(this.templated)
this.templated.forEach((k) => {
this.target.style.setProperty(k, window.cardTools.parseTemplate(this._config.style[k], ''));
});
}
getCardSize() {
if(this._config && this._config.report_size)
return this._config.report_size;
if(this.card)
return typeof this.card.getCardSize === "function" ? this.card.getCardSize() : 1;
return 1;
}
}
customElements.define('card-modder', CardModder);
});

View File

@ -203,5 +203,6 @@ if (!window.cardTools){
};
window.cardTools = cardTools;
cardTools.fireEvent("ll-rebuild");
// cardTools.fireEvent("ll-rebuild");
customElements.define('card-tools', class {});
}