-
Notifications
You must be signed in to change notification settings - Fork 80
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0e6fbb5
commit d0cb3bf
Showing
2 changed files
with
141 additions
and
140 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| 0.3.2 | ||
| 0.3.3 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,162 +1,163 @@ | ||
| const vsinVersion = '0.3.2'; | ||
| const vsinVersion = '0.3.3'; | ||
| console.log(`%cvertical-stack-in-card\n%cVersion: ${vsinVersion}`, 'color: #1976d2; font-weight: bold;', ''); | ||
|
|
||
| class VerticalStackInCard extends HTMLElement { | ||
| constructor() { | ||
| super(); | ||
| constructor() { | ||
| super(); | ||
| } | ||
|
|
||
| async setConfig(config) { | ||
| if (!config || !config.cards || !Array.isArray(config.cards)) { | ||
| throw new Error('Card config incorrect'); | ||
| } | ||
| this._config = config; | ||
| this._refCards = []; | ||
|
|
||
| async setConfig(config) { | ||
| if (!config || !config.cards || !Array.isArray(config.cards)) { | ||
| throw new Error('Card config incorrect'); | ||
| } | ||
| this._config = config; | ||
| this._refCards = []; | ||
| if (window.loadCardHelpers) { | ||
| this.helpers = await window.loadCardHelpers(); | ||
| } | ||
|
|
||
| if (window.loadCardHelpers) { | ||
| this.helpers = await window.loadCardHelpers(); | ||
| this.renderCard(); | ||
| } | ||
|
|
||
| renderCard() { | ||
| const config = this._config; | ||
| const promises = config.cards.map((config) => this.createCardElement(config)); | ||
| Promise.all(promises).then((cards) => { | ||
| cards.forEach((card) => { | ||
| if (card.updateComplete) { | ||
| card.updateComplete.then(() => this.styleCard(card)); | ||
| } else { | ||
| this.styleCard(card); | ||
| } | ||
| }); | ||
|
|
||
| this.renderCard(); | ||
| } | ||
| this._refCards = cards; | ||
| const card = document.createElement('ha-card'); | ||
| const cardContent = document.createElement('div'); | ||
| card.header = config.title; | ||
| card.style.overflow = 'hidden'; | ||
| cards.forEach((card) => cardContent.appendChild(card)); | ||
| if (config.horizontal) { | ||
| cardContent.style.display = 'flex'; | ||
| cardContent.childNodes.forEach((card) => { | ||
| card.style.flex = '1 1 0'; | ||
| card.style.minWidth = 0; | ||
| }); | ||
| } | ||
| card.appendChild(cardContent); | ||
|
|
||
| renderCard() { | ||
| const config = this._config; | ||
| const promises = config.cards.map(config => this.createCardElement(config)); | ||
| Promise.all(promises).then((cards) => { | ||
| cards.forEach(card => { | ||
| if (card.updateComplete) { | ||
| card.updateComplete.then(() => this.styleCard(card)); | ||
| } else { | ||
| this.styleCard(card); | ||
| } | ||
| }); | ||
|
|
||
| this._refCards = cards; | ||
| const card = document.createElement('ha-card'); | ||
| const cardContent = document.createElement('div'); | ||
| card.header = config.title; | ||
| cards.forEach(card => cardContent.appendChild(card)); | ||
| if (config.horizontal) { | ||
| cardContent.style.display = 'flex'; | ||
| cardContent.childNodes.forEach(card => { | ||
| card.style.flex = '1 1 0'; | ||
| card.style.minWidth = 0; | ||
| }); | ||
| } | ||
| card.appendChild(cardContent); | ||
|
|
||
| while (this.hasChildNodes()) { | ||
| this.removeChild(this.lastChild); | ||
| } | ||
| this.appendChild(card); | ||
| }) | ||
| } | ||
| while (this.hasChildNodes()) { | ||
| this.removeChild(this.lastChild); | ||
| } | ||
| this.appendChild(card); | ||
| }); | ||
| } | ||
|
|
||
| async createCardElement(cardConfig) { | ||
| const createError = (error, origConfig) => { | ||
| return createThing('hui-error-card', { | ||
| type: 'error', | ||
| error, | ||
| origConfig | ||
| }); | ||
| }; | ||
|
|
||
| async createCardElement(cardConfig) { | ||
| const createError = (error, config) => { | ||
| return createThing('hui-error-card', { | ||
| type: 'error', | ||
| error, | ||
| config, | ||
| }); | ||
| }; | ||
|
|
||
| const createThing = (tag, config) => { | ||
| if (this.helpers) { | ||
| if (config.type === 'divider') { | ||
| return this.helpers.createRowElement(config) | ||
| } else { | ||
| return this.helpers.createCardElement(config); | ||
| } | ||
| } | ||
|
|
||
| const element = document.createElement(tag); | ||
| try { | ||
| element.setConfig(config); | ||
| } catch (err) { | ||
| console.error(tag, err); | ||
| return createError(err.message, config); | ||
| } | ||
| return element; | ||
| }; | ||
|
|
||
| let tag = cardConfig.type; | ||
| if (tag.startsWith('divider')) { | ||
| tag = `hui-divider-row`; | ||
| } else if (tag.startsWith('custom:')) { | ||
| tag = tag.substr('custom:'.length); | ||
| const createThing = (tag, config) => { | ||
| if (this.helpers) { | ||
| if (config.type === 'divider') { | ||
| return this.helpers.createRowElement(config); | ||
| } else { | ||
| tag = `hui-${tag}-card`; | ||
| return this.helpers.createCardElement(config); | ||
| } | ||
| } | ||
|
|
||
| const element = createThing(tag, cardConfig); | ||
| element.hass = this._hass; | ||
| element.addEventListener( | ||
| 'll-rebuild', | ||
| ev => { | ||
| ev.stopPropagation(); | ||
| this.createCardElement(cardConfig).then(() => { | ||
| this.renderCard(); | ||
| }); | ||
| }, | ||
| { once: true }, | ||
| ); | ||
| return element; | ||
| const element = document.createElement(tag); | ||
| try { | ||
| element.setConfig(config); | ||
| } catch (err) { | ||
| console.error(tag, err); | ||
| return createError(err.message, config); | ||
| } | ||
| return element; | ||
| }; | ||
|
|
||
| let tag = cardConfig.type; | ||
| if (tag.startsWith('divider')) { | ||
| tag = `hui-divider-row`; | ||
| } else if (tag.startsWith('custom:')) { | ||
| tag = tag.substr('custom:'.length); | ||
| } else { | ||
| tag = `hui-${tag}-card`; | ||
| } | ||
|
|
||
| set hass(hass) { | ||
| this._hass = hass | ||
| if (this._refCards) { | ||
| this._refCards.forEach((card) => { | ||
| card.hass = hass; | ||
| }); | ||
| } | ||
| const element = createThing(tag, cardConfig); | ||
| element.hass = this._hass; | ||
| element.addEventListener( | ||
| 'll-rebuild', | ||
| (ev) => { | ||
| ev.stopPropagation(); | ||
| this.createCardElement(cardConfig).then(() => { | ||
| this.renderCard(); | ||
| }); | ||
| }, | ||
| { once: true } | ||
| ); | ||
| return element; | ||
| } | ||
|
|
||
| set hass(hass) { | ||
| this._hass = hass; | ||
| if (this._refCards) { | ||
| this._refCards.forEach((card) => { | ||
| card.hass = hass; | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| styleCard(element) { | ||
| if (element.shadowRoot) { | ||
| if (element.shadowRoot.querySelector('ha-card')) { | ||
| let ele = element.shadowRoot.querySelector('ha-card') | ||
| ele.style.boxShadow = 'none'; | ||
| // ele.style.borderRadius = '0'; | ||
| } else { | ||
| let searchEles = element.shadowRoot.getElementById('root'); | ||
| if (!searchEles) { | ||
| searchEles = element.shadowRoot.getElementById('card'); | ||
| } | ||
| if (!searchEles) return; | ||
| searchEles = searchEles.childNodes; | ||
| for (let i = 0; i < searchEles.length; i++) { | ||
| if (searchEles[i].style){ | ||
| searchEles[i].style.margin = '0px'; | ||
| } | ||
| this.styleCard(searchEles[i]); | ||
| } | ||
| } | ||
| } else { | ||
| if (typeof element.querySelector === 'function' && element.querySelector('ha-card')) { | ||
| let ele = element.querySelector('ha-card') | ||
| ele.style.boxShadow = 'none'; | ||
| // ele.style.borderRadius = '0'; | ||
| } | ||
| let searchEles = element.childNodes; | ||
| for (let i = 0; i < searchEles.length; i++) { | ||
| if (searchEles[i] && searchEles[i].style) { | ||
| searchEles[i].style.margin = '0px'; | ||
| } | ||
| this.styleCard(searchEles[i]); | ||
| } | ||
| styleCard(element) { | ||
| if (element.shadowRoot) { | ||
| if (element.shadowRoot.querySelector('ha-card')) { | ||
| let ele = element.shadowRoot.querySelector('ha-card'); | ||
| ele.style.boxShadow = 'none'; | ||
| ele.style.borderRadius = '0'; | ||
| } else { | ||
| let searchEles = element.shadowRoot.getElementById('root'); | ||
| if (!searchEles) { | ||
| searchEles = element.shadowRoot.getElementById('card'); | ||
| } | ||
| if (!searchEles) return; | ||
| searchEles = searchEles.childNodes; | ||
| for (let i = 0; i < searchEles.length; i++) { | ||
| if (searchEles[i].style) { | ||
| searchEles[i].style.margin = '0px'; | ||
| } | ||
| this.styleCard(searchEles[i]); | ||
| } | ||
| } | ||
| } else { | ||
| if (typeof element.querySelector === 'function' && element.querySelector('ha-card')) { | ||
| let ele = element.querySelector('ha-card'); | ||
| ele.style.boxShadow = 'none'; | ||
| ele.style.borderRadius = '0'; | ||
| } | ||
| let searchEles = element.childNodes; | ||
| for (let i = 0; i < searchEles.length; i++) { | ||
| if (searchEles[i] && searchEles[i].style) { | ||
| searchEles[i].style.margin = '0px'; | ||
| } | ||
| this.styleCard(searchEles[i]); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| getCardSize() { | ||
| let totalSize = 0; | ||
| this._refCards.forEach((element) => { | ||
| totalSize += typeof element.getCardSize === 'function' ? element.getCardSize() : 1; | ||
| }); | ||
| return totalSize; | ||
| } | ||
| getCardSize() { | ||
| let totalSize = 0; | ||
| this._refCards.forEach((element) => { | ||
| totalSize += typeof element.getCardSize === 'function' ? element.getCardSize() : 1; | ||
| }); | ||
| return totalSize; | ||
| } | ||
| } | ||
|
|
||
| customElements.define('vertical-stack-in-card', VerticalStackInCard); |