From 3e49d0737ffff9471b3eb43f19dbfe192c2b7fbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= Date: Tue, 6 Nov 2018 20:31:14 +0100 Subject: [PATCH] Initial commit --- README.md | 169 +++++++++++++++++++++++++++++++++++++++++++++++++ layout-card.js | 156 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 325 insertions(+) create mode 100644 README.md create mode 100644 layout-card.js diff --git a/README.md b/README.md new file mode 100644 index 0000000..cd77dbd --- /dev/null +++ b/README.md @@ -0,0 +1,169 @@ +layout-card +=========== + +Get more control over the placement of cards + +> You may think of this as a test-drive for the future of default lovelace behavior. As such I appreciate any feedback (even more than usual). Let me know if and how you use this, and we might see it as default behavior in the future. Or something else entirely, who knows... + +## Options + +| Name | Type | Default | Description +| ---- | ---- | ------- | ----------- +| type | string | **Required** | `custom:layout-card` +| cards | list | **Required** | The cards to display +| layout | string | auto | `auto`, `vertical`, `horizontal` +| column\_num | number | none | Number of columns to force + +## Instructions + +This card takes other cards and place them in different layouts. + +The card works best if used in a view with `panel: true`. + +Each layout consists of columns, the number of which is determined by your screen width. The number of columns can also be overridden by setting `column_num`. + +There are three different layouts: + +### `auto` + +This layout works the same way as the default lovelace layout. Cards are automatically added to stacks depending on their height. +That may seem pointless, but trust me, this has it's uses. + +![layout-card 1 - auto](https://user-images.githubusercontent.com/1299821/48088464-62312500-e202-11e8-8ccc-0ef6ac10ec2e.png) +```yaml + - title: Default + panel: true + cards: + - type: custom:layout-card + cards: + - type: entities + title: 1 + entities: + - light.bed_light + - type: entities + title: 2 + entities: + - light.bed_light + - type: entities + title: 3 + entities: + - light.bed_light + - type: entities + title: 4 + entities: + - light.bed_light + - light.bed_light + - light.bed_light + - light.bed_light + - type: entities + title: 5 + entities: + - light.bed_light + - type: entities + title: 6 + entities: + - light.bed_light + - type: entities + title: 7 + entities: + - light.bed_light + - type: entities + title: 8 + entities: + - light.bed_light +``` + +### horizontal + +This layout will place cards in one column at a time, and then move on to the next - horizontally. + +![layout-card 2 - horizontal](https://user-images.githubusercontent.com/1299821/48088463-62312500-e202-11e8-875a-5ff836069017.png) +```yaml + - title: Horizontal + panel: true + cards: + - type: custom:layout-card + layout: horizontal + cards: + - type: entities +``` + +### vertical + +This layout will place cards vertically in one column + +![layout-card 3 - vertical](https://user-images.githubusercontent.com/1299821/48088462-62312500-e202-11e8-8e5e-7f4d1821eeb8.png) +```yaml + - title: Vertical + panel: true + cards: + - type: custom:layout-card + layout: vertical + cards: + - type: entities +``` + +It's OK to think I'm out of my mind at this point, but hang on; let me introduce the `break`. + +Add a `- break` to the list of cards to break the column right there, and move on to the next one. + +![layout-card 4 - manual breaks](https://user-images.githubusercontent.com/1299821/48088461-62312500-e202-11e8-96ab-e4f560f8d4fc.png) +```yaml + - title: Manual breaks + panel: true + cards: + - type: custom:layout-card + layout: vertical + cards: + - type: entities + title: 1 + ... + - type: entities + title: 2 + ... + - break + - type: entities + title: 3 + ... + - break + - type: entities + title: 4 + ... + - type: entities + title: 5 + ... + - type: entities + title: 6 + ... + - break + - type: entities + title: 7 + ... + - type: entities + title: 8 + ... +``` + +Breaks also work with the `horizontal` layout, and even `auto`. Experiment a bit. + +--- + +And as mentioned, use `column_num` to override the number of columns. + +![layout-card 5 - number of columns](https://user-images.githubusercontent.com/1299821/48088460-61988e80-e202-11e8-990f-22c5e0319b43.png) +```yaml + - type: custom:layout-card + layout: auto + column_num: 2 + cards: + ... +``` + +![layout-card 6 - number of columns](https://user-images.githubusercontent.com/1299821/48088459-61988e80-e202-11e8-9694-e7688ce34b5c.png) +```yaml + - type: custom:layout-card + layout: horizontal + column_num: 8 + cards: + ... +``` diff --git a/layout-card.js b/layout-card.js new file mode 100644 index 0000000..121a02e --- /dev/null +++ b/layout-card.js @@ -0,0 +1,156 @@ +class LayoutCard extends Polymer.Element { + + static get template() { + return Polymer.html` + +
+ `; + } + + makeCard(config) { + let tag = config.type; + if(tag.startsWith("custom:")) + tag = tag.substr(7); + else + tag = `hui-${tag}-card`; + let card = document.createElement(tag); + card.setConfig(config); + return card; + } + + setConfig(config) { + this.config = config; + + this.colnum = 0; + this.config.min_height = this.config.minheight || 5; + this.config.column_width = this.config.column_width || 300; + this.config.layout = this.config.layout || 'auto'; + + this._cards = config.cards.map((c) => { + if (typeof c === 'string') return c; + let el = this.makeCard(c); + if (this.hass) el.hass = this.hass; + return el; + }); + + window.addEventListener('resize', () => this._updateColumns()); + window.setTimeout(() => this._updateColumns(), 10); + } + + _updateColumns() { + let numcols = 0; + if (this.config.column_num) { + numcols = this.config.column_num; + } else { + let colWidth = this.config.column_width || 300; + numcols = Math.max(1, + Math.floor(this.$.columns.clientWidth/this.config.column_width)); + } + if(numcols != this.colnum) { + this.colnum = numcols; + this._build(); + } + } + + _build() { + const root = this.$.columns; + while(root.lastChild) root.removeChild(root.lastChild); + + let cols = []; + let colLen = []; + for(let i = 0; i < this.colnum; i++) { + cols.push([]); + colLen.push(0); + } + + let shortest = () => { + let i = 0; + for(let j = 0; j < colLen.length; j++) { + if(colLen[j] < this.config.min_height) { + i = j; + break; + } + if(colLen[j] < colLen[i]) + i = j; + } + return i; + } + + let i = 0; + this._cards.forEach((c) => { + let sz; + if(typeof c !== 'string') { + this.appendChild(c); + sz = typeof c.getCardSize === 'function' ? c.getCardSize() : 1; + } + switch (this.config.layout) { + case 'auto': + if(typeof c === 'string') break; + cols[shortest()].push(c); + colLen[shortest()] += sz; + break; + case 'vertical': + if(typeof c === 'string') { + i += 1; + } else { + if (i >= this.colnum) i = 0; + cols[i].push(c); + colLen[i] += sz; + } + break; + case 'horizontal': + if(c instanceof String) { + i += 1; + } else { + if (i >= this.colnum) i = 0; + cols[i].push(c); + colLen[i] += sz; + i += 1; + } + break; + } + }); + + cols = cols.filter(c => c.length > 0); + let maxlen = 0; + cols.forEach( c => { + const cEl = document.createElement('div'); + cEl.classList.add('column'); + c.filter(e => typeof e !== 'string').forEach(e => cEl.appendChild(e)); + root.appendChild(cEl); + if(c.length > maxlen) maxlen = c.length; + }); + + this.maxlen = maxlen; + } + + set hass(hass) { + this._cards.filter(c => typeof c !== 'string').forEach(c => c.hass = hass); + } + + getCardSize() { + return this.maxlen; + } + +} + +customElements.define('layout-card', LayoutCard);