Skip to content

Commit

Permalink
Better update on parent update
Browse files Browse the repository at this point in the history
  • Loading branch information
thomasloven committed Feb 27, 2021
1 parent 3c7992e commit 6403008
Show file tree
Hide file tree
Showing 7 changed files with 78 additions and 15 deletions.
4 changes: 2 additions & 2 deletions card-mod.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "card-mod",
"private": true,
"version": "3.0.2",
"version": "3.0.3",
"description": "",
"scripts": {
"build": "rollup -c",
Expand Down
2 changes: 1 addition & 1 deletion rollup.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default {
input: "src/main.ts",
output: {
file: "card-mod.js",
format: "iife",
format: "es",
},
plugins: [
nodeResolve(),
Expand Down
57 changes: 47 additions & 10 deletions src/card-mod.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@ import { bind_template, unbind_template } from "./templates";
import { hasTemplate } from "card-tools/src/templates";
import pjson from "../package.json";
import { selectTree } from "card-tools/src/helpers";
import { applyToElement, get_theme, merge_deep, Styles } from "./helpers";
import {
applyToElement,
get_theme,
merge_deep,
parentElement,
Styles,
} from "./helpers";

export class CardMod extends LitElement {
type: string;
Expand All @@ -14,11 +20,25 @@ export class CardMod extends LitElement {
_renderer: (_: string) => void;
_styleChildren: Set<CardMod> = new Set();
_input_styles: Styles;
_refreshCooldown = { running: false, repeat: false };

_observer: MutationObserver = new MutationObserver((mutations) => {
if (mutations.some((m) => (m.target as Element).localName !== "card-mod")) {
this.refresh();
for (const m of mutations) {
if ((m.target as any).localName === "card-mod") return;
let stop = true;
if (m.addedNodes.length)
m.addedNodes.forEach((n) => {
if ((n as any).localName !== "card-mod") stop = false;
});
if (stop) return;
stop = true;
if (m.removedNodes.length)
m.removedNodes.forEach((n) => {
if ((n as any).localName !== "card-mod") stop = false;
});
}

this.refresh();
});

static get applyToElement() {
Expand Down Expand Up @@ -48,9 +68,17 @@ export class CardMod extends LitElement {
this.refresh();
}

async refresh() {
await this._disconnect();
this._connect(this._input_styles);
refresh() {
if (this._refreshCooldown.running) {
this._refreshCooldown.repeat = true;
return;
}
window.setTimeout(() => {
this._refreshCooldown.running = false;
if (this._refreshCooldown.repeat) this.refresh();
}, 1);
this._refreshCooldown.repeat = false;
this._disconnect().then(() => this._connect(this._input_styles));
}

private async _connect(stl: Styles) {
Expand Down Expand Up @@ -89,10 +117,19 @@ export class CardMod extends LitElement {
this._style_rendered((this._styles as string) || "");
}

this._observer.observe(
(parent as any).host ? (parent as any).host : parent,
{ childList: true }
);
this._observer.observe(parentElement(this), { childList: true });

const p = parentElement(parentElement(this)) as any;
this._observer.observe(p, { childList: true });
if (p && p.updated && !p._cm_update_patched) {
const _updated = p.updated;
const _this = this;
p.updated = function (param) {
_updated.bind(this)(param);
this.updateComplete.then(() => _this.refresh());
};
p._cm_update_patched = true;
}
}

private async _disconnect() {
Expand Down
6 changes: 6 additions & 0 deletions src/helpers.ts
Original file line number Diff line number Diff line change
Expand Up @@ -129,3 +129,9 @@ export async function findParentCardMod(
joinSet(cardMods, await findParentCardMod((node as any).host, step + 1));
return cardMods;
}

export function parentElement(el: Node): Node {
if (!el) return undefined;
const node = el.parentElement || el.parentNode;
return (node as any).host ? (node as any).host : node;
}
20 changes: 20 additions & 0 deletions test/views/5_dom_navigation.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ cards:
- <<: *desc
content: |
## Overriding DOM navigation
[Forum issue](https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/1449)
First two icons red
Third icon green
- type: entities
Expand Down Expand Up @@ -153,3 +154,22 @@ cards:
ha-svg-icon {
color: red;
}
- type: vertical-stack
cards:
- <<: *desc
content: |
## Slow to load elements
[Github issue](https://github.com/thomasloven/lovelace-card-mod/issues/11)
Red Map Markers
- type: map
entities:
- device_tracker.demo_paulus
- device_tracker.demo_anne_therese
card_mod:
style:
ha-entity-marker:
$: |
.marker {
background: red;
}
hours_to_show: 1

0 comments on commit 6403008

Please sign in to comment.