Skip to content

Commit

Permalink
📺 added card theme
Browse files Browse the repository at this point in the history
  • Loading branch information
iantrich committed Jan 25, 2019
1 parent 12d1dcd commit b31099c
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 4 deletions.
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -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)](#)

Expand All @@ -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

Expand Down Expand Up @@ -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)
26 changes: 24 additions & 2 deletions roku-card-editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -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``;
Expand Down Expand Up @@ -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>
`;
Expand Down Expand Up @@ -101,4 +123,4 @@ export class RokuCardEditor extends LitElement {
}
}

customElements.define("roku-card-editor", RokuCardEditor);
customElements.define("roku-card-editor", RokuCardEditor);
51 changes: 50 additions & 1 deletion roku-card.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ class RokuCard extends LitElement {
return;
}

this._config = config;
this._config = { theme: "default", ...config };
}

render() {
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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);

0 comments on commit b31099c

Please sign in to comment.