well-petal 0.0.21 → 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 +2 -2
- package/package.json +1 -1
- package/src/animation.ts +1 -8
- package/src/petal.ts +12 -9
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,7 @@ 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 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 //
|
|
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
70
|
|
|
71
71
|
/***/ }),
|
|
72
72
|
|
package/package.json
CHANGED
package/src/animation.ts
CHANGED
|
@@ -12,12 +12,11 @@ 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 {
|
|
15
|
+
export function getAnimationNew(popup: HTMLElement, open: boolean): GSAPTweenVars {
|
|
16
16
|
// Popup Settings
|
|
17
17
|
const animationDesktop = getPopupAnimation(popup.getAttribute("petal-anim"));
|
|
18
18
|
const animationMobile = getPopupAnimation(popup.getAttribute("petal-anim-mobile")) || animationDesktop;
|
|
19
19
|
const duration = parseFloat(popup.getAttribute("petal-duration") || "0.5");
|
|
20
|
-
const open = getComputedStyle(popup).display !== "none";
|
|
21
20
|
|
|
22
21
|
const animation = isMobile() ? animationMobile : animationDesktop;
|
|
23
22
|
|
|
@@ -27,12 +26,6 @@ export function getAnimationNew(popup: HTMLElement): GSAPTweenVars {
|
|
|
27
26
|
return gsapAnim;
|
|
28
27
|
}
|
|
29
28
|
|
|
30
|
-
// Animation selection
|
|
31
|
-
export function getAnimation(animation: PopupAnimation, open: boolean): GSAPTweenVars {
|
|
32
|
-
const [normal, reverse] = animationMap[animation];
|
|
33
|
-
return open ? reverse(false) : normal(true);
|
|
34
|
-
}
|
|
35
|
-
|
|
36
29
|
// Individual animations
|
|
37
30
|
function animateScaleUp(show: boolean): GSAPTweenVars {
|
|
38
31
|
return {
|
package/src/petal.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import gsap from "gsap";
|
|
2
|
-
import { animateMaskClosed, animateMaskOpen,
|
|
2
|
+
import { animateMaskClosed, animateMaskOpen, getAnimationNew } from "./animation";
|
|
3
3
|
import { pauseVideo } from "./video";
|
|
4
4
|
|
|
5
5
|
// Error types for debug logging
|
|
@@ -38,25 +38,29 @@ document.querySelectorAll("[petal-el='trigger'], [petal-el='mask']").forEach((tr
|
|
|
38
38
|
function animate(popup: HTMLElement): void {
|
|
39
39
|
if (!slot) console.warn("A slot was not found for this popup.");
|
|
40
40
|
|
|
41
|
+
// Get the animation
|
|
42
|
+
const open = getComputedStyle(popup).display !== "none";
|
|
43
|
+
const anim = getAnimationNew(popup, open);
|
|
44
|
+
console.log(anim);
|
|
45
|
+
|
|
41
46
|
console.log(`[Petal Popup]`, {
|
|
42
47
|
popupName,
|
|
43
48
|
popup,
|
|
44
49
|
slot,
|
|
45
50
|
maskOpacity,
|
|
46
51
|
open,
|
|
52
|
+
anim,
|
|
47
53
|
});
|
|
48
54
|
|
|
49
55
|
// If the popup is closed, open it
|
|
50
56
|
if (!open) {
|
|
51
|
-
//
|
|
57
|
+
// Show Popup
|
|
52
58
|
tl.set(popup, { display: "flex" });
|
|
53
|
-
// Animate Mask
|
|
59
|
+
// Animate Mask Open
|
|
54
60
|
if (mask) {
|
|
55
61
|
tl.fromTo(mask, animateMaskOpen(maskOpacity).from, animateMaskOpen(maskOpacity).to, "<");
|
|
56
62
|
}
|
|
57
|
-
// Animate the
|
|
58
|
-
const anim = getAnimationNew(popup);
|
|
59
|
-
console.log(anim);
|
|
63
|
+
// Animate the Slot Open
|
|
60
64
|
tl.fromTo(slot, anim.from, anim.to);
|
|
61
65
|
}
|
|
62
66
|
|
|
@@ -64,14 +68,13 @@ document.querySelectorAll("[petal-el='trigger'], [petal-el='mask']").forEach((tr
|
|
|
64
68
|
else {
|
|
65
69
|
// Pause any videos in the popup
|
|
66
70
|
pauseVideo(popup);
|
|
67
|
-
// Animate the
|
|
68
|
-
const anim = getAnimationNew(popup);
|
|
69
|
-
console.log(anim);
|
|
71
|
+
// Animate the Slot Closed
|
|
70
72
|
tl.fromTo(slot, anim.from, anim.to);
|
|
71
73
|
// Animate Mask Closed
|
|
72
74
|
if (mask) {
|
|
73
75
|
tl.fromTo(mask, animateMaskClosed(maskOpacity).from, animateMaskClosed(maskOpacity).to, "<");
|
|
74
76
|
}
|
|
77
|
+
// Hide the Popup
|
|
75
78
|
tl.set(popup, { display: "none" });
|
|
76
79
|
}
|
|
77
80
|
}
|