well-petal 0.0.20 → 0.0.22
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.
- package/dist/petal.js +12 -2
- package/package.json +1 -1
- package/src/animation.ts +16 -3
- package/src/petal.ts +18 -38
- package/src/video.ts +6 -0
package/dist/petal.js
CHANGED
|
@@ -56,7 +56,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
56
56
|
\**************************/
|
|
57
57
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
58
58
|
|
|
59
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ animateMaskClosed: () => (/* binding */ animateMaskClosed),\n/* harmony export */ animateMaskOpen: () => (/* binding */ animateMaskOpen),\n/* harmony export */
|
|
59
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ animateMaskClosed: () => (/* binding */ animateMaskClosed),\n/* harmony export */ animateMaskOpen: () => (/* binding */ animateMaskOpen),\n/* harmony export */ getAnimationNew: () => (/* binding */ getAnimationNew),\n/* harmony export */ isPopupAnimation: () => (/* binding */ isPopupAnimation)\n/* harmony export */ });\nconst validAnimations = [\"scale-up\", \"scale-down\", \"slide-up\", \"slide-down\", \"slide-left\", \"slide-right\"];\nconst animationMap = {\n \"scale-up\": [animateScaleUp, animateScaleDown],\n \"scale-down\": [animateScaleDown, animateScaleUp],\n \"slide-up\": [animateSlideUp, animateSlideDown],\n \"slide-down\": [animateSlideDown, animateSlideUp],\n \"slide-left\": [animateSlideLeft, animateSlideRight],\n \"slide-right\": [animateSlideRight, animateSlideLeft],\n};\nfunction getAnimationNew(popup, open) {\n // Popup Settings\n const animationDesktop = getPopupAnimation(popup.getAttribute(\"petal-anim\"));\n const animationMobile = getPopupAnimation(popup.getAttribute(\"petal-anim-mobile\")) || animationDesktop;\n const duration = parseFloat(popup.getAttribute(\"petal-duration\") || \"0.5\");\n const animation = isMobile() ? animationMobile : animationDesktop;\n const [normal, reverse] = animationMap[animation];\n const gsapAnim = open ? reverse(false) : normal(true);\n gsapAnim.to.duration = duration;\n return gsapAnim;\n}\n// Individual animations\nfunction animateScaleUp(show) {\n return {\n from: { scale: 0 },\n to: { scale: 1, opacity: show ? 1 : 0, ease: \"power3.inOut\" },\n };\n}\nfunction animateScaleDown(show) {\n return {\n from: { scale: 1 },\n to: { scale: 0, opacity: show ? 1 : 0, ease: \"power3.inOut\" },\n };\n}\nfunction animateSlideUp(show) {\n return {\n from: { y: \"100%\", x: \"0%\" },\n to: { y: \"0%\", opacity: show ? 1 : 0, ease: \"power3.inOut\" },\n };\n}\nfunction animateSlideDown(show) {\n return {\n from: { y: \"0%\", x: \"0%\" },\n to: { y: \"100%\", opacity: show ? 1 : 0, ease: \"power3.inOut\" },\n };\n}\nfunction animateSlideRight(show) {\n return {\n from: { x: \"0%\", y: \"0%\" },\n to: { x: \"100%\", opacity: show ? 1 : 0, ease: \"power3.inOut\" },\n };\n}\nfunction animateSlideLeft(show) {\n return {\n from: { x: \"100%\", y: \"0%\" },\n to: { x: \"0%\", opacity: show ? 1 : 0, ease: \"power3.inOut\" },\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// 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\n\n//# sourceURL=webpack://petal/./src/animation.ts?");
|
|
60
60
|
|
|
61
61
|
/***/ }),
|
|
62
62
|
|
|
@@ -66,7 +66,17 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
66
66
|
\**********************/
|
|
67
67
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
68
68
|
|
|
69
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var
|
|
69
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var gsap__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! gsap */ \"./node_modules/gsap/index.js\");\n/* harmony import */ var _animation__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./animation */ \"./src/animation.ts\");\n/* harmony import */ var _video__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./video */ \"./src/video.ts\");\n\n\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 // Initialize GSAP timeline\n const tl = gsap__WEBPACK_IMPORTED_MODULE_2__[\"default\"].timeline();\n // Initialize Popup\n gsap__WEBPACK_IMPORTED_MODULE_2__[\"default\"].set(slot, { opacity: 0 });\n trigger.addEventListener(\"click\", () => animate(popup));\n // Animate open/close\n function animate(popup) {\n if (!slot)\n console.warn(\"A slot was not found for this popup.\");\n // Get the animation\n const open = getComputedStyle(popup).display !== \"none\";\n const anim = (0,_animation__WEBPACK_IMPORTED_MODULE_0__.getAnimationNew)(popup, open);\n console.log(anim);\n console.log(`[Petal Popup]`, {\n popupName,\n popup,\n slot,\n maskOpacity,\n open,\n anim,\n });\n // If the popup is closed, open it\n if (!open) {\n // Show Popup\n tl.set(popup, { display: \"flex\" });\n // Animate Mask Open\n if (mask) {\n tl.fromTo(mask, (0,_animation__WEBPACK_IMPORTED_MODULE_0__.animateMaskOpen)(maskOpacity).from, (0,_animation__WEBPACK_IMPORTED_MODULE_0__.animateMaskOpen)(maskOpacity).to, \"<\");\n }\n // Animate the Slot Open\n tl.fromTo(slot, anim.from, anim.to);\n }\n // If the popup is open, close it\n else {\n // Pause any videos in the popup\n (0,_video__WEBPACK_IMPORTED_MODULE_1__.pauseVideo)(popup);\n // Animate the Slot Closed\n tl.fromTo(slot, anim.from, anim.to);\n // Animate Mask Closed\n if (mask) {\n tl.fromTo(mask, (0,_animation__WEBPACK_IMPORTED_MODULE_0__.animateMaskClosed)(maskOpacity).from, (0,_animation__WEBPACK_IMPORTED_MODULE_0__.animateMaskClosed)(maskOpacity).to, \"<\");\n }\n // Hide the Popup\n tl.set(popup, { display: \"none\" });\n }\n }\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?");
|
|
70
|
+
|
|
71
|
+
/***/ }),
|
|
72
|
+
|
|
73
|
+
/***/ "./src/video.ts":
|
|
74
|
+
/*!**********************!*\
|
|
75
|
+
!*** ./src/video.ts ***!
|
|
76
|
+
\**********************/
|
|
77
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
78
|
+
|
|
79
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ pauseVideo: () => (/* binding */ pauseVideo)\n/* harmony export */ });\nfunction pauseVideo(popup) {\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}\n\n\n//# sourceURL=webpack://petal/./src/video.ts?");
|
|
70
80
|
|
|
71
81
|
/***/ })
|
|
72
82
|
|
package/package.json
CHANGED
package/src/animation.ts
CHANGED
|
@@ -12,10 +12,18 @@ const animationMap: Record<PopupAnimation, [(show: boolean) => GSAPTweenVars, (s
|
|
|
12
12
|
"slide-right": [animateSlideRight, animateSlideLeft],
|
|
13
13
|
};
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
export function getAnimationNew(popup: HTMLElement, open: boolean): GSAPTweenVars {
|
|
16
|
+
// Popup Settings
|
|
17
|
+
const animationDesktop = getPopupAnimation(popup.getAttribute("petal-anim"));
|
|
18
|
+
const animationMobile = getPopupAnimation(popup.getAttribute("petal-anim-mobile")) || animationDesktop;
|
|
19
|
+
const duration = parseFloat(popup.getAttribute("petal-duration") || "0.5");
|
|
20
|
+
|
|
21
|
+
const animation = isMobile() ? animationMobile : animationDesktop;
|
|
22
|
+
|
|
17
23
|
const [normal, reverse] = animationMap[animation];
|
|
18
|
-
|
|
24
|
+
const gsapAnim = open ? reverse(false) : normal(true);
|
|
25
|
+
gsapAnim.to.duration = duration;
|
|
26
|
+
return gsapAnim;
|
|
19
27
|
}
|
|
20
28
|
|
|
21
29
|
// Individual animations
|
|
@@ -85,3 +93,8 @@ function isMobile(): boolean {
|
|
|
85
93
|
export function isPopupAnimation(value: string): value is PopupAnimation {
|
|
86
94
|
return validAnimations.includes(value as PopupAnimation);
|
|
87
95
|
}
|
|
96
|
+
|
|
97
|
+
// Safe parser with fallback
|
|
98
|
+
function getPopupAnimation(raw: string | null | undefined): PopupAnimation {
|
|
99
|
+
return isPopupAnimation(raw ?? "") ? (raw as PopupAnimation) : "slide-up";
|
|
100
|
+
}
|
package/src/petal.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import gsap from "gsap";
|
|
2
|
-
import { animateMaskClosed, animateMaskOpen,
|
|
2
|
+
import { animateMaskClosed, animateMaskOpen, getAnimationNew } from "./animation";
|
|
3
|
+
import { pauseVideo } from "./video";
|
|
3
4
|
|
|
4
5
|
// Error types for debug logging
|
|
5
6
|
export type ErrorType = "NO_NAME" | "NO_TRIGGER" | "NO_POPUP" | "NO_MASK" | "NO_SLOT";
|
|
@@ -25,11 +26,6 @@ document.querySelectorAll("[petal-el='trigger'], [petal-el='mask']").forEach((tr
|
|
|
25
26
|
// Mask Settings
|
|
26
27
|
const maskOpacity = parseFloat(mask?.getAttribute("petal-mask-opacity") || "0.15");
|
|
27
28
|
|
|
28
|
-
// Popup Settings
|
|
29
|
-
const animation = getPopupAnimation(popup.getAttribute("petal-anim"));
|
|
30
|
-
const animationMobile = getPopupAnimation(popup.getAttribute("petal-anim-mobile")) || animation;
|
|
31
|
-
const duration = parseFloat(popup.getAttribute("petal-duration") || "0.5");
|
|
32
|
-
|
|
33
29
|
// Initialize GSAP timeline
|
|
34
30
|
const tl = gsap.timeline();
|
|
35
31
|
|
|
@@ -40,66 +36,50 @@ document.querySelectorAll("[petal-el='trigger'], [petal-el='mask']").forEach((tr
|
|
|
40
36
|
|
|
41
37
|
// Animate open/close
|
|
42
38
|
function animate(popup: HTMLElement): void {
|
|
43
|
-
// Check if the popup is open or closed
|
|
44
|
-
const open = getComputedStyle(popup).display !== "none";
|
|
45
|
-
|
|
46
39
|
if (!slot) console.warn("A slot was not found for this popup.");
|
|
47
40
|
|
|
41
|
+
// Get the animation
|
|
42
|
+
const open = getComputedStyle(popup).display !== "none";
|
|
43
|
+
const anim = getAnimationNew(popup, open);
|
|
44
|
+
console.log(anim);
|
|
45
|
+
|
|
48
46
|
console.log(`[Petal Popup]`, {
|
|
49
47
|
popupName,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
duration,
|
|
48
|
+
popup,
|
|
49
|
+
slot,
|
|
53
50
|
maskOpacity,
|
|
54
|
-
isMobile: isMobile(),
|
|
55
51
|
open,
|
|
52
|
+
anim,
|
|
56
53
|
});
|
|
57
54
|
|
|
58
55
|
// If the popup is closed, open it
|
|
59
56
|
if (!open) {
|
|
60
|
-
//
|
|
57
|
+
// Show Popup
|
|
61
58
|
tl.set(popup, { display: "flex" });
|
|
62
|
-
// Animate Mask
|
|
59
|
+
// Animate Mask Open
|
|
63
60
|
if (mask) {
|
|
64
61
|
tl.fromTo(mask, animateMaskOpen(maskOpacity).from, animateMaskOpen(maskOpacity).to, "<");
|
|
65
62
|
}
|
|
66
|
-
// Animate the
|
|
67
|
-
const anim = isMobile() ? getAnimation(animationMobile, open) : getAnimation(animation, open);
|
|
68
|
-
anim.to.duration = duration;
|
|
63
|
+
// Animate the Slot Open
|
|
69
64
|
tl.fromTo(slot, anim.from, anim.to);
|
|
70
65
|
}
|
|
71
66
|
|
|
72
67
|
// If the popup is open, close it
|
|
73
|
-
|
|
74
|
-
// Pause
|
|
75
|
-
popup
|
|
76
|
-
|
|
77
|
-
if (!video.paused) video.pause();
|
|
78
|
-
});
|
|
79
|
-
// Animate the popup
|
|
80
|
-
const anim = isMobile() ? getAnimation(animationMobile, open) : getAnimation(animation, open);
|
|
81
|
-
anim.to.duration = duration;
|
|
82
|
-
console.log(anim);
|
|
68
|
+
else {
|
|
69
|
+
// Pause any videos in the popup
|
|
70
|
+
pauseVideo(popup);
|
|
71
|
+
// Animate the Slot Closed
|
|
83
72
|
tl.fromTo(slot, anim.from, anim.to);
|
|
84
73
|
// Animate Mask Closed
|
|
85
74
|
if (mask) {
|
|
86
75
|
tl.fromTo(mask, animateMaskClosed(maskOpacity).from, animateMaskClosed(maskOpacity).to, "<");
|
|
87
76
|
}
|
|
77
|
+
// Hide the Popup
|
|
88
78
|
tl.set(popup, { display: "none" });
|
|
89
79
|
}
|
|
90
80
|
}
|
|
91
81
|
});
|
|
92
82
|
|
|
93
|
-
// Safe parser with fallback
|
|
94
|
-
function getPopupAnimation(raw: string | null | undefined): PopupAnimation {
|
|
95
|
-
return isPopupAnimation(raw ?? "") ? (raw as PopupAnimation) : "slide-up";
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
// Device check
|
|
99
|
-
function isMobile(): boolean {
|
|
100
|
-
return window.innerWidth <= 768;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
83
|
// Centralized error logging
|
|
104
84
|
function logError(error: ErrorType, popupName: string, trigger: Element): void {
|
|
105
85
|
switch (error) {
|