Fix the pop-up backdrop issue + Faster pop-ups

Clooos · Aug 10, 2024 · 233fbe9 · 233fbe9
1 parent 88e6314
commit 233fbe9
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 45 deletions.
diff --git a/dist/bubble-card.js b/dist/bubble-card.js
diff --git a/src/cards/pop-up/create.ts b/src/cards/pop-up/create.ts
@@ -31,6 +31,8 @@ export function getBackdrop(context) {
   document.head.appendChild(backdropCustomStyle);
 
   const backdropElement = createElement('div', 'bubble-backdrop backdrop is-hidden');
+  backdropElement.style.willChange = 'all';
+
   if (context.config.hide_backdrop) {
     backdropElement.style.display = 'none';
     backdropElement.style.pointerEvents = 'none';
@@ -49,6 +51,8 @@ export function getBackdrop(context) {
 
   backdrop = { hideBackdrop, showBackdrop, backdropElement, backdropCustomStyle };
 
+  backdropElement.style.willChange = '';
+
   return backdrop;
 }
 

diff --git a/src/cards/pop-up/helpers.ts b/src/cards/pop-up/helpers.ts
@@ -32,16 +32,21 @@ export function addHash(hash) {
 }
 
 export function closePopup(context) {
+  const { hideBackdrop, showBackdrop } = getBackdrop(context);
+
   if (context.popUp.classList.contains('is-popup-closed')) return;
 
   popupCount--;
   document.body.style.overflow = '';
+  context.popUp.classList.add('will-change');
 
   // Clear any existing timeouts
   clearTimeout(context.hideContentTimeout);
   clearTimeout(context.removeDomTimeout);
   clearTimeout(context.closeTimeout);
 
+  hideBackdrop();
+
   // Hide content after delay
   context.hideContentTimeout = setTimeout(() => {
     context.popUp.style.display = 'none';
@@ -75,6 +80,7 @@ export function closePopup(context) {
   }, 360);
 
   context.popUp.classList.replace('is-popup-opened', 'is-popup-closed');
+  context.popUp.classList.remove('will-change');
 
   // Execute close action if defined
   if (context.config.close_action) {
@@ -83,7 +89,13 @@ export function closePopup(context) {
 }
 
 export function openPopup(context) {
+  const { hideBackdrop, showBackdrop } = getBackdrop(context);
+
   if (context.popUp.classList.contains('is-popup-opened')) return;
+
+  popupCount++;
+  showBackdrop();
+  context.popUp.classList.add('will-change');
 
   if (context.sectionRow?.tagName.toLowerCase() === 'hui-card') {
     context.sectionRow.hidden = false;
@@ -100,11 +112,6 @@ export function openPopup(context) {
   if (context.popUp.parentNode !== context.verticalStack) {
     context.verticalStack.appendChild(context.popUp);
   }
-
-  // Force a reflow to ensure the popup is fully appended and recognized by the DOM
-  void context.popUp.offsetWidth;
-
-  popupCount++;
 
   // Add event listeners
   context.popUp.addEventListener('touchstart', context.resetCloseTimeout, { passive: true });
@@ -136,22 +143,17 @@ export function openPopup(context) {
   if (context.config.open_action) {
     callAction(context.popUp, context.config, 'open_action');
   }
+
+  context.popUp.classList.remove('will-change');
 }
 
 export function onUrlChange(context) {
-  const { hideBackdrop, showBackdrop } = getBackdrop(context);
   return function() {
     if (context.config.hash === location.hash) {
       openPopup(context);
     } else {
       closePopup(context);
     }
-
-    if (popupCount === 0 || context.editor) {
-      hideBackdrop();
-    } else {
-      showBackdrop();
-    }
   }
 }
 

diff --git a/src/cards/pop-up/styles.ts b/src/cards/pop-up/styles.ts
@@ -32,7 +32,6 @@ export default `
   }
   .bubble-pop-up {
       transition: transform 0.3s ease;
-      will-change: transform;
       position: fixed;
       width: 100%;
       max-width: 100%;
@@ -130,6 +129,9 @@ export default `
       mask-image: none;
       -webkit-mask-image: none;    
   }
+  .will-change {
+    will-change: all;
+  }
 
   .no-header .bubble-header-container {
       visibility: hidden !important;

diff --git a/src/var/version.ts b/src/var/version.ts
@@ -1 +1 @@
-export let version = 'v2.2.0-beta.1';
+export let version = 'v2.2.0-beta.2';