138 lines
3.1 KiB
JavaScript
138 lines
3.1 KiB
JavaScript
class FoldRow extends Polymer.Element {
|
|
|
|
static get template() {
|
|
return Polymer.html`
|
|
<style>
|
|
li, ul {
|
|
list-style: none;
|
|
}
|
|
ul {
|
|
transition: max-height 0.5s;
|
|
-webkit-transition: max-height 0.5s;
|
|
overflow: hidden;
|
|
padding: 0 0 0 40px;
|
|
margin: 0;
|
|
}
|
|
.closed > ul {
|
|
max-height: 0;
|
|
}
|
|
.open > ul {
|
|
max-height: 40px;
|
|
}
|
|
#head {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.toggle {
|
|
width: 40px;
|
|
height: 40px;
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
.toggle ha-icon {
|
|
flex: 0 0 40px;
|
|
}
|
|
</style>
|
|
<div id=head>
|
|
<div class=toggle on-click="doToggle">
|
|
<ha-icon icon="[[_icon]]"></ha-icon>
|
|
</div>
|
|
</div>
|
|
<li id="rows" class="closed">
|
|
</li>
|
|
`
|
|
}
|
|
|
|
update() {
|
|
this._icon = this.closed ? 'mdi:menu-right' : 'mdi:menu-down';
|
|
if(this.$)
|
|
this.$.rows.className = this.closed ? 'closed' : 'open';
|
|
|
|
}
|
|
|
|
doToggle(ev) {
|
|
this.closed = !this.closed;
|
|
this.update();
|
|
ev.stopPropagation();
|
|
}
|
|
|
|
|
|
ready() {
|
|
super.ready();
|
|
let conf = [];
|
|
let head = this._config.head;
|
|
let items = this._config.items;
|
|
if(typeof head === 'string') {
|
|
head = {entity: head};
|
|
}
|
|
conf.push(head);
|
|
if(head.entity && head.entity.startsWith('group')) {
|
|
items = this._hass.states[head.entity].attributes.entity_id;
|
|
}
|
|
items.forEach((i) => {
|
|
if(typeof i === 'string') i = {entity: i};
|
|
conf.push(Object.assign(i, this._config.group_config));
|
|
});
|
|
|
|
this.dummy = document.createElement('hui-entities-card');
|
|
this.dummy.setConfig({entities: conf});
|
|
this.dummy.hass = this._hass;
|
|
this.appendChild(this.dummy);
|
|
|
|
let divs = this.dummy.shadowRoot.querySelector("ha-card").querySelector("#states");
|
|
let header = divs.firstChild;
|
|
header.style.width = '100%';
|
|
this._addHeader(header, conf.shift());
|
|
while(divs.firstChild) {
|
|
this._addRow(divs.firstChild, conf.shift());
|
|
}
|
|
|
|
this.removeChild(this.dummy);
|
|
|
|
this.update();
|
|
|
|
}
|
|
|
|
|
|
|
|
_addHeader(row, data)
|
|
{
|
|
this.$.head.appendChild(row);
|
|
}
|
|
_addRow(row, data)
|
|
{
|
|
let item = document.createElement('ul');
|
|
item.appendChild(row);
|
|
row.classList.add('state-card-dialog');
|
|
row.addEventListener('click', (e) => {
|
|
let ev = new Event('hass-more-info', {
|
|
bubbles: true,
|
|
cancelable: false,
|
|
composed: true,
|
|
});
|
|
const entityId = data.entity;
|
|
ev.detail = { entityId };
|
|
this.dispatchEvent(ev);
|
|
e.stopPropagation();
|
|
});
|
|
this.$.rows.appendChild(item);
|
|
}
|
|
|
|
setConfig(config) {
|
|
if (config.entity || config.config) {
|
|
throw new Error("Breaking changes have been introduced. Please see https://github.com/thomasloven/lovelace-fold-entity-row");
|
|
}
|
|
this._config = config;
|
|
this.closed = !this._config.open;
|
|
this.update();
|
|
}
|
|
|
|
set hass(hass) {
|
|
this._hass = hass;
|
|
if(this.dummy)
|
|
this.dummy.hass = hass;
|
|
}
|
|
}
|
|
|
|
customElements.define('fold-entity-row', FoldRow);
|