${t}
\n `,i},T=(e,n)=>{if(t.states[n].attributes.rgb_color){const i=t.states[n].attributes.rgb_color,o=`rgba(${i[0]}, ${i[1]}, ${i[2]}, 0.5)`;e.style.backgroundColor=o,e.style.border="1px solid rgba(0,0,0,0)"}else t.states[n].attributes.rgb_color||"on"!=t.states[n].state?(e.style.backgroundColor="rgba(0,0,0,0)",e.style.border="1px solid var(--primary-text-color)"):(e.style.backgroundColor="rgba(255,255,255,0.5)",e.style.border="1px solid rgba(0,0,0,0)")};if(!this.buttonsAdded){const q=document.createElement("div");q.setAttribute("class","horizontal-buttons-stack-container"),this.content.appendChild(q)}if((()=>{let e=[],n=1;for(;this.config[n+"_name"];){const t=n+"_",i=this.config[t+"name"],o=this.config[t+"pir_sensor"],a=this.config[t+"icon"],r=this.config[t+"link"],s=this.config[t+"entity"];e.push({button:i,pirSensor:o,icon:a,link:r,lightEntity:s}),n++}if(this.config.auto_order&&e.sort(((e,n)=>{if("on"===t.states[e.pirSensor].state&&"on"===t.states[n.pirSensor].state){return t.states[e.pirSensor].last_updated${R}
`,this.buttonAdded=!0);let K=!1,Q=F,tt=N;function et(t){let e=t.querySelector(".feedback-element");e||(e=document.createElement("div"),e.setAttribute("class","feedback-element"),t.appendChild(e)),e.style.animation="tap-feedback .5s",setTimeout((()=>{e.style.animation="none",t.removeChild(e)}),500)}function nt(t){t.target===P.querySelector("ha-icon")?P.addEventListener("mouseup",(t=>{fireEvent(this,"hass-more-info",{entityId:Y})})):(K=!0,rt(t.pageX||t.touches[0].pageX),document.addEventListener("mouseup",it),document.addEventListener("touchend",it),document.addEventListener("mousemove",ot),document.addEventListener("touchmove",ot))}function it(){K=!1,document.removeEventListener("mouseup",it),document.removeEventListener("touchend",it),document.removeEventListener("mousemove",ot),document.removeEventListener("touchmove",ot),F!==Q&&Y.startsWith("light.")?(F=Q,t.callService("light","turn_on",{entity_id:Y,brightness:F})):N!==tt&&Y.startsWith("media_player.")&&(N=tt,t.callService("media_player","volume_set",{entity_id:Y,volume_level:N}))}function ot(t){K&&rt(t.pageX||t.touches[0].pageX)}function at(t,e){if(e.buttonContainer.style.opacity="unavailable"!==t?"1":"0.5","switch"===X){const n="on"===t?"var(--accent-color)":"rgba(0,0,0,0)";e.switchButton.style.backgroundColor=n}}function rt(t){const e=J.getBoundingClientRect(),n=Math.min(Math.max(t-e.left,0),e.width)/e.width;Y.startsWith("light.")?Q=Math.round(255*n):Y.startsWith("media_player.")&&(tt=n),Z.style.transition="none",Z.style.transform=`translateX(${100*n}%)`}if(this.eventAdded||"switch"!==X?this.eventAdded||"slider"!==X||(J.addEventListener("mousedown",nt),J.addEventListener("touchstart",nt),this.eventAdded=!0):(G.addEventListener("click",(()=>et(this.switchButton))),G.addEventListener("click",(function(t){t.target.closest("ha-icon")?fireEvent(this,"hass-more-info",{entityId:Y}):n(Y)})),this.eventAdded=!0),K||"slider"!==X||(this.rangeFill.style.transition="all .2s",Y.startsWith("light.")?this.rangeFill.style.transform=`translateX(${F/255*100}%)`:Y.startsWith("media_player.")&&(this.rangeFill.style.transform=`translateX(${100*N}%)`)),at(W,this),"slider"===X){const ct=t.states[Y].attributes.rgb_color,dt=ct?`rgba(${ct[0]}, ${ct[1]}, ${ct[2]}, 0.5)`:"rgba(255, 255, 255, 0.5)";Z.style.backgroundColor=dt,this.rangeFill.style.backgroundColor=dt}if(!this.styleAdded){const lt=document.createElement("style"),ht="\n ha-card {\n margin-top: 0 !important;\n background: none !important;\n }\n \n .button-container {\n position: relative;\n width: 100%;\n height: 50px;\n z-index: 0;\n background-color: var(--background-color-2,var(--secondary-background-color));\n border-radius: 25px;\n mask-image: radial-gradient(white, black);\n -webkit-mask-image: radial-gradient(white, black);\n -webkit-backface-visibility: hidden;\n -moz-backface-visibility: hidden;\n -webkit-transform: translateZ(0);\n overflow: hidden;\n }\n \n .switch-button,\n .range-slider {\n position: absolute;\n height: 100%;\n width: 100%;\n transition: background-color 1.5s;\n }\n \n .range-fill {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n }\n \n .switch-button {\n cursor: pointer !important;\n }\n \n .range-slider {\n cursor: ew-resize;\n }\n \n .range-fill {\n z-index: 1;\n width: 100%;\n left: -100%;\n }\n \n .icon-container {\n position: absolute;\n z-index: 2;\n width: 38px;\n height: 38px;\n margin: 6px;\n border-radius: 50%;\n background-color: var(--card-background-color,var(--ha-card-background));\n }\n \n ha-icon {\n display: flex;\n position: absolute;\n margin: inherit;\n padding: 2px;\n width: 22px; \n height: 22px;\n cursor: pointer !important;\n }\n \n .nameContainer {\n position: relative;\n margin-left: 58px;\n z-index: 2;\n font-weight: 600;\n }\n \n .feedback-element {\n position: absolute;\n top: 0;\n left: 0;\n opacity: 0;\n width: 100%;\n height: 100%;\n background-color: rgb(0,0,0);\n }\n \n @keyframes tap-feedback {\n 0% {transform: translateX(-100%); opacity: 0;}\n 64% {transform: translateX(0); opacity: 0.1;}\n 100% {transform: translateX(100%); opacity: 0;}\n }\n ";lt.innerHTML=ht,this.content.appendChild(lt),this.styleAdded=!0}"true"===this.editor&&(this.editorStyleAdded||(this.content.style.border="2px solid white !important",this.editorStyleAdded=!0))}if("separator"===this.config.card_type){const pt=this.config.icon?this.config.icon:"",ut=this.config.name?this.config.name:"";if(!this.separatorAdded){const gt=document.createElement("div");gt.setAttribute("class","separator-container"),gt.style.display="flex",gt.innerHTML=`\n${vt}
\n${button}
+ `; + return buttonElement; + }; + + const updateButtonStyle = (buttonElement, lightEntity) => { + if (hass.states[lightEntity].attributes.rgb_color) { + const rgbColor = hass.states[lightEntity].attributes.rgb_color; + const rgbColorOpacity = `rgba(${rgbColor[0]}, ${rgbColor[1]}, ${rgbColor[2]}, 0.5)`; + buttonElement.style.backgroundColor = rgbColorOpacity; + buttonElement.style.border = '1px solid rgba(0,0,0,0)'; + } else if (!hass.states[lightEntity].attributes.rgb_color && hass.states[lightEntity].state == 'on') { + buttonElement.style.backgroundColor = 'rgba(255,255,255,0.5)'; + buttonElement.style.border = '1px solid rgba(0,0,0,0)'; + } else { + buttonElement.style.backgroundColor = 'rgba(0,0,0,0)'; + buttonElement.style.border = '1px solid var(--primary-text-color)'; + } + }; + + if (!this.buttonsAdded) { + const buttonsContainer = document.createElement("div"); + buttonsContainer.setAttribute("class", "horizontal-buttons-stack-container"); + this.content.appendChild(buttonsContainer); + } + + const updateButtonsOrder = () => { + let buttonsList = []; + let i = 1; + while (this.config[i + '_name']) { + const prefix = i + '_'; + const button = this.config[prefix + 'name']; + const pirSensor = this.config[prefix + 'pir_sensor']; + const icon = this.config[prefix + 'icon']; + const link = this.config[prefix + 'link']; + const lightEntity = this.config[prefix + 'entity']; + buttonsList.push({button, pirSensor, icon, link, lightEntity}); + i++; + } + + // if (this.config.auto_order) { + // buttonsList.sort((a, b) => { + // let aTime = hass.states[a.pirSensor].last_updated; + // let bTime = hass.states[b.pirSensor].last_updated; + // return aTime < bTime ? 1 : -1; + // }); + // } + + if (this.config.auto_order) { + buttonsList.sort((a, b) => { + // Vérifier si l'état du capteur PIR est "on" pour les deux boutons + if (hass.states[a.pirSensor].state === "on" && hass.states[b.pirSensor].state === "on") { + let aTime = hass.states[a.pirSensor].last_updated; + let bTime = hass.states[b.pirSensor].last_updated; + return aTime < bTime ? 1 : -1; + } + // Si seulement a.pirSensor est "on", placer a avant b + else if (hass.states[a.pirSensor].state === "on") { + return -1; + } + // Si seulement b.pirSensor est "on", placer b avant a + else if (hass.states[b.pirSensor].state === "on") { + return 1; + } + // Si aucun des capteurs PIR n'est "on", arrangement basé seulement sur l'état de last updated même si off + let aTime = hass.states[a.pirSensor].last_updated; + let bTime = hass.states[b.pirSensor].last_updated; + return aTime < bTime ? 1 : -1; + }); + } + + if (!this.buttonsAdded) { + const buttonsContainer = this.content.querySelector(".horizontal-buttons-stack-container"); + const buttons = {}; + buttonsList.forEach(button => { + const buttonElement = createButton(button.button, button.link, button.icon); + // Stocker l'élément de bouton en utilisant son lien comme clé + buttons[button.link] = buttonElement; + buttonsContainer.appendChild(buttonElement); + }); + this.buttonsAdded = true; + this.buttons = buttons; + } + + let currentPosition = 0; + const margin = 12; + buttonsList.forEach((button, index) => { + let buttonElement = this.buttons[button.link]; + if (buttonElement) { + let buttonWidth = localStorage.getItem(`buttonWidth-${button.link}`); + let buttonContent = localStorage.getItem(`buttonContent-${button.link}`); + if (!buttonWidth || buttonWidth === '0' || buttonContent !== buttonElement.innerHTML || this.editor === 'true') { + buttonWidth = buttonElement.offsetWidth; + localStorage.setItem(`buttonWidth-${button.link}`, buttonWidth); + localStorage.setItem(`buttonContent-${button.link}`, buttonElement.innerHTML); + } + buttonElement.style.transform = `translateX(${currentPosition}px)`; + currentPosition += parseInt(buttonWidth) + margin; + } + if (button.lightEntity) { + updateButtonStyle(buttonElement, button.lightEntity); + } + }); + } + + updateButtonsOrder(); + + if (!this.styleAdded) { + const styleElement = document.createElement('style'); + const styles = ` + .horizontal-buttons-stack { + width: 100%; + margin-top: 0 !important; + background: none !important; + position: fixed; + height: 51px; + bottom: 16px; + /* transform: translateY(200px); */ + /* animation: from-bottom 1.3s forwards; */ + } + @keyframes from-bottom { + 0% {transform: translateY(200px);} + 20% {transform: translateY(200px);} + 46% {transform: translateY(-8px);} + 56% {transform: translateY(1px);} + 62% {transform: translateY(-2px);} + 70% {transform: translateY(0);} + 100% {transform: translateY(0);} + } + .horizontal-buttons-stack-container { + width: max-content; + position: relative; + height: 51px; + } + .button { + display: flex; + position: absolute; + box-sizing: border-box; + border: 1px solid var(--primary-text-color); + align-items: center; + height: 50px; + white-space: nowrap; + width: auto; + border-radius: 25px; + z-index: 2; + padding: 16px; + transition: background-color 1s, border 1s, transform 1s; + color: var(--primary-text-color); + } + .icon { + height: 24px; + margin-right: 8px; + } + .card-content { + width: 100%; + box-sizing: border-box; + margin: 0 -36px !important; + padding: 0 36px !important; + overflow: scroll !important; + -ms-overflow-style: none; + scrollbar-width: none; + mask-image: linear-gradient(90deg, transparent 2%, rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 1) 96%, transparent 100%); + -webkit-mask-image: linear-gradient(90deg, transparent 2%, rgba(0, 0, 0, 1) 6%, rgba(0, 0, 0, 1) 96%, transparent 100%); + } + .horizontal-buttons-stack::before { + content: ''; + position: absolute; + top: -32px; + left: -100%; + display: block; + background: linear-gradient(0deg, var(--background-color, var(--primary-background-color)) 50%, rgba(79, 69, 87, 0)); + width: 200%; + height: 100px; + } + .card-content::-webkit-scrollbar { + display: none; + } + @media only screen and (min-width: 768px) { + .card-content { + position: fixed; + width: 538px !important; + left: calc(50% - 246px); + padding: 0 26px !important; + } + } + @media only screen and (min-width: 870px) { + .card-content { + position: fixed; + width: 538px !important; + left: calc(50% - 218px); + padding: 0 26px !important; + } + } + `; + + styleElement.innerHTML = styles; + this.card.classList.add('horizontal-buttons-stack'); + this.content.querySelector(".horizontal-buttons-stack-container").appendChild(styleElement); + this.styleAdded = true; + } + + if (this.editor === 'true') { + if (!this.editorStyleAdded) { + const styleElement = document.createElement('style'); + const styles = ` + .horizontal-buttons-stack { + width: 100%; + margin-top: 0 !important; + background: none !important; + position: relative; + height: auto; + bottom: 0px; + overflow: hidden; + } + .horizontal-buttons-stack::before { + content: ''; + position: absolute; + top: 0; + left: 0; + display: block; + background: none; + width: 100%; + height: 0; + } + .card-content { + width: 100% !important; + } + `; + styleElement.innerHTML = styles; + this.card.appendChild(styleElement); + this.editorStyleAdded = true; + } + } else if (this.card.querySelector("ha-card > style")) { + const styleElement = this.card.querySelector("ha-card > style"); + this.card.removeChild(styleElement); + } + } + + // Initialize button + if (this.config.card_type === 'button') { + if (!this.buttonAdded) { + const buttonContainer = document.createElement("div"); + buttonContainer.setAttribute("class", "button-container"); + this.content.appendChild(buttonContainer); + } + + const entityId = this.config.entity; + const icon = !this.config.icon ? hass.states[entityId].attributes.icon || '' : this.config.icon;//this.config.icon || !entityId ? this.config.icon || '' : (!this.config.icon ? hass.states[entityId].attributes.icon : ''); + const name = !this.config.name ? hass.states[entityId].attributes.friendly_name || '' : this.config.name; + const buttonType = this.config.button_type || 'switch'; + const state = !entityId ? '' : hass.states[entityId].state; + let currentBrightness = !entityId ? '' : hass.states[entityId].attributes.brightness || 0; + let currentVolume = !entityId ? '' : hass.states[entityId].attributes.volume_level || 0; + + const iconContainer = document.createElement('div'); + iconContainer.setAttribute('class', 'icon-container'); + + const nameContainer = document.createElement('div'); + nameContainer.setAttribute('class', 'nameContainer'); + + const switchButton = document.createElement('div'); + switchButton.setAttribute('class', 'switch-button'); + + const rangeSlider = document.createElement('div'); + rangeSlider.setAttribute('class', 'range-slider'); + + const rangeFill = document.createElement('div'); + + rangeFill.setAttribute('class', 'range-fill'); + if (entityId && entityId.startsWith("light.") && buttonType === 'slider') { + rangeFill.style.transform = `translateX(${(currentBrightness / 255) * 100}%)`; + } + else if (entityId && entityId.startsWith("media_player.") && buttonType === 'slider') { + rangeFill.style.transform = `translateX(${currentVolume * 100}%)`; + } + + if (!this.buttonAdded) { + this.buttonContainer = this.content.querySelector(".button-container"); + + if (buttonType === 'slider' && !this.buttonAdded) { + this.buttonContainer.appendChild(rangeSlider); + rangeSlider.appendChild(iconContainer); + rangeSlider.appendChild(nameContainer); + rangeSlider.appendChild(rangeFill); + this.rangeFill = this.content.querySelector(".range-fill"); + } + else if (buttonType === 'switch') { + this.buttonContainer.appendChild(switchButton); + switchButton.appendChild(iconContainer); + switchButton.appendChild(nameContainer); + this.switchButton = this.content.querySelector(".switch-button"); + } + + iconContainer.innerHTML = `${name}
`; + + this.buttonAdded = true; + } + + let isDragging = false; + let brightness = currentBrightness; + let volume = currentVolume; + + function tapFeedback(content) { + let feedbackElement = content.querySelector('.feedback-element'); + if (!feedbackElement) { + feedbackElement = document.createElement('div'); + feedbackElement.setAttribute('class', 'feedback-element'); + content.appendChild(feedbackElement); + } + + feedbackElement.style.animation = 'tap-feedback .5s'; + setTimeout(() => { + feedbackElement.style.animation = 'none'; + content.removeChild(feedbackElement); + }, 500); + } + + function handleStart(e) { + if (e.target === iconContainer.querySelector('ha-icon')) { + iconContainer.addEventListener('mouseup', event => { + fireEvent(this, "hass-more-info", { entityId: entityId }); + }); + } else { + isDragging = true; + updateRange(e.pageX || e.touches[0].pageX); + document.addEventListener('mouseup', handleEnd); + document.addEventListener('touchend', handleEnd); + document.addEventListener('mousemove', handleMove); + document.addEventListener('touchmove', handleMove); + } + } + + function handleEnd() { + isDragging = false; + + document.removeEventListener('mouseup', handleEnd); + document.removeEventListener('touchend', handleEnd); + document.removeEventListener('mousemove', handleMove); + document.removeEventListener('touchmove', handleMove); + + if (currentBrightness !== brightness && entityId.startsWith("light.")) { + currentBrightness = brightness; + hass.callService('light', 'turn_on', { + entity_id: entityId, + brightness: currentBrightness + }); + } + else if (currentVolume !== volume && entityId.startsWith("media_player.")) { + currentVolume = volume; + hass.callService('media_player', 'volume_set', { + entity_id: entityId, + volume_level: currentVolume + }); + } + } + + function handleMove(e) { + if (isDragging) { + updateRange(e.pageX || e.touches[0].pageX); + } + } + + if (!this.eventAdded && buttonType === 'switch') { + switchButton.addEventListener('click', () => tapFeedback(this.switchButton)); + //switchButton.addEventListener('touchstart', () => tapFeedback(this.switchButton)); + switchButton.addEventListener('click', function(e) { + if (e.target.closest('ha-icon')) { //e.target === this.querySelector('ha-icon') + fireEvent(this, "hass-more-info", { entityId: entityId }); + } else { + toggleEntity(entityId); + } + }); + //switchButton.addEventListener('touchend', () => toggleEntity(entityId)); + this.eventAdded = true; + } + else if (!this.eventAdded && buttonType === 'slider') { + rangeSlider.addEventListener('mousedown', handleStart); + rangeSlider.addEventListener('touchstart', handleStart); + this.eventAdded = true; + } + + if (!isDragging && buttonType === 'slider') { + this.rangeFill.style.transition = 'all .2s'; + if (entityId.startsWith("light.")) { + this.rangeFill.style.transform = `translateX(${(currentBrightness / 255) * 100}%)`; + } + else if (entityId.startsWith("media_player.")) { + this.rangeFill.style.transform = `translateX(${currentVolume * 100}%)`; + } + } + + function updateButtonStyle(state, content) { + content.buttonContainer.style.opacity = state !== 'unavailable' ? '1' : '0.5'; + if (buttonType === 'switch') { + const backgroundColor = state === 'on' ? 'var(--accent-color)' : 'rgba(0,0,0,0)'; + content.switchButton.style.backgroundColor = backgroundColor; + } + } + + updateButtonStyle(state, this); + + function updateRange(x) { + const rect = rangeSlider.getBoundingClientRect(); + const position = Math.min(Math.max(x - rect.left, 0), rect.width); + const percentage = position / rect.width; + if (entityId.startsWith("light.")) { + brightness = Math.round(percentage * 255); + } + else if (entityId.startsWith("media_player.")) { + volume = percentage; + } + + rangeFill.style.transition = 'none'; + rangeFill.style.transform = `translateX(${percentage * 100}%)`; + } + + if (buttonType === 'slider') { + const rgbColor = hass.states[entityId].attributes.rgb_color; + const rgbColorOpacity = rgbColor ? `rgba(${rgbColor[0]}, ${rgbColor[1]}, ${rgbColor[2]}, 0.5)` : `rgba(255, 255, 255, 0.5)`; + rangeFill.style.backgroundColor = rgbColorOpacity; + this.rangeFill.style.backgroundColor = rgbColorOpacity; + } + + if (!this.styleAdded) { + const styleElement = document.createElement('style'); + const styles = ` + ha-card { + margin-top: 0 !important; + background: none !important; + } + + .button-container { + position: relative; + width: 100%; + height: 50px; + z-index: 0; + background-color: var(--background-color-2,var(--secondary-background-color)); + border-radius: 25px; + mask-image: radial-gradient(white, black); + -webkit-mask-image: radial-gradient(white, black); + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -webkit-transform: translateZ(0); + overflow: hidden; + } + + .switch-button, + .range-slider { + position: absolute; + height: 100%; + width: 100%; + transition: background-color 1.5s; + } + + .range-fill { + position: absolute; + top: 0; + bottom: 0; + left: 0; + } + + .switch-button { + cursor: pointer !important; + } + + .range-slider { + cursor: ew-resize; + } + + .range-fill { + z-index: 1; + width: 100%; + left: -100%; + } + + .icon-container { + position: absolute; + z-index: 2; + width: 38px; + height: 38px; + margin: 6px; + border-radius: 50%; + background-color: var(--card-background-color,var(--ha-card-background)); + } + + ha-icon { + display: flex; + position: absolute; + margin: inherit; + padding: 2px; + width: 22px; + height: 22px; + cursor: pointer !important; + } + + .nameContainer { + position: relative; + margin-left: 58px; + z-index: 2; + font-weight: 600; + } + + .feedback-element { + position: absolute; + top: 0; + left: 0; + opacity: 0; + width: 100%; + height: 100%; + background-color: rgb(0,0,0); + } + + @keyframes tap-feedback { + 0% {transform: translateX(-100%); opacity: 0;} + 64% {transform: translateX(0); opacity: 0.1;} + 100% {transform: translateX(100%); opacity: 0;} + } + `; + + styleElement.innerHTML = styles; + this.content.appendChild(styleElement); + this.styleAdded = true; + } + if (this.editor === 'true') { + if (!this.editorStyleAdded) { + this.content.style.border = '2px solid white !important'; + this.editorStyleAdded = true; + } + } + // } else { + // this.content.style.border = 'none !important'; + // //this.editorStyleAdded = false; + // } + } + + // Initialize separator + if (this.config.card_type === 'separator') { + const icon = !this.config.icon ? '' : this.config.icon; + const name = !this.config.name ? '' : this.config.name; + + if (!this.separatorAdded) { + const separatorContainer = document.createElement("div"); + separatorContainer.setAttribute("class", "separator-container"); + separatorContainer.style.display = 'flex'; + separatorContainer.innerHTML = ` +${name}
+