diff --git a/honeycomb-menu.js b/honeycomb-menu.js index 3a16566..36dde63 100644 --- a/honeycomb-menu.js +++ b/honeycomb-menu.js @@ -254,4 +254,4 @@ const st=n(40);function at(t,e,n={},o={}){const r=new Event(e,Object.assign({bub .config=${this._computeItemConfig(t)} @action=${this._handleItemAction}> `)} - `}setConfig(t){pt(this),Ct(t,{action:"hold",entity:null,active:!1,autoclose:!0,variables:{},size:225,spacing:2,animation_speed:100}),this.config=t;let e=this.config.size/3.586;this.sizes={item:e,containerWidth:3*e,containerHeight:2.9*e},this.config.xy_pad&&(this.config.xy_pad.x&&(this.config.xy_pad.x.data=this.config.xy_pad.x.data||this.config.xy_pad.x.service_data),this.config.xy_pad.y&&(this.config.xy_pad.y.data=this.config.xy_pad.y.data||this.config.xy_pad.y.service_data)),this._assignButtons()}display(t,e,n){this.view=t,this.view.style.position="relative",this.view.append(this),this._setPosition(e,n)}firstUpdated(){this._setCssVars()}close(t=null){if(this.closing)return;this.closing=!0;let e=t||this.shadowRoot.querySelectorAll("honeycomb-menu-item")[5];t&&(t.setAttribute("selected",""),t.setAttribute("style",`animation-delay: ${this._computeAnimateDelay(3)};`)),at(this,"closing",{item:t}),this.shadowRoot.querySelector("#shade").addEventListener("animationend",(function(t){this.remove()})),e.addEventListener("animationend",e=>{this.remove(),at(this,"closed",{item:t})})}_assignButtons(){this.buttons=[];for(let t=0;t<6;t++){let e={};for(let n of this.config.buttons[t])if(void 0!==n.show?n.show=ht(lt(this.hass,this.hass.states[this.config.entity],this.config.variables,n.show)):"break"!=n&&"skip"!=n&&(n.show=!0),"break"==n||n.show&&"skip"!=n){e=n;break}"break"==e&&(e={}),this.buttons[t]=jt({},e)}}_setPosition(t,e){let n=this.sizes.containerWidth/2,o=this.sizes.containerHeight/2,r={min:{x:parseFloat(window.getComputedStyle(this.view,null).getPropertyValue("padding-left"))+n,y:parseFloat(window.getComputedStyle(this.view,null).getPropertyValue("padding-top"))+o},max:{x:this.view.clientWidth-n,y:this.view.clientHeight-o}},i=this.view.getBoundingClientRect();t=Et(t-i.left,r.min.x,r.max.x-5),e=Et(e-i.top,r.min.y,r.max.y-5),this.style.left=t-n+"px",this.style.top=e-o+"px"}_setCssVarProperty(t,e){this.shadowRoot.querySelector("#honeycombs").style.setProperty(t,`var(${e}, ${this.view.style.getPropertyValue(t)})`,"important")}_setCssVars(){this.style.setProperty("--item-size",this.sizes.item+"px"),this.style.setProperty("--container-width",this.sizes.containerWidth+"px"),this.style.setProperty("--container-height",this.sizes.containerHeight+"px"),this.style.setProperty("--spacing",this.config.spacing+"px"),this._setCssVarProperty("--paper-item-icon-color","--honeycomb-menu-icon-color"),this._setCssVarProperty("--paper-item-icon-active-color","--honeycomb-menu-icon-active-color"),this._setCssVarProperty("--ha-card-background","--honeycomb-menu-background-color"),this._setCssVarProperty("--ha-card-active-background","--honeycomb-menu-active-background-color")}_handleShadeClick(t){t.stopPropagation(),this.close()}_handleItemAction(t){t.detail.item&&(this._playButtonSound(t.detail.item),t.detail.autoclose&&this.close(t.detail.item))}_playButtonSound(t){if(!t.config.audio)return;let e=document.querySelector("#honeycomb-audio");e||(e=document.createElement("audio"),e.id="honeycomb-audio",document.querySelector("home-assistant").append(e)),e.src=t.config.audio,e.play()}_handleXYPad(t){this.config.xy_pad.on_release&&"drag-end"!=t.type||this.config.xy_pad.repeat&&"drag-interval"!=t.type||["x","y"].forEach(e=>{let n=this.config.xy_pad[e];if(0==t.detail[e]||!n||!n.service||this._service[e])return;this._service[e]=!0;let o=St(n.service,".",2);this.hass.callService(o[0],o[1],this.__renderServiceData(t.detail,n.data)).then(t=>this._service[e]=!1)})}__renderServiceData(t,e){return e?ut(this.hass,this.hass.states[this.config.entity],{...this.config.variables,...t},e,e=>"entity"==e?this.config.entity:Ot(e,{interpolate:/{{([\s\S]+?)}}/g})(t)):new Object}_computeXYPadSize(){return this.config.size/6}_computeXYPadClamp(){return this.config.size/3}_computeItemSize(){return this.config.size/3}_computeItemConfig(t){return Pt(t)?t:At(jt({},this.config,t),["buttons","size","action","xy_pad","spacing"])}_computeAnimateDelay(t){return this.config.animation_speed*t+"ms"}}customElements.define(zt.is,zt)}]); \ No newline at end of file + `}setConfig(t){pt(this),Ct(t,{action:"hold",entity:null,active:!1,autoclose:!0,audio:!1,variables:{},size:225,spacing:2,animation_speed:100}),this.config=t;let e=this.config.size/3.586;this.sizes={item:e,containerWidth:3*e,containerHeight:2.9*e},this.config.xy_pad&&(this.config.xy_pad.x&&(this.config.xy_pad.x.data=this.config.xy_pad.x.data||this.config.xy_pad.x.service_data),this.config.xy_pad.y&&(this.config.xy_pad.y.data=this.config.xy_pad.y.data||this.config.xy_pad.y.service_data)),this._assignButtons()}display(t,e,n){this.view=t,this.view.style.position="relative",this.view.append(this),this._setPosition(e,n)}firstUpdated(){this._setCssVars()}close(t=null){if(this.closing)return;this.closing=!0;let e=t||this.shadowRoot.querySelectorAll("honeycomb-menu-item")[5];t&&(t.setAttribute("selected",""),t.setAttribute("style",`animation-delay: ${this._computeAnimateDelay(3)};`)),at(this,"closing",{item:t}),this.shadowRoot.querySelector("#shade").addEventListener("animationend",(function(t){this.remove()})),e.addEventListener("animationend",e=>{this.remove(),at(this,"closed",{item:t})})}_assignButtons(){this.buttons=[];for(let t=0;t<6;t++){let e={};for(let n of this.config.buttons[t])if(void 0!==n.show?n.show=ht(lt(this.hass,this.hass.states[this.config.entity],this.config.variables,n.show)):"break"!=n&&"skip"!=n&&(n.show=!0),"break"==n||n.show&&"skip"!=n){e=n;break}"break"==e&&(e={}),this.buttons[t]=jt({},e)}}_setPosition(t,e){let n=this.sizes.containerWidth/2,o=this.sizes.containerHeight/2,r={min:{x:parseFloat(window.getComputedStyle(this.view,null).getPropertyValue("padding-left"))+n,y:parseFloat(window.getComputedStyle(this.view,null).getPropertyValue("padding-top"))+o},max:{x:this.view.clientWidth-n,y:this.view.clientHeight-o}},i=this.view.getBoundingClientRect();t=Et(t-i.left,r.min.x,r.max.x-5),e=Et(e-i.top,r.min.y,r.max.y-5),this.style.left=t-n+"px",this.style.top=e-o+"px"}_setCssVarProperty(t,e){this.shadowRoot.querySelector("#honeycombs").style.setProperty(t,`var(${e}, ${this.view.style.getPropertyValue(t)})`,"important")}_setCssVars(){this.style.setProperty("--item-size",this.sizes.item+"px"),this.style.setProperty("--container-width",this.sizes.containerWidth+"px"),this.style.setProperty("--container-height",this.sizes.containerHeight+"px"),this.style.setProperty("--spacing",this.config.spacing+"px"),this._setCssVarProperty("--paper-item-icon-color","--honeycomb-menu-icon-color"),this._setCssVarProperty("--paper-item-icon-active-color","--honeycomb-menu-icon-active-color"),this._setCssVarProperty("--ha-card-background","--honeycomb-menu-background-color"),this._setCssVarProperty("--ha-card-active-background","--honeycomb-menu-active-background-color")}_handleShadeClick(t){t.stopPropagation(),this.close()}_handleItemAction(t){t.detail.item&&(this._playButtonSound(t.detail.item),t.detail.autoclose&&this.close(t.detail.item))}_playButtonSound(t){if(console.dir(t.config.audio),!t.config.audio)return;let e=document.querySelector("#honeycomb-audio");e||(e=document.createElement("audio"),e.id="honeycomb-audio",document.querySelector("home-assistant").append(e)),e.src=t.config.audio,e.play()}_handleXYPad(t){this.config.xy_pad.on_release&&"drag-end"!=t.type||this.config.xy_pad.repeat&&"drag-interval"!=t.type||["x","y"].forEach(e=>{let n=this.config.xy_pad[e];if(0==t.detail[e]||!n||!n.service||this._service[e])return;this._service[e]=!0;let o=St(n.service,".",2);this.hass.callService(o[0],o[1],this.__renderServiceData(t.detail,n.data)).then(t=>this._service[e]=!1)})}__renderServiceData(t,e){return e?ut(this.hass,this.hass.states[this.config.entity],{...this.config.variables,...t},e,e=>"entity"==e?this.config.entity:Ot(e,{interpolate:/{{([\s\S]+?)}}/g})(t)):new Object}_computeXYPadSize(){return this.config.size/6}_computeXYPadClamp(){return this.config.size/3}_computeItemSize(){return this.config.size/3}_computeItemConfig(t){return Pt(t)?t:At(jt({},this.config,t),["buttons","size","action","xy_pad","spacing"])}_computeAnimateDelay(t){return this.config.animation_speed*t+"ms"}}customElements.define(zt.is,zt)}]); \ No newline at end of file diff --git a/src/honeycomb-menu.js b/src/honeycomb-menu.js index d2022a4..38bdafe 100644 --- a/src/honeycomb-menu.js +++ b/src/honeycomb-menu.js @@ -314,6 +314,7 @@ class HoneycombMenu extends LitElement entity: null, active: false, autoclose: true, + audio: false, variables: {}, size: 225, spacing: 2,