well-petal 0.0.9 → 0.0.10

package/dist/petal.js

@@ -56,7 +56,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
   \**********************/
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var gsap__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! gsap */ \"./node_modules/gsap/index.js\");\n\nconst validAnimations = [\"scale\", \"slide-up\", \"slide-down\", \"slide-left\", \"slide-right\"];\nconst animationMap = {\n    scale: [animateScaleDown, animateScaleUp],\n    \"slide-up\": [animateSlideUp, animateSlideDown],\n    \"slide-down\": [animateSlideDown, animateSlideUp],\n    \"slide-left\": [animateSlideLeft, animateSlideRight],\n    \"slide-right\": [animateSlideRight, animateSlideLeft],\n};\n// Initialize popup triggers\ndocument.querySelectorAll(\"[petal-el='trigger'], [petal-el='mask']\").forEach((trigger) => {\n    const popupName = trigger.getAttribute(\"petal\");\n    if (!popupName) {\n        logError(\"NO_NAME\", \"\", trigger);\n        return;\n    }\n    const popup = document.querySelector(`[petal='${popupName}'][petal-el='popup']`);\n    if (!popup) {\n        logError(\"NO_POPUP\", popupName, trigger);\n        return;\n    }\n    // Popup Elements\n    const mask = popup.querySelector(\"[petal-el='mask']\");\n    const slot = popup.querySelector(\"[petal-el='slot']\");\n    // Mask Settings\n    const maskOpacity = parseFloat((mask === null || mask === void 0 ? void 0 : mask.getAttribute(\"petal-mask-opacity\")) || \"0.15\");\n    // Popup Settings\n    const animation = getPopupAnimation(popup.getAttribute(\"petal-el\"));\n    const animationMobile = getPopupAnimation(popup.getAttribute(\"petal-anim-mobile\")) || animation;\n    const duration = parseFloat(popup.getAttribute(\"petal-duration\") || \"1\");\n    // Initialize GSAP timeline\n    const tl = gsap__WEBPACK_IMPORTED_MODULE_0__[\"default\"].timeline();\n    trigger.addEventListener(\"click\", () => animate(popup));\n    // Animate open/close\n    function animate(popup) {\n        // Check if the popup is open or closed\n        const open = getComputedStyle(popup).display !== \"none\";\n        if (!slot)\n            console.warn(\"A slot was not found for this popup.\");\n        // If the popup is closed, open it\n        if (!open) {\n            // Animate Popup\n            tl.set(popup, { display: \"flex\" });\n            // Animate Mask\n            if (mask) {\n                tl.fromTo(mask, animateMaskOpen(maskOpacity).from, animateMaskOpen(maskOpacity).to, \"<\");\n            }\n            // Animate the popup\n            const anim = isMobile() ? getAnimation(animationMobile, open) : getAnimation(animation, open);\n            anim.to.duration = duration;\n            tl.fromTo(slot, anim.from, anim.to);\n        }\n        // If the popup is open, close it\n        if (open) {\n            // Pause all <video> elements inside the popup before hiding it\n            popup.querySelectorAll(\"video\").forEach((video) => {\n                if (!video.paused)\n                    video.pause();\n            });\n            // Animate Mask Closed\n            if (mask) {\n                tl.fromTo(mask, animateMaskClosed(maskOpacity).from, animateMaskClosed(maskOpacity).to, \"<\");\n            }\n            // Animate the popup\n            const anim = isMobile() ? getAnimation(animationMobile, open) : getAnimation(animation, open);\n            anim.to.duration = duration;\n            tl.fromTo(slot, anim.from, anim.to);\n            tl.set(popup, { display: \"none\" });\n        }\n    }\n});\n// Reusable mask animations\nfunction animateMaskOpen(opacity) {\n    return {\n        from: { opacity: 0 },\n        to: { opacity: opacity, duration: 0.5 },\n    };\n}\nfunction animateMaskClosed(opacity) {\n    return {\n        from: { opacity: opacity },\n        to: { opacity: 0, duration: 0.5 },\n    };\n}\n// Animation selection\nfunction getAnimation(animation, open) {\n    const [normal, reverse] = animationMap[animation];\n    return open ? reverse() : normal();\n}\n// Individual animations\nfunction animateScaleUp() {\n    return {\n        from: { scale: 0 },\n        to: { scale: 1, opacity: 1, ease: \"power3.inOut\" },\n    };\n}\nfunction animateScaleDown() {\n    return {\n        from: { scale: 1 },\n        to: { scale: 0, opacity: 0, ease: \"power3.inOut\" },\n    };\n}\nfunction animateSlideUp() {\n    return {\n        from: { y: \"100%\", x: \"0%\" },\n        to: { y: \"0%\", opacity: 1, ease: \"power3.inOut\" },\n    };\n}\nfunction animateSlideDown() {\n    return {\n        from: { y: \"0%\", x: \"0%\" },\n        to: { y: \"100%\", opacity: 1, ease: \"power3.inOut\" },\n    };\n}\nfunction animateSlideRight() {\n    return {\n        from: { x: \"0%\", y: \"0%\" },\n        to: { x: \"100%\", opacity: 1, ease: \"power3.inOut\" },\n    };\n}\nfunction animateSlideLeft() {\n    return {\n        from: { x: \"100%\", y: \"0%\" },\n        to: { x: \"0%\", opacity: 1, ease: \"power3.inOut\" },\n    };\n}\n// Device check\nfunction isMobile() {\n    return window.innerWidth <= 768;\n}\n// Validate popup animation string\nfunction isPopupAnimation(value) {\n    return validAnimations.includes(value);\n}\n// Safe parser with fallback\nfunction getPopupAnimation(raw) {\n    return isPopupAnimation(raw !== null && raw !== void 0 ? raw : \"\") ? raw : \"slide-up\";\n}\n// Centralized error logging\nfunction logError(error, popupName, trigger) {\n    switch (error) {\n        case \"NO_NAME\":\n            console.error(`Trigger is missing the \"petal\" attribute:`, trigger);\n            break;\n        case \"NO_POPUP\":\n            console.error(`Popup with name \"${popupName}\" not found for trigger:`, trigger);\n            break;\n        default:\n            console.error(`Popup error [${error}] for \"${popupName}\":`, trigger);\n    }\n}\n\n\n//# sourceURL=webpack://petal/./src/petal.ts?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var gsap__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! gsap */ \"./node_modules/gsap/index.js\");\n\nconst validAnimations = [\"scale\", \"slide-up\", \"slide-down\", \"slide-left\", \"slide-right\"];\nconst animationMap = {\n    scale: [animateScaleDown, animateScaleUp],\n    \"slide-up\": [animateSlideUp, animateSlideDown],\n    \"slide-down\": [animateSlideDown, animateSlideUp],\n    \"slide-left\": [animateSlideLeft, animateSlideRight],\n    \"slide-right\": [animateSlideRight, animateSlideLeft],\n};\n// Initialize popup triggers\ndocument.querySelectorAll(\"[petal-el='trigger'], [petal-el='mask']\").forEach((trigger) => {\n    const popupName = trigger.getAttribute(\"petal\");\n    if (!popupName) {\n        logError(\"NO_NAME\", \"\", trigger);\n        return;\n    }\n    const popup = document.querySelector(`[petal='${popupName}'][petal-el='popup']`);\n    if (!popup) {\n        logError(\"NO_POPUP\", popupName, trigger);\n        return;\n    }\n    // Popup Elements\n    const mask = popup.querySelector(\"[petal-el='mask']\");\n    const slot = popup.querySelector(\"[petal-el='slot']\");\n    // Mask Settings\n    const maskOpacity = parseFloat((mask === null || mask === void 0 ? void 0 : mask.getAttribute(\"petal-mask-opacity\")) || \"0.15\");\n    // Popup Settings\n    const animation = getPopupAnimation(popup.getAttribute(\"petal-el\"));\n    const animationMobile = getPopupAnimation(popup.getAttribute(\"petal-anim-mobile\")) || animation;\n    const duration = parseFloat(popup.getAttribute(\"petal-duration\") || \"1\");\n    // Initialize GSAP timeline\n    const tl = gsap__WEBPACK_IMPORTED_MODULE_0__[\"default\"].timeline();\n    trigger.addEventListener(\"click\", () => animate(popup));\n    // Animate open/close\n    function animate(popup) {\n        // Check if the popup is open or closed\n        const open = getComputedStyle(popup).display !== \"none\";\n        if (!slot)\n            console.warn(\"A slot was not found for this popup.\");\n        // If the popup is closed, open it\n        if (!open) {\n            // Animate Popup\n            tl.set(popup, { display: \"flex\" });\n            // Animate Mask\n            if (mask) {\n                tl.fromTo(mask, animateMaskOpen(maskOpacity).from, animateMaskOpen(maskOpacity).to, \"<\");\n            }\n            // Animate the popup\n            const anim = isMobile() ? getAnimation(animationMobile, open) : getAnimation(animation, open);\n            anim.to.duration = duration;\n            tl.fromTo(slot, anim.from, anim.to);\n        }\n        // If the popup is open, close it\n        if (open) {\n            // Pause all <video> elements inside the popup before hiding it\n            popup.querySelectorAll(\"video\").forEach((video) => {\n                if (!video.paused)\n                    video.pause();\n            });\n            // Animate Mask Closed\n            if (mask) {\n                tl.fromTo(mask, animateMaskClosed(maskOpacity).from, animateMaskClosed(maskOpacity).to, \"<\");\n            }\n            // Animate the popup\n            const anim = isMobile() ? getAnimation(animationMobile, open) : getAnimation(animation, open);\n            anim.to.duration = duration;\n            tl.fromTo(slot, anim.from, anim.to);\n            tl.set(popup, { display: \"none\" });\n        }\n    }\n});\n// Reusable mask animations\nfunction animateMaskOpen(opacity) {\n    return {\n        from: { opacity: 0 },\n        to: { opacity: opacity, duration: 0.5 },\n    };\n}\nfunction animateMaskClosed(opacity) {\n    return {\n        from: { opacity: opacity },\n        to: { opacity: 0, duration: 0.5 },\n    };\n}\n// Animation selection\nfunction getAnimation(animation, open) {\n    const [normal, reverse] = animationMap[animation];\n    return open ? reverse() : normal();\n}\n// Individual animations\nfunction animateScaleUp() {\n    return {\n        from: { scale: 0 },\n        to: { scale: 1, opacity: 1, ease: \"power3.inOut\" },\n    };\n}\nfunction animateScaleDown() {\n    return {\n        from: { scale: 1 },\n        to: { scale: 0, opacity: 0, ease: \"power3.inOut\" },\n    };\n}\nfunction animateSlideUp() {\n    return {\n        from: { y: \"100%\", x: \"0%\", opacity: 0 },\n        to: { y: \"0%\", opacity: 1, ease: \"power3.inOut\" },\n    };\n}\nfunction animateSlideDown() {\n    return {\n        from: { y: \"0%\", x: \"0%\", opacity: 0 },\n        to: { y: \"100%\", opacity: 1, ease: \"power3.inOut\" },\n    };\n}\nfunction animateSlideRight() {\n    return {\n        from: { x: \"0%\", y: \"0%\", opacity: 0 },\n        to: { x: \"100%\", opacity: 1, ease: \"power3.inOut\" },\n    };\n}\nfunction animateSlideLeft() {\n    return {\n        from: { x: \"100%\", y: \"0%\", opacity: 0 },\n        to: { x: \"0%\", opacity: 1, ease: \"power3.inOut\" },\n    };\n}\n// Device check\nfunction isMobile() {\n    return window.innerWidth <= 768;\n}\n// Validate popup animation string\nfunction isPopupAnimation(value) {\n    return validAnimations.includes(value);\n}\n// Safe parser with fallback\nfunction getPopupAnimation(raw) {\n    return isPopupAnimation(raw !== null && raw !== void 0 ? raw : \"\") ? raw : \"slide-up\";\n}\n// Centralized error logging\nfunction logError(error, popupName, trigger) {\n    switch (error) {\n        case \"NO_NAME\":\n            console.error(`Trigger is missing the \"petal\" attribute:`, trigger);\n            break;\n        case \"NO_POPUP\":\n            console.error(`Popup with name \"${popupName}\" not found for trigger:`, trigger);\n            break;\n        default:\n            console.error(`Popup error [${error}] for \"${popupName}\":`, trigger);\n    }\n}\n\n\n//# sourceURL=webpack://petal/./src/petal.ts?");
 
 /***/ })
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "well-petal",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Webflow Popups powered by attributes",
   "main": "petal.js",
   "scripts": {

package/src/petal.ts

@@ -125,28 +125,28 @@ function animateScaleDown(): GSAPTweenVars {
 
 function animateSlideUp(): GSAPTweenVars {
   return {
-    from: { y: "100%", x: "0%" },
+    from: { y: "100%", x: "0%", opacity: 0 },
     to: { y: "0%", opacity: 1, ease: "power3.inOut" },
   };
 }
 
 function animateSlideDown(): GSAPTweenVars {
   return {
-    from: { y: "0%", x: "0%" },
+    from: { y: "0%", x: "0%", opacity: 0 },
     to: { y: "100%", opacity: 1, ease: "power3.inOut" },
   };
 }
 
 function animateSlideRight(): GSAPTweenVars {
   return {
-    from: { x: "0%", y: "0%" },
+    from: { x: "0%", y: "0%", opacity: 0 },
     to: { x: "100%", opacity: 1, ease: "power3.inOut" },
   };
 }
 
 function animateSlideLeft(): GSAPTweenVars {
   return {
-    from: { x: "100%", y: "0%" },
+    from: { x: "100%", y: "0%", opacity: 0 },
     to: { x: "0%", opacity: 1, ease: "power3.inOut" },
   };
 }