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