well-petal 0.0.56 → 0.0.58
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 +3 -3
- package/package.json +1 -1
package/dist/petal.js
CHANGED
|
@@ -176,7 +176,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
176
176
|
\*******************************/
|
|
177
177
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
178
178
|
|
|
179
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ animateCloseSlideDown: () => (/* binding */ animateCloseSlideDown),\n/* harmony export */ animateCloseSlideLeft: () => (/* binding */ animateCloseSlideLeft),\n/* harmony export */ animateCloseSlideRight: () => (/* binding */ animateCloseSlideRight),\n/* harmony export */ animateCloseSlideUp: () => (/* binding */ animateCloseSlideUp),\n/* harmony export */ animateDropdownCloseSlideDown: () => (/* binding */ animateDropdownCloseSlideDown),\n/* harmony export */ animateDropdownCloseSlideLeft: () => (/* binding */ animateDropdownCloseSlideLeft),\n/* harmony export */ animateDropdownCloseSlideRight: () => (/* binding */ animateDropdownCloseSlideRight),\n/* harmony export */ animateDropdownCloseSlideUp: () => (/* binding */ animateDropdownCloseSlideUp),\n/* harmony export */ animateDropdownOpenSlideDown: () => (/* binding */ animateDropdownOpenSlideDown),\n/* harmony export */ animateDropdownOpenSlideLeft: () => (/* binding */ animateDropdownOpenSlideLeft),\n/* harmony export */ animateDropdownOpenSlideRight: () => (/* binding */ animateDropdownOpenSlideRight),\n/* harmony export */ animateDropdownOpenSlideUp: () => (/* binding */ animateDropdownOpenSlideUp),\n/* harmony export */ animateMaskClosed: () => (/* binding */ animateMaskClosed),\n/* harmony export */ animateMaskOpen: () => (/* binding */ animateMaskOpen),\n/* harmony export */ animateOpenSlideDown: () => (/* binding */ animateOpenSlideDown),\n/* harmony export */ animateOpenSlideLeft: () => (/* binding */ animateOpenSlideLeft),\n/* harmony export */ animateOpenSlideRight: () => (/* binding */ animateOpenSlideRight),\n/* harmony export */ animateOpenSlideUp: () => (/* binding */ animateOpenSlideUp),\n/* harmony export */ animateScaleDown: () => (/* binding */ animateScaleDown),\n/* harmony export */ animateScaleUp: () => (/* binding */ animateScaleUp)\n/* harmony export */ });\nfunction animateScaleUp() {\n return {\n from: { scale: 0, opacity: 0 },\n to: { scale: 1, opacity: 1, ease: \"power1.inOut\" },\n };\n}\nfunction animateScaleDown() {\n return {\n from: { scale: 1, opacity: 0 },\n to: { scale: 0, opacity: 1, ease: \"power1.inOut\" },\n };\n}\nfunction animateOpenSlideUp() {\n return {\n from: { y: \"100%\", x: \"0%\", opacity: 0 }, // From bottom\n to: { y: \"0%\", x: \"0%\", opacity: 1, ease: \"power1.inOut\" }, // To top\n };\n}\nfunction animateOpenSlideDown() {\n return {\n from: { y: \"-100%\", x: \"0%\", opacity: 0 }, // From top\n to: { y: \"0%\", x: \"0%\", opacity: 1, ease: \"power1.inOut\" }, // To bottom\n };\n}\nfunction animateOpenSlideRight() {\n return {\n from: { x: \"-100%\", y: \"0%\", opacity: 0 }, // From left\n to: { x: \"0%\", y: \"0%\", opacity: 1, ease: \"power1.inOut\" }, // To center\n };\n}\nfunction animateOpenSlideLeft() {\n return {\n from: { x: \"100%\", y: \"0%\", opacity: 0 }, // From right\n to: { x: \"0%\", y: \"0%\", opacity: 1, ease: \"power1.inOut\" }, // To center\n };\n}\nfunction animateCloseSlideUp() {\n return {\n from: { y: \"0%\", x: \"0%\", opacity: 1 }, // From bottom\n to: { y: \"-100%\", x: \"0%\", opacity: 0, ease: \"power1.inOut\" }, // To top\n };\n}\nfunction animateCloseSlideDown() {\n return {\n from: { y: \"0%\", x: \"0%\", opacity: 1 }, // From top\n to: { y: \"100%\", x: \"0%\", opacity: 0, ease: \"power1.inOut\" }, // To bottom\n };\n}\nfunction animateCloseSlideRight() {\n return {\n from: { x: \"0%\", y: \"0%\", opacity: 1 }, // From left\n to: { x: \"100%\", y: \"0%\", opacity: 0, ease: \"power1.inOut\" }, // To center\n };\n}\nfunction animateCloseSlideLeft() {\n return {\n from: { x: \"0%\", y: \"0%\", opacity: 1 }, // From right\n to: { x: \"-100%\", y: \"0%\", opacity: 0, ease: \"power1.inOut\" }, // To center\n };\n}\n// 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// Dropdown animations (subtle movements for dropdown menus)\nfunction animateDropdownOpenSlideDown(offset = 25) {\n return {\n from: { x: 0, y: -offset
|
|
179
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ animateCloseSlideDown: () => (/* binding */ animateCloseSlideDown),\n/* harmony export */ animateCloseSlideLeft: () => (/* binding */ animateCloseSlideLeft),\n/* harmony export */ animateCloseSlideRight: () => (/* binding */ animateCloseSlideRight),\n/* harmony export */ animateCloseSlideUp: () => (/* binding */ animateCloseSlideUp),\n/* harmony export */ animateDropdownCloseSlideDown: () => (/* binding */ animateDropdownCloseSlideDown),\n/* harmony export */ animateDropdownCloseSlideLeft: () => (/* binding */ animateDropdownCloseSlideLeft),\n/* harmony export */ animateDropdownCloseSlideRight: () => (/* binding */ animateDropdownCloseSlideRight),\n/* harmony export */ animateDropdownCloseSlideUp: () => (/* binding */ animateDropdownCloseSlideUp),\n/* harmony export */ animateDropdownOpenSlideDown: () => (/* binding */ animateDropdownOpenSlideDown),\n/* harmony export */ animateDropdownOpenSlideLeft: () => (/* binding */ animateDropdownOpenSlideLeft),\n/* harmony export */ animateDropdownOpenSlideRight: () => (/* binding */ animateDropdownOpenSlideRight),\n/* harmony export */ animateDropdownOpenSlideUp: () => (/* binding */ animateDropdownOpenSlideUp),\n/* harmony export */ animateMaskClosed: () => (/* binding */ animateMaskClosed),\n/* harmony export */ animateMaskOpen: () => (/* binding */ animateMaskOpen),\n/* harmony export */ animateOpenSlideDown: () => (/* binding */ animateOpenSlideDown),\n/* harmony export */ animateOpenSlideLeft: () => (/* binding */ animateOpenSlideLeft),\n/* harmony export */ animateOpenSlideRight: () => (/* binding */ animateOpenSlideRight),\n/* harmony export */ animateOpenSlideUp: () => (/* binding */ animateOpenSlideUp),\n/* harmony export */ animateScaleDown: () => (/* binding */ animateScaleDown),\n/* harmony export */ animateScaleUp: () => (/* binding */ animateScaleUp)\n/* harmony export */ });\nfunction animateScaleUp() {\n return {\n from: { scale: 0, opacity: 0 },\n to: { scale: 1, opacity: 1, ease: \"power1.inOut\" },\n };\n}\nfunction animateScaleDown() {\n return {\n from: { scale: 1, opacity: 0 },\n to: { scale: 0, opacity: 1, ease: \"power1.inOut\" },\n };\n}\nfunction animateOpenSlideUp() {\n return {\n from: { y: \"100%\", x: \"0%\", opacity: 0 }, // From bottom\n to: { y: \"0%\", x: \"0%\", opacity: 1, ease: \"power1.inOut\" }, // To top\n };\n}\nfunction animateOpenSlideDown() {\n return {\n from: { y: \"-100%\", x: \"0%\", opacity: 0 }, // From top\n to: { y: \"0%\", x: \"0%\", opacity: 1, ease: \"power1.inOut\" }, // To bottom\n };\n}\nfunction animateOpenSlideRight() {\n return {\n from: { x: \"-100%\", y: \"0%\", opacity: 0 }, // From left\n to: { x: \"0%\", y: \"0%\", opacity: 1, ease: \"power1.inOut\" }, // To center\n };\n}\nfunction animateOpenSlideLeft() {\n return {\n from: { x: \"100%\", y: \"0%\", opacity: 0 }, // From right\n to: { x: \"0%\", y: \"0%\", opacity: 1, ease: \"power1.inOut\" }, // To center\n };\n}\nfunction animateCloseSlideUp() {\n return {\n from: { y: \"0%\", x: \"0%\", opacity: 1 }, // From bottom\n to: { y: \"-100%\", x: \"0%\", opacity: 0, ease: \"power1.inOut\" }, // To top\n };\n}\nfunction animateCloseSlideDown() {\n return {\n from: { y: \"0%\", x: \"0%\", opacity: 1 }, // From top\n to: { y: \"100%\", x: \"0%\", opacity: 0, ease: \"power1.inOut\" }, // To bottom\n };\n}\nfunction animateCloseSlideRight() {\n return {\n from: { x: \"0%\", y: \"0%\", opacity: 1 }, // From left\n to: { x: \"100%\", y: \"0%\", opacity: 0, ease: \"power1.inOut\" }, // To center\n };\n}\nfunction animateCloseSlideLeft() {\n return {\n from: { x: \"0%\", y: \"0%\", opacity: 1 }, // From right\n to: { x: \"-100%\", y: \"0%\", opacity: 0, ease: \"power1.inOut\" }, // To center\n };\n}\n// 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// Dropdown animations (subtle movements for dropdown menus)\nfunction animateDropdownOpenSlideDown(offset = 25) {\n return {\n from: { x: 0, y: typeof offset === 'number' ? -offset : `-${offset}`, opacity: 0 },\n to: { x: 0, y: 0, opacity: 1, ease: \"power2.out\" },\n };\n}\nfunction animateDropdownCloseSlideDown(offset = 25) {\n return {\n from: { x: 0, y: 0, opacity: 1 },\n to: { x: 0, y: typeof offset === 'number' ? -offset : `-${offset}`, opacity: 0, ease: \"power2.in\" },\n };\n}\nfunction animateDropdownOpenSlideUp(offset = 25) {\n return {\n from: { x: 0, y: offset, opacity: 0 },\n to: { x: 0, y: 0, opacity: 1, ease: \"power2.out\" },\n };\n}\nfunction animateDropdownCloseSlideUp(offset = 25) {\n return {\n from: { x: 0, y: 0, opacity: 1 },\n to: { x: 0, y: offset, opacity: 0, ease: \"power2.in\" },\n };\n}\nfunction animateDropdownOpenSlideLeft(offset = 25) {\n return {\n from: { x: offset, y: 0, opacity: 0 },\n to: { x: 0, y: 0, opacity: 1, ease: \"power2.in\" },\n };\n}\nfunction animateDropdownCloseSlideLeft(offset = 25) {\n return {\n from: { x: 0, y: 0, opacity: 1 },\n to: { x: offset, y: 0, opacity: 0, ease: \"power2.in\" },\n };\n}\nfunction animateDropdownOpenSlideRight(offset = 25) {\n return {\n from: { x: typeof offset === 'number' ? -offset : `-${offset}`, y: 0, opacity: 0 },\n to: { x: 0, y: 0, opacity: 1, ease: \"power2.in\" },\n };\n}\nfunction animateDropdownCloseSlideRight(offset = 25) {\n return {\n from: { x: 0, y: 0, opacity: 1 },\n to: { x: typeof offset === 'number' ? -offset : `-${offset}`, y: 0, opacity: 0, ease: \"power2.in\" },\n };\n}\n\n\n//# sourceURL=webpack://petal/./src/lib/animations.ts?");
|
|
180
180
|
|
|
181
181
|
/***/ }),
|
|
182
182
|
|
|
@@ -226,7 +226,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
226
226
|
\*****************************/
|
|
227
227
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
228
228
|
|
|
229
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ initializeDropdowns: () => (/* binding */ initializeDropdowns)\n/* harmony export */ });\n/* harmony import */ var gsap__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! gsap */ \"./node_modules/gsap/index.js\");\n/* harmony import */ var _animations__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./animations */ \"./src/lib/animations.ts\");\n/* harmony import */ var _attributes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./attributes */ \"./src/lib/attributes.ts\");\n/**\n * Dropdown Component\n *\n * Handles interactive dropdown menus with support for:\n * - Click or hover-based opening\n * - Customizable close delays\n * - Grouped dropdown coordination\n * - CSS-based animations\n * - Accessibility (aria-expanded)\n *\n * HTML Attributes (defined in attributes.ts):\n * - petal-el=\"dropdown\" - Container element\n * - petal-el=\"dropdown-toggle\" - Clickable/hoverable trigger\n * - petal-el=\"dropdown-menu\" - Menu content\n * - petal-el=\"dropdown-drawer\" - Menu inner box\n * - petal-el=\"dropdown-background\" (optional) - Background overlay\n * - petal-dropdown-group=\"name\" (optional) - Group name for coordinated animations\n * - petal-dropdown-open-on-hover=\"true\" (optional) - Use hover instead of click\n * - petal-dropdown-open-delay=\"ms\" (optional) - Open delay in milliseconds (default: 200)\n * - petal-dropdown-close-delay=\"ms\" (optional) - Close delay in milliseconds (default: 200)\n * - petal-dropdown-anim=\"slide-down|slide-up|slide-left|slide-right\" (optional) - Desktop animation (default: slide-down)\n * - petal-dropdown-anim-tablet=\"slide-down|slide-up|slide-left|slide-right\" (optional) - Tablet animation (inherits from petal-dropdown-anim)\n * - petal-dropdown-anim-mobile-landscape=\"slide-down|slide-up|slide-left|slide-right\" (optional) - Mobile landscape animation (inherits from petal-dropdown-anim-tablet)\n * - petal-dropdown-anim-mobile=\"slide-down|slide-up|slide-left|slide-right\" (optional) - Mobile animation (inherits from petal-dropdown-anim-mobile-landscape)\n * - petal-dropdown-anim-open-speed=\"ms\" (optional) - Animation speed when opening in milliseconds (default: 500)\n * - petal-dropdown-anim-close-speed=\"ms\" (optional) - Animation speed when closing in milliseconds (default: 300)\n */\n\n\n\nconst animationOpenMap = {\n \"slide-down\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownOpenSlideDown,\n \"slide-up\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownOpenSlideUp,\n \"slide-left\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownOpenSlideLeft,\n \"slide-right\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownOpenSlideRight,\n};\nconst animationCloseMap = {\n \"slide-down\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownCloseSlideDown,\n \"slide-up\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownCloseSlideUp,\n \"slide-left\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownCloseSlideLeft,\n \"slide-right\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownCloseSlideRight,\n};\nfunction initializeDropdowns() {\n const init = () => {\n console.log(\"Dropdown script loaded\");\n const dropdowns = document.querySelectorAll(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN}']`);\n console.log(`Found ${dropdowns.length} dropdown(s)`);\n dropdowns.forEach((dropdown, index) => {\n console.log(`\\n=== Initializing Dropdown ${index + 1} ===`);\n // ===========================\n // Element References\n // ===========================\n const toggle = dropdown.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_TOGGLE}']`);\n const menu = dropdown.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_MENU}']`);\n const background = dropdown.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_BACKGROUND}']`);\n console.log(`Dropdown ${index + 1} - Found toggle:`, toggle);\n console.log(`Dropdown ${index + 1} - Found menu:`, menu);\n console.log(`Dropdown ${index + 1} - Found background:`, background);\n // ===========================\n // Configuration\n // ===========================\n const group = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_GROUP) || null;\n // Check if device has mouse capability (pointer device)\n const hasMouse = window.matchMedia(\"(pointer: fine)\").matches;\n // Open-on-hover configuration with breakpoints\n const openOnHoverDesktop = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER) === \"true\";\n const openOnHoverTablet = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_TABLET);\n const openOnHoverMobileLandscape = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_MOBILE_LANDSCAPE);\n const openOnHoverMobile = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_MOBILE);\n // Helper to get current open-on-hover setting based on screen size\n const getCurrentOpenOnHover = () => {\n const width = window.innerWidth;\n let shouldHover = openOnHoverDesktop;\n if (width <= 479 && openOnHoverMobile !== null) {\n shouldHover = openOnHoverMobile === \"true\";\n }\n else if (width <= 767 && openOnHoverMobileLandscape !== null) {\n shouldHover = openOnHoverMobileLandscape === \"true\";\n }\n else if (width <= 991 && openOnHoverTablet !== null) {\n shouldHover = openOnHoverTablet === \"true\";\n }\n // Only enable hover if device has mouse\n return shouldHover && hasMouse;\n };\n const openOnHover = getCurrentOpenOnHover();\n const openDelay = parseInt(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_OPEN_DELAY) || \"200\");\n const closeDelay = parseInt(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_CLOSE_DELAY) || \"200\");\n // Animation configuration\n const anim = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM) || \"slide-down\";\n const animTablet = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_TABLET) || anim;\n const animMobileLandscape = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_MOBILE_LANDSCAPE) || animTablet;\n const animMobile = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_MOBILE) || animMobileLandscape;\n // Animation speed configuration (in milliseconds, converted to seconds for GSAP)\n const animOpenSpeed = parseInt(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_OPEN_SPEED) || \"500\") / 1000;\n const animCloseSpeed = parseInt(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_CLOSE_SPEED) || \"300\") / 1000;\n // Animation offset configuration (in pixels) with breakpoints\n const animOffset = parseInt(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_OFFSET) || \"25\");\n const animOffsetTablet = parseInt(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_OFFSET_TABLET) || animOffset.toString());\n const animOffsetMobileLandscape = parseInt(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_OFFSET_MOBILE_LANDSCAPE) || animOffsetTablet.toString());\n const animOffsetMobile = parseInt(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_OFFSET_MOBILE) || animOffsetMobileLandscape.toString());\n console.log(`Dropdown ${index + 1} - Config:`, {\n group,\n hasMouse,\n openOnHoverDesktop,\n openOnHoverTablet,\n openOnHoverMobileLandscape,\n openOnHoverMobile,\n openOnHover,\n openDelay,\n closeDelay,\n anim,\n animTablet,\n animMobileLandscape,\n animMobile,\n animOpenSpeed: `${animOpenSpeed}s`,\n animCloseSpeed: `${animCloseSpeed}s`,\n animOffset: `${animOffset}px`,\n animOffsetTablet: `${animOffsetTablet}px`,\n animOffsetMobileLandscape: `${animOffsetMobileLandscape}px`,\n animOffsetMobile: `${animOffsetMobile}px`,\n });\n // Helper function to get the current animation offset based on screen size\n const getCurrentOffset = () => {\n const width = window.innerWidth;\n if (width <= 479)\n return animOffsetMobile;\n if (width <= 767)\n return animOffsetMobileLandscape;\n if (width <= 991)\n return animOffsetTablet;\n return animOffset;\n };\n // Helper function to get the current animation type based on screen size\n const getCurrentAnimation = () => {\n const width = window.innerWidth;\n if (width <= 479)\n return animMobile;\n if (width <= 767)\n return animMobileLandscape;\n if (width <= 991)\n return animTablet;\n return anim;\n };\n // Validate required elements\n if (!toggle || !menu) {\n console.warn(`Dropdown ${index + 1} - Missing toggle or menu, skipping`);\n return;\n }\n // ===========================\n // State Management\n // ===========================\n let isOpen = false;\n let timeoutId = null;\n let currentTimeline = null;\n // ===========================\n // Core Functions\n // ===========================\n /**\n * Opens the dropdown menu using GSAP\n * - Cancels any pending close timeout\n * - Delays opening if specified or if another dropdown in same group is open\n * - Animates using GSAP timeline\n */\n const openDropdown = () => {\n console.log(`Dropdown ${index + 1} - openDropdown() called`);\n // Cancel any pending close\n if (timeoutId) {\n console.log(`Dropdown ${index + 1} - Cancelling pending close timeout`);\n clearTimeout(timeoutId);\n timeoutId = null;\n }\n // Kill any existing timeline\n if (currentTimeline) {\n currentTimeline.kill();\n currentTimeline = null;\n }\n // Check if we need to delay opening (group coordination)\n let groupCoordinationDelay = 0;\n if (group) {\n const groupDropdowns = document.querySelectorAll(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN}'][${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_GROUP}='${group}']`);\n console.log(`Dropdown ${index + 1} - Found ${groupDropdowns.length} dropdowns in group '${group}'`);\n // Find the currently open dropdown in this group\n const openDropdownInGroup = Array.from(groupDropdowns).find((dd) => {\n const ddToggle = dd.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_TOGGLE}']`);\n return ddToggle && ddToggle !== toggle && ddToggle.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ARIA_EXPANDED) === \"true\";\n });\n // If another is open, get its close delay attribute for coordination\n if (openDropdownInGroup) {\n groupCoordinationDelay = parseInt(openDropdownInGroup.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_CLOSE_DELAY) || \"0\", 10);\n console.log(`Dropdown ${index + 1} - Another dropdown in group is open, coordinating with delay: ${groupCoordinationDelay}ms`);\n }\n }\n // Perform the actual open (immediately or delayed)\n const performOpen = () => {\n console.log(`Dropdown ${index + 1} - performOpen() executing with GSAP`);\n // Get the appropriate animation based on screen size\n const currentAnim = getCurrentAnimation();\n const currentOffset = getCurrentOffset();\n const animFunc = animationOpenMap[currentAnim];\n const anim = animFunc(currentOffset);\n // Create GSAP timeline\n const tl = gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.timeline();\n currentTimeline = tl;\n // Find the drawer element to animate\n const drawer = menu.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='dropdown-drawer']`);\n // Set menu to visible with flex display\n tl.set(menu, { display: \"flex\", visibility: \"visible\" });\n // Animate the drawer\n if (drawer) {\n anim.to.duration = animOpenSpeed;\n tl.fromTo(drawer, anim.from, anim.to, \"<\");\n }\n // Update ARIA and state\n toggle.setAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ARIA_EXPANDED, \"true\");\n menu.classList.add(_attributes__WEBPACK_IMPORTED_MODULE_1__.CLASS_DROPDOWN_OPEN);\n if (background) {\n tl.to(background, { opacity: 1, duration: animOpenSpeed }, \"<\");\n }\n isOpen = true;\n };\n // Use the greater of openDelay or groupCoordinationDelay\n const totalDelay = Math.max(openDelay, groupCoordinationDelay);\n console.log(`Dropdown ${index + 1} - Total delay: ${totalDelay}ms (openDelay: ${openDelay}ms, groupCoordination: ${groupCoordinationDelay}ms)`);\n if (totalDelay > 0) {\n console.log(`Dropdown ${index + 1} - Scheduling open in ${totalDelay}ms`);\n setTimeout(performOpen, totalDelay);\n }\n else {\n console.log(`Dropdown ${index + 1} - Opening immediately`);\n performOpen();\n }\n };\n /**\n * Closes the dropdown menu using GSAP\n * - Cancels any pending close timeout\n * - Animates using GSAP timeline\n * - Sets visibility to hidden after animation completes\n */\n const closeDropdown = () => {\n console.log(`Dropdown ${index + 1} - closeDropdown() called`);\n // Cancel any pending close\n if (timeoutId) {\n console.log(`Dropdown ${index + 1} - Cancelling existing timeout`);\n clearTimeout(timeoutId);\n timeoutId = null;\n }\n // Kill any existing timeline\n if (currentTimeline) {\n currentTimeline.kill();\n currentTimeline = null;\n }\n console.log(`Dropdown ${index + 1} - closeDropdown() executing with GSAP`);\n // Get the appropriate animation based on screen size\n const currentAnim = getCurrentAnimation();\n const currentOffset = getCurrentOffset();\n const animFunc = animationCloseMap[currentAnim];\n const anim = animFunc(currentOffset);\n // Create GSAP timeline\n const tl = gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.timeline({\n onComplete: () => {\n // Set visibility to hidden after animation completes\n gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.set(menu, { visibility: \"hidden\" });\n }\n });\n currentTimeline = tl;\n // Find the drawer element to animate\n const drawer = menu.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='dropdown-drawer']`);\n // Animate the drawer\n if (drawer) {\n anim.to.duration = animCloseSpeed;\n tl.fromTo(drawer, anim.from, anim.to);\n }\n // Update ARIA and state\n toggle.setAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ARIA_EXPANDED, \"false\");\n menu.classList.remove(_attributes__WEBPACK_IMPORTED_MODULE_1__.CLASS_DROPDOWN_OPEN);\n if (background) {\n tl.to(background, { opacity: 0, duration: animCloseSpeed }, \"<\");\n }\n isOpen = false;\n };\n /**\n * Closes the dropdown with an optional delay\n * - Uses petal-dropdown-delay attribute value\n * - Stores timeout ID for potential cancellation\n */\n const closeDropdownWithDelay = () => {\n console.log(`Dropdown ${index + 1} - closeDropdownWithDelay() called with delay: ${closeDelay}ms`);\n if (closeDelay > 0) {\n console.log(`Dropdown ${index + 1} - Scheduling close in ${closeDelay}ms`);\n timeoutId = window.setTimeout(closeDropdown, closeDelay);\n }\n else {\n console.log(`Dropdown ${index + 1} - Closing immediately (no delay)`);\n closeDropdown();\n }\n };\n /**\n * Toggles the dropdown between open and closed states\n * - Used for click-based dropdowns\n */\n const toggleDropdown = () => {\n if (isOpen) {\n closeDropdown();\n }\n else {\n openDropdown();\n }\n };\n /**\n * Handles clicks outside the dropdown\n * - Only active for click-based dropdowns\n * - Closes dropdown if click is outside both toggle and menu\n */\n const handleOutsideClick = (event) => {\n if (!isOpen)\n return;\n const clickedInsideDropdown = dropdown.contains(event.target);\n if (!clickedInsideDropdown) {\n closeDropdown();\n }\n };\n // ===========================\n // Initialization\n // ===========================\n // Set initial aria-expanded state and ensure menu is closed\n toggle.setAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ARIA_EXPANDED, \"false\");\n menu.classList.remove(_attributes__WEBPACK_IMPORTED_MODULE_1__.CLASS_DROPDOWN_OPEN);\n // Initialize drawer to its animation's starting position\n const drawer = menu.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='dropdown-drawer']`);\n if (drawer) {\n const currentAnim = getCurrentAnimation();\n const currentOffset = getCurrentOffset();\n const animFunc = animationOpenMap[currentAnim];\n const anim = animFunc(currentOffset);\n gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.set(drawer, anim.from);\n }\n // Reinitialize drawer position on window resize if dropdown is closed\n const handleResize = () => {\n if (!isOpen && drawer) {\n const currentAnim = getCurrentAnimation();\n const currentOffset = getCurrentOffset();\n const animFunc = animationOpenMap[currentAnim];\n const anim = animFunc(currentOffset);\n gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.set(drawer, anim.from);\n }\n };\n window.addEventListener(\"resize\", handleResize);\n // Attach event listeners based on configuration\n if (openOnHover) {\n console.log(`Dropdown ${index + 1} - Attaching hover event listeners`);\n dropdown.addEventListener(\"mouseenter\", () => {\n console.log(`Dropdown ${index + 1} - MOUSEENTER event triggered`);\n openDropdown();\n });\n dropdown.addEventListener(\"mouseleave\", () => {\n console.log(`Dropdown ${index + 1} - MOUSELEAVE event triggered`);\n closeDropdownWithDelay();\n });\n }\n else {\n console.log(`Dropdown ${index + 1} - Attaching click event listeners`);\n toggle.addEventListener(\"click\", toggleDropdown);\n // Add outside click listener for click-based dropdowns\n document.addEventListener(\"click\", handleOutsideClick);\n }\n console.log(`Dropdown ${index + 1} - Initialization complete\\n`);\n });\n };\n // Run immediately if DOM is ready, otherwise wait for DOMContentLoaded\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", init);\n }\n else {\n init();\n }\n}\n\n\n//# sourceURL=webpack://petal/./src/lib/dropdown.ts?");
|
|
229
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ initializeDropdowns: () => (/* binding */ initializeDropdowns)\n/* harmony export */ });\n/* harmony import */ var gsap__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! gsap */ \"./node_modules/gsap/index.js\");\n/* harmony import */ var _animations__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./animations */ \"./src/lib/animations.ts\");\n/* harmony import */ var _attributes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./attributes */ \"./src/lib/attributes.ts\");\n/**\n * Dropdown Component\n *\n * Handles interactive dropdown menus with support for:\n * - Click or hover-based opening\n * - Customizable close delays\n * - Grouped dropdown coordination\n * - CSS-based animations\n * - Accessibility (aria-expanded)\n *\n * HTML Attributes (defined in attributes.ts):\n * - petal-el=\"dropdown\" - Container element\n * - petal-el=\"dropdown-toggle\" - Clickable/hoverable trigger\n * - petal-el=\"dropdown-menu\" - Menu content\n * - petal-el=\"dropdown-drawer\" - Menu inner box\n * - petal-el=\"dropdown-background\" (optional) - Background overlay\n * - petal-dropdown-group=\"name\" (optional) - Group name for coordinated animations\n * - petal-dropdown-open-on-hover=\"true\" (optional) - Use hover instead of click\n * - petal-dropdown-open-delay=\"ms\" (optional) - Open delay in milliseconds (default: 200)\n * - petal-dropdown-close-delay=\"ms\" (optional) - Close delay in milliseconds (default: 200)\n * - petal-dropdown-anim=\"slide-down|slide-up|slide-left|slide-right\" (optional) - Desktop animation (default: slide-down)\n * - petal-dropdown-anim-tablet=\"slide-down|slide-up|slide-left|slide-right\" (optional) - Tablet animation (inherits from petal-dropdown-anim)\n * - petal-dropdown-anim-mobile-landscape=\"slide-down|slide-up|slide-left|slide-right\" (optional) - Mobile landscape animation (inherits from petal-dropdown-anim-tablet)\n * - petal-dropdown-anim-mobile=\"slide-down|slide-up|slide-left|slide-right\" (optional) - Mobile animation (inherits from petal-dropdown-anim-mobile-landscape)\n * - petal-dropdown-anim-open-speed=\"ms\" (optional) - Animation speed when opening in milliseconds (default: 500)\n * - petal-dropdown-anim-close-speed=\"ms\" (optional) - Animation speed when closing in milliseconds (default: 300)\n */\n\n\n\nconst animationOpenMap = {\n \"slide-down\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownOpenSlideDown,\n \"slide-up\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownOpenSlideUp,\n \"slide-left\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownOpenSlideLeft,\n \"slide-right\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownOpenSlideRight,\n};\nconst animationCloseMap = {\n \"slide-down\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownCloseSlideDown,\n \"slide-up\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownCloseSlideUp,\n \"slide-left\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownCloseSlideLeft,\n \"slide-right\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownCloseSlideRight,\n};\nfunction initializeDropdowns() {\n const init = () => {\n console.log(\"Dropdown script loaded\");\n const dropdowns = document.querySelectorAll(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN}']`);\n console.log(`Found ${dropdowns.length} dropdown(s)`);\n dropdowns.forEach((dropdown, index) => {\n console.log(`\\n=== Initializing Dropdown ${index + 1} ===`);\n // ===========================\n // Element References\n // ===========================\n const toggle = dropdown.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_TOGGLE}']`);\n const menu = dropdown.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_MENU}']`);\n const background = dropdown.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_BACKGROUND}']`);\n console.log(`Dropdown ${index + 1} - Found toggle:`, toggle);\n console.log(`Dropdown ${index + 1} - Found menu:`, menu);\n console.log(`Dropdown ${index + 1} - Found background:`, background);\n // ===========================\n // Configuration\n // ===========================\n const group = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_GROUP) || null;\n // Check if device has mouse capability (pointer device)\n const hasMouse = window.matchMedia(\"(pointer: fine)\").matches;\n // Open-on-hover configuration with breakpoints\n const openOnHoverDesktopAttr = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER);\n const openOnHoverTabletAttr = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_TABLET);\n const openOnHoverMobileLandscapeAttr = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_MOBILE_LANDSCAPE);\n const openOnHoverMobileAttr = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER_MOBILE);\n // Helper to get current open-on-hover setting based on screen size\n const getCurrentOpenOnHover = () => {\n const width = window.innerWidth;\n let shouldHover = openOnHoverDesktopAttr === \"true\";\n if (width <= 479 && openOnHoverMobileAttr !== null) {\n shouldHover = openOnHoverMobileAttr === \"true\";\n }\n else if (width <= 767 && openOnHoverMobileLandscapeAttr !== null) {\n shouldHover = openOnHoverMobileLandscapeAttr === \"true\";\n }\n else if (width <= 991 && openOnHoverTabletAttr !== null) {\n shouldHover = openOnHoverTabletAttr === \"true\";\n }\n // Only enable hover if device has mouse\n return shouldHover && hasMouse;\n };\n let openOnHover = getCurrentOpenOnHover();\n const openDelay = parseInt(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_OPEN_DELAY) || \"200\");\n const closeDelay = parseInt(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_CLOSE_DELAY) || \"200\");\n // Animation configuration\n const anim = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM) || \"slide-down\";\n const animTablet = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_TABLET) || anim;\n const animMobileLandscape = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_MOBILE_LANDSCAPE) || animTablet;\n const animMobile = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_MOBILE) || animMobileLandscape;\n // Animation speed configuration (in milliseconds, converted to seconds for GSAP)\n const animOpenSpeed = parseInt(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_OPEN_SPEED) || \"500\") / 1000;\n const animCloseSpeed = parseInt(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_CLOSE_SPEED) || \"300\") / 1000;\n // Animation offset configuration (in pixels or percentage) with breakpoints\n const parseOffset = (value) => {\n // If it contains %, return as string\n if (value.includes('%')) {\n return value;\n }\n // Otherwise parse as number\n return parseInt(value);\n };\n const animOffsetRaw = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_OFFSET) || \"25\";\n const animOffset = parseOffset(animOffsetRaw);\n const animOffsetTablet = parseOffset(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_OFFSET_TABLET) || animOffsetRaw);\n const animOffsetMobileLandscape = parseOffset(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_OFFSET_MOBILE_LANDSCAPE) || dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_OFFSET_TABLET) || animOffsetRaw);\n const animOffsetMobile = parseOffset(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_OFFSET_MOBILE) || dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_OFFSET_MOBILE_LANDSCAPE) || dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_OFFSET_TABLET) || animOffsetRaw);\n console.log(`Dropdown ${index + 1} - Config:`, {\n group,\n hasMouse,\n openOnHoverDesktopAttr,\n openOnHoverTabletAttr,\n openOnHoverMobileLandscapeAttr,\n openOnHoverMobileAttr,\n openOnHover,\n openDelay,\n closeDelay,\n anim,\n animTablet,\n animMobileLandscape,\n animMobile,\n animOpenSpeed: `${animOpenSpeed}s`,\n animCloseSpeed: `${animCloseSpeed}s`,\n animOffset: `${animOffset}px`,\n animOffsetTablet: `${animOffsetTablet}px`,\n animOffsetMobileLandscape: `${animOffsetMobileLandscape}px`,\n animOffsetMobile: `${animOffsetMobile}px`,\n });\n // Helper function to get the current animation offset based on screen size\n const getCurrentOffset = () => {\n const width = window.innerWidth;\n if (width <= 479)\n return animOffsetMobile;\n if (width <= 767)\n return animOffsetMobileLandscape;\n if (width <= 991)\n return animOffsetTablet;\n return animOffset;\n };\n // Helper function to get the current animation type based on screen size\n const getCurrentAnimation = () => {\n const width = window.innerWidth;\n if (width <= 479)\n return animMobile;\n if (width <= 767)\n return animMobileLandscape;\n if (width <= 991)\n return animTablet;\n return anim;\n };\n // Validate required elements\n if (!toggle || !menu) {\n console.warn(`Dropdown ${index + 1} - Missing toggle or menu, skipping`);\n return;\n }\n // ===========================\n // State Management\n // ===========================\n let isOpen = false;\n let timeoutId = null;\n let currentTimeline = null;\n // ===========================\n // Core Functions\n // ===========================\n /**\n * Opens the dropdown menu using GSAP\n * - Cancels any pending close timeout\n * - Delays opening if specified or if another dropdown in same group is open\n * - Animates using GSAP timeline\n */\n const openDropdown = () => {\n console.log(`Dropdown ${index + 1} - openDropdown() called`);\n // Cancel any pending close\n if (timeoutId) {\n console.log(`Dropdown ${index + 1} - Cancelling pending close timeout`);\n clearTimeout(timeoutId);\n timeoutId = null;\n }\n // Kill any existing timeline\n if (currentTimeline) {\n currentTimeline.kill();\n currentTimeline = null;\n }\n // Check if we need to delay opening (group coordination)\n let groupCoordinationDelay = 0;\n if (group) {\n const groupDropdowns = document.querySelectorAll(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN}'][${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_GROUP}='${group}']`);\n console.log(`Dropdown ${index + 1} - Found ${groupDropdowns.length} dropdowns in group '${group}'`);\n // Find the currently open dropdown in this group\n const openDropdownInGroup = Array.from(groupDropdowns).find((dd) => {\n const ddToggle = dd.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_TOGGLE}']`);\n return ddToggle && ddToggle !== toggle && ddToggle.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ARIA_EXPANDED) === \"true\";\n });\n // If another is open, get its close delay attribute for coordination\n if (openDropdownInGroup) {\n groupCoordinationDelay = parseInt(openDropdownInGroup.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_CLOSE_DELAY) || \"0\", 10);\n console.log(`Dropdown ${index + 1} - Another dropdown in group is open, coordinating with delay: ${groupCoordinationDelay}ms`);\n }\n }\n // Perform the actual open (immediately or delayed)\n const performOpen = () => {\n console.log(`Dropdown ${index + 1} - performOpen() executing with GSAP`);\n // Get the appropriate animation based on screen size\n const currentAnim = getCurrentAnimation();\n const currentOffset = getCurrentOffset();\n const animFunc = animationOpenMap[currentAnim];\n const anim = animFunc(currentOffset);\n // Create GSAP timeline\n const tl = gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.timeline();\n currentTimeline = tl;\n // Find the drawer element to animate\n const drawer = menu.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='dropdown-drawer']`);\n // Set menu to visible with flex display\n tl.set(menu, { display: \"flex\", visibility: \"visible\" });\n // Animate the drawer\n if (drawer) {\n anim.to.duration = animOpenSpeed;\n tl.fromTo(drawer, anim.from, anim.to, \"<\");\n }\n // Update ARIA and state\n toggle.setAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ARIA_EXPANDED, \"true\");\n menu.classList.add(_attributes__WEBPACK_IMPORTED_MODULE_1__.CLASS_DROPDOWN_OPEN);\n if (background) {\n tl.to(background, { opacity: 1, duration: animOpenSpeed }, \"<\");\n }\n isOpen = true;\n };\n // Use the greater of openDelay or groupCoordinationDelay\n const totalDelay = Math.max(openDelay, groupCoordinationDelay);\n console.log(`Dropdown ${index + 1} - Total delay: ${totalDelay}ms (openDelay: ${openDelay}ms, groupCoordination: ${groupCoordinationDelay}ms)`);\n if (totalDelay > 0) {\n console.log(`Dropdown ${index + 1} - Scheduling open in ${totalDelay}ms`);\n setTimeout(performOpen, totalDelay);\n }\n else {\n console.log(`Dropdown ${index + 1} - Opening immediately`);\n performOpen();\n }\n };\n /**\n * Closes the dropdown menu using GSAP\n * - Cancels any pending close timeout\n * - Animates using GSAP timeline\n * - Sets visibility to hidden after animation completes\n */\n const closeDropdown = () => {\n console.log(`Dropdown ${index + 1} - closeDropdown() called`);\n // Cancel any pending close\n if (timeoutId) {\n console.log(`Dropdown ${index + 1} - Cancelling existing timeout`);\n clearTimeout(timeoutId);\n timeoutId = null;\n }\n // Kill any existing timeline\n if (currentTimeline) {\n currentTimeline.kill();\n currentTimeline = null;\n }\n console.log(`Dropdown ${index + 1} - closeDropdown() executing with GSAP`);\n // Get the appropriate animation based on screen size\n const currentAnim = getCurrentAnimation();\n const currentOffset = getCurrentOffset();\n const animFunc = animationCloseMap[currentAnim];\n const anim = animFunc(currentOffset);\n // Create GSAP timeline\n const tl = gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.timeline({\n onComplete: () => {\n // Set visibility to hidden after animation completes\n gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.set(menu, { visibility: \"hidden\" });\n }\n });\n currentTimeline = tl;\n // Find the drawer element to animate\n const drawer = menu.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='dropdown-drawer']`);\n // Animate the drawer\n if (drawer) {\n anim.to.duration = animCloseSpeed;\n tl.fromTo(drawer, anim.from, anim.to);\n }\n // Update ARIA and state\n toggle.setAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ARIA_EXPANDED, \"false\");\n menu.classList.remove(_attributes__WEBPACK_IMPORTED_MODULE_1__.CLASS_DROPDOWN_OPEN);\n if (background) {\n tl.to(background, { opacity: 0, duration: animCloseSpeed }, \"<\");\n }\n isOpen = false;\n };\n /**\n * Closes the dropdown with an optional delay\n * - Uses petal-dropdown-delay attribute value\n * - Stores timeout ID for potential cancellation\n */\n const closeDropdownWithDelay = () => {\n console.log(`Dropdown ${index + 1} - closeDropdownWithDelay() called with delay: ${closeDelay}ms`);\n if (closeDelay > 0) {\n console.log(`Dropdown ${index + 1} - Scheduling close in ${closeDelay}ms`);\n timeoutId = window.setTimeout(closeDropdown, closeDelay);\n }\n else {\n console.log(`Dropdown ${index + 1} - Closing immediately (no delay)`);\n closeDropdown();\n }\n };\n /**\n * Toggles the dropdown between open and closed states\n * - Used for click-based dropdowns\n */\n const toggleDropdown = () => {\n if (isOpen) {\n closeDropdown();\n }\n else {\n openDropdown();\n }\n };\n /**\n * Handles clicks outside the dropdown\n * - Only active for click-based dropdowns\n * - Closes dropdown if click is outside both toggle and menu\n */\n const handleOutsideClick = (event) => {\n if (!isOpen)\n return;\n const clickedInsideDropdown = dropdown.contains(event.target);\n if (!clickedInsideDropdown) {\n closeDropdown();\n }\n };\n // ===========================\n // Initialization\n // ===========================\n // Set initial aria-expanded state and ensure menu is closed\n toggle.setAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ARIA_EXPANDED, \"false\");\n menu.classList.remove(_attributes__WEBPACK_IMPORTED_MODULE_1__.CLASS_DROPDOWN_OPEN);\n // Initialize drawer to its animation's starting position\n const drawer = menu.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='dropdown-drawer']`);\n if (drawer) {\n const currentAnim = getCurrentAnimation();\n const currentOffset = getCurrentOffset();\n const animFunc = animationOpenMap[currentAnim];\n const anim = animFunc(currentOffset);\n gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.set(drawer, anim.from);\n }\n // Event listener references for cleanup\n const mouseEnterHandler = () => {\n console.log(`Dropdown ${index + 1} - MOUSEENTER event triggered`);\n openDropdown();\n };\n const mouseLeaveHandler = () => {\n console.log(`Dropdown ${index + 1} - MOUSELEAVE event triggered`);\n closeDropdownWithDelay();\n };\n // Function to attach/detach event listeners based on hover mode\n const updateEventListeners = () => {\n const shouldUseHover = getCurrentOpenOnHover();\n // If mode changed, update listeners\n if (shouldUseHover !== openOnHover) {\n console.log(`Dropdown ${index + 1} - Switching interaction mode to ${shouldUseHover ? 'hover' : 'click'}`);\n // Remove old listeners\n if (openOnHover) {\n dropdown.removeEventListener(\"mouseenter\", mouseEnterHandler);\n dropdown.removeEventListener(\"mouseleave\", mouseLeaveHandler);\n }\n else {\n toggle.removeEventListener(\"click\", toggleDropdown);\n document.removeEventListener(\"click\", handleOutsideClick);\n }\n // Update mode\n openOnHover = shouldUseHover;\n // Attach new listeners\n if (openOnHover) {\n console.log(`Dropdown ${index + 1} - Attaching hover event listeners`);\n dropdown.addEventListener(\"mouseenter\", mouseEnterHandler);\n dropdown.addEventListener(\"mouseleave\", mouseLeaveHandler);\n }\n else {\n console.log(`Dropdown ${index + 1} - Attaching click event listeners`);\n toggle.addEventListener(\"click\", toggleDropdown);\n document.addEventListener(\"click\", handleOutsideClick);\n }\n }\n };\n // Reinitialize drawer position on window resize and update event listeners\n const handleResize = () => {\n if (!isOpen && drawer) {\n const currentAnim = getCurrentAnimation();\n const currentOffset = getCurrentOffset();\n const animFunc = animationOpenMap[currentAnim];\n const anim = animFunc(currentOffset);\n gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.set(drawer, anim.from);\n }\n // Update event listeners based on new screen size\n updateEventListeners();\n };\n window.addEventListener(\"resize\", handleResize);\n // Initial event listener setup\n if (openOnHover) {\n console.log(`Dropdown ${index + 1} - Attaching hover event listeners`);\n dropdown.addEventListener(\"mouseenter\", mouseEnterHandler);\n dropdown.addEventListener(\"mouseleave\", mouseLeaveHandler);\n }\n else {\n console.log(`Dropdown ${index + 1} - Attaching click event listeners`);\n toggle.addEventListener(\"click\", toggleDropdown);\n document.addEventListener(\"click\", handleOutsideClick);\n }\n console.log(`Dropdown ${index + 1} - Initialization complete\\n`);\n });\n };\n // Run immediately if DOM is ready, otherwise wait for DOMContentLoaded\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", init);\n }\n else {\n init();\n }\n}\n\n\n//# sourceURL=webpack://petal/./src/lib/dropdown.ts?");
|
|
230
230
|
|
|
231
231
|
/***/ }),
|
|
232
232
|
|
|
@@ -266,7 +266,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
266
266
|
\**********************/
|
|
267
267
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
268
268
|
|
|
269
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _popup__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./popup */ \"./src/popup.ts\");\n/* harmony import */ var _banner__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./banner */ \"./src/banner.ts\");\n/* harmony import */ var _lib_dropdown__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./lib/dropdown */ \"./src/lib/dropdown.ts\");\n/* harmony import */ var _petal_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./petal.css */ \"./src/petal.css\");\n/* harmony import */ var _lib_dropdown_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./lib/dropdown.css */ \"./src/lib/dropdown.css\");\n\n\n\n\n\nconsole.log(`🌸 Hello from Wellflow Petal v${\"0.0.
|
|
269
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _popup__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./popup */ \"./src/popup.ts\");\n/* harmony import */ var _banner__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./banner */ \"./src/banner.ts\");\n/* harmony import */ var _lib_dropdown__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./lib/dropdown */ \"./src/lib/dropdown.ts\");\n/* harmony import */ var _petal_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./petal.css */ \"./src/petal.css\");\n/* harmony import */ var _lib_dropdown_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./lib/dropdown.css */ \"./src/lib/dropdown.css\");\n\n\n\n\n\nconsole.log(`🌸 Hello from Wellflow Petal v${\"0.0.58\"}`);\n(0,_popup__WEBPACK_IMPORTED_MODULE_0__.initializeAllPopups)();\n(0,_popup__WEBPACK_IMPORTED_MODULE_0__.initializePopupTriggers)();\n(0,_banner__WEBPACK_IMPORTED_MODULE_1__.initializeBanner)();\n(0,_lib_dropdown__WEBPACK_IMPORTED_MODULE_2__.initializeDropdowns)();\n\n\n//# sourceURL=webpack://petal/./src/petal.ts?");
|
|
270
270
|
|
|
271
271
|
/***/ }),
|
|
272
272
|
|