well-petal 0.0.21 → 0.0.23

package/src/lib/animations.ts

@@ -0,0 +1,76 @@
+export function animateScaleUp(): GSAPTweenVars {
+  return {
+    from: { scale: 0, opacity: 0 },
+    to: { scale: 1, opacity: 1, ease: "power3.inOut" },
+  };
+}
+export function animateScaleDown(): GSAPTweenVars {
+  return {
+    from: { scale: 1, opacity: 0 },
+    to: { scale: 0, opacity: 1, ease: "power3.inOut" },
+  };
+}
+export function animateOpenSlideUp(): GSAPTweenVars {
+  return {
+    from: { y: "100%", x: "0%", opacity: 0 }, // From bottom
+    to: { y: "0%", x: "0%", opacity: 1, ease: "power3.inOut" }, // To top
+  };
+}
+export function animateOpenSlideDown(): GSAPTweenVars {
+  return {
+    from: { y: "-100%", x: "0%", opacity: 0 }, // From top
+    to: { y: "0%", x: "0%", opacity: 1, ease: "power3.inOut" }, // To bottom
+  };
+}
+export function animateOpenSlideRight(): GSAPTweenVars {
+  return {
+    from: { x: "-100%", y: "0%", opacity: 0 }, // From left
+    to: { x: "0%", y: "0%", opacity: 1, ease: "power3.inOut" }, // To center
+  };
+}
+export function animateOpenSlideLeft(): GSAPTweenVars {
+  return {
+    from: { x: "100%", y: "0%", opacity: 0 }, // From right
+    to: { x: "0%", y: "0%", opacity: 1, ease: "power3.inOut" }, // To center
+  };
+}
+export function animateCloseSlideUp(): GSAPTweenVars {
+  return {
+    from: { y: "0%", x: "0%", opacity: 1 }, // From bottom
+    to: { y: "-100%", x: "0%", opacity: 0, ease: "power3.inOut" }, // To top
+  };
+}
+export function animateCloseSlideDown(): GSAPTweenVars {
+  return {
+    from: { y: "0%", x: "0%", opacity: 1 }, // From top
+    to: { y: "100%", x: "0%", opacity: 0, ease: "power3.inOut" }, // To bottom
+  };
+}
+export function animateCloseSlideRight(): GSAPTweenVars {
+  return {
+    from: { x: "0%", y: "0%", opacity: 1 }, // From left
+    to: { x: "100%", y: "0%", opacity: 0, ease: "power3.inOut" }, // To center
+  };
+}
+export function animateCloseSlideLeft(): GSAPTweenVars {
+  return {
+    from: { x: "0%", y: "0%", opacity: 1 }, // From right
+    to: { x: "-100%", y: "0%", opacity: 0, ease: "power3.inOut" }, // To center
+  };
+}
+
+// Mask animations
+
+export function animateMaskOpen(opacity: number): GSAPTweenVars {
+  return {
+    from: { opacity: 0 },
+    to: { opacity: opacity, duration: 0.5 },
+  };
+}
+
+export function animateMaskClosed(opacity: number): GSAPTweenVars {
+  return {
+    from: { opacity: opacity },
+    to: { opacity: 0, duration: 0.5 },
+  };
+}

package/src/lib/attributes.ts

@@ -0,0 +1,48 @@
+export interface PetalElements {
+  name: string;
+  trigger: Element;
+  popup: HTMLElement;
+  mask: Element;
+  slot: Element;
+}
+
+// BASE
+export const ATTR_PETAL_NAME = "petal";
+export const ATTR_PETAL_ELEMENT = "petal-el";
+
+// BEHAVIOR
+export const ATTR_PETAL_SHOW_ONCE = "petal-show-once"; // Regardless of other settings, only show the popup once per user session
+export const ATTR_PETAL_SHOW_DELAY = "petal-show-delay"; // Time to wait before showing popup (in seconds)
+export const ATTR_PETAL_SESSION_TTL = "petal-session-ttl"; // Time to keep user session (in hours)
+
+/**-------------------------*
+ * POPUP
+ *--------------------------*/
+
+// ELEMENTS
+export const ATTR_PETAL_POPUP = "popup";
+export const ATTR_PETAL_OPEN = "open";
+export const ATTR_PETAL_CLOSE = "close";
+export const ATTR_PETAL_MASK = "mask";
+export const ATTR_PETAL_SLOT = "slot";
+
+// MASK
+export const ATTR_PETAL_MASK_OPACITY = "petal-mask-opacity";
+export const ATTR_PETAL_MASK_CLOSE = "petal-mask-close";
+
+// ANIMATIONS
+export const ATTR_PETAL_ANIM_OPEN = "petal-anim-open";
+export const ATTR_PETAL_ANIM_CLOSE = "petal-anim-close";
+export const ATTR_PETAL_ANIM_OPEN_MOBILE = "petal-anim-open-mobile";
+export const ATTR_PETAL_ANIM_CLOSE_MOBILE = "petal-anim-close-mobile";
+export const ATTR_PETAL_DURATION = "petal-duration";
+
+/**-------------------------*
+ * BANNER
+ *--------------------------*/
+
+// ELEMENTS
+export const ATTR_PETAL_BANNER = "banner";
+export const ATTR_PETAL_BANNER_CLOSE = "banner-close";
+
+export const ATTR_PETAL_BANNER_CLOSED_CLASS = "petal-hide-nav-banner";

package/src/lib/breakpoints.ts

@@ -0,0 +1,4 @@
+// Device check
+export function isMobile(): boolean {
+  return window.innerWidth <= 768;
+}

package/src/lib/console.ts

@@ -0,0 +1,51 @@
+// Custom Error classes for Petal
+export class PetalError extends Error {
+  constructor(
+    message: string,
+    public readonly element?: Element,
+    public readonly petalName?: string
+  ) {
+    super(message);
+    this.name = "PetalError";
+  }
+}
+
+export class MissingNameError extends PetalError {
+  constructor(trigger: Element) {
+    super('Trigger is missing the "petal" attribute', trigger);
+    this.name = "MissingNameError";
+  }
+}
+
+export class MissingPopupError extends PetalError {
+  constructor(popupName: string, trigger: Element) {
+    super(`Popup with name "${popupName}" not found`, trigger, popupName);
+    this.name = "MissingPopupError";
+  }
+}
+
+export class MissingTriggerError extends PetalError {
+  constructor(popupName: string, trigger: Element) {
+    super(`Trigger error for "${popupName}"`, trigger, popupName);
+    this.name = "MissingTriggerError";
+  }
+}
+
+export class MissingMaskError extends PetalError {
+  constructor(popupName: string, trigger: Element) {
+    super(`Mask not found for "${popupName}"`, trigger, popupName);
+    this.name = "MissingMaskError";
+  }
+}
+
+export class MissingSlotError extends PetalError {
+  constructor(popupName: string, trigger: Element) {
+    super(`Slot not found for "${popupName}"`, trigger, popupName);
+    this.name = "MissingSlotError";
+  }
+}
+
+// Helper function to log errors (for backward compatibility or simple logging)
+export function logPetalError(error: PetalError): void {
+  console.error(`[${error.name}]:`, error.message, error.element);
+}

package/src/lib/helpers.ts

@@ -0,0 +1,5 @@
+import { ATTR_PETAL_ELEMENT } from "./attributes";
+
+export function getAllPetalElementsOfType(el: string): NodeListOf<Element> {
+  return document.querySelectorAll(`[${ATTR_PETAL_ELEMENT}='${el}']`);
+}

package/src/lib/memory.ts

@@ -0,0 +1,54 @@
+import { PetalElements } from "./attributes";
+
+// MEMORY
+type MemoryItem = "popup" | "banner";
+
+export function storeClosedState(type: MemoryItem, petal: PetalElements) {
+  const { name } = petal;
+  const now = new Date();
+  sessionStorage.setItem(getMemoryKey(type, name), now.getTime().toString());
+}
+
+/**
+ * Check Closed State in Session Storage
+ * @param type The type of element (popup or banner)
+ * @param petal The Petal to check
+ * @param sessionTTLMinutes The length that the session is valid for (in minutes)
+ * @returns True if the element has been closed in this session and the session is still valid, false otherwise
+ */
+export function checkClosedState(type: MemoryItem, petal: PetalElements, sessionTTLMinutes: number): boolean {
+  const { name } = petal;
+  const timestampStr = sessionStorage.getItem(getMemoryKey(type, name));
+  if (!timestampStr) return false;
+
+  const timestamp = parseInt(timestampStr, 10);
+  if (isNaN(timestamp)) {
+    sessionStorage.removeItem(getMemoryKey(type, name));
+    return false;
+  }
+
+  const now = new Date();
+  const itemTime = new Date(timestamp);
+  const diffMinutes = (now.getTime() - itemTime.getTime()) / (1000 * 60);
+
+  if (diffMinutes > sessionTTLMinutes) {
+    // Session expired
+    sessionStorage.removeItem(getMemoryKey(type, name));
+    return false;
+  }
+
+  return true;
+}
+
+// Legacy function names for backward compatibility
+export function storePopupClosedState(petal: PetalElements) {
+  storeClosedState("popup", petal);
+}
+
+export function checkPopupClosedState(petal: PetalElements, sessionTTLMinutes: number): boolean {
+  return checkClosedState("popup", petal, sessionTTLMinutes);
+}
+
+function getMemoryKey(key: MemoryItem, name: string) {
+  return `petal_memory_${key}_${name}`;
+}

package/src/petal.css

@@ -0,0 +1,11 @@
+/** BANNER **/
+.petal-hide-nav-banner [petal-el="banner"] {
+  display: none;
+}
+
+/** NAV **/
+
+/* Disable scrolling when mobile nav is open */
+body:has([petal-el="nav"] .w-nav-button.w--open):not(:has([petal-el="nav-desktop"]:not(.w-condition-invisible))) {
+  overflow: hidden;
+}

package/src/petal.ts

@@ -1,92 +1,5 @@
-import gsap from "gsap";
-import { animateMaskClosed, animateMaskOpen, getAnimation, getAnimationNew, isPopupAnimation, PopupAnimation } from "./animation";
-import { pauseVideo } from "./video";
+import { initializeAllPopups } from "./popup";
+import { initializeBanner } from "./banner";
 
-// Error types for debug logging
-export type ErrorType = "NO_NAME" | "NO_TRIGGER" | "NO_POPUP" | "NO_MASK" | "NO_SLOT";
-
-// Initialize popup triggers
-document.querySelectorAll("[petal-el='trigger'], [petal-el='mask']").forEach((trigger) => {
-  const popupName = trigger.getAttribute("petal");
-  if (!popupName) {
-    logError("NO_NAME", "", trigger);
-    return;
-  }
-
-  const popup = document.querySelector(`[petal='${popupName}'][petal-el='popup']`) as HTMLElement | null;
-  if (!popup) {
-    logError("NO_POPUP", popupName, trigger);
-    return;
-  }
-
-  // Popup Elements
-  const mask = popup.querySelector("[petal-el='mask']");
-  const slot = popup.querySelector("[petal-el='slot']");
-
-  // Mask Settings
-  const maskOpacity = parseFloat(mask?.getAttribute("petal-mask-opacity") || "0.15");
-
-  // Initialize GSAP timeline
-  const tl = gsap.timeline();
-
-  // Initialize Popup
-  gsap.set(slot, { opacity: 0 });
-
-  trigger.addEventListener("click", () => animate(popup));
-
-  // Animate open/close
-  function animate(popup: HTMLElement): void {
-    if (!slot) console.warn("A slot was not found for this popup.");
-
-    console.log(`[Petal Popup]`, {
-      popupName,
-      popup,
-      slot,
-      maskOpacity,
-      open,
-    });
-
-    // If the popup is closed, open it
-    if (!open) {
-      // Animate Popup
-      tl.set(popup, { display: "flex" });
-      // Animate Mask
-      if (mask) {
-        tl.fromTo(mask, animateMaskOpen(maskOpacity).from, animateMaskOpen(maskOpacity).to, "<");
-      }
-      // Animate the popup
-      const anim = getAnimationNew(popup);
-      console.log(anim);
-      tl.fromTo(slot, anim.from, anim.to);
-    }
-
-    // If the popup is open, close it
-    else {
-      // Pause any videos in the popup
-      pauseVideo(popup);
-      // Animate the popup
-      const anim = getAnimationNew(popup);
-      console.log(anim);
-      tl.fromTo(slot, anim.from, anim.to);
-      // Animate Mask Closed
-      if (mask) {
-        tl.fromTo(mask, animateMaskClosed(maskOpacity).from, animateMaskClosed(maskOpacity).to, "<");
-      }
-      tl.set(popup, { display: "none" });
-    }
-  }
-});
-
-// Centralized error logging
-function logError(error: ErrorType, popupName: string, trigger: Element): void {
-  switch (error) {
-    case "NO_NAME":
-      console.error(`Trigger is missing the "petal" attribute:`, trigger);
-      break;
-    case "NO_POPUP":
-      console.error(`Popup with name "${popupName}" not found for trigger:`, trigger);
-      break;
-    default:
-      console.error(`Popup error [${error}] for "${popupName}":`, trigger);
-  }
-}
+initializeAllPopups();
+initializeBanner();

package/src/popup.ts

@@ -0,0 +1,132 @@
+import { gsap } from "gsap";
+import { getPopupGSAPAnimation } from "./animation";
+import { MissingMaskError, MissingNameError, MissingPopupError, MissingSlotError, PetalError } from "./lib/console";
+import { animateMaskOpen, animateMaskClosed } from "./lib/animations";
+import { PetalElements, ATTR_PETAL_MASK_OPACITY, ATTR_PETAL_OPEN, ATTR_PETAL_CLOSE, ATTR_PETAL_MASK_CLOSE, ATTR_PETAL_ELEMENT, ATTR_PETAL_POPUP, ATTR_PETAL_NAME } from "./lib/attributes";
+import { getAllPetalElementsOfType } from "./lib/helpers";
+import { storePopupClosedState } from "./lib/memory";
+import { pauseVideo } from "./video";
+
+export function initializeAllPopups(): void {
+  const popups = getAllPetalElementsOfType(ATTR_PETAL_POPUP);
+
+  popups.forEach((popup) => {
+    const popupElement = popup as HTMLElement;
+    const mask = findPopupElement(popup, "mask") as HTMLElement | null;
+    const slot = findPopupElement(popup, "slot") as HTMLElement | null;
+
+    // Set slot opacity to 0
+    if (slot) slot.style.opacity = "0";
+
+    // Set mask opacity to 0
+    if (mask) mask.style.opacity = "0";
+
+    // Set popup display to none
+    popupElement.style.display = "none";
+  });
+}
+
+export function openPopup(petal: PetalElements): void {
+  const { name, popup, slot, mask } = petal;
+  const tl = gsap.timeline();
+
+  // Set Popup display to flex
+  tl.set(popup, { display: "flex" });
+  // Animate Mask open
+  const maskOpacity = parseFloat(mask?.getAttribute(ATTR_PETAL_MASK_OPACITY) || "0.15");
+  tl.fromTo(mask, animateMaskOpen(maskOpacity).from, animateMaskOpen(maskOpacity).to, "<");
+  // Animate Slot Open
+  const anim = getPopupGSAPAnimation(popup, "open");
+  tl.set(slot, { clearProps: "x,y,scale,transform" });
+  tl.fromTo(slot, anim.from, anim.to);
+}
+
+export function closePopup(petal: PetalElements): void {
+  const { name, popup, slot, mask } = petal;
+  const tl = gsap.timeline();
+
+  // VIDEO: Pause any videos inside the popup
+  pauseVideo(popup);
+  // SESSION: Store popup closed state
+  storePopupClosedState(petal);
+  // Animate the Slot Closed
+  const anim = getPopupGSAPAnimation(popup, "close");
+  tl.fromTo(slot, anim.from, anim.to);
+  // Animate Mask Closed
+  if (mask) tl.to(mask, animateMaskClosed(0).to, "<");
+
+  // Hide the Popup and clear transforms so they don't persist
+  tl.set(popup, { display: "none" });
+  tl.set(slot, { clearProps: "x,y,scale,transform" });
+}
+
+export function initializePopupTriggers(): void {
+  // Initialize Popup Open Triggers
+  const openTriggers = getAllPetalElementsOfType(ATTR_PETAL_OPEN);
+  forEachPopupTrigger(openTriggers, (petal) => {
+    const { trigger } = petal;
+    trigger.addEventListener("click", () => openPopup(petal));
+  });
+
+  // Initialize Popup Close Triggers
+  const closeTriggers = getAllPetalElementsOfType(ATTR_PETAL_CLOSE);
+  forEachPopupTrigger(closeTriggers, (petal) => {
+    const { trigger } = petal;
+    trigger.addEventListener("click", () => closePopup(petal));
+  });
+
+  // Initialize Mask Close Triggers (masks with petal-mask-close="true")
+  const popups = getAllPetalElementsOfType(ATTR_PETAL_POPUP);
+  popups.forEach((popup) => {
+    const mask = findPopupElement(popup, "mask") as HTMLElement | null;
+    const maskClose = popup.getAttribute(ATTR_PETAL_MASK_CLOSE) === "true";
+    if (mask && maskClose) {
+      mask.addEventListener("click", () => {
+        const slot = findPopupElement(popup, "slot") as HTMLElement | null;
+        const name = popup.getAttribute(ATTR_PETAL_NAME) || popup.id;
+        if (slot) {
+          closePopup({ name, popup: popup as HTMLElement, slot, mask, trigger: mask });
+        }
+      });
+    }
+  });
+}
+
+export function findPetal(el: Element): HTMLElement {
+  const popupName = el.getAttribute(ATTR_PETAL_NAME);
+  if (!popupName) throw new MissingNameError(el);
+
+  const popup = document.querySelector(`[${ATTR_PETAL_NAME}='${popupName}'][${ATTR_PETAL_ELEMENT}='${ATTR_PETAL_POPUP}']`) as HTMLElement | null;
+  if (!popup) throw new MissingPopupError(popupName, el);
+
+  return popup;
+}
+
+export function findPopupElement(popup: Element, attr: string): HTMLElement | null {
+  return popup.querySelector(`[${ATTR_PETAL_ELEMENT}='${attr}']`);
+}
+
+// Helper to iterate over triggers with error handling
+export function forEachPopupTrigger(triggers: NodeListOf<Element>, callback: (petal: PetalElements) => void): void {
+  triggers.forEach((trigger) => {
+    try {
+      const popup = findPetal(trigger);
+      const name = trigger.getAttribute(ATTR_PETAL_NAME) || "unknown";
+
+      const mask = popup.querySelector(`[${ATTR_PETAL_ELEMENT}='mask']`) as HTMLElement;
+      if (!mask) throw new MissingMaskError(name, trigger);
+
+      const slot = popup.querySelector(`[${ATTR_PETAL_ELEMENT}='slot']`) as HTMLElement;
+      if (!slot) throw new MissingSlotError(name, trigger);
+
+      callback({ name, trigger: trigger as HTMLElement, popup, mask, slot });
+    } catch (error) {
+      if (error instanceof PetalError) {
+        // Log and skip invalid triggers
+        console.error(`[${error.name}]:`, error.message, error.element);
+      } else {
+        throw error; // Re-throw unexpected errors
+      }
+    }
+  });
+}

package/webpack.config.js

@@ -40,4 +40,19 @@ module.exports = {
             APP_VERSION: JSON.stringify(require('./package.json').version),
         }),
     ],
+    devServer: {
+        static: [
+            {
+                directory: path.join(__dirname, 'demo'),
+            },
+            {
+                directory: path.join(__dirname, 'dist'),
+            }
+        ],
+        compress: true,
+        port: 8080,
+        hot: true,
+        open: true,
+        watchFiles: ['src/**/*.ts', 'demo/**/*'],
+    },
 };