Add demo (#2502)

* Add demo * Fix stuff * Lint * Typescript and demo card * More fixes * Allow switching through configs * Lint * Lint2 * Add two demo configs * Lint * Lint
2025-11-09 19:09:48 +00:00 · 2019-01-18 21:24:32 -08:00
parent 65359aabe3
commit bb71fe0bec
84 changed files with 26510 additions and 1087 deletions
--- a/demo/src/custom-cards/card-modder.js
+++ b/demo/src/custom-cards/card-modder.js
@@ -0,0 +1,86 @@
+import { LitElement } from "lit-element";
+import "./card-tools";
+
+class CardModder extends 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);