Fixed errors from v2.3.1 and up + Optimizations

- [x] Fixed errors introduced in v2.3.1 and up. #1041 - [x] Fixed the « Use accent color » feature for lights, the color was not always right. #692 - [x] Optimized some parts of the code for a more fluid/stable behavior. #1035 #1065 - [x] Optimized the pop-ups for faster opening/closing in some cases.
Clooos · Dec 21, 2024 · 3a162b4 · 3a162b4
1 parent a7a49c4
commit 3a162b4
Show file tree

Hide file tree

Showing 16 changed files with 691 additions and 290 deletions.
diff --git a/dist/bubble-card.js b/dist/bubble-card.js
diff --git a/dist/bubble-pop-up-fix.js b/dist/bubble-pop-up-fix.js
diff --git a/src/bubble-pop-up-fix.ts b/src/bubble-pop-up-fix.ts
@@ -25,7 +25,7 @@ function hideElementsUntilBubbleCard() {
 hideElementsUntilBubbleCard();
 
 console.info(
-    `%c Bubble Card %c Pop-up fix`,
+    `%c Bubble Card %c Pop-up fix `,
     'background-color: #555;color: #fff;padding: 3px 2px 3px 3px;border-radius: 14px 0 0 14px;font-family: DejaVu Sans,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)',
     'background-color: #506eac;color: #fff;padding: 3px 3px 3px 2px;border-radius: 0 14px 14px 0;font-family: DejaVu Sans,Verdana,Geneva,sans-serif;text-shadow: 0 1px 0 rgba(1, 1, 1, 0.3)'
 );
diff --git a/src/cards/button/changes.ts b/src/cards/button/changes.ts
@@ -30,7 +30,9 @@ export function changeButton(context) {
   let newOpacity = '';
 
   if (buttonType === 'switch' && isOn) {
-    if (lightColor && isLight) {
+    const useAccentColor = context.config.use_accent_color;
+
+    if (lightColor && isLight && !useAccentColor) {
       newButtonColor = getIconColor(context);
       newOpacity = '.5';
     } else {
@@ -115,7 +117,7 @@ export function changeIcon(context) {
 }
 
 export function changeName(context) {
-  if (context.config.styles?.includes("card.querySelector('.bubble-name').innerText")) return;
+  // 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) {

diff --git a/src/cards/button/index.ts b/src/cards/button/index.ts
@@ -39,9 +39,8 @@ 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/climate/changes.ts b/src/cards/climate/changes.ts
@@ -64,7 +64,7 @@ export function changeIcon(context) {
 }
 
 export function changeName(context) {
-    if (context.config.styles?.includes("card.querySelector('.bubble-name').innerText")) return;
+    //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;

diff --git a/src/cards/cover/changes.ts b/src/cards/cover/changes.ts
@@ -78,7 +78,6 @@ export function changeIcon(context) {
     context.elements.buttonClose.classList.remove("disabled");
   }
 
-  // Masquer le bouton stop si non supporté
   if (!supportsStop) {
     context.elements.buttonStop.style.display = "none";
   } else {
@@ -87,7 +86,7 @@ export function changeIcon(context) {
 }
 
 export function changeName(context) {
-    if (context.config.styles?.includes("card.querySelector('.bubble-name').innerText")) return;
+    //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/media-player/changes.ts b/src/cards/media-player/changes.ts
@@ -77,7 +77,7 @@ export function changeBackground(context) {
 }
 
 export function changeName(context) {
-    if (context.config.styles?.includes("card.querySelector('.bubble-name').innerText")) return;
+    //if (context.config.styles?.includes("card.querySelector('.bubble-name').innerText")) return;
     const name = getName(context);
     if (name !== context.previousName) {
         context.elements.name.innerText = name;

diff --git a/src/cards/pop-up/create.ts b/src/cards/pop-up/create.ts
@@ -233,4 +233,4 @@ export function prepareStructure(context) {
   } catch (e) {
     console.error(e);
   }
-}
+}
diff --git a/src/cards/pop-up/helpers.ts b/src/cards/pop-up/helpers.ts
@@ -31,7 +31,7 @@ function handleTouchEnd(event, popUp) {
 export function clickOutside(event, context) {
     if (context.config.close_by_clicking_outside ?? true) {
       const targets = event.composedPath();
-      const popupTarget = targets.find(target => 
+      const popupTarget = targets.find(target =>
           target.classList?.contains('bubble-pop-up') ||
           ['HA-DIALOG', 'HA-MORE-INFO-DIALOG', 'HA-DIALOG-DATE-PICKER'].includes(target.nodeName)
       );
@@ -48,7 +48,7 @@ export function removeHash() {
     }, 50);
 }
 
-export function addHash(hash) {  
+export function addHash(hash) {
     const newURL = hash.startsWith('#') ? window.location.href.split('#')[0] + hash : hash;
     history.pushState(null, "", newURL);
     window.dispatchEvent(new Event('location-changed'));
@@ -88,9 +88,16 @@ function toggleBackdrop(context, show) {
 export function appendPopup(context, append) {
     if (context.config.background_update) return;
     const action = append ? 'appendChild' : 'removeChild';
-    requestAnimationFrame(() => {
-        context.verticalStack[action](context.popUp);
-    });
+
+    if (append) {
+        requestAnimationFrame(() => {
+            context.verticalStack.appendChild(context.popUp);
+        });
+    } else {
+        requestAnimationFrame(() => {
+            context.verticalStack.removeChild(context.popUp);
+        });
+    }
 }
 
 function updatePopupClass(popUp, open) {
@@ -101,7 +108,6 @@ function updatePopupClass(popUp, open) {
 }
 
 function updateListeners(context, add) {
-    // Création d'un wrapper lié au contexte
     if (!context.boundClickOutside) {
         context.boundClickOutside = event => clickOutside(event, context);
     }
@@ -112,19 +118,18 @@ function updateListeners(context, add) {
             context.listenersAdded = true;
         }
 
-        if (!window.clickOutsideListenerAdded) {
+        if (!context.clickOutsideListenerAdded) {
             window.addEventListener('click', context.boundClickOutside, { passive: true });
-            window.clickOutsideListenerAdded = true;
+            context.clickOutsideListenerAdded = true;
         }
     } else {
         if (context.listenersAdded) {
             context.popUp.removeEventListener('touchstart', context.resetCloseTimeout);
-            context.listenersAdded = false;
-
-            if (!location.hash && window.clickOutsideListenerAdded) {
-                window.removeEventListener('click', context.boundClickOutside);
-                window.clickOutsideListenerAdded = false;
-            }
+             context.listenersAdded = false;
+        }
+        if (context.clickOutsideListenerAdded) {
+            window.removeEventListener('click', context.boundClickOutside);
+            context.clickOutsideListenerAdded = false;
         }
     }
 }
@@ -139,9 +144,9 @@ function clearAllTimeouts(context) {
 
 export function openPopup(context) {
     if (context.popUp.classList.contains('is-popup-opened')) return;
-    
+
     clearAllTimeouts(context);
-    appendPopup(context, true);
+    appendPopup(context, true); // Afficher la pop-up structure
 
     requestAnimationFrame(() => {
         toggleBackdrop(context, true);
@@ -163,8 +168,7 @@ export function openPopup(context) {
 }
 
 export function closePopup(context) {
-    if (!context.popUp.classList.contains('is-popup-opened')) return;
-
+     if (!context.popUp.classList.contains('is-popup-opened')) return;
     clearAllTimeouts(context);
     updatePopupClass(context.popUp, false);
     toggleBackdrop(context, false);
@@ -186,7 +190,7 @@ export function closePopup(context) {
 
 export function onUrlChange(context) {
     return () => {
-        if (context.config.hash === location.hash) {
+       if (context.config.hash === location.hash) {
             hashRecentlyAdded = true;
             setTimeout(() => {
                 hashRecentlyAdded = false;

diff --git a/src/cards/select/changes.ts b/src/cards/select/changes.ts
@@ -36,7 +36,7 @@ export function changeIcon(context) {
 }
 
 export function changeName(context) {
-  if (context.config.styles?.includes("card.querySelector('.bubble-name').innerText")) return;
+  //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/separator/changes.ts b/src/cards/separator/changes.ts
@@ -12,7 +12,7 @@ export function changeIcon(context) {
   }
 }
 export function changeName(context) {
-  if (context.config.styles?.includes("card.querySelector('.bubble-name').innerText")) return;
+  //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;
-Original file line number
+Diff line change
@@ Expand Up / @@ -233,4 +233,4 @@ export function prepareStructure(context) { @@
       } catch (e) {
         console.error(e);
       }
-    }
+    }