Sub-buttons fix #701 #702 #704 #707 + Backdrop issue #703

Clooos · Aug 13, 2024 · 8e240ed · 8e240ed
1 parent 24082f2
commit 8e240ed
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 76 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
@@ -36,12 +36,15 @@ export function getBackdrop(context) {
     backdropElement.style.display = 'none';
     backdropElement.style.pointerEvents = 'none';
   }
+
   document.body.appendChild(backdropElement);
+  backdropElement.style.setProperty('--custom-backdrop-filter', `blur(${context.config.bg_blur ?? 10}px)`);
 
   function showBackdrop() {
-    backdropElement.style.setProperty('--custom-backdrop-filter', `blur(${context.config.bg_blur ?? 10}px)`);
-    backdropElement.classList.add('is-visible');
-    backdropElement.classList.remove('is-hidden');
+    requestAnimationFrame(() => {
+      backdropElement.classList.add('is-visible');
+      backdropElement.classList.remove('is-hidden');
+    });
   }
 
   function hideBackdrop() {

diff --git a/src/cards/pop-up/helpers.ts b/src/cards/pop-up/helpers.ts
@@ -32,8 +32,6 @@ export function addHash(hash) {
 }
 
 export function closePopup(context) {
-  const { hideBackdrop } = getBackdrop(context);
-
   if (context.popUp.classList.contains('is-popup-closed')) return;
 
   popupCount--;
@@ -43,8 +41,13 @@ export function closePopup(context) {
   clearTimeout(context.removeDomTimeout);
   clearTimeout(context.closeTimeout);
 
+  const { hideBackdrop } = getBackdrop(context);
   hideBackdrop();
 
+  requestAnimationFrame(() => {
+    context.popUp.classList.replace('is-popup-opened', 'is-popup-closed');
+  });
+
   context.hideContentTimeout = setTimeout(() => {
     context.popUp.style.display = 'none';
 
@@ -75,65 +78,61 @@ export function closePopup(context) {
     }
   }, 320);
 
-  context.popUp.classList.replace('is-popup-opened', 'is-popup-closed');
-
   if (context.config.close_action) {
     callAction(context, context.config, 'close_action');
   }
 }
 
 export function openPopup(context) {
-  const { showBackdrop } = getBackdrop(context);
-
   if (context.popUp.classList.contains('is-popup-opened')) return;
 
   // Clear all existing timeouts before starting a new one
   clearTimeout(context.hideContentTimeout);
   clearTimeout(context.removeDomTimeout);
   clearTimeout(context.closeTimeout);
 
-  popupCount++;
-  showBackdrop();
-  document.body.style.overflow = 'hidden';
-
-  if (context.sectionRow?.tagName.toLowerCase() === 'hui-card') {
-    context.sectionRow.hidden = false;
-    context.sectionRow.style.display = "";
-
-    if (context.sectionRowContainer?.classList.contains('card')) {
-      context.sectionRowContainer.style.display = "";
-    }
-  }
-
-  clearTimeout(context.removeDomTimeout);
-
   if (context.popUp.parentNode !== context.verticalStack) {
     context.verticalStack.appendChild(context.popUp);
   }
-
-  context.popUp.addEventListener('touchstart', context.resetCloseTimeout, { passive: true });
 
-  if (context.config.close_on_click ?? false) {
-    context.popUp.addEventListener('mouseup', removeHash, { passive: true });
-    context.popUp.addEventListener('touchend', removeHash, { passive: true });
-  }
+  popupCount++;
 
-  context.popUp.style.display = '';
+  const { showBackdrop } = getBackdrop(context);
+  showBackdrop();
 
   requestAnimationFrame(() => {
+    if (context.sectionRow?.tagName.toLowerCase() === 'hui-card') {
+      context.sectionRow.hidden = false;
+      context.sectionRow.style.display = "";
+
+      if (context.sectionRowContainer?.classList.contains('card')) {
+        context.sectionRowContainer.style.display = "";
+      }
+    }
+
+    context.popUp.style.display = '';
     context.popUp.style.transform = '';
-    
+
     requestAnimationFrame(() => {
       context.popUp.classList.replace('is-popup-closed', 'is-popup-opened')
     });
 
     if (context.config.close_by_clicking_outside ?? true) {
       window.addEventListener('click', clickOutside, { passive: true });
     }
+
+    document.body.style.overflow = 'hidden';
   });
+
+  context.popUp.addEventListener('touchstart', context.resetCloseTimeout, { passive: true });
+
+  if (context.config.close_on_click ?? false) {
+    context.popUp.addEventListener('mouseup', removeHash, { passive: true });
+    context.popUp.addEventListener('touchend', removeHash, { passive: true });
+  }
 
   if (context.config.auto_close > 0) {
-    context.closeTimeout = setTimeout(() => closePopup(context), context.config.auto_close); // <- Adjusted to close correctly
+    context.closeTimeout = setTimeout(() => closePopup(context), context.config.auto_close);
   }
 
   if (context.config.open_action) {
@@ -161,12 +160,5 @@ export function onEditorChange(context) {
     if (context.popUp.parentNode !== context.verticalStack) {
       context.verticalStack.appendChild(context.popUp);
     }
-  } else {
-    if (context.config.hash === location.hash) {
-      openPopup(context);
-      showBackdrop();
-    } else if (context.popUp.parentNode === context.verticalStack) {
-      context.verticalStack.removeChild(context.popUp);
-    }
   }
 }
diff --git a/src/tools/tap-actions.ts b/src/tools/tap-actions.ts
@@ -93,17 +93,21 @@ export function sendActionEvent(element, config, action, defaultEntity, defaultA
 
 export function addActions(element, config, defaultEntity, defaultActions) {
   const handler = new ActionHandler(element, config, sendActionEvent, defaultEntity, defaultActions);
+
+  element.addEventListener('pointerdown', handler.handleStart.bind(handler));
+  element.addEventListener('pointerup', handler.handleEnd.bind(handler));
+  element.addEventListener('contextmenu', (e) => e.preventDefault());
+
   const tapAction = config?.tap_action?.action || defaultActions?.tap_action?.action || "more-info";
   const doubleTapAction = config?.double_tap_action?.action || defaultActions?.double_tap_action?.action || "toggle";
   const holdAction = config?.hold_action?.action || defaultActions?.hold_action?.action || "toggle";
 
   if (tapAction === "none" && doubleTapAction === "none" && holdAction === "none") {
     element.style.cursor = '';
+    //element.style.pointerEvents = 'none';
   } else {
     element.style.cursor = 'pointer';
-    element.addEventListener('pointerdown', handler.handleStart.bind(handler));
-    element.addEventListener('pointerup', handler.handleEnd.bind(handler));
-    element.addEventListener('contextmenu', (e) => e.preventDefault());
+    //element.style.pointerEvents = 'auto';
     element.addEventListener('click', () => forwardHaptic("selection"));
   }
 }

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