well-petal 0.0.1 → 0.0.3
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 +1 -1
- package/package.json +1 -1
- package/src/petal.ts +90 -75
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 import */ var gsap__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! gsap */ \"./node_modules/gsap/index.js\");\n\nconst validAnimations = [\n \"scale\",\n \"slide-up\",\n \"slide-down\",\n \"slide-left\",\n \"slide-right\"
|
|
59
|
+
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 = [\n \"scale\",\n \"slide-up\",\n \"slide-down\",\n \"slide-left\",\n \"slide-right\",\n];\n// Initialize popup triggers\ndocument\n .querySelectorAll(\"[petal-el='trigger'], [petal-el='mask']\")\n .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 // 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 const open = popup.style.display === \"none\" ||\n getComputedStyle(popup).display === \"none\";\n if (open)\n tl.set(popup, { display: \"flex\" });\n if (mask) {\n const maskAnim = open ? animateMaskOpen() : animateMaskClosed();\n tl.fromTo(mask, maskAnim.from, maskAnim.to, \"<\");\n }\n if (slot) {\n const anim = isMobile()\n ? getAnimation(animationMobile, open)\n : getAnimation(animation, open);\n anim.to.duration = duration;\n tl.fromTo(slot, anim.from, anim.to);\n }\n else {\n console.warn(\"A slot was not found for this popup.\");\n }\n if (!open)\n tl.set(popup, { display: \"none\" });\n }\n});\n// Reusable mask animations\nfunction animateMaskOpen() {\n return {\n from: { opacity: 0 },\n to: { opacity: 0.15, duration: 0.5 },\n };\n}\nfunction animateMaskClosed() {\n return {\n from: { opacity: 0.15 },\n to: { opacity: 0, duration: 0.5 },\n };\n}\n// Animation selection\nfunction getAnimation(animation, reversed) {\n var _a;\n const map = {\n scale: [animateScaleDown, animateScaleUp],\n \"slide-up\": [animateSlideDown, animateSlideUp],\n \"slide-down\": [animateSlideUp, animateSlideDown],\n \"slide-left\": [animateSlideRight, animateSlideLeft],\n \"slide-right\": [animateSlideLeft, animateSlideRight],\n };\n const [normal, reverse] = (_a = map[animation]) !== null && _a !== void 0 ? _a : [\n animateScaleDown,\n animateScaleUp,\n ];\n return reversed ? 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?");
|
|
60
60
|
|
|
61
61
|
/***/ })
|
|
62
62
|
|
package/package.json
CHANGED
package/src/petal.ts
CHANGED
|
@@ -13,7 +13,7 @@ const validAnimations: PopupAnimation[] = [
|
|
|
13
13
|
"slide-up",
|
|
14
14
|
"slide-down",
|
|
15
15
|
"slide-left",
|
|
16
|
-
"slide-right"
|
|
16
|
+
"slide-right",
|
|
17
17
|
];
|
|
18
18
|
|
|
19
19
|
// Error types for debug logging
|
|
@@ -25,130 +25,142 @@ export type ErrorType =
|
|
|
25
25
|
| "NO_SLOT";
|
|
26
26
|
|
|
27
27
|
// Initialize popup triggers
|
|
28
|
-
document
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
//
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
}
|
|
28
|
+
document
|
|
29
|
+
.querySelectorAll("[petal-el='trigger'], [petal-el='mask']")
|
|
30
|
+
.forEach((trigger) => {
|
|
31
|
+
const popupName = trigger.getAttribute("petal");
|
|
32
|
+
if (!popupName) {
|
|
33
|
+
logError("NO_NAME", "", trigger);
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
const popup = document.querySelector(
|
|
38
|
+
`[petal='${popupName}'][petal-el='popup']`,
|
|
39
|
+
) as HTMLElement | null;
|
|
40
|
+
if (!popup) {
|
|
41
|
+
logError("NO_POPUP", popupName, trigger);
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Popup Elements
|
|
46
|
+
const mask = popup.querySelector("[petal-el='mask']");
|
|
47
|
+
const slot = popup.querySelector("[petal-el='slot']");
|
|
48
|
+
|
|
49
|
+
// Popup Settings
|
|
50
|
+
const animation = getPopupAnimation(popup.getAttribute("petal-el"));
|
|
51
|
+
const animationMobile =
|
|
52
|
+
getPopupAnimation(popup.getAttribute("petal-anim-mobile")) || animation;
|
|
53
|
+
const duration = parseFloat(popup.getAttribute("petal-duration") || "1");
|
|
54
|
+
|
|
55
|
+
// Initialize GSAP timeline
|
|
56
|
+
const tl = gsap.timeline();
|
|
57
|
+
|
|
58
|
+
trigger.addEventListener("click", () => animate(popup));
|
|
59
|
+
|
|
60
|
+
// Animate open/close
|
|
61
|
+
function animate(popup: HTMLElement): void {
|
|
62
|
+
const open =
|
|
63
|
+
popup.style.display === "none" ||
|
|
64
|
+
getComputedStyle(popup).display === "none";
|
|
65
|
+
if (open) tl.set(popup, { display: "flex" });
|
|
66
|
+
|
|
67
|
+
if (mask) {
|
|
68
|
+
const maskAnim = open ? animateMaskOpen() : animateMaskClosed();
|
|
69
|
+
tl.fromTo(mask, maskAnim.from, maskAnim.to, "<");
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
if (slot) {
|
|
73
|
+
const anim = isMobile()
|
|
74
|
+
? getAnimation(animationMobile, open)
|
|
75
|
+
: getAnimation(animation, open);
|
|
76
|
+
anim.to.duration = duration;
|
|
77
|
+
tl.fromTo(slot, anim.from, anim.to);
|
|
78
|
+
} else {
|
|
79
|
+
console.warn("A slot was not found for this popup.");
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
if (!open) tl.set(popup, { display: "none" });
|
|
83
|
+
}
|
|
84
|
+
});
|
|
81
85
|
|
|
82
86
|
// Reusable mask animations
|
|
83
87
|
function animateMaskOpen(): GSAPTweenVars {
|
|
84
88
|
return {
|
|
85
89
|
from: { opacity: 0 },
|
|
86
|
-
to: { opacity: 0.15, duration: 0.5 }
|
|
90
|
+
to: { opacity: 0.15, duration: 0.5 },
|
|
87
91
|
};
|
|
88
92
|
}
|
|
89
93
|
|
|
90
94
|
function animateMaskClosed(): GSAPTweenVars {
|
|
91
95
|
return {
|
|
92
96
|
from: { opacity: 0.15 },
|
|
93
|
-
to: { opacity: 0, duration: 0.5 }
|
|
97
|
+
to: { opacity: 0, duration: 0.5 },
|
|
94
98
|
};
|
|
95
99
|
}
|
|
96
100
|
|
|
97
|
-
|
|
98
101
|
// Animation selection
|
|
99
|
-
function getAnimation(
|
|
100
|
-
|
|
101
|
-
|
|
102
|
+
function getAnimation(
|
|
103
|
+
animation: PopupAnimation,
|
|
104
|
+
reversed: boolean,
|
|
105
|
+
): GSAPTweenVars {
|
|
106
|
+
const map: Record<
|
|
107
|
+
PopupAnimation,
|
|
108
|
+
[() => GSAPTweenVars, () => GSAPTweenVars]
|
|
109
|
+
> = {
|
|
110
|
+
scale: [animateScaleDown, animateScaleUp],
|
|
102
111
|
"slide-up": [animateSlideDown, animateSlideUp],
|
|
103
112
|
"slide-down": [animateSlideUp, animateSlideDown],
|
|
104
113
|
"slide-left": [animateSlideRight, animateSlideLeft],
|
|
105
114
|
"slide-right": [animateSlideLeft, animateSlideRight],
|
|
106
115
|
};
|
|
107
116
|
|
|
108
|
-
const [normal, reverse] = map[animation] ?? [
|
|
117
|
+
const [normal, reverse] = map[animation] ?? [
|
|
118
|
+
animateScaleDown,
|
|
119
|
+
animateScaleUp,
|
|
120
|
+
];
|
|
109
121
|
return reversed ? reverse() : normal();
|
|
110
122
|
}
|
|
111
123
|
|
|
112
124
|
// Individual animations
|
|
113
|
-
function animateScaleUp()
|
|
125
|
+
function animateScaleUp(): GSAPTweenVars {
|
|
114
126
|
return {
|
|
115
127
|
from: { scale: 0 },
|
|
116
|
-
to: { scale: 1, opacity: 1, ease: "power3.inOut" }
|
|
128
|
+
to: { scale: 1, opacity: 1, ease: "power3.inOut" },
|
|
117
129
|
};
|
|
118
130
|
}
|
|
119
131
|
|
|
120
|
-
function animateScaleDown()
|
|
132
|
+
function animateScaleDown(): GSAPTweenVars {
|
|
121
133
|
return {
|
|
122
134
|
from: { scale: 1 },
|
|
123
|
-
to: { scale: 0, opacity: 0, ease: "power3.inOut" }
|
|
135
|
+
to: { scale: 0, opacity: 0, ease: "power3.inOut" },
|
|
124
136
|
};
|
|
125
137
|
}
|
|
126
138
|
|
|
127
|
-
function animateSlideUp()
|
|
139
|
+
function animateSlideUp(): GSAPTweenVars {
|
|
128
140
|
return {
|
|
129
141
|
from: { y: "100%", x: "0%" },
|
|
130
|
-
to: { y: "0%", opacity: 1, ease: "power3.inOut" }
|
|
142
|
+
to: { y: "0%", opacity: 1, ease: "power3.inOut" },
|
|
131
143
|
};
|
|
132
144
|
}
|
|
133
145
|
|
|
134
|
-
function animateSlideDown()
|
|
146
|
+
function animateSlideDown(): GSAPTweenVars {
|
|
135
147
|
return {
|
|
136
148
|
from: { y: "0%", x: "0%" },
|
|
137
|
-
to: { y: "100%", opacity: 1, ease: "power3.inOut" }
|
|
149
|
+
to: { y: "100%", opacity: 1, ease: "power3.inOut" },
|
|
138
150
|
};
|
|
139
151
|
}
|
|
140
152
|
|
|
141
|
-
function animateSlideRight()
|
|
153
|
+
function animateSlideRight(): GSAPTweenVars {
|
|
142
154
|
return {
|
|
143
155
|
from: { x: "0%", y: "0%" },
|
|
144
|
-
to: { x: "100%", opacity: 1, ease: "power3.inOut" }
|
|
156
|
+
to: { x: "100%", opacity: 1, ease: "power3.inOut" },
|
|
145
157
|
};
|
|
146
158
|
}
|
|
147
159
|
|
|
148
|
-
function animateSlideLeft()
|
|
160
|
+
function animateSlideLeft(): GSAPTweenVars {
|
|
149
161
|
return {
|
|
150
162
|
from: { x: "100%", y: "0%" },
|
|
151
|
-
to: { x: "0%", opacity: 1, ease: "power3.inOut" }
|
|
163
|
+
to: { x: "0%", opacity: 1, ease: "power3.inOut" },
|
|
152
164
|
};
|
|
153
165
|
}
|
|
154
166
|
|
|
@@ -164,7 +176,7 @@ function isPopupAnimation(value: string): value is PopupAnimation {
|
|
|
164
176
|
|
|
165
177
|
// Safe parser with fallback
|
|
166
178
|
function getPopupAnimation(raw: string | null | undefined): PopupAnimation {
|
|
167
|
-
return isPopupAnimation(raw ?? "") ? raw as PopupAnimation : "slide-up";
|
|
179
|
+
return isPopupAnimation(raw ?? "") ? (raw as PopupAnimation) : "slide-up";
|
|
168
180
|
}
|
|
169
181
|
|
|
170
182
|
// Centralized error logging
|
|
@@ -174,7 +186,10 @@ function logError(error: ErrorType, popupName: string, trigger: Element): void {
|
|
|
174
186
|
console.error(`Trigger is missing the "petal" attribute:`, trigger);
|
|
175
187
|
break;
|
|
176
188
|
case "NO_POPUP":
|
|
177
|
-
console.error(
|
|
189
|
+
console.error(
|
|
190
|
+
`Popup with name "${popupName}" not found for trigger:`,
|
|
191
|
+
trigger,
|
|
192
|
+
);
|
|
178
193
|
break;
|
|
179
194
|
default:
|
|
180
195
|
console.error(`Popup error [${error}] for "${popupName}":`, trigger);
|