forked from ofekashery/vertical-stack-in-card
-
Notifications
You must be signed in to change notification settings - Fork 0
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
Showing
1 changed file
with
160 additions
and
147 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,163 +1,176 @@ | ||
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(); | ||
} | ||
|
||
async setConfig(config) { | ||
if (!config || !config.cards || !Array.isArray(config.cards)) { | ||
throw new Error('Card config incorrect'); | ||
constructor() { | ||
super(); | ||
// Make use of shadowRoot to avoid conflicts when reusing | ||
this.attachShadow({ mode: 'open' }); | ||
} | ||
this._config = config; | ||
this._refCards = []; | ||
|
||
if (window.loadCardHelpers) { | ||
this.helpers = await window.loadCardHelpers(); | ||
} | ||
setConfig(config) { | ||
if (!config || !config.cards || !Array.isArray(config.cards)) { | ||
throw new Error('Card config incorrect'); | ||
} | ||
|
||
const shadow = this.shadowRoot; | ||
while (shadow.hasChildNodes()) { | ||
shadow.removeChild(shadow.lastChild); | ||
} | ||
|
||
const card = document.createElement("ha-card"); | ||
const cardContent = document.createElement("div"); | ||
|
||
card.header = config.title; | ||
this._refCards = []; | ||
|
||
const _createThing = (tag, config) => { | ||
const element = document.createElement(tag); | ||
try { | ||
element.setConfig(config); | ||
} catch (err) { | ||
console.error(tag, err); | ||
return _createError(err.message, config); | ||
} | ||
return element; | ||
}; | ||
|
||
const _createError = (error, config) => { | ||
return _createThing("hui-error-card", { | ||
type: "error", | ||
error, | ||
config, | ||
}); | ||
}; | ||
|
||
const _fireEvent = (ev, detail, entity=null) => { | ||
ev = new Event(ev, { | ||
bubbles: true, | ||
cancelable: false, | ||
composed: true, | ||
}); | ||
ev.detail = detail || {}; | ||
|
||
if (entity) { | ||
entity.dispatchEvent(ev); | ||
} else { | ||
document | ||
.querySelector("home-assistant") | ||
.shadowRoot.querySelector("home-assistant-main") | ||
.shadowRoot.querySelector("app-drawer-layout partial-panel-resolver") | ||
.shadowRoot.querySelector("ha-panel-lovelace") | ||
.shadowRoot.querySelector("hui-root") | ||
.shadowRoot.querySelector("ha-app-layout #view") | ||
.firstElementChild | ||
.dispatchEvent(ev); | ||
} | ||
} | ||
|
||
this.renderCard(); | ||
} | ||
config.cards.forEach((item) => { | ||
let tag = item.type; | ||
|
||
if (tag.startsWith("divider")) { | ||
tag = `hui-divider-row`; | ||
} else if (tag.startsWith("custom:")) { | ||
tag = tag.substr("custom:".length); | ||
} else { | ||
tag = `hui-${tag}-card`; | ||
} | ||
|
||
if (customElements.get(tag)) { | ||
const element = _createThing(tag, item); | ||
cardContent.appendChild(element); | ||
this._refCards.push(element); | ||
} else { | ||
// If element doesn't exist (yet) create an error | ||
const element = _createError( | ||
`Custom element doesn't exist: ${tag}.`, | ||
item | ||
); | ||
element.style.display = "None"; | ||
|
||
const time = setTimeout(() => { | ||
element.style.display = ""; | ||
}, 2000); | ||
|
||
// Remove error if element is defined later | ||
customElements.whenDefined(tag).then(() => { | ||
clearTimeout(time); | ||
_fireEvent("ll-rebuild", {}, element); | ||
}); | ||
|
||
cardContent.appendChild(element); | ||
this._refCards.push(element); | ||
} | ||
}); | ||
card.appendChild(cardContent); | ||
shadow.appendChild(card); | ||
} | ||
|
||
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); | ||
set hass(hass) { | ||
if (this._refCards) { | ||
this._refCards.forEach((card) => { | ||
card.hass = hass; | ||
}); | ||
} | ||
}); | ||
|
||
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; | ||
} | ||
|
||
connectedCallback() { | ||
this._refCards.forEach((element) => { | ||
let fn = () => { | ||
this._card(element); | ||
}; | ||
|
||
if(element.updateComplete) { | ||
element.updateComplete.then(fn); | ||
} else { | ||
fn(); | ||
} | ||
}); | ||
} | ||
card.appendChild(cardContent); | ||
|
||
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 | ||
}); | ||
}; | ||
|
||
const createThing = (tag, config) => { | ||
if (this.helpers) { | ||
if (config.type === 'divider') { | ||
return this.helpers.createRowElement(config); | ||
} | ||
|
||
_card(element) { | ||
if (element.shadowRoot) { | ||
if (!element.shadowRoot.querySelector('ha-card')) { | ||
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 !== undefined){ | ||
searchEles[i].style.margin = "0px"; | ||
} | ||
this._card(searchEles[i]); | ||
} | ||
} else { | ||
let ele = element.shadowRoot.querySelector('ha-card') | ||
ele.style.boxShadow = 'none'; | ||
ele.style.background = 'transparent'; | ||
ele.style.borderRadius = '0'; | ||
} | ||
} else { | ||
return this.helpers.createCardElement(config); | ||
if (typeof element.querySelector === 'function' && element.querySelector('ha-card')) { | ||
let ele = element.querySelector('ha-card') | ||
ele.style.boxShadow = 'none'; | ||
ele.style.background = 'transparent'; | ||
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._card(searchEles[i]); | ||
} | ||
} | ||
} | ||
|
||
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`; | ||
} | ||
|
||
const element = createThing(tag, cardConfig); | ||
element.hass = this._hass; | ||
element.addEventListener( | ||
'll-rebuild', | ||
(ev) => { | ||
ev.stopPropagation(); | ||
this.createCardElement(cardConfig).then(() => { | ||
this.renderCard(); | ||
getCardSize() { | ||
let totalSize = 0; | ||
this._refCards.forEach((element) => { | ||
totalSize += typeof element.getCardSize === 'function' ? element.getCardSize() : 1; | ||
}); | ||
}, | ||
{ 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]); | ||
} | ||
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); |