well-petal 0.0.48 → 0.0.49
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/dist/petal.js
CHANGED
|
@@ -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};\n// Helper to check if animation name is a preset\nconst isPresetAnimation = (anim) => {\n return anim in animationOpenMap;\n};\n// Helper to trigger custom Webflow animation\nconst triggerWebflowAnimation = (animName, isOpen) => {\n try {\n // Check if Webflow is available\n if (typeof window !== 'undefined' && 'Webflow' in window && typeof window.Webflow.require === 'function') {\n const wfIx = window.Webflow.require(\"ix3\");\n const eventName = isOpen ? animName : `${animName}-close`;\n wfIx.emit(eventName);\n return true;\n }\n else {\n console.error(`Webflow animation \"${animName}\" failed: Webflow.require(\"ix3\") is not available`);\n return false;\n }\n }\n catch (error) {\n console.error(`Webflow animation event \"${animName}\" was not found or failed to trigger:`, error);\n return false;\n }\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 const openOnHover = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER) === \"true\";\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 console.log(`Dropdown ${index + 1} - Config:`, {\n group,\n openOnHover,\n openDelay,\n closeDelay,\n anim,\n animTablet,\n animMobileLandscape,\n animMobile,\n animOpenSpeed: `${animOpenSpeed}s`,\n animCloseSpeed: `${animCloseSpeed}s`\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`);\n // Get the appropriate animation\n const currentAnim = getCurrentAnimation();\n // Check if it's a preset animation or custom Webflow animation\n if (isPresetAnimation(currentAnim)) {\n // Use preset GSAP animation\n console.log(`Dropdown ${index + 1} - Using preset animation: ${currentAnim}`);\n const animFunc = animationOpenMap[currentAnim];\n const anim = animFunc();\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\n tl.set(menu, { 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 else {\n // Try to trigger custom Webflow animation\n console.log(`Dropdown ${index + 1} - Attempting custom Webflow animation: ${currentAnim}`);\n const success = triggerWebflowAnimation(currentAnim, true);\n if (success) {\n // Set menu to visible for custom animation\n gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.set(menu, { visibility: \"visible\" });\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 gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.to(background, { opacity: 1, duration: animOpenSpeed });\n }\n isOpen = true;\n }\n else {\n console.warn(`Dropdown ${index + 1} - Custom animation failed, dropdown will not open`);\n }\n }\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`);\n // Get the appropriate animation\n const currentAnim = getCurrentAnimation();\n // Check if it's a preset animation or custom Webflow animation\n if (isPresetAnimation(currentAnim)) {\n // Use preset GSAP animation\n console.log(`Dropdown ${index + 1} - Using preset animation: ${currentAnim}`);\n const animFunc = animationCloseMap[currentAnim];\n const anim = animFunc();\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 else {\n // Try to trigger custom Webflow animation\n console.log(`Dropdown ${index + 1} - Attempting custom Webflow animation close: ${currentAnim}`);\n const success = triggerWebflowAnimation(currentAnim, false);\n if (success) {\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 gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.to(background, { opacity: 0, duration: animCloseSpeed });\n }\n // Hide menu after animation duration\n setTimeout(() => {\n gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.set(menu, { visibility: \"hidden\" });\n }, animCloseSpeed * 1000);\n isOpen = false;\n }\n else {\n console.warn(`Dropdown ${index + 1} - Custom animation close failed`);\n }\n }\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 // 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 const openOnHover = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER) === \"true\";\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 console.log(`Dropdown ${index + 1} - Config:`, {\n group,\n openOnHover,\n openDelay,\n closeDelay,\n anim,\n animTablet,\n animMobileLandscape,\n animMobile,\n animOpenSpeed: `${animOpenSpeed}s`,\n animCloseSpeed: `${animCloseSpeed}s`,\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\n const currentAnim = getCurrentAnimation();\n const animFunc = animationOpenMap[currentAnim];\n const anim = animFunc();\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\n const currentAnim = getCurrentAnimation();\n const animFunc = animationCloseMap[currentAnim];\n const anim = animFunc();\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 // 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?");
|
|
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.49\"}`);\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
|
|