New conditional system for pop-up triggers + Fixes

- [x] Fan modes button error when HVAC is in Dry Mode #987 - [x] Enhancement: Add Box-Shadow Customization to Bubble Card. Fix added for PR #1009 by @flobiwankenobi - [x] Better color handling for lights, now if the light doesn’t supports RGB it will take the accent color instead like the default Home Assistant behavior. #692 - [x] Templating .bubble-name is now instant. #975 - [x] Fixed an issue where some entity_picture url were not displayed. - [x] New pop-up trigger system based on the same conditional system that Home Assistant use. Not to be confused with the visibility conditions. Note: This is NOT a breaking change, if you previously added a trigger in a pop-up, it will still works, but the editor will not display it anymore and it will be visible in YAML mode only. Then if you decide to use the new system, it will be used instead of your previous trigger. This new feature is based on the code from @MrBearPresident, so thanks again to him for this great new possibility! #332
Clooos · Dec 12, 2024 · 7fde037 · 7fde037
1 parent d381295
commit 7fde037
Show file tree

Hide file tree

Showing 19 changed files with 266 additions and 199 deletions.
diff --git a/dist/bubble-card.js b/dist/bubble-card.js
diff --git a/src/cards/button/changes.ts b/src/cards/button/changes.ts
@@ -115,6 +115,7 @@ export function changeIcon(context) {
 }
 
 export function changeName(context) {
+  if (context.config.styles?.includes("card.querySelector('.bubble-name').innerText")) return;
   const buttonType = getButtonType(context);
   const name = buttonType !== 'name' ? getName(context) : context.config.name;
   if (name !== context.elements.previousName) {
@@ -188,20 +189,6 @@ export function changeStatus(context) {
       }
   }
 
-  if (isEntityType(context, "light")) {
-      if (cardType === 'button') {
-          context.card.classList.add('is-light');
-      } else if (cardType === 'pop-up') {
-          context.elements.headerContainer.classList.add('is-light');
-      }
-  } else {
-      if (cardType === 'button') {
-          context.card.classList.remove('is-light');
-      } else if (cardType === 'pop-up') {
-          context.elements.headerContainer.classList.remove('is-light');
-      }
-  }
-
   if (isStateOn(context)) {
       if (cardType === 'button') {
           context.card.classList.add('is-on');
@@ -229,8 +216,8 @@ export function changeStyle(context) {
 
     try {
         customStyle = context.config.styles
-            ? Function('hass', 'entity', 'state', 'icon', 'subButtonIcon', 'getWeatherIcon', 'card', `return \`${context.config.styles}\`;`)
-              (context._hass, context.config.entity, state, context.elements.icon, context.subButtonIcon, getWeatherIcon, context.card)
+            ? Function('hass', 'entity', 'state', 'icon', 'subButtonIcon', 'getWeatherIcon', 'card', 'name', `return \`${context.config.styles}\`;`)
+              (context._hass, context.config.entity, state, context.elements.icon, context.subButtonIcon, getWeatherIcon, context.card, context.card.name)
             : '';
     } catch (error) {
         throw new Error(`Error in generating button custom templates: ${error.message}`);

diff --git a/src/cards/button/index.ts b/src/cards/button/index.ts
@@ -39,8 +39,9 @@ export function handleButton(context, container = context.content, appendTo = co
     }
 
     changeIcon(context);
-    changeName(context);
+
     changeState(context);
     changeSubButtonState(context, container, context.elements.buttonCard);
     if (context.cardType !== 'pop-up') changeStyle(context);
+    changeName(context);
 }
diff --git a/src/cards/button/styles.ts b/src/cards/button/styles.ts
@@ -22,6 +22,7 @@ export default `
         height: 50px;
         background-color: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
         border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 32px));
+        box-shadow: var(--bubble-button-box-shadow, var(--bubble-box-shadow, none));
         overflow: scroll;
         touch-action: pan-y;
     }

diff --git a/src/cards/climate/changes.ts b/src/cards/climate/changes.ts
@@ -64,8 +64,8 @@ export function changeIcon(context) {
 }
 
 export function changeName(context) {
+    if (context.config.styles?.includes("card.querySelector('.bubble-name').innerText")) return;
     const name = getName(context);
-
     if (name !== context.previousName && context.elements.name) {
         context.elements.name.innerText = name;
         context.previousName = name;

diff --git a/src/cards/climate/styles.ts b/src/cards/climate/styles.ts
@@ -18,6 +18,7 @@ export default `
         height: 50px;
         background-color: var(--bubble-climate-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
         border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, 32px));
+        box-shadow: var(--bubble-climate-box-shadow, var(--bubble-box-shadow, none));
         overflow: visible;
         touch-action: pan-y;
     }

diff --git a/src/cards/cover/changes.ts b/src/cards/cover/changes.ts
@@ -87,6 +87,7 @@ export function changeIcon(context) {
 }
 
 export function changeName(context) {
+    if (context.config.styles?.includes("card.querySelector('.bubble-name').innerText")) return;
     const name = getName(context);
     if (name !== context.elements.previousName) {
       context.elements.name.innerText = name;

diff --git a/src/cards/cover/styles.ts b/src/cards/cover/styles.ts
@@ -90,6 +90,7 @@ export default `
         background: var(--bubble-cover-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
         height: 42px;
         border-radius: var(--bubble-cover-border-radius, var(--bubble-border-radius, 32px));
+        box-shadow: var(--bubble-cover-box-shadow, var(--bubble-button-box-shadow, var(--bubble-box-shadow, none)));
         align-items: center;
         justify-content: center;
         cursor: pointer;

diff --git a/src/cards/media-player/changes.ts b/src/cards/media-player/changes.ts
@@ -77,8 +77,8 @@ export function changeBackground(context) {
 }
 
 export function changeName(context) {
+    if (context.config.styles?.includes("card.querySelector('.bubble-name').innerText")) return;
     const name = getName(context);
-
     if (name !== context.previousName) {
         context.elements.name.innerText = name;
         context.previousName = name;
@@ -168,7 +168,7 @@ export function changeVolumeIcon(context) {
     context.elements.volumeButton.setAttribute("icon", newIcon);
     context.elements.mediaInfoContainer.style.opacity = newOpacity;
     context.elements.nameContainer.style.opacity = newOpacity;
-    if(context.elements.subButtonContainer)context.elements.subButtonContainer.style.opacity = newOpacity;
+    if (context.elements.subButtonContainer) context.elements.subButtonContainer.style.opacity = newOpacity;
     context.elements.previousButton.style.opacity = newOpacity;
     context.elements.nextButton.style.opacity = newOpacity;
     context.elements.powerButton.style.opacity = newOpacity;
@@ -242,4 +242,4 @@ export function changeStyle(context) {
     if (context.elements.customStyle) {
         context.elements.customStyle.innerText = customStyle;
     }
-}
+}
diff --git a/src/cards/media-player/styles.ts b/src/cards/media-player/styles.ts
@@ -20,6 +20,7 @@ export default `
         background-color: var(--bubble-media-player-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
         touch-action: pan-y;
         border-radius: inherit;
+        box-shadow: var(--bubble-media-player-box-shadow, var(--bubble-box-shadow, none));
     }
 
     .bubble-media-player {

diff --git a/src/cards/pop-up/changes.ts b/src/cards/pop-up/changes.ts
@@ -3,6 +3,7 @@ import { getIcon, getIconColor, getImage, getName, getState, isEntityType, isSta
 import { getBackdrop } from "./create.ts";
 import { addHash, onEditorChange, removeHash } from "./helpers.ts";
 import { initializesubButtonIcon } from '../../tools/global-changes.ts';
+import { checkConditionsMet, validateConditionalConfig, ensureArray } from '../../tools/validate-condition.ts';
 
 export function changeEditor(context) {
     if (!context.verticalStack) return;
@@ -110,34 +111,63 @@ export function changeStyle(context) {
     backdropCustomStyle.innerText = customStyle;
 }
 
-
 export function changeTriggered(context) {
-    let triggerEntity = context.config.trigger_entity ?? '';
+    const triggerConditions = context.config.trigger;
 
-    if (triggerEntity === '') return;
+    if (triggerConditions) {
+        const isInitialLoad = !context.hasPageLoaded;
+        context.hasPageLoaded = true;
 
-    let triggerState = context.config.trigger_state ?? '';
-    let triggerClose = context.config.trigger_close ?? false;
-    let triggerEntityState = context._hass.states[triggerEntity]?.state;
+        console.log(context.hashAdded)
 
-    if (!triggerEntity) return;
-    if (!triggerState) return;
-    if (context.oldTriggerEntityState === triggerEntityState) return;
+        //Check conditions
+        const triggerConditions_array = ensureArray(triggerConditions);
+        if (validateConditionalConfig(triggerConditions_array)){
+            const trigger = checkConditionsMet(triggerConditions_array,context._hass);
 
-    const isInitialLoad = !context.hasPageLoaded;
-    context.hasPageLoaded = true;
+            if (trigger === context.previousTrigger) return;
 
-    if (context.config.hash === location.hash) {
-        if (triggerClose && triggerState !== triggerEntityState) {
-            if (!isInitialLoad) {
-                removeHash();
-            }
+            if (context.config.hash === location.hash) {
+                if (!trigger && !isInitialLoad) {
+                    removeHash();
+                }
+            } else {
+                if (trigger) {
+                    addHash(context.config.hash);
+                }
+            }  
+
+            context.previousTrigger = trigger;          
         }
     } else {
-        if (triggerEntityState === triggerState) {
-            addHash(context.config.hash);
+        // Deprecated method
+        let triggerEntity = context.config.trigger_entity ?? '';
+
+        if (triggerEntity === '') return;
+
+        let triggerState = context.config.trigger_state ?? '';
+        let triggerClose = context.config.trigger_close ?? false;
+        let triggerEntityState = context._hass.states[triggerEntity]?.state;
+
+        if (!triggerEntity) return;
+        if (!triggerState) return;
+        if (context.oldTriggerEntityState === triggerEntityState) return;
+
+        const isInitialLoad = !context.hasPageLoaded;
+        context.hasPageLoaded = true;
+
+        if (context.config.hash === location.hash) {
+            if (triggerClose && triggerState !== triggerEntityState) {
+                if (!isInitialLoad) {
+                    removeHash();
+                }
+            }
+        } else {
+            if (triggerEntityState === triggerState) {
+                addHash(context.config.hash);
+            }
         }
-    }
 
-    context.oldTriggerEntityState = triggerEntityState;
+        context.oldTriggerEntityState = triggerEntityState;        
+    }
 }
diff --git a/src/cards/select/changes.ts b/src/cards/select/changes.ts
@@ -36,6 +36,7 @@ export function changeIcon(context) {
 }
 
 export function changeName(context) {
+  if (context.config.styles?.includes("card.querySelector('.bubble-name').innerText")) return;
   const name = getName(context);
   if (name !== context.elements.previousName) {
     applyScrollingEffect(context, context.elements.name, name);

diff --git a/src/cards/select/helpers.ts b/src/cards/select/helpers.ts
@@ -21,17 +21,17 @@ export function getTranslatedAttribute(context, state, attribute, option) {
 export function getSelectedAttribute(state, attribute) {
     switch (attribute) {
         case 'fan_modes':
-            return state.attributes.fan_mode;
+            return state.attributes.fan_mode || null;
         case 'swing_modes':
-            return state.attributes.swing_mode;
+            return state.attributes.swing_mode || null;
         case 'preset_modes':
-            return state.attributes.preset_mode;
+            return state.attributes.preset_mode || null;
         case 'effect_list':
-            return state.attributes.effect;
+            return state.attributes.effect || null;
         case 'source_list':
-            return state.attributes.source;
+            return state.attributes.source || null;
         case 'sound_mode_list':
-            return state.attributes.sound_mode;
+            return state.attributes.sound_mode || null;
         default:
             return state.state;
     }
@@ -68,6 +68,7 @@ export function getOptionIcon(context, state, attribute, option) {
             icon.icon = getHvacModeIcon(option);
             break;
         case 'fan_modes':
+            if (!state.attributes.fan_modes) return null;
             icon = document.createElement('ha-attribute-icon');
             icon.slot = 'graphic';
             icon.attribute = 'fan_mode';

diff --git a/src/cards/select/styles.ts b/src/cards/select/styles.ts
@@ -82,6 +82,7 @@ export default `
         height: 50px;
         background-color: var(--bubble-select-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
         border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px));
+        box-shadow: var(--bubble-select-box-shadow, var(--bubble-box-shadow, none));
         touch-action: pan-y;
         box-sizing: border-box;
         border: solid 2px transparent;

diff --git a/src/cards/separator/changes.ts b/src/cards/separator/changes.ts
@@ -12,6 +12,7 @@ export function changeIcon(context) {
   }
 }
 export function changeName(context) {
+  if (context.config.styles?.includes("card.querySelector('.bubble-name').innerText")) return;
   const name = getName(context);
   if (name !== context.elements.name.innerText) {
       context.elements.name.innerText = name;