Refactor canary-card into separate module

jcwillox · Jul 5, 2020 · a69bce7 · a69bce7
1 parent 93ca62f
commit a69bce7
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 70 deletions.
diff --git a/src/main.js b/src/main.js
@@ -1,7 +1,3 @@
-import { html, LitElement } from "card-tools/src/lit-element";
-import { createCard } from "card-tools/src/lovelace-element";
-import { hass } from "card-tools/src/hass";
-import { applyTheme } from "./styles";
 import { logVersion } from "./logging";
 import { name, version } from "../package.json";
 // allow dynamic updating of secondary info.
@@ -16,70 +12,7 @@ import "./modules/vertical-stack";
 import "./modules/glance-card";
 // adds hide warning option.
 import "./modules/warning";
+// adds the canary-card card.
+import "./modules/canary-card"
 
-logVersion(name, version, "#fdd835", "#212121");
-
-class CanaryCard extends LitElement {
-  static get properties() {
-    return {
-      _config: {},
-      _hass: {}
-    };
-  }
-
-  render() {
-    return html`
-      ${this._card}
-      <style>
-        ${this._config.style}
-      </style>
-    `;
-  }
-
-  setConfig(config) {
-    this._config = JSON.parse(JSON.stringify(config));
-    this._card = createCard(this._config.card);
-    this._hass = this._card.hass = hass();
-  }
-
-  set hass(hass) {
-    this._hass = hass;
-    this._card.hass = hass;
-  }
-
-  shouldUpdate(changedProps) {
-    if (changedProps.has("_config")) {
-      return true;
-    }
-
-    const oldHass = changedProps.get("_hass");
-
-    return !oldHass || oldHass.themes !== this._hass.themes;
-  }
-
-  updated(changedProps) {
-    super.updated(changedProps);
-
-    if (!this._config || !this._hass) return;
-
-    const oldHass = changedProps.get("_hass");
-    const oldConfig = changedProps.get("_config");
-
-    if (
-      !oldHass ||
-      !oldConfig ||
-      oldHass.themes !== this._hass.themes ||
-      oldConfig.theme !== this._config.theme
-    ) {
-      applyTheme(this, this._hass.themes, this._config.theme);
-    }
-  }
-
-  getCardSize() {
-    return typeof this._card.getCardSize === "function"
-      ? this._card.getCardSize()
-      : 1;
-  }
-}
-
-customElements.define("canary-card", CanaryCard);
+logVersion(name, version, "#fdd835", "#212121");
diff --git a/src/modules/canary-card.js b/src/modules/canary-card.js
@@ -0,0 +1,69 @@
+import { html, LitElement } from "card-tools/src/lit-element";
+import { createCard } from "card-tools/src/lovelace-element";
+import { hass } from "card-tools/src/hass";
+import { applyTheme } from "../styles";
+
+class CanaryCard extends LitElement {
+  static get properties() {
+    return {
+      _config: {},
+      _hass: {},
+    };
+  }
+
+  render() {
+    return html`
+      ${this._card}
+      <style>
+        ${this._config.style}
+      </style>
+    `;
+  }
+
+  setConfig(config) {
+    this._config = JSON.parse(JSON.stringify(config));
+    this._card = createCard(this._config.card);
+    this._hass = this._card.hass = hass();
+  }
+
+  set hass(hass) {
+    this._hass = hass;
+    this._card.hass = hass;
+  }
+
+  shouldUpdate(changedProps) {
+    if (changedProps.has("_config")) {
+      return true;
+    }
+
+    const oldHass = changedProps.get("_hass");
+
+    return !oldHass || oldHass.themes !== this._hass.themes;
+  }
+
+  updated(changedProps) {
+    super.updated(changedProps);
+
+    if (!this._config || !this._hass) return;
+
+    const oldHass = changedProps.get("_hass");
+    const oldConfig = changedProps.get("_config");
+
+    if (
+      !oldHass ||
+      !oldConfig ||
+      oldHass.themes !== this._hass.themes ||
+      oldConfig.theme !== this._config.theme
+    ) {
+      applyTheme(this, this._hass.themes, this._config.theme);
+    }
+  }
+
+  getCardSize() {
+    return typeof this._card.getCardSize === "function"
+      ? this._card.getCardSize()
+      : 1;
+  }
+}
+
+customElements.define("canary-card", CanaryCard);