From 833c23cb4e3913f5114a24acfda73ac5408df389 Mon Sep 17 00:00:00 2001 From: root Date: Sat, 21 Mar 2020 18:19:21 +0000 Subject: [PATCH] Ugly fix for lazy-loaded elements --- .devcontainer/ui-lovelace.yaml | 20 ++++++++++++ src/stack-in-card.ts | 60 ++++++++++++++++++++-------------- 2 files changed, 56 insertions(+), 24 deletions(-) diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml index 08ed1b7..829ed34 100644 --- a/.devcontainer/ui-lovelace.yaml +++ b/.devcontainer/ui-lovelace.yaml @@ -1,8 +1,19 @@ resources: - url: http://127.0.0.1:5000/stack-in-card.js type: module + - url: https://cdn.jsdelivr.net/gh/thomasloven/lovelace-card-mod@master/card-mod.js + type: module views: - cards: + - type: entities + style: | + ha-card { + --ha-card-background: rgb(0,100,182); + color: rgb(217,242,251); + --keep-background: true; + } + entities: + - type: divider - type: custom:stack-in-card title: My Stack In Card mode: vertical @@ -13,6 +24,15 @@ views: entity: sun.sun - type: button entity: sun.sun + - type: entities + style: | + ha-card { + --ha-card-background: rgb(255,100,182); + color: rgb(217,242,251); + --keep-background: true; + } + entities: + - type: divider - type: vertical-stack cards: - type: entities diff --git a/src/stack-in-card.ts b/src/stack-in-card.ts index b768a48..5f727ff 100644 --- a/src/stack-in-card.ts +++ b/src/stack-in-card.ts @@ -1,5 +1,5 @@ import { CARD_VERSION } from './version-const'; -import { LitElement, customElement, property, TemplateResult, html } from 'lit-element'; +import { LitElement, customElement, property, TemplateResult, html, PropertyValues, CSSResult, css } from 'lit-element'; import { ifDefined } from 'lit-html/directives/if-defined'; import { HomeAssistant, LovelaceCardConfig, createThing, LovelaceCard } from 'custom-card-helpers'; import { StackInCardConfig } from './types'; @@ -15,7 +15,7 @@ const HELPERS = (window as any).loadCardHelpers ? (window as any).loadCardHelper @customElement('stack-in-card') // eslint-disable-next-line @typescript-eslint/no-unused-vars -class StackInCard extends LitElement { +class StackInCard extends LitElement implements LovelaceCard { @property() protected _card?: LovelaceCard; @property() private _config?: StackInCardConfig; @@ -31,7 +31,7 @@ class StackInCard extends LitElement { public setConfig(config: StackInCardConfig): void { if (!config.cards) { - throw new Error(`There is no card parameter defined`); + throw new Error(`There is no cards parameter defined`); } this._config = { mode: 'vertical', @@ -42,7 +42,10 @@ class StackInCard extends LitElement { cards: this._config.cards, }).then(card => { this._card = card; - this._waitForChildren(this._card); + this._waitForChildren(card, false); + window.setTimeout(() => { + this._waitForChildren(card, true); + }, 500); }); } @@ -58,51 +61,56 @@ class StackInCard extends LitElement { `; } - private _updateStyle(e: LovelaceCard | null): void { + private _updateStyle(e: LovelaceCard | null, withBg: boolean): void { if (!e) return; e.style.boxShadow = 'none'; - if (getComputedStyle(e).getPropertyValue('--keep-background') !== 'true') { + if ( + withBg && + getComputedStyle(e) + .getPropertyValue('--keep-background') + .trim() !== 'true' + ) { e.style.background = 'transparent'; } e.style.borderRadius = '0'; } - private _loopChildren(e: LovelaceCard): void { + private _loopChildren(e: LovelaceCard, withBg: boolean): void { const searchElements = e.childNodes; searchElements.forEach(childE => { if ((childE as LovelaceCard).style) { (childE as LovelaceCard).style.margin = '0px'; } - this._waitForChildren(childE as LovelaceCard); + this._waitForChildren(childE as LovelaceCard, withBg); }); } - private _updateChildren(element: LovelaceCard | undefined): void { + private _updateChildren(element: LovelaceCard | undefined, withBg: boolean): void { if (!element) return; if (element.shadowRoot) { const card = element.shadowRoot.querySelector('ha-card') as LovelaceCard; if (!card) { const searchEles = element.shadowRoot.getElementById('root') || element.shadowRoot.getElementById('card'); if (!searchEles) return; - this._loopChildren(searchEles as LovelaceCard); + this._loopChildren(searchEles as LovelaceCard, withBg); } else { - this._updateStyle(card); + this._updateStyle(card, withBg); } } else { if (typeof element.querySelector === 'function' && element.querySelector('ha-card')) { - this._updateStyle(element.querySelector('ha-card')); + this._updateStyle(element.querySelector('ha-card'), withBg); } - this._loopChildren(element as LovelaceCard); + this._loopChildren(element as LovelaceCard, withBg); } } - private _waitForChildren(element: LovelaceCard | undefined): void { + private _waitForChildren(element: LovelaceCard | undefined, withBg: boolean): void { if (((element as unknown) as LitElement).updateComplete) { ((element as unknown) as LitElement).updateComplete.then(() => { - this._updateChildren(element); + this._updateChildren(element, withBg); }); } else { - this._updateChildren(element); + this._updateChildren(element, withBg); } } @@ -116,20 +124,24 @@ class StackInCard extends LitElement { if (this._hass) { element.hass = this._hass; } - element.addEventListener( - 'll-rebuild', - ev => { - ev.stopPropagation(); - this._rebuildCard(element, config); - }, - { once: true }, - ); + if (element) { + element.addEventListener( + 'll-rebuild', + ev => { + ev.stopPropagation(); + this._rebuildCard(element, config); + }, + { once: true }, + ); + } return element; } private async _rebuildCard(element: LovelaceCard, config: LovelaceCardConfig): Promise { const newCard = await this._createCard(config); element.replaceWith(newCard); + this._card = newCard; + this._waitForChildren(this._card, true); return newCard; }