📺 added card theme

iantrich · Jan 25, 2019 · b31099c · b31099c
1 parent 12d1dcd
commit b31099c
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 
 
-[![Version](https://img.shields.io/badge/version-0.0.2-green.svg?style=for-the-badge)](#) [![mantained](https://img.shields.io/maintenance/yes/2019.svg?style=for-the-badge)](#)
+[![Version](https://img.shields.io/badge/version-0.0.3-green.svg?style=for-the-badge)](#) [![mantained](https://img.shields.io/maintenance/yes/2019.svg?style=for-the-badge)](#)
 
 [![maintainer](https://img.shields.io/badge/maintainer-Ian%20Richardson%20%40iantrich-blue.svg?style=for-the-badge)](#)
 
@@ -23,6 +23,7 @@ This card is for [Lovelace](https://www.home-assistant.io/lovelace) on [Home Ass
 | type | string | **Required** | `custom:roku-card`
 | entity | string | **Required** | `media_player` entity of Roku device
 | name | string | **Optional** | Card name
+| theme | string | **Optional** | Card theme
 
 ## Installation
 
@@ -56,6 +57,7 @@ Add a custom element in your `ui-lovelace.yaml`
       - type: custom:roku-card
         entity: media_player.bedroom_tv
         name: Bedroom TV
+        theme: darkpurple
 ```
 
 [Troubleshooting](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins)
diff --git a/roku-card-editor.js b/roku-card-editor.js
@@ -34,11 +34,14 @@ export class RokuCardEditor extends LitElement {
     return this._config.name || "";
   }
 
-
   get _entity() {
     return this._config.entity || "";
   }
 
+  get _theme() {
+    return this._config.theme || "default";
+  }
+
   render() {
     if (!this.hass) {
       return html``;
@@ -74,6 +77,25 @@ export class RokuCardEditor extends LitElement {
                   ></paper-input>
                 `
           }
+          ${
+            customElements.get("hui-theme-select-editor")
+              ? html`
+                  <hui-theme-select-editor
+                    .hass="${this.hass}"
+                    .value="${this._theme}"
+                    .configValue="${"theme"}"
+                    @theme-changed="${this._valueChanged}"
+                  ></hui-theme-select-editor>
+                `
+              : html`
+                  <paper-input
+                    label="Theme"
+                    .value="${this._theme}"
+                    .configValue="${"theme"}"
+                    @value-changed="${this._valueChanged}"
+                  ></paper-input>
+                `
+          }
         </div>
       </div>
     `;
@@ -101,4 +123,4 @@ export class RokuCardEditor extends LitElement {
   }
 }
 
-customElements.define("roku-card-editor", RokuCardEditor);
+customElements.define("roku-card-editor", RokuCardEditor);
diff --git a/roku-card.js b/roku-card.js
@@ -31,7 +31,7 @@ class RokuCard extends LitElement {
       return;
     }
 
-    this._config = config;
+    this._config = { theme: "default", ...config };
   }
 
   render() {
@@ -152,6 +152,17 @@ class RokuCard extends LitElement {
     `;
   }
 
+  updated(changedProps) {
+    if (!this._config) {
+      return;
+    }
+
+    const oldHass = changedProps.get("hass");
+    if (!oldHass || oldHass.themes !== this.hass.themes) {
+      this.applyThemesOnElement(this, this.hass.themes, this._config.theme);
+    }
+  }
+
   renderStyle() {
     return html`
       <style>
@@ -189,6 +200,44 @@ class RokuCard extends LitElement {
       command: e.currentTarget.action
     });
   }
+
+  applyThemesOnElement(element, themes, localTheme) {
+    if (!element._themes) {
+      element._themes = {};
+    }
+    let themeName = themes.default_theme;
+    if (localTheme === "default" || (localTheme && themes.themes[localTheme])) {
+      themeName = localTheme;
+    }
+    const styles = Object.assign({}, element._themes);
+    if (themeName !== "default") {
+      var theme = themes.themes[themeName];
+      Object.keys(theme).forEach(key => {
+        var prefixedKey = "--" + key;
+        element._themes[prefixedKey] = "";
+        styles[prefixedKey] = theme[key];
+      });
+    }
+    if (element.updateStyles) {
+      element.updateStyles(styles);
+    } else if (window.ShadyCSS) {
+      // implement updateStyles() method of Polemer elements
+      window.ShadyCSS.styleSubtree(
+        /** @type {!HTMLElement} */ (element),
+        styles
+      );
+    }
+
+    const meta = document.querySelector("meta[name=theme-color]");
+    if (meta) {
+      if (!meta.hasAttribute("default-content")) {
+        meta.setAttribute("default-content", meta.getAttribute("content"));
+      }
+      const themeColor =
+        styles["--primary-color"] || meta.getAttribute("default-content");
+      meta.setAttribute("content", themeColor);
+    }
+  }
 }
 
 customElements.define("roku-card", RokuCard);