thomas/lovelace-card-mod
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improved mod-card. Added report_size option, fix #17

Browse Source
This commit is contained in:
Thomas Lovén 2020-01-08 09:59:03 +01:00
parent 35d61368cc
commit 028a1d1986
3 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
README.md
View File

@ -246,6 +246,19 @@ card:
``` ```
![mod-card](https://user-images.githubusercontent.com/1299821/68621707-b71c1100-04d0-11ea-8473-965dbd77b762.png) ![mod-card](https://user-images.githubusercontent.com/1299821/68621707-b71c1100-04d0-11ea-8473-965dbd77b762.png)
> Note: mod-card sets it's own `background` to `transparent`. That means, `--ha-card-background` will have no effect on mod-card itself. Instead, you ahve to modify the `background` property directly.
Mod-card also allows you to manually specify a `cardHeight` of a card. This can be used to slightly modify the behavior of the layout engine of lovelace. See [this description](https://github.com/thomasloven/lovelace-layout-card#auto-layout) for details.
The cardHeight is set with the `report_size:` option:
```yaml
type: custom:mod-card
report_size: 5
card:
... etc ...
```
# FAQ # FAQ
### How do I convert my old card-modder configuration to card-mod? ### How do I convert my old card-modder configuration to card-mod?

9
card-mod.js
View File

File diff suppressed because one or more lines are too long

28
src/mod-card.js
View File

@ -1,5 +1,6 @@
import { LitElement, html, css} from "card-tools/src/lit-element"; import { LitElement, html} from "card-tools/src/lit-element";
import "card-tools/src/card-maker"; import { createCard } from "card-tools/src/lovelace-element";
import { hass } from "card-tools/src/hass";
const NO_STYLE = ` const NO_STYLE = `
ha-card { ha-card {
@ -26,18 +27,33 @@ class ModCard extends LitElement {
this._config.style["."] = NO_STYLE; this._config.style["."] = NO_STYLE;
} }
this.card = createCard(this._config.card);
this.card.hass = hass();
} }
render() { render() {
return html` return html`
<ha-card modcard> <ha-card modcard>
<card-maker ${this.card}
.config=${this._config.card}
.hass=${this.hass}
></card-maker>
</ha-card> </ha-card>
`; `;
} }
set hass(hass) {
if(!this.card) return;
this.card.hass = hass;
}
getCardSize() {
if(this._config.report_size)
return this._config.report_size;
let ret = this.shadowRoot;
if(ret) ret = ret.querySelector("ha-card card-maker");
if(ret) ret = ret.getCardSize;
if(ret) ret = ret();
if(ret) return ret;
return 1;
}
} }
customElements.define("mod-card", ModCard); customElements.define("mod-card", ModCard);