well-petal 0.0.23 → 0.0.25

package/src/lib/console.ts

@@ -1,51 +0,0 @@
-// 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

@@ -1,5 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,11 +0,0 @@
-/** 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,5 +0,0 @@
-import { initializeAllPopups } from "./popup";
-import { initializeBanner } from "./banner";
-
-initializeAllPopups();
-initializeBanner();

package/src/popup.ts

@@ -1,132 +0,0 @@
-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/src/video.ts

@@ -1,6 +0,0 @@
-export function pauseVideo(popup: HTMLElement): void {
-  // Pause all <video> elements inside the popup before hiding it
-  popup.querySelectorAll("video").forEach((video) => {
-    if (!video.paused) video.pause();
-  });
-}

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "strict": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "strictFunctionTypes": true,
-    "target": "es2016",
-    "module": "ESNext",
-    "checkJs": true,
-    "moduleResolution": "bundler",
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "outDir": "package/dist",
-    "baseUrl": "./src",
-    "resolveJsonModule": true,
-    "sourceMap": true,
-    "types": ["jquery"]
-  },
-  "files": [
-    "node_modules/gsap/types/index.d.ts",
-  ],
-  "include": ["src/**/*", "src/**/*.tsx", "src/types/**/*.d.ts"],
-  "exclude": ["node_modules"]
-}

package/webpack.config.js

@@ -1,58 +0,0 @@
-// webpack.config.js
-const webpack = require('webpack');
-const path = require('path');
-
-module.exports = {
-    entry: "./src/petal.ts",
-    output: {
-        path: path.resolve(__dirname, 'dist'),
-        filename: 'petal.js',  // Output bundle file
-        library: 'petal',   // Name of the global variable if your package is used in the browser
-        libraryTarget: 'umd',   // Universal module definition, for browser and Node.js
-        globalObject: 'this',   // Ensures compatibility in different environments
-    },
-    module: {
-        rules: [
-            {
-                test: /\.css$/, // Apply this rule to all `.css` files
-                use: [
-                    'style-loader', // Injects CSS into the DOM
-                    'css-loader',   // Turns CSS into CommonJS
-                ],
-            },
-            {
-                test: /\.ts$/,
-                use: 'ts-loader',
-                exclude: /node_modules/,
-            }
-        ],
-    },
-    externals: {
-        // Any dependencies you don't want to include in your bundle
-        'some-other-external': 'commonjs2 some-other-external',
-    },
-    mode: 'development',  // Can be 'development' for debugging
-    resolve: {
-        extensions: ['.js', '.ts', '.json'], // Add file extensions you use
-    },
-    plugins: [
-        new webpack.DefinePlugin({
-            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/**/*'],
-    },
-};