well-petal 0.0.20 → 0.0.21
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 +20 -0
- package/src/petal.ts +10 -33
- 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 */ getAnimation: () => (/* binding */ getAnimation),\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};\n// Animation selection\nfunction getAnimation(animation, open) {\n const [normal, reverse] = animationMap[animation];\n return open ? reverse(false) : normal(true);\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\n\n//# sourceURL=webpack://petal/./src/animation.ts?");
|
|
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 */ getAnimation: () => (/* binding */ getAnimation),\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) {\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 open = getComputedStyle(popup).display !== \"none\";\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// Animation selection\nfunction getAnimation(animation, open) {\n const [normal, reverse] = animationMap[animation];\n return open ? reverse(false) : normal(true);\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 console.log(`[Petal Popup]`, {\n popupName,\n popup,\n slot,\n maskOpacity,\n open,\n });\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, (0,_animation__WEBPACK_IMPORTED_MODULE_0__.animateMaskOpen)(maskOpacity).from, (0,_animation__WEBPACK_IMPORTED_MODULE_0__.animateMaskOpen)(maskOpacity).to, \"<\");\n }\n // Animate the popup\n const anim = (0,_animation__WEBPACK_IMPORTED_MODULE_0__.getAnimationNew)(popup);\n console.log(anim);\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 popup\n const anim = (0,_animation__WEBPACK_IMPORTED_MODULE_0__.getAnimationNew)(popup);\n console.log(anim);\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 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,6 +12,21 @@ const animationMap: Record<PopupAnimation, [(show: boolean) => GSAPTweenVars, (s
|
|
|
12
12
|
"slide-right": [animateSlideRight, animateSlideLeft],
|
|
13
13
|
};
|
|
14
14
|
|
|
15
|
+
export function getAnimationNew(popup: HTMLElement): 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
|
+
const open = getComputedStyle(popup).display !== "none";
|
|
21
|
+
|
|
22
|
+
const animation = isMobile() ? animationMobile : animationDesktop;
|
|
23
|
+
|
|
24
|
+
const [normal, reverse] = animationMap[animation];
|
|
25
|
+
const gsapAnim = open ? reverse(false) : normal(true);
|
|
26
|
+
gsapAnim.to.duration = duration;
|
|
27
|
+
return gsapAnim;
|
|
28
|
+
}
|
|
29
|
+
|
|
15
30
|
// Animation selection
|
|
16
31
|
export function getAnimation(animation: PopupAnimation, open: boolean): GSAPTweenVars {
|
|
17
32
|
const [normal, reverse] = animationMap[animation];
|
|
@@ -85,3 +100,8 @@ function isMobile(): boolean {
|
|
|
85
100
|
export function isPopupAnimation(value: string): value is PopupAnimation {
|
|
86
101
|
return validAnimations.includes(value as PopupAnimation);
|
|
87
102
|
}
|
|
103
|
+
|
|
104
|
+
// Safe parser with fallback
|
|
105
|
+
function getPopupAnimation(raw: string | null | undefined): PopupAnimation {
|
|
106
|
+
return isPopupAnimation(raw ?? "") ? (raw as PopupAnimation) : "slide-up";
|
|
107
|
+
}
|
package/src/petal.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import gsap from "gsap";
|
|
2
|
-
import { animateMaskClosed, animateMaskOpen, getAnimation, isPopupAnimation, PopupAnimation } from "./animation";
|
|
2
|
+
import { animateMaskClosed, animateMaskOpen, getAnimation, getAnimationNew, isPopupAnimation, PopupAnimation } 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,18 +36,13 @@ 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
|
|
|
48
41
|
console.log(`[Petal Popup]`, {
|
|
49
42
|
popupName,
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
duration,
|
|
43
|
+
popup,
|
|
44
|
+
slot,
|
|
53
45
|
maskOpacity,
|
|
54
|
-
isMobile: isMobile(),
|
|
55
46
|
open,
|
|
56
47
|
});
|
|
57
48
|
|
|
@@ -64,21 +55,17 @@ document.querySelectorAll("[petal-el='trigger'], [petal-el='mask']").forEach((tr
|
|
|
64
55
|
tl.fromTo(mask, animateMaskOpen(maskOpacity).from, animateMaskOpen(maskOpacity).to, "<");
|
|
65
56
|
}
|
|
66
57
|
// Animate the popup
|
|
67
|
-
const anim =
|
|
68
|
-
anim
|
|
58
|
+
const anim = getAnimationNew(popup);
|
|
59
|
+
console.log(anim);
|
|
69
60
|
tl.fromTo(slot, anim.from, anim.to);
|
|
70
61
|
}
|
|
71
62
|
|
|
72
63
|
// If the popup is open, close it
|
|
73
|
-
|
|
74
|
-
// Pause
|
|
75
|
-
popup
|
|
76
|
-
console.log("[Petal Popup] Pausing video:", video);
|
|
77
|
-
if (!video.paused) video.pause();
|
|
78
|
-
});
|
|
64
|
+
else {
|
|
65
|
+
// Pause any videos in the popup
|
|
66
|
+
pauseVideo(popup);
|
|
79
67
|
// Animate the popup
|
|
80
|
-
const anim =
|
|
81
|
-
anim.to.duration = duration;
|
|
68
|
+
const anim = getAnimationNew(popup);
|
|
82
69
|
console.log(anim);
|
|
83
70
|
tl.fromTo(slot, anim.from, anim.to);
|
|
84
71
|
// Animate Mask Closed
|
|
@@ -90,16 +77,6 @@ document.querySelectorAll("[petal-el='trigger'], [petal-el='mask']").forEach((tr
|
|
|
90
77
|
}
|
|
91
78
|
});
|
|
92
79
|
|
|
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
80
|
// Centralized error logging
|
|
104
81
|
function logError(error: ErrorType, popupName: string, trigger: Element): void {
|
|
105
82
|
switch (error) {
|