@rxdrag/website-lib 0.0.151 → 0.0.153

package/components/Dialog.astro

@@ -1,338 +1,342 @@
----
-interface Props {
-  dialogId: string;
-  dialogClass?: string | string[];
-  backdropClass?: string | string[];
-  closeSelector?: string;
-  closeAnimMs?: number;
-  forceFallback?: boolean;
-  preset?: "center" | "top";
-  openAnimMs?: number;
-  translateY?: number;
-  backdropOpacity?: number;
-  backdropBlurPx?: number;
-  topOffsetPx?: number;
-  baseTransform?: string;
-  left?: string;
-  right?: string;
-  top?: string;
-  bottom?: string;
-  openTransform?: string;
-  enterTransform?: string;
-  exitTransform?: string;
-}
-
-const {
-  dialogId,
-  dialogClass = "",
-  backdropClass = "",
-  closeSelector = "[data-dialog-close]",
-  closeAnimMs = 240,
-  forceFallback = false,
-  preset = "center",
-  openAnimMs = 320,
-  translateY = 64,
-  backdropOpacity = 0.35,
-  backdropBlurPx = 0,
-  topOffsetPx = 0,
-  baseTransform,
-  left,
-  right,
-  top,
-  bottom,
-  openTransform,
-  enterTransform,
-  exitTransform,
-} = Astro.props;
-
-const backdropClassString = Array.isArray(backdropClass)
-  ? backdropClass.join(" ")
-  : backdropClass;
-
-const resolvedBaseTransform =
-  baseTransform ||
-  (preset === "center" ? "translate(-50%,-50%)" : "translateX(-50%)");
-
-const resolvedLeft = left ?? (preset === "center" || preset === "top" ? "50%" : "auto");
-const resolvedRight = right ?? "auto";
-const resolvedTop = top ?? (preset === "center" ? "50%" : "0");
-const resolvedBottom = bottom ?? "auto";
-
-const resolvedOpenTransform = openTransform || resolvedBaseTransform;
-const resolvedEnterTransform =
-  enterTransform || `${resolvedOpenTransform} translateY(${translateY}px)`;
-const resolvedExitTransform =
-  exitTransform || `${resolvedOpenTransform} translateY(${translateY}px)`;
----
-
-<style is:global>
-  dialog[data-generic-dialog] {
-    margin: 0;
-    outline: none;
-    position: fixed;
-    left: var(--dialog-left);
-    right: var(--dialog-right);
-    top: var(--dialog-top);
-    bottom: var(--dialog-bottom);
-    transform: var(--dialog-open-transform);
-  }
-
-  @keyframes genericDialogIn {
-    from {
-      opacity: 0;
-      transform: var(--dialog-enter-transform);
-    }
-    to {
-      opacity: 1;
-      transform: var(--dialog-open-transform);
-    }
-  }
-
-  @keyframes genericDialogOut {
-    from {
-      opacity: 1;
-      transform: var(--dialog-open-transform);
-    }
-    to {
-      opacity: 0;
-      transform: var(--dialog-exit-transform);
-    }
-  }
-
-  @keyframes genericBackdropIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes genericBackdropOut {
-    from {
-      opacity: 1;
-    }
-    to {
-      opacity: 0;
-    }
-  }
-
-  dialog[data-generic-dialog][open] {
-    animation: genericDialogIn var(--dialog-open-ms) ease-out;
-    transform-origin: top center;
-  }
-
-  dialog[data-generic-dialog][data-dialog-state="closing"] {
-    animation: genericDialogOut var(--dialog-close-ms) ease-in;
-    animation-fill-mode: forwards;
-    transform-origin: top center;
-  }
-
-  dialog[data-generic-dialog]::backdrop {
-    background: rgba(0, 0, 0, var(--dialog-backdrop-opacity));
-    backdrop-filter: blur(var(--dialog-backdrop-blur));
-    animation: genericBackdropIn var(--dialog-open-ms) ease-out;
-  }
-
-  dialog[data-generic-dialog][data-dialog-state="closing"]::backdrop {
-    animation: genericBackdropOut var(--dialog-close-ms) ease-in;
-  }
-
-  dialog[data-generic-dialog] + .backdrop {
-    animation: genericBackdropIn var(--dialog-open-ms) ease-out;
-  }
-
-  dialog[data-generic-dialog] + .backdrop[data-dialog-state="closing"] {
-    animation: genericBackdropOut var(--dialog-close-ms) ease-in;
-  }
-</style>
-
-<dialog
-  id={dialogId}
-  data-generic-dialog
-  data-openable-key={dialogId}
-  data-dialog-preset={preset}
-  tabindex="-1"
-  class:list={[dialogClass]}
-  style={preset === "center"
-    ? `--dialog-left:${resolvedLeft};--dialog-right:${resolvedRight};--dialog-top:${resolvedTop};--dialog-bottom:${resolvedBottom};--dialog-open-transform:${resolvedOpenTransform};--dialog-enter-transform:${resolvedEnterTransform};--dialog-exit-transform:${resolvedExitTransform};--dialog-open-ms:${openAnimMs}ms;--dialog-close-ms:${closeAnimMs}ms;--dialog-ty:${translateY}px;--dialog-backdrop-opacity:${backdropOpacity};--dialog-backdrop-blur:${backdropBlurPx}px;`
-    : `--dialog-left:${resolvedLeft};--dialog-right:${resolvedRight};--dialog-top:${resolvedTop};--dialog-bottom:${resolvedBottom};--dialog-open-transform:${resolvedOpenTransform};--dialog-enter-transform:${resolvedEnterTransform};--dialog-exit-transform:${resolvedExitTransform};--dialog-open-ms:${openAnimMs}ms;--dialog-close-ms:${closeAnimMs}ms;--dialog-ty:${translateY}px;--dialog-backdrop-opacity:${backdropOpacity};--dialog-backdrop-blur:${backdropBlurPx}px;margin-top:${topOffsetPx}px;`}
->
-  <slot />
-</dialog>
-
-<script
-  is:inline
-  define:vars={{
-    openableKey: dialogId,
-    closeSelector,
-    closeAnimMs,
-    forceFallback,
-    backdropClassString,
-    openAnimMs,
-    backdropOpacity,
-    backdropBlurPx,
-  }}
->
-  (() => {
-    const globalKey = "__generic_dialog_open_bound__";
-    const w = window;
-    if (!w[globalKey]) w[globalKey] = new Set();
-
-    const backdropClass = backdropClassString || "";
-
-    const isDialogEl = (el) => {
-      if (!(el instanceof HTMLElement)) return false;
-      return el.tagName.toLowerCase() === "dialog";
-    };
-
-    const getDialog = () => {
-      const el = document.getElementById(openableKey);
-      if (!isDialogEl(el)) {
-        return null;
-      }
-      return el;
-    };
-
-    const isOpen = (dialog) => {
-      return dialog.open === true || dialog.hasAttribute("open");
-    };
-
-    const ensureBackdrop = (dialog) => {
-      if (dialog.nextElementSibling?.classList?.contains("backdrop")) return;
-      const backdrop = document.createElement("div");
-      backdrop.className = backdropClass
-        ? `backdrop ${backdropClass}`
-        : "backdrop";
-      backdrop.removeAttribute("data-dialog-state");
-      backdrop.style.background = `rgba(0, 0, 0, ${backdropOpacity})`;
-      backdrop.style.backdropFilter = backdropBlurPx
-        ? `blur(${backdropBlurPx}px)`
-        : "";
-      backdrop.style.animation = `genericBackdropIn ${openAnimMs}ms ease-out`;
-      backdrop.addEventListener("click", () =>
-        requestClose(dialog, "backdrop")
-      );
-      dialog.insertAdjacentElement("afterend", backdrop);
-    };
-
-    const getBackdrop = (dialog) => {
-      const next = dialog.nextElementSibling;
-      if (next && next.classList?.contains("backdrop")) return next;
-      return null;
-    };
-
-    const removeBackdrop = (dialog) => {
-      const next = dialog.nextElementSibling;
-      if (next && next.classList?.contains("backdrop")) {
-        next.remove();
-      }
-    };
-
-    const closeNow = (dialog) => {
-      if (typeof dialog.close === "function") {
-        dialog.close();
-      } else {
-        dialog.removeAttribute("open");
-      }
-      removeBackdrop(dialog);
-      document.removeEventListener("keydown", dialog.__genericDialogEscHandler);
-      dialog.__genericDialogEscHandler = undefined;
-    };
-
-    const requestClose = (dialog, reason = "unknown") => {
-      if (!isOpen(dialog)) return;
-      if (dialog.getAttribute("data-dialog-state") === "closing") return;
-      dialog.setAttribute("data-dialog-state", "closing");
-      const backdrop = getBackdrop(dialog);
-      backdrop?.setAttribute?.("data-dialog-state", "closing");
-      if (backdrop) {
-        backdrop.style.animation = `genericBackdropOut ${closeAnimMs}ms ease-in`;
-      }
-      window.setTimeout(() => {
-        dialog.removeAttribute("data-dialog-state");
-        closeNow(dialog);
-      }, closeAnimMs);
-    };
-
-    const ensureDialogBound = (dialog) => {
-      if (dialog.dataset.genericDialogBound) return;
-      dialog.dataset.genericDialogBound = "1";
-
-      dialog.addEventListener("click", (e) => {
-        if (e.target === dialog) requestClose(dialog, "dialog_blank_area");
-      });
-
-      if (typeof dialog.addEventListener === "function") {
-        dialog.addEventListener("cancel", (e) => {
-          e.preventDefault();
-          requestClose(dialog, "cancel");
-        });
-      }
-
-      dialog
-        .querySelector(closeSelector)
-        ?.addEventListener("click", () =>
-          requestClose(dialog, "close_selector")
-        );
-    };
-
-    const open = () => {
-      const dialog = getDialog();
-      if (!dialog) return;
-      ensureDialogBound(dialog);
-      if (isOpen(dialog)) return;
-
-      try {
-        const { scrollX, scrollY } = window;
-        dialog.removeAttribute("data-dialog-state");
-
-        const effectiveForceFallback =
-          forceFallback === true || window.__force_dialog_fallback__ === true;
-
-        if (!effectiveForceFallback && typeof dialog.showModal === "function") {
-          dialog.showModal();
-        } else {
-          ensureBackdrop(dialog);
-          dialog.setAttribute("open", "");
-          dialog.__genericDialogEscHandler = (e) => {
-            if (e.key === "Escape") requestClose(dialog, "esc");
-          };
-          document.addEventListener(
-            "keydown",
-            dialog.__genericDialogEscHandler
-          );
-        }
-
-        requestAnimationFrame(() => {
-          window.scrollTo(scrollX, scrollY);
-          try {
-            dialog.focus({ preventScroll: true });
-          } catch {
-            dialog.focus();
-          }
-        });
-      } catch (err) {
-      }
-    };
-
-    const init = () => {
-      if (!w[globalKey].has(openableKey)) {
-        w[globalKey].add(openableKey);
-        document.addEventListener("click", (e) => {
-          const target = e.target;
-          if (!(target instanceof Element)) return;
-          const opener = target.closest(`[data-modal-open="${openableKey}"]`);
-          if (!opener) return;
-          const cta = opener.getAttribute("data-call-to-action") || "";
-          window.lastCta = cta;
-          open();
-        });
-      }
-    };
-
-    init();
-    document.addEventListener("astro:page-load", init);
-    document.addEventListener("astro:after-swap", init);
-  })();
-</script>
+---
+interface Props {
+  dialogId: string;
+  dialogClass?: string | string[];
+  backdropClass?: string | string[];
+  closeSelector?: string;
+  closeAnimMs?: number;
+  forceFallback?: boolean;
+  preset?: "center" | "top";
+  openAnimMs?: number;
+  translateY?: number;
+  backdropOpacity?: number;
+  backdropBlurPx?: number;
+  topOffsetPx?: number;
+  baseTransform?: string;
+  left?: string;
+  right?: string;
+  top?: string;
+  bottom?: string;
+  openTransform?: string;
+  enterTransform?: string;
+  exitTransform?: string;
+}
+
+const {
+  dialogId,
+  dialogClass = "",
+  backdropClass = "",
+  closeSelector = "[data-dialog-close]",
+  closeAnimMs = 240,
+  forceFallback = false,
+  preset = "center",
+  openAnimMs = 320,
+  translateY = 64,
+  backdropOpacity = 0.35,
+  backdropBlurPx = 0,
+  topOffsetPx = 0,
+  baseTransform,
+  left,
+  right,
+  top,
+  bottom,
+  openTransform,
+  enterTransform,
+  exitTransform,
+} = Astro.props;
+
+const backdropClassString = Array.isArray(backdropClass)
+  ? backdropClass.join(" ")
+  : backdropClass;
+
+const resolvedBaseTransform =
+  baseTransform ||
+  (preset === "center" ? "translate(-50%,-50%)" : "translateX(-50%)");
+
+const resolvedLeft = left ?? (preset === "center" || preset === "top" ? "50%" : "auto");
+const resolvedRight = right ?? "auto";
+const resolvedTop = top ?? (preset === "center" ? "50%" : "0");
+const resolvedBottom = bottom ?? "auto";
+
+const resolvedOpenTransform = openTransform || resolvedBaseTransform;
+const resolvedEnterTransform =
+  enterTransform || `${resolvedOpenTransform} translateY(${translateY}px)`;
+const resolvedExitTransform =
+  exitTransform || `${resolvedOpenTransform} translateY(${translateY}px)`;
+---
+
+<style is:global>
+  dialog[data-generic-dialog] {
+    margin: 0;
+    outline: none;
+    position: fixed;
+    left: var(--dialog-left);
+    right: var(--dialog-right);
+    top: var(--dialog-top);
+    bottom: var(--dialog-bottom);
+    transform: var(--dialog-open-transform);
+    transition: none !important;
+  }
+
+  @keyframes genericDialogIn {
+    from {
+      opacity: 0;
+      transform: var(--dialog-enter-transform);
+    }
+    to {
+      opacity: 1;
+      transform: var(--dialog-open-transform);
+    }
+  }
+
+  @keyframes genericDialogOut {
+    from {
+      opacity: 1;
+      transform: var(--dialog-open-transform);
+    }
+    to {
+      opacity: 0;
+      transform: var(--dialog-exit-transform);
+    }
+  }
+
+  @keyframes genericBackdropIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes genericBackdropOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  dialog[data-generic-dialog][open] {
+    animation: genericDialogIn var(--dialog-open-ms) ease-out;
+    animation-fill-mode: both;
+    transform-origin: top center;
+    will-change: transform, opacity;
+  }
+
+  dialog[data-generic-dialog][data-dialog-state="closing"] {
+    animation: genericDialogOut var(--dialog-close-ms) ease-in;
+    animation-fill-mode: both;
+    transform-origin: top center;
+    will-change: transform, opacity;
+  }
+
+  dialog[data-generic-dialog]::backdrop {
+    background: rgba(0, 0, 0, var(--dialog-backdrop-opacity));
+    backdrop-filter: blur(var(--dialog-backdrop-blur));
+    animation: genericBackdropIn var(--dialog-open-ms) ease-out;
+  }
+
+  dialog[data-generic-dialog][data-dialog-state="closing"]::backdrop {
+    animation: genericBackdropOut var(--dialog-close-ms) ease-in;
+  }
+
+  dialog[data-generic-dialog] + .backdrop {
+    animation: genericBackdropIn var(--dialog-open-ms) ease-out;
+  }
+
+  dialog[data-generic-dialog] + .backdrop[data-dialog-state="closing"] {
+    animation: genericBackdropOut var(--dialog-close-ms) ease-in;
+  }
+</style>
+
+<dialog
+  id={dialogId}
+  data-generic-dialog
+  data-openable-key={dialogId}
+  data-dialog-preset={preset}
+  tabindex="-1"
+  class:list={[dialogClass]}
+  style={preset === "center"
+    ? `--dialog-left:${resolvedLeft};--dialog-right:${resolvedRight};--dialog-top:${resolvedTop};--dialog-bottom:${resolvedBottom};--dialog-open-transform:${resolvedOpenTransform};--dialog-enter-transform:${resolvedEnterTransform};--dialog-exit-transform:${resolvedExitTransform};--dialog-open-ms:${openAnimMs}ms;--dialog-close-ms:${closeAnimMs}ms;--dialog-ty:${translateY}px;--dialog-backdrop-opacity:${backdropOpacity};--dialog-backdrop-blur:${backdropBlurPx}px;`
+    : `--dialog-left:${resolvedLeft};--dialog-right:${resolvedRight};--dialog-top:${resolvedTop};--dialog-bottom:${resolvedBottom};--dialog-open-transform:${resolvedOpenTransform};--dialog-enter-transform:${resolvedEnterTransform};--dialog-exit-transform:${resolvedExitTransform};--dialog-open-ms:${openAnimMs}ms;--dialog-close-ms:${closeAnimMs}ms;--dialog-ty:${translateY}px;--dialog-backdrop-opacity:${backdropOpacity};--dialog-backdrop-blur:${backdropBlurPx}px;margin-top:${topOffsetPx}px;`}
+>
+  <slot />
+</dialog>
+
+<script
+  is:inline
+  define:vars={{
+    openableKey: dialogId,
+    closeSelector,
+    closeAnimMs,
+    forceFallback,
+    backdropClassString,
+    openAnimMs,
+    backdropOpacity,
+    backdropBlurPx,
+  }}
+>
+  (() => {
+    const globalKey = "__generic_dialog_open_bound__";
+    const w = window;
+    if (!w[globalKey]) w[globalKey] = new Set();
+
+    const backdropClass = backdropClassString || "";
+
+    const isDialogEl = (el) => {
+      if (!(el instanceof HTMLElement)) return false;
+      return el.tagName.toLowerCase() === "dialog";
+    };
+
+    const getDialog = () => {
+      const el = document.getElementById(openableKey);
+      if (!isDialogEl(el)) {
+        return null;
+      }
+      return el;
+    };
+
+    const isOpen = (dialog) => {
+      return dialog.open === true || dialog.hasAttribute("open");
+    };
+
+    const ensureBackdrop = (dialog) => {
+      if (dialog.nextElementSibling?.classList?.contains("backdrop")) return;
+      const backdrop = document.createElement("div");
+      backdrop.className = backdropClass
+        ? `backdrop ${backdropClass}`
+        : "backdrop";
+      backdrop.removeAttribute("data-dialog-state");
+      backdrop.style.background = `rgba(0, 0, 0, ${backdropOpacity})`;
+      backdrop.style.backdropFilter = backdropBlurPx
+        ? `blur(${backdropBlurPx}px)`
+        : "";
+      backdrop.style.animation = `genericBackdropIn ${openAnimMs}ms ease-out`;
+      backdrop.addEventListener("click", () =>
+        requestClose(dialog, "backdrop")
+      );
+      dialog.insertAdjacentElement("afterend", backdrop);
+    };
+
+    const getBackdrop = (dialog) => {
+      const next = dialog.nextElementSibling;
+      if (next && next.classList?.contains("backdrop")) return next;
+      return null;
+    };
+
+    const removeBackdrop = (dialog) => {
+      const next = dialog.nextElementSibling;
+      if (next && next.classList?.contains("backdrop")) {
+        next.remove();
+      }
+    };
+
+    const closeNow = (dialog) => {
+      if (typeof dialog.close === "function") {
+        dialog.close();
+      } else {
+        dialog.removeAttribute("open");
+      }
+      removeBackdrop(dialog);
+      document.removeEventListener("keydown", dialog.__genericDialogEscHandler);
+      dialog.__genericDialogEscHandler = undefined;
+    };
+
+    const requestClose = (dialog, reason = "unknown") => {
+      if (!isOpen(dialog)) return;
+      if (dialog.getAttribute("data-dialog-state") === "closing") return;
+      dialog.setAttribute("data-dialog-state", "closing");
+      const backdrop = getBackdrop(dialog);
+      backdrop?.setAttribute?.("data-dialog-state", "closing");
+      if (backdrop) {
+        backdrop.style.animation = `genericBackdropOut ${closeAnimMs}ms ease-in`;
+      }
+      window.setTimeout(() => {
+        dialog.removeAttribute("data-dialog-state");
+        closeNow(dialog);
+      }, closeAnimMs);
+    };
+
+    const ensureDialogBound = (dialog) => {
+      if (dialog.dataset.genericDialogBound) return;
+      dialog.dataset.genericDialogBound = "1";
+
+      dialog.addEventListener("click", (e) => {
+        if (e.target === dialog) requestClose(dialog, "dialog_blank_area");
+      });
+
+      if (typeof dialog.addEventListener === "function") {
+        dialog.addEventListener("cancel", (e) => {
+          e.preventDefault();
+          requestClose(dialog, "cancel");
+        });
+      }
+
+      dialog
+        .querySelector(closeSelector)
+        ?.addEventListener("click", () =>
+          requestClose(dialog, "close_selector")
+        );
+    };
+
+    const open = () => {
+      const dialog = getDialog();
+      if (!dialog) return;
+      ensureDialogBound(dialog);
+      if (isOpen(dialog)) return;
+
+      try {
+        const { scrollX, scrollY } = window;
+        dialog.removeAttribute("data-dialog-state");
+
+        const effectiveForceFallback =
+          forceFallback === true || window.__force_dialog_fallback__ === true;
+
+        if (!effectiveForceFallback && typeof dialog.showModal === "function") {
+          dialog.showModal();
+        } else {
+          ensureBackdrop(dialog);
+          dialog.setAttribute("open", "");
+          dialog.__genericDialogEscHandler = (e) => {
+            if (e.key === "Escape") requestClose(dialog, "esc");
+          };
+          document.addEventListener(
+            "keydown",
+            dialog.__genericDialogEscHandler
+          );
+        }
+
+        requestAnimationFrame(() => {
+          window.scrollTo(scrollX, scrollY);
+          try {
+            dialog.focus({ preventScroll: true });
+          } catch {
+            dialog.focus();
+          }
+        });
+      } catch (err) {
+      }
+    };
+
+    const init = () => {
+      if (!w[globalKey].has(openableKey)) {
+        w[globalKey].add(openableKey);
+        document.addEventListener("click", (e) => {
+          const target = e.target;
+          if (!(target instanceof Element)) return;
+          const opener = target.closest(`[data-modal-open="${openableKey}"]`);
+          if (!opener) return;
+          const cta = opener.getAttribute("data-call-to-action") || "";
+          window.lastCta = cta;
+          open();
+        });
+      }
+    };
+
+    init();
+    document.addEventListener("astro:page-load", init);
+    document.addEventListener("astro:after-swap", init);
+  })();
+</script>