npm - well-petal - Versions diffs - 0.0.23 → 0.0.25 - Mend

well-petal 0.0.23 → 0.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/package.json CHANGED Viewed

@@ -1,8 +1,11 @@
 {
   "name": "well-petal",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "description": "Webflow Popups powered by attributes",
-  "main": "petal.js",
+  "main": "dist/petal.js",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "webpack --config webpack.config.js",

package/.gitattributes DELETED Viewed

	@@ -1,2 +0,0 @@
1	- # Auto detect text files and perform LF normalization
2	- * text=auto

package/.prettierrc DELETED Viewed

@@ -1,5 +0,0 @@
-{
-  "tabWidth": 2,
-  "useTabs": false,
-  "printWidth": 200
-}

package/demo/index.html DELETED Viewed

@@ -1,124 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Petal Popup Demo</title>
-    <link rel="stylesheet" href="styles.css" />
-  </head>
-  <body>
-    <!-- Banner at top of page -->
-    <div petal-el="banner" petal="demo-banner" petal-session-ttl="5" class="banner">
-      <div class="banner-content">
-        <p>🎉 Welcome to Petal! This banner remembers you closed it for 5 minutes (set via petal-session-ttl).</p>
-        <button petal-el="banner-close" class="banner-close" aria-label="Close banner">×</button>
-      </div>
-    </div>
-    <div class="container">
-      <h1>Petal Popup Demo</h1>
-      <p>Click the buttons below to test different popup animations and configurations.</p>
-      <div class="buttons">
-        <!-- Scale Up Popup Trigger -->
-        <button petal-el="open" petal="scale-popup" class="btn">Open Scale Popup</button>
-        <!-- Slide Down Popup Trigger -->
-        <button petal-el="open" petal="slide-down-popup" class="btn">Open Slide Down Popup</button>
-        <!-- Slide Left Popup Trigger -->
-        <button petal-el="open" petal="slide-left-popup" class="btn">Open Slide Left Popup</button>
-        <!-- Mobile Responsive Popup Trigger -->
-        <button petal-el="open" petal="responsive-popup" class="btn">Open Responsive Popup</button>
-        <!-- Different Open/Close Animation Trigger -->
-        <button petal-el="open" petal="custom-mask-popup" class="btn">Open Different Animations Popup</button>
-      </div>
-    </div>
-    <!-- Scale Up Popup -->
-    <div petal-el="popup" petal="scale-popup" petal-anim-open="scale" petal-duration="0.5" petal-slot-opacity="0.5" class="popup">
-      <div petal-el="mask" petal-mask-opacity="0.15" class="mask"></div>
-      <div petal-el="slot" class="slot">
-        <div class="popup-content">
-          <h2>Scale Popup</h2>
-          <p>This popup uses a scale animation (auto-reverses on close).</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-          <button petal-el="close" petal="scale-popup" class="btn btn-close">Close</button>
-        </div>
-      </div>
-    </div>
-    <!-- Slide Down Popup -->
-    <div petal-el="popup" petal="slide-down-popup" petal-anim-open="slide-down" petal-duration="0.6" petal-mask-close="true" class="popup">
-      <div petal-el="mask" petal-mask-opacity="0.2" class="mask"></div>
-      <div petal-el="slot" class="slot">
-        <div class="popup-content">
-          <h2>Slide Down Popup</h2>
-          <p>This popup slides down from the top when opening, slides up to the top when closing.</p>
-          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-          <button petal-el="close" petal="slide-down-popup" class="btn btn-close">Close</button>
-        </div>
-      </div>
-    </div>
-    <!-- Slide Left Popup -->
-    <div petal-el="popup" petal="slide-left-popup" petal-anim-open="slide-left" petal-duration="0.6" class="popup">
-      <div petal-el="mask" petal-mask-opacity="0.2" class="mask"></div>
-      <div petal-el="slot" class="slot">
-        <div class="popup-content">
-          <h2>Slide Left Popup</h2>
-          <p>This popup slides in from the left when opening, slides up to the top when closing.</p>
-          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-          <button petal-el="close" petal="slide-left-popup" class="btn btn-close">Close</button>
-        </div>
-      </div>
-    </div>
-    <!-- Responsive Popup (Different animations for mobile/desktop) -->
-    <div petal-el="popup" petal="responsive-popup" petal-anim-open="scale" petal-anim-open-mobile="slide-up" petal-duration="0.5" class="popup">
-      <div petal-el="mask" petal-mask-opacity="0.3" class="mask"></div>
-      <div petal-el="slot" class="slot">
-        <div class="popup-content">
-          <h2>Responsive Popup</h2>
-          <p>This popup uses scale on desktop and slide-up (from bottom) on mobile.</p>
-          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
-          <button petal-el="close" petal="responsive-popup" class="btn btn-close">Close</button>
-        </div>
-      </div>
-    </div>
-    <!-- Different Open/Close Animations -->
-    <div petal-el="popup" petal="custom-mask-popup" petal-anim-open="scale" petal-anim-close="slide-up" petal-duration="0.5" class="popup">
-      <div petal-el="mask" petal-mask-opacity="0.6" class="mask"></div>
-      <div petal-el="slot" class="slot">
-        <div class="popup-content">
-          <h2>Different Open/Close Animations</h2>
-          <p>This popup scales when opening and slides down (to the bottom) when closing!</p>
-          <p>Darker background mask (opacity: 0.6).</p>
-          <button petal-el="close" petal="custom-mask-popup" class="btn btn-close">Close</button>
-        </div>
-      </div>
-    </div>
-    <!-- Load GSAP -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
-    <!-- Load Petal -->
-    <script src="../dist/petal.js"></script>
-    <!-- Initialize Petal -->
-    <script>
-      // Initialize all popups and banners when page loads
-      if (window.petal) {
-        if (window.petal.initializeAllPopups) {
-          window.petal.initializeAllPopups();
-        }
-        if (window.petal.initializeBanner) {
-          window.petal.initializeBanner();
-        }
-      }
-    </script>
-  </body>
-</html>

package/demo/styles.css DELETED Viewed

@@ -1,244 +0,0 @@
-/* Reset and Base Styles */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  line-height: 1.6;
-  color: #333;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  min-height: 100vh;
-  padding: 20px;
-}
-/* Banner Styles */
-.banner {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  z-index: 10000;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-}
-.banner-content {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 12px 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20px;
-}
-.banner-content p {
-  margin: 0;
-  color: white;
-  font-size: 14px;
-  font-weight: 500;
-}
-.banner-close {
-  background: rgba(255, 255, 255, 0.2);
-  border: none;
-  color: white;
-  font-size: 24px;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease;
-  flex-shrink: 0;
-  line-height: 1;
-  padding: 0;
-}
-.banner-close:hover {
-  background: rgba(255, 255, 255, 0.3);
-  transform: scale(1.1);
-}
-.banner-close:active {
-  transform: scale(0.95);
-}
-/* Adjust body padding when banner is visible */
-body {
-  padding-top: 70px;
-}
-/* Container */
-.container {
-  max-width: 800px;
-  margin: 0 auto;
-  background: white;
-  padding: 40px;
-  border-radius: 12px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
-}
-h1 {
-  color: #667eea;
-  margin-bottom: 10px;
-  font-size: 2.5rem;
-}
-p {
-  color: #666;
-  margin-bottom: 20px;
-}
-/* Buttons */
-.buttons {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 15px;
-  margin-top: 30px;
-}
-.btn {
-  padding: 12px 24px;
-  background: #667eea;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  font-size: 16px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
-}
-.btn:hover {
-  background: #5568d3;
-  transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
-}
-.btn:active {
-  transform: translateY(0);
-}
-/* Popup Structure */
-.popup {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: none;
-  align-items: center;
-  justify-content: center;
-  z-index: 9999;
-}
-/* Mask (Background Overlay) */
-.mask {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: black;
-  opacity: 0;
-}
-/* Slot (Popup Content Container) */
-.slot {
-  position: relative;
-  z-index: 10000;
-  max-width: 90%;
-  max-height: 90vh;
-  overflow: auto;
-  opacity: 0;
-}
-/* Popup Content */
-.popup-content {
-  background: white;
-  padding: 40px;
-  border-radius: 16px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
-  max-width: 500px;
-  width: 100%;
-}
-.popup-content h2 {
-  color: #667eea;
-  margin-bottom: 15px;
-  font-size: 2rem;
-}
-.popup-content p {
-  margin-bottom: 15px;
-  line-height: 1.8;
-}
-.popup-content p:last-of-type {
-  margin-bottom: 25px;
-}
-/* Close Button */
-.btn-close {
-  background: #dc3545;
-  width: 100%;
-}
-.btn-close:hover {
-  background: #c82333;
-}
-/* Mobile Responsive */
-@media (max-width: 768px) {
-  .container {
-    padding: 20px;
-  }
-  h1 {
-    font-size: 2rem;
-  }
-  .buttons {
-    flex-direction: column;
-  }
-  .btn {
-    width: 100%;
-  }
-  .popup-content {
-    padding: 30px 20px;
-    max-width: 95%;
-  }
-  .popup-content h2 {
-    font-size: 1.5rem;
-  }
-}
-/* Scrollbar Styling for Popup Slot */
-.slot::-webkit-scrollbar {
-  width: 8px;
-}
-.slot::-webkit-scrollbar-track {
-  background: #f1f1f1;
-  border-radius: 10px;
-}
-.slot::-webkit-scrollbar-thumb {
-  background: #667eea;
-  border-radius: 10px;
-}
-.slot::-webkit-scrollbar-thumb:hover {
-  background: #5568d3;
-}

package/src/animation.ts DELETED Viewed

@@ -1,108 +0,0 @@
-import {
-  animateScaleUp,
-  animateOpenSlideUp,
-  animateOpenSlideDown,
-  animateOpenSlideLeft,
-  animateOpenSlideRight,
-  animateScaleDown,
-  animateCloseSlideUp,
-  animateCloseSlideDown,
-  animateCloseSlideLeft,
-  animateCloseSlideRight,
-} from "./lib/animations";
-import { ATTR_PETAL_ANIM_OPEN, ATTR_PETAL_ANIM_CLOSE, ATTR_PETAL_ANIM_OPEN_MOBILE, ATTR_PETAL_ANIM_CLOSE_MOBILE, ATTR_PETAL_DURATION } from "./lib/attributes";
-import { isMobile } from "./lib/breakpoints";
-// Popup animation types
-export type PopupAnimation = "scale" | "slide-up" | "slide-down" | "slide-left" | "slide-right";
-const validAnimations: PopupAnimation[] = ["scale", "slide-up", "slide-down", "slide-left", "slide-right"];
-const animationOpenMap: Record<PopupAnimation, () => GSAPTweenVars> = {
-  scale: animateScaleUp,
-  "slide-up": animateOpenSlideUp,
-  "slide-down": animateOpenSlideDown,
-  "slide-left": animateOpenSlideLeft,
-  "slide-right": animateOpenSlideRight,
-};
-const animationCloseMap: Record<PopupAnimation, () => GSAPTweenVars> = {
-  scale: animateScaleDown,
-  "slide-up": animateCloseSlideUp,
-  "slide-down": animateCloseSlideDown,
-  "slide-left": animateCloseSlideLeft,
-  "slide-right": animateCloseSlideRight,
-};
-// Map open animations to their corresponding close animations
-const reverseAnimationMap: Record<PopupAnimation, PopupAnimation> = {
-  scale: "scale",
-  "slide-up": "slide-down",
-  "slide-down": "slide-up",
-  "slide-left": "slide-right",
-  "slide-right": "slide-left",
-};
-/**
- * Creates GSAP animation based on the popup's attributes
- * @param popup The Popup element
- * @param direction Open or Close
- * @returns GSAP animation vars for the popup
- */
-export function getPopupGSAPAnimation(popup: HTMLElement, direction: "open" | "close"): GSAPTweenVars {
-  // Determine the name of the animation to perform
-  let animationName = getAnimationName(popup, direction);
-  // Get the animation function
-  let anim;
-  if (direction === "open") anim = animationOpenMap[animationName]();
-  else anim = animationCloseMap[animationName]();
-  // Set the animation duration
-  const duration = parseFloat(popup.getAttribute(ATTR_PETAL_DURATION) || "0.5");
-  anim.to.duration = duration;
-  return anim;
-}
-/**
- *
- * @param popup The Popup element
- * @param direction Open or Close
- * @returns The name of the animation to perform
- */
-function getAnimationName(popup: HTMLElement, direction: "open" | "close"): PopupAnimation {
-  const openDesktop = getPopupAnimation(popup, ATTR_PETAL_ANIM_OPEN);
-  const openMobile = getPopupAnimation(popup, ATTR_PETAL_ANIM_OPEN_MOBILE);
-  const closeDesktop = getPopupAnimation(popup, ATTR_PETAL_ANIM_CLOSE);
-  const closeMobile = getPopupAnimation(popup, ATTR_PETAL_ANIM_CLOSE_MOBILE);
-  if (direction === "open") {
-    if (isMobile()) return openMobile;
-    else return openDesktop;
-  }
-  // If closing
-  else {
-    const hasCloseDesktop = popup.hasAttribute(ATTR_PETAL_ANIM_CLOSE);
-    const hasCloseMobile = popup.hasAttribute(ATTR_PETAL_ANIM_CLOSE_MOBILE);
-    if (isMobile()) {
-      // If no mobile close animation is set, use the reverse of the open animation
-      return hasCloseMobile ? closeMobile : reverseAnimationMap[openMobile];
-    } else {
-      // If no desktop close animation is set, use the reverse of the open animation
-      return hasCloseDesktop ? closeDesktop : reverseAnimationMap[openDesktop];
-    }
-  }
-}
-// Validate popup animation string
-export function isPopupAnimation(value: string): value is PopupAnimation {
-  return validAnimations.includes(value as PopupAnimation);
-}
-// Safe parser with fallback
-function getPopupAnimation(popup: HTMLElement, attr: string): PopupAnimation {
-  const raw = popup.getAttribute(attr);
-  return isPopupAnimation(raw ?? "") ? (raw as PopupAnimation) : "slide-up";
-}

package/src/banner.ts DELETED Viewed

@@ -1,41 +0,0 @@
-import { ATTR_PETAL_BANNER, ATTR_PETAL_BANNER_CLOSE, ATTR_PETAL_NAME, ATTR_PETAL_ELEMENT, ATTR_PETAL_SESSION_TTL, PetalElements } from "./lib/attributes";
-import { getAllPetalElementsOfType } from "./lib/helpers";
-import { storeClosedState, checkClosedState } from "./lib/memory";
-export function initializeBanner() {
-  const banners = getAllPetalElementsOfType(ATTR_PETAL_BANNER);
-  banners.forEach((banner) => {
-    const name = banner.getAttribute(ATTR_PETAL_NAME);
-    if (!name) return;
-    const closeButtons = banner.querySelectorAll(`[${ATTR_PETAL_ELEMENT}="${ATTR_PETAL_BANNER_CLOSE}"]`);
-    // Get session TTL in minutes (default: 1440 minutes = 24 hours)
-    const sessionTTLMinutes = parseFloat(banner.getAttribute(ATTR_PETAL_SESSION_TTL) || "1440");
-    // Create PetalElements object for memory functions
-    const petal: PetalElements = {
-      name,
-      trigger: banner,
-      popup: banner as HTMLElement,
-      mask: banner,
-      slot: banner
-    };
-    // Check if banner was closed and session is still valid
-    if (checkClosedState("banner", petal, sessionTTLMinutes)) {
-      // If closed and session valid, hide the banner
-      (banner as HTMLElement).style.display = "none";
-    }
-    // Add click event listeners to close buttons
-    closeButtons.forEach((closeButton) => {
-      closeButton.addEventListener("click", () => {
-        // Hide the banner
-        (banner as HTMLElement).style.display = "none";
-        // Store closed state in sessionStorage with timestamp
-        storeClosedState("banner", petal);
-      });
-    });
-  });
-}

package/src/lib/animations.ts DELETED Viewed

@@ -1,76 +0,0 @@
-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 DELETED Viewed

@@ -1,48 +0,0 @@
-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 DELETED Viewed

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