From 912be51849d131df745feacebb6ec60fac272baf Mon Sep 17 00:00:00 2001 From: DBuit Date: Sat, 1 Aug 2020 18:29:41 +0200 Subject: [PATCH] Update card-tools --- dist/thermostat-popup-card.js | 1066 +++++++++++++++++---------------- package-lock.json | 4 +- package.json | 2 +- 3 files changed, 551 insertions(+), 521 deletions(-) diff --git a/dist/thermostat-popup-card.js b/dist/thermostat-popup-card.js index 1fddb30..98435cb 100644 --- a/dist/thermostat-popup-card.js +++ b/dist/thermostat-popup-card.js @@ -60,7 +60,6 @@ const directive = (f) => ((...args) => { const isDirective = (o) => { return typeof o === 'function' && directives.has(o); }; -//# sourceMappingURL=directive.js.map /** * @license @@ -104,7 +103,6 @@ const removeNodes = (container, start, end = null) => { start = n; } }; -//# sourceMappingURL=dom.js.map /** * @license @@ -128,7 +126,6 @@ const noChange = {}; * A sentinel value that signals a NodePart to fully clear its content. */ const nothing = {}; -//# sourceMappingURL=part.js.map /** * @license @@ -342,7 +339,6 @@ const createMarker = () => document.createComment(''); * * (') then any non-(') */ const lastAttributeNameRegex = /([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/; -//# sourceMappingURL=template.js.map /** * @license @@ -475,7 +471,6 @@ class TemplateInstance { return fragment; } } -//# sourceMappingURL=template-instance.js.map /** * @license @@ -584,7 +579,6 @@ class SVGTemplateResult extends TemplateResult { return template; } } -//# sourceMappingURL=template-result.js.map /** * @license @@ -1024,7 +1018,6 @@ const getOptions = (o) => o && (eventOptionsSupported ? { capture: o.capture, passive: o.passive, once: o.once } : o.capture); -//# sourceMappingURL=parts.js.map /** * @license @@ -1076,7 +1069,6 @@ class DefaultTemplateProcessor { } } const defaultTemplateProcessor = new DefaultTemplateProcessor(); -//# sourceMappingURL=default-template-processor.js.map /** * @license @@ -1124,7 +1116,6 @@ function templateFactory(result) { return template; } const templateCaches = new Map(); -//# sourceMappingURL=template-factory.js.map /** * @license @@ -1165,7 +1156,6 @@ const render = (result, container, options) => { part.setValue(result); part.commit(); }; -//# sourceMappingURL=render.js.map /** * @license @@ -1194,7 +1184,6 @@ const html = (strings, ...values) => new TemplateResult(strings, values, 'html', * render to and update a container. */ const svg = (strings, ...values) => new SVGTemplateResult(strings, values, 'svg', defaultTemplateProcessor); -//# sourceMappingURL=lit-html.js.map /** * @license @@ -1319,7 +1308,6 @@ function insertNodeIntoTemplate(template, node, refNode = null) { } } } -//# sourceMappingURL=modify-template.js.map /** * @license @@ -1589,7 +1577,6 @@ const render$1 = (result, container, options) => { window.ShadyCSS.styleElement(container.host); } }; -//# sourceMappingURL=shady-render.js.map /** * @license @@ -2215,7 +2202,6 @@ _a = finalized; * Marks class as having finished creating properties. */ UpdatingElement[_a] = true; -//# sourceMappingURL=updating-element.js.map /** @license @@ -2279,7 +2265,6 @@ const css = (strings, ...values) => { const cssText = values.reduce((acc, v, idx) => acc + textFromCSSResult(v) + strings[idx + 1], strings[0]); return new CSSResult(cssText, constructionToken); }; -//# sourceMappingURL=css-tag.js.map /** * @license @@ -2477,7 +2462,6 @@ LitElement['finalized'] = true; * @nocollapse */ LitElement.render = render$1; -//# sourceMappingURL=lit-element.js.map /** * @license @@ -2539,64 +2523,110 @@ const classMap = directive((classInfo) => (part) => { } classMapCache.set(part, classInfo); }); -//# sourceMappingURL=class-map.js.map -function hass() { - if(document.querySelector('hc-main')) - return document.querySelector('hc-main').hass; - - if(document.querySelector('home-assistant')) - return document.querySelector('home-assistant').hass; - - return undefined; +function hass() { + if(document.querySelector('hc-main')) + return document.querySelector('hc-main').hass; + + if(document.querySelector('home-assistant')) + return document.querySelector('home-assistant').hass; + + return undefined; +} +async function load_lovelace() { + if(customElements.get("hui-view")) return true; + + await customElements.whenDefined("partial-panel-resolver"); + const ppr = document.createElement("partial-panel-resolver"); + ppr.hass = {panels: [{ + url_path: "tmp", + "component_name": "lovelace", + }]}; + ppr._updateRoutes(); + await ppr.routerOptions.routes.tmp.load(); + if(!customElements.get("ha-panel-lovelace")) return false; + const p = document.createElement("ha-panel-lovelace"); + p.hass = hass(); + if(p.hass === undefined) { + await new Promise(resolve => { + window.addEventListener('connection-status', (ev) => { + console.log(ev); + resolve(); + }, {once: true}); + }); + p.hass = hass(); + } + p.panel = {config: {mode: null}}; + p._fetchConfig(); + return true; } -function load_lovelace() { - if(customElements.get("hui-view")) return true; - const res = document.createElement("partial-panel-resolver"); - res.hass = hass(); - if(!res.hass || !res.hass.panels) - return false; - res.route = {path: "/lovelace/"}; - res._updateRoutes(); - try { - document.querySelector("home-assistant").appendChild(res); - } catch (error) { - } finally { - document.querySelector("home-assistant").removeChild(res); - } - if(customElements.get("hui-view")) return true; - return false; +async function _selectTree(root, path, all=false) { + let el = root; + if(typeof(path) === "string") { + path = path.split(/(\$| )/); + } + for(const [i, p] of path.entries()) { + if(!p.trim().length) continue; + if(!el) return null; + if(el.localName && el.localName.includes("-")) + await customElements.whenDefined(el.localName); + if(el.updateComplete) + await el.updateComplete; + if(p === "$") + if(all && i == path.length-1) + el = [el.shadowRoot]; + else + el = el.shadowRoot; + else + if(all && i == path.length-1) + el = el.querySelectorAll(p); + else + el = el.querySelector(p); + } + return el; +} + +async function selectTree(root, path, all=false, timeout=10000) { + return Promise.race([ + _selectTree(root, path, all), + new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), timeout)) + ]).catch((err) => { + if(!err.message || err.message !== "timeout") + throw(err); + return null; + }); } -let helpers = window.cardHelpers; -const helperPromise = new Promise(async (resolve, reject) => { - if(helpers) resolve(); - - const updateHelpers = async () => { - helpers = await window.loadCardHelpers(); - window.cardHelpers = helpers; - resolve(); - }; - - if(window.loadCardHelpers) { - updateHelpers(); - } else { - // If loadCardHelpers didn't exist, force load lovelace and try once more. - window.addEventListener("load", async () => { - load_lovelace(); - if(window.loadCardHelpers) { - updateHelpers(); - } - }); - } +let helpers = window.cardHelpers; +const helperPromise = new Promise(async (resolve, reject) => { + if(helpers) resolve(); + + const updateHelpers = async () => { + helpers = await window.loadCardHelpers(); + window.cardHelpers = helpers; + resolve(); + }; + + if(window.loadCardHelpers) { + updateHelpers(); + } else { + // If loadCardHelpers didn't exist, force load lovelace and try once more. + window.addEventListener("load", async () => { + load_lovelace(); + if(window.loadCardHelpers) { + updateHelpers(); + } + }); + } }); -function closePopUp() { - const root = document.querySelector("hc-main") || document.querySelector("home-assistant"); - const moreInfoEl = root && root._moreInfoEl; - if(moreInfoEl) - moreInfoEl.close(); +async function closePopUp() { + const root = document.querySelector("home-assistant") || document.querySelector("hc-root"); + const el = await selectTree(root, "$ card-tools-popup"); + + if(el) + el.closeDialog(); } /** @@ -2926,7 +2956,7 @@ fecha.parse = function (dateStr, format, i18nSettings) { return date; }; -var a=function(){try{(new Date).toLocaleDateString("i");}catch(e){return "RangeError"===e.name}return !1}()?function(e,t){return e.toLocaleDateString(t,{year:"numeric",month:"long",day:"numeric"})}:function(t){return fecha.format(t,"mediumDate")},n=function(){try{(new Date).toLocaleString("i");}catch(e){return "RangeError"===e.name}return !1}()?function(e,t){return e.toLocaleString(t,{year:"numeric",month:"long",day:"numeric",hour:"numeric",minute:"2-digit"})}:function(t){return fecha.format(t,"haDateTime")},r=function(){try{(new Date).toLocaleTimeString("i");}catch(e){return "RangeError"===e.name}return !1}()?function(e,t){return e.toLocaleTimeString(t,{hour:"numeric",minute:"2-digit"})}:function(t){return fecha.format(t,"shortTime")};var p=function(e){return e.substr(e.indexOf(".")+1)};var y=function(e){return void 0===e.attributes.friendly_name?p(e.entity_id).replace(/_/g," "):e.attributes.friendly_name||""};//# sourceMappingURL=index.m.js.map +var a=function(){try{(new Date).toLocaleDateString("i");}catch(e){return "RangeError"===e.name}return !1}()?function(e,t){return e.toLocaleDateString(t,{year:"numeric",month:"long",day:"numeric"})}:function(t){return fecha.format(t,"mediumDate")},n=function(){try{(new Date).toLocaleString("i");}catch(e){return "RangeError"===e.name}return !1}()?function(e,t){return e.toLocaleString(t,{year:"numeric",month:"long",day:"numeric",hour:"numeric",minute:"2-digit"})}:function(t){return fecha.format(t,"haDateTime")},r=function(){try{(new Date).toLocaleTimeString("i");}catch(e){return "RangeError"===e.name}return !1}()?function(e,t){return e.toLocaleTimeString(t,{hour:"numeric",minute:"2-digit"})}:function(t){return fecha.format(t,"shortTime")};var p=function(e){return e.substr(e.indexOf(".")+1)};var y=function(e){return void 0===e.attributes.friendly_name?p(e.entity_id).replace(/_/g," "):e.attributes.friendly_name||""}; class ThermostatPopupCard extends LitElement { constructor() { @@ -3013,119 +3043,119 @@ class ThermostatPopupCard extends LitElement { } } } - return html ` -
-
- + ${this.settings ? html ` +
+ ${this.settingsCustomCard ? html ` + + + ` : html ` + + `} + +
+ ` : html ``} +
+
`; } firstUpdated() { @@ -3177,14 +3207,14 @@ class ThermostatPopupCard extends LitElement { if (!this.modeIcons[mode]) { return html ``; } - return html ` - + return html ` + `; } _handleModeClick(e) { @@ -3256,234 +3286,234 @@ class ThermostatPopupCard extends LitElement { return 1; } static get styles() { - return css ` - :host { - --auto-color: #EE7600; - --eco-color: springgreen; - --cool-color: #2b9af9; - --heat-color: #EE7600; - --manual-color: #44739e; - --off-color: lightgrey; - --fan_only-color: #8a8a8a; - --dry-color: #efbd07; - --idle-color: #00CC66; - --unknown-color: #bac; - } - .popup-wrapper { - margin-top:64px; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - } - .popup-inner { - height: 100%; - width: 100%; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - } - .popup-inner.off { - display:none; - } - #settings { - display:none; - } - .settings-inner { - height: 100%; - width: 100%; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - } - #settings.on { - display:flex; - } - .settings-btn { - position:absolute; - right:30px; - background-color: #7f8082; - color: #FFF; - border: 0; - padding: 5px 20px; - border-radius: 10px; - font-weight: 500; - cursor: pointer; - } - .settings-btn.bottom { - bottom:15px; - } - .settings-btn.top { - top: 25px; - } - .settings-btn.bottom.fullscreen { - margin:0; - } - .fullscreen { - margin-top:-64px; - } - .info { - display:flex; - flex-direction:row; - margin-bottom: 40px; - } - .info .temp { - background-color: #67cd67; - height: 60px; - width: 60px; - text-align:center; - line-height:60px; - border-radius:100%; - color:#FFF; - font-size:18px; - } - - .info .temp.heat_cool { - background-color: var(--auto-color); - } - .info .temp.cool { - background-color: var(--cool-color); - } - .info .temp.heat { - background-color: var(--heat-color); - } - .info .temp.manual { - background-color: var(--manual-color); - } - .info .temp.off { - background-color: var(--off-color); - } - .info .temp.fan_only { - background-color: var(--fan_only-color); - } - .info .temp.eco { - background-color: var(--eco-color); - } - .info .temp.dry { - background-color: var(--dry-color); - } - .info .temp.idle { - background-color: var(--idle-color); - } - .info .temp.unknown-mode { - background-color: var(--unknown-color); - } - - - .info .right { - display:flex; - flex-direction:column; - margin-left:15px; - height:60px; - align-items:center; - justify-content:center; - } - .info .right .name { - color:#FFF; - font-size:24px; - } - .info .right .action { - color: #8b8a8f; - font-size:12px; - } - - /* CONTROLS */ - - .heat_cool { - --mode-color: var(--auto-color); - } - .cool { - --mode-color: var(--cool-color); - } - .heat { - --mode-color: var(--heat-color); - } - .manual { - --mode-color: var(--manual-color); - } - .off { - --mode-color: var(--off-color); - } - .fan_only { - --mode-color: var(--fan_only-color); - } - .eco { - --mode-color: var(--eco-color); - } - .dry { - --mode-color: var(--dry-color); - } - .idle { - --mode-color: var(--idle-color); - } - .unknown-mode { - --mode-color: var(--unknown-color); - } - #controls { - display: flex; - justify-content: center; - padding: 16px; - position: relative; - width:500px; - } - #slider { - height: 100%; - width: 100%; - position: relative; - max-width: 300px; - min-width: 250px; - } - round-slider { - --round-slider-path-color: var(--disabled-text-color); - --round-slider-bar-color: var(--mode-color); - padding-bottom: 10%; - } - #slider-center { - position: absolute; - width: calc(100% - 120px); - height: calc(100% - 120px); - box-sizing: border-box; - border-radius: 100%; - left: 60px; - top: 60px; - text-align: center; - overflow-wrap: break-word; - pointer-events: none; - } - - .values { - display:flex; - flex-direction:column; - align-items:center; - justify-content:center; - height:100%; - width:100%; - } - .values .action { - color:#f4b941; - font-size:10px; - text-transform:uppercase; - } - .values .value { - color:#FFF; - font-size:60px; - line-height: 60px; - } - - #modes > * { - color: var(--disabled-text-color); - cursor: pointer; - display: inline-block; - } - #modes .selected-icon { - --iron-icon-fill-color: var(--mode-color); - } - text { - color: var(--primary-text-color); - } + return css ` + :host { + --auto-color: #EE7600; + --eco-color: springgreen; + --cool-color: #2b9af9; + --heat-color: #EE7600; + --manual-color: #44739e; + --off-color: lightgrey; + --fan_only-color: #8a8a8a; + --dry-color: #efbd07; + --idle-color: #00CC66; + --unknown-color: #bac; + } + .popup-wrapper { + margin-top:64px; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } + .popup-inner { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } + .popup-inner.off { + display:none; + } + #settings { + display:none; + } + .settings-inner { + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } + #settings.on { + display:flex; + } + .settings-btn { + position:absolute; + right:30px; + background-color: #7f8082; + color: #FFF; + border: 0; + padding: 5px 20px; + border-radius: 10px; + font-weight: 500; + cursor: pointer; + } + .settings-btn.bottom { + bottom:15px; + } + .settings-btn.top { + top: 25px; + } + .settings-btn.bottom.fullscreen { + margin:0; + } + .fullscreen { + margin-top:-64px; + } + .info { + display:flex; + flex-direction:row; + margin-bottom: 40px; + } + .info .temp { + background-color: #67cd67; + height: 60px; + width: 60px; + text-align:center; + line-height:60px; + border-radius:100%; + color:#FFF; + font-size:18px; + } + + .info .temp.heat_cool { + background-color: var(--auto-color); + } + .info .temp.cool { + background-color: var(--cool-color); + } + .info .temp.heat { + background-color: var(--heat-color); + } + .info .temp.manual { + background-color: var(--manual-color); + } + .info .temp.off { + background-color: var(--off-color); + } + .info .temp.fan_only { + background-color: var(--fan_only-color); + } + .info .temp.eco { + background-color: var(--eco-color); + } + .info .temp.dry { + background-color: var(--dry-color); + } + .info .temp.idle { + background-color: var(--idle-color); + } + .info .temp.unknown-mode { + background-color: var(--unknown-color); + } + + + .info .right { + display:flex; + flex-direction:column; + margin-left:15px; + height:60px; + align-items:center; + justify-content:center; + } + .info .right .name { + color:#FFF; + font-size:24px; + } + .info .right .action { + color: #8b8a8f; + font-size:12px; + } + + /* CONTROLS */ + + .heat_cool { + --mode-color: var(--auto-color); + } + .cool { + --mode-color: var(--cool-color); + } + .heat { + --mode-color: var(--heat-color); + } + .manual { + --mode-color: var(--manual-color); + } + .off { + --mode-color: var(--off-color); + } + .fan_only { + --mode-color: var(--fan_only-color); + } + .eco { + --mode-color: var(--eco-color); + } + .dry { + --mode-color: var(--dry-color); + } + .idle { + --mode-color: var(--idle-color); + } + .unknown-mode { + --mode-color: var(--unknown-color); + } + #controls { + display: flex; + justify-content: center; + padding: 16px; + position: relative; + width:500px; + } + #slider { + height: 100%; + width: 100%; + position: relative; + max-width: 300px; + min-width: 250px; + } + round-slider { + --round-slider-path-color: var(--disabled-text-color); + --round-slider-bar-color: var(--mode-color); + padding-bottom: 10%; + } + #slider-center { + position: absolute; + width: calc(100% - 120px); + height: calc(100% - 120px); + box-sizing: border-box; + border-radius: 100%; + left: 60px; + top: 60px; + text-align: center; + overflow-wrap: break-word; + pointer-events: none; + } + + .values { + display:flex; + flex-direction:column; + align-items:center; + justify-content:center; + height:100%; + width:100%; + } + .values .action { + color:#f4b941; + font-size:10px; + text-transform:uppercase; + } + .values .value { + color:#FFF; + font-size:60px; + line-height: 60px; + } + + #modes > * { + color: var(--disabled-text-color); + cursor: pointer; + display: inline-block; + } + #modes .selected-icon { + --iron-icon-fill-color: var(--mode-color); + } + text { + color: var(--primary-text-color); + } `; } } @@ -3706,12 +3736,12 @@ class CustomRoundSlider extends LitElement { const diff = end - start; start = this._angle2xy(start); end = this._angle2xy(end + 0.001); // Safari doesn't like arcs with no length - return ` - M ${start.x} ${start.y} - A 1 1, - 0, - ${(diff) > Math.PI ? "1" : "0"} ${this.rtl ? "0" : "1"}, - ${end.x} ${end.y} + return ` + M ${start.x} ${start.y} + A 1 1, + 0, + ${(diff) > Math.PI ? "1" : "0"} ${this.rtl ? "0" : "1"}, + ${end.x} ${end.y} `; } _renderHandle(id) { @@ -3719,138 +3749,138 @@ class CustomRoundSlider extends LitElement { const pos = this._angle2xy(theta); // Two handles are drawn. One visible, and one invisible that's twice as // big. Makes it easier to click. - return svg ` - - - - + return svg ` + + + + `; } ; render() { const view = this._boundaries; - return html ` - - ${this.gradient ? html ` - - ` : html ``} - - - - ${this.gradientPoints.map(gradientPoint => svg ``)} - - - + return html ` + + ${this.gradient ? html ` + + ` : html ``} + + + + ${this.gradientPoints.map(gradientPoint => svg ``)} + + + ${this._enabled - ? svg ` - - - - - + ? svg ` + + + + + ` - : ``} - - + : ``} + + ${this._enabled ? this.low != null ? this._reverseOrder ? html `${this._renderHandle("high")} ${this._renderHandle("low")}` : html `${this._renderHandle("low")} ${this._renderHandle("high")}` : html `${this._renderHandle("value")}` - : ``} - - - + : ``} + + + `; } static get styles() { - return css ` - :host { - display: inline-block; - width: 100%; - } - svg { - overflow: visible; - } - .slider { - fill: none; - stroke-width: var(--round-slider-path-width, 30); - stroke-linecap: var(--round-slider-linecap, butt); - } - .path { - } - .bar { - stroke: var(--round-slider-bar-color, transparent); - } - .block { - stroke-width: var(--round-slider-block-path-width, 31); - stroke: #2c2c2e; - } - .block-dash { - stroke-width: var(--round-slider-dash-width, 20); - stroke: var(--round-slider-block-dash-color, rgba(255,255,255,0.1)); - } - g.handles { - stroke: var(--round-slider-handle-color, var(--round-slider-bar-color, deepskyblue)); - stroke-linecap: round; - } - g.handle { - stroke-width: var(--round-slider-dash-width, 20); - stroke: #FFF; - stroke-dasharray: 3, 8; - stroke-linecap: butt; - } - .handle:focus { - outline: unset; - } + return css ` + :host { + display: inline-block; + width: 100%; + } + svg { + overflow: visible; + } + .slider { + fill: none; + stroke-width: var(--round-slider-path-width, 30); + stroke-linecap: var(--round-slider-linecap, butt); + } + .path { + } + .bar { + stroke: var(--round-slider-bar-color, transparent); + } + .block { + stroke-width: var(--round-slider-block-path-width, 31); + stroke: #2c2c2e; + } + .block-dash { + stroke-width: var(--round-slider-dash-width, 20); + stroke: var(--round-slider-block-dash-color, rgba(255,255,255,0.1)); + } + g.handles { + stroke: var(--round-slider-handle-color, var(--round-slider-bar-color, deepskyblue)); + stroke-linecap: round; + } + g.handle { + stroke-width: var(--round-slider-dash-width, 20); + stroke: #FFF; + stroke-dasharray: 3, 8; + stroke-linecap: butt; + } + .handle:focus { + outline: unset; + } `; } } diff --git a/package-lock.json b/package-lock.json index 86244e8..c51706a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -464,8 +464,8 @@ "dev": true }, "card-tools": { - "version": "github:thomasloven/lovelace-card-tools#d00de92296bdaf4f4ae90cafda958ae1462039bf", - "from": "github:thomasloven/lovelace-card-tools" + "version": "github:thomasloven/lovelace-card-tools#4b60eb0e981ee8d5d3592f7f5c833a231733df7d", + "from": "github:thomasloven/lovelace-card-tools#master" }, "chalk": { "version": "2.4.2", diff --git a/package.json b/package.json index 4313a46..7e437b3 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "dependencies": { "@ctrl/tinycolor": "^2.6.0", "@thomasloven/round-slider": "^0.3.7", - "card-tools": "github:thomasloven/lovelace-card-tools", + "card-tools": "github:thomasloven/lovelace-card-tools#master", "custom-card-helpers": "^1.3.9", "home-assistant-js-websocket": "^4.4.0", "lit-element": "^2.2.1",