lovelace-card-mod/src/card-mod.js

67 lines
1.6 KiB
JavaScript

import {subscribeRenderTemplate} from "/card-tools/templates.js";
class CardMod extends HTMLElement {
disconnectedCallback() {
this._disconnect();
}
connectedCallback() {
this._connect();
}
_has_template(data) {
if(data.template.includes("{%")) return true;
if(data.template.includes("{{")) return true;
return false;
}
set template(data) {
this._data = data;
if(!this._has_template(data)) return;
if(!this._data.entity_ids && this._data.template.includes("config.entity")) {
if(this._data.variables.config && this._data.variables.config.entity) {
this._data.entity_ids = [this._data.variables.config.entity];
}
}
}
update() {
this._disconnect().then(() => this._connect());
}
async _connect() {
if(!this._data) return;
if(!this._has_template(this._data)) {
this.innerHTML = `<style>${this._data.template}</style>`;
}
if(this._unsubRenderTemplate) return;
this._unsubRenderTemplate = subscribeRenderTemplate(null,
(result) => this.innerHTML = `<style>${result}</style>`,
this._data);
this._unsubRenderTemplate.catch(() => {
this.innerHTML = `<style>${this._data.template}</style>`;
this._unsubRenderTemplate = undefined;
});
}
async _disconnect() {
if(this._unsubRenderTemplate) {
try {
const unsub = await this._unsubRenderTemplate;
this._unsubRenderTemplate = undefined;
await unsub();
} catch (e) {
if(e.code !== "not_found")
throw e;
}
}
}
}
customElements.define("card-mod", CardMod);