well-petal 0.0.78 → 0.0.79
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
|
@@ -336,7 +336,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
336
336
|
\****************************************/
|
|
337
337
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
338
338
|
|
|
339
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ cleanupOverlays: () => (/* binding */ cleanupOverlays),\n/* harmony export */ initializeOverlays: () => (/* binding */ initializeOverlays)\n/* harmony export */ });\n/* harmony import */ var _lib_attributes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/attributes */ \"./src/lib/attributes.ts\");\n/* harmony import */ var _lib_helpers__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../lib/helpers */ \"./src/lib/helpers.ts\");\n/**\n * Overlay Component\n *\n * Handles overlays that respond to petal-state changes in grouped elements.\n * Overlays can be controlled by:\n * 1. petal-group attribute - Shows when any element with matching group has petal-state='active'|'open'\n * 2. petal name attribute - Shows when any element with matching name has petal-state='active'|'open'\n * 3. Parent element - Shows when parent element has petal-state='active'|'open'\n *\n * HTML Attributes:\n * - petal-el=\"overlay\" - The overlay element (required)\n * - petal-group=\"groupName\" - Group name to watch for active/open state (optional)\n * - petal=\"name\" - Name to watch for active/open state (optional, fallback if no group)\n *\n * Priority order: group > name > parent\n */\n\n\nconst overlayControllers = [];\n/**\n * Check if any element in a group has petal-state='active' or 'open'\n */\nfunction hasActiveElementInGroup(group) {\n const elements = document.querySelectorAll(`[${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_GROUP}=\"${group}\"]`);\n return Array.from(elements).some((el) => {\n const state = el.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_STATE);\n return state === \"active\" || state === \"open\";\n });\n}\n/**\n * Check if any element with a name has petal-state='active' or 'open'\n */\nfunction hasActiveElementWithName(name) {\n const elements = document.querySelectorAll(`[${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME}=\"${name}\"]`);\n return Array.from(elements).some((el) => {\n const state = el.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_STATE);\n return state === \"active\" || state === \"open\";\n });\n}\n/**\n * Check if parent element has petal-state='active' or 'open'\n */\nfunction hasActiveParent(overlay) {\n const parent = overlay.parentElement;\n if (!parent)\n return false;\n const state = parent.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_STATE);\n return state === \"active\" || state === \"open\";\n}\n/**\n * Update overlay visibility based on active states\n */\nfunction updateOverlayVisibility(controller) {\n const { overlay, group, name } = controller;\n let shouldShow = false;\n // Priority 1: Check group\n if (group) {\n shouldShow = hasActiveElementInGroup(group);\n }\n // Priority 2: Check name\n else if (name) {\n shouldShow = hasActiveElementWithName(name);\n }\n // Priority 3: Check parent\n else {\n shouldShow = hasActiveParent(overlay);\n }\n //
|
|
339
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ cleanupOverlays: () => (/* binding */ cleanupOverlays),\n/* harmony export */ initializeOverlays: () => (/* binding */ initializeOverlays)\n/* harmony export */ });\n/* harmony import */ var _lib_attributes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../lib/attributes */ \"./src/lib/attributes.ts\");\n/* harmony import */ var _lib_helpers__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../lib/helpers */ \"./src/lib/helpers.ts\");\n/* harmony import */ var gsap__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! gsap */ \"./node_modules/gsap/index.js\");\n/**\n * Overlay Component\n *\n * Handles overlays that respond to petal-state changes in grouped elements.\n * Overlays can be controlled by:\n * 1. petal-group attribute - Shows when any element with matching group has petal-state='active'|'open'\n * 2. petal name attribute - Shows when any element with matching name has petal-state='active'|'open'\n * 3. Parent element - Shows when parent element has petal-state='active'|'open'\n *\n * HTML Attributes:\n * - petal-el=\"overlay\" - The overlay element (required)\n * - petal-group=\"groupName\" - Group name to watch for active/open state (optional)\n * - petal=\"name\" - Name to watch for active/open state (optional, fallback if no group)\n *\n * Priority order: group > name > parent\n */\n\n\n\nconst overlayControllers = [];\n/**\n * Check if any element in a group has petal-state='active' or 'open'\n */\nfunction hasActiveElementInGroup(group) {\n const elements = document.querySelectorAll(`[${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_GROUP}=\"${group}\"]`);\n return Array.from(elements).some((el) => {\n const state = el.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_STATE);\n return state === \"active\" || state === \"open\";\n });\n}\n/**\n * Check if any element with a name has petal-state='active' or 'open'\n */\nfunction hasActiveElementWithName(name) {\n const elements = document.querySelectorAll(`[${_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME}=\"${name}\"]`);\n return Array.from(elements).some((el) => {\n const state = el.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_STATE);\n return state === \"active\" || state === \"open\";\n });\n}\n/**\n * Check if parent element has petal-state='active' or 'open'\n */\nfunction hasActiveParent(overlay) {\n const parent = overlay.parentElement;\n if (!parent)\n return false;\n const state = parent.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_STATE);\n return state === \"active\" || state === \"open\";\n}\n/**\n * Update overlay visibility based on active states\n */\nfunction updateOverlayVisibility(controller) {\n const { overlay, group, name, maxOpacity } = controller;\n let shouldShow = false;\n // Priority 1: Check group\n if (group) {\n shouldShow = hasActiveElementInGroup(group);\n }\n // Priority 2: Check name\n else if (name) {\n shouldShow = hasActiveElementWithName(name);\n }\n // Priority 3: Check parent\n else {\n shouldShow = hasActiveParent(overlay);\n }\n // Kill any existing animation\n if (controller.currentTimeline) {\n controller.currentTimeline.kill();\n controller.currentTimeline = null;\n }\n // Animate overlay\n if (shouldShow) {\n // Show and fade in\n const tl = gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.timeline();\n tl.set(overlay, { display: \"flex\" });\n tl.to(overlay, { opacity: maxOpacity, duration: 0.3 });\n controller.currentTimeline = tl;\n }\n else {\n // Fade out and hide\n const tl = gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.timeline({\n onComplete: () => {\n gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.set(overlay, { display: \"none\" });\n },\n });\n tl.to(overlay, { opacity: 0, duration: 0.3 });\n controller.currentTimeline = tl;\n }\n}\n/**\n * Initialize a single overlay\n */\nfunction initializeOverlay(overlay) {\n const group = overlay.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_GROUP);\n const name = overlay.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME);\n // Skip if this overlay is controlled by modal/dropdown\n // (i.e., it has a parent that's a modal or dropdown)\n const parentModal = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_1__.findClosestPetalParent)(overlay, \"modal\");\n const parentDropdown = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_1__.findClosestPetalParent)(overlay, \"dropdown\");\n // If overlay has a group or name attribute, it uses the new system\n // Otherwise, let modal/dropdown handle it\n if (!group && !name && (parentModal || parentDropdown)) {\n return null;\n }\n // Get max opacity from attribute (default to 1)\n const maxOpacity = parseFloat(overlay.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_OVERLAY_OPACITY) || \"1\");\n // Create controller\n const controller = {\n overlay,\n group,\n name,\n maxOpacity,\n observer: null, // Set below\n currentTimeline: null,\n cleanup: () => { },\n };\n // Set initial state\n gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.set(overlay, { opacity: 0, display: \"none\" });\n // Set initial visibility\n updateOverlayVisibility(controller);\n // Watch for attribute changes on all relevant elements\n const observer = new MutationObserver((mutations) => {\n // Check if any mutation affects petal-state\n const stateChanged = mutations.some((mutation) => {\n if (mutation.type === \"attributes\" && mutation.attributeName === _lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_STATE) {\n const target = mutation.target;\n // Check if this element is in our group or has our name\n if (group && target.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_GROUP) === group)\n return true;\n if (name && target.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME) === name)\n return true;\n if (!group && !name && target === overlay.parentElement)\n return true;\n return false;\n }\n return false;\n });\n if (stateChanged) {\n updateOverlayVisibility(controller);\n }\n });\n // Observe attribute changes on document body\n observer.observe(document.body, {\n attributes: true,\n attributeFilter: [_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_STATE],\n subtree: true,\n });\n controller.observer = observer;\n controller.cleanup = () => {\n observer.disconnect();\n };\n return controller;\n}\n/**\n * Initialize all overlays on the page\n */\nfunction initializeOverlays() {\n console.log(`🌸 [OVERLAY] initializeOverlays() called`);\n const overlays = (0,_lib_helpers__WEBPACK_IMPORTED_MODULE_1__.getAllPetalElementsOfType)(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_OVERLAY);\n console.log(`🌸 [OVERLAY] Detected ${overlays.length} overlay(s)`);\n overlays.forEach((overlay, index) => {\n const group = overlay.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_GROUP);\n const name = overlay.getAttribute(_lib_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_NAME);\n console.log(`🌸 [OVERLAY] Processing overlay ${index + 1}/${overlays.length}`);\n console.log(`🌸 [OVERLAY] Group: \"${group}\", Name: \"${name}\"`);\n const controller = initializeOverlay(overlay);\n if (controller) {\n overlayControllers.push(controller);\n console.log(`🌸 [OVERLAY] Overlay ${index + 1} initialized with group-based control`);\n }\n else {\n console.log(`🌸 [OVERLAY] Overlay ${index + 1} will be controlled by parent component`);\n }\n });\n console.log(`🌸 [OVERLAY] Initialization complete - ${overlayControllers.length} overlays with group-based control`);\n}\n/**\n * Cleanup all overlay controllers\n */\nfunction cleanupOverlays() {\n overlayControllers.forEach((controller) => controller.cleanup());\n overlayControllers.length = 0;\n}\n\n\n//# sourceURL=webpack://petal/./src/modules/overlay/overlay.ts?");
|
|
340
340
|
|
|
341
341
|
/***/ }),
|
|
342
342
|
|
|
@@ -356,7 +356,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
|
|
|
356
356
|
\**********************/
|
|
357
357
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
358
358
|
|
|
359
|
-
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _modules_modal_modal__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modules/modal/modal */ \"./src/modules/modal/modal.ts\");\n/* harmony import */ var _modules_banner_banner__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/banner/banner */ \"./src/modules/banner/banner.ts\");\n/* harmony import */ var _modules_dropdown_dropdown__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/dropdown/dropdown */ \"./src/modules/dropdown/dropdown.ts\");\n/* harmony import */ var _modules_overlay_overlay__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/overlay/overlay */ \"./src/modules/overlay/overlay.ts\");\n/* harmony import */ var _petal_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./petal.css */ \"./src/petal.css\");\n/* harmony import */ var _modules_dropdown_dropdown_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./modules/dropdown/dropdown.css */ \"./src/modules/dropdown/dropdown.css\");\n\n\n\n\n\n\nconsole.log(`🌸 Hello from Wellflow Petal v${\"0.0.
|
|
359
|
+
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _modules_modal_modal__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modules/modal/modal */ \"./src/modules/modal/modal.ts\");\n/* harmony import */ var _modules_banner_banner__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/banner/banner */ \"./src/modules/banner/banner.ts\");\n/* harmony import */ var _modules_dropdown_dropdown__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/dropdown/dropdown */ \"./src/modules/dropdown/dropdown.ts\");\n/* harmony import */ var _modules_overlay_overlay__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/overlay/overlay */ \"./src/modules/overlay/overlay.ts\");\n/* harmony import */ var _petal_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./petal.css */ \"./src/petal.css\");\n/* harmony import */ var _modules_dropdown_dropdown_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./modules/dropdown/dropdown.css */ \"./src/modules/dropdown/dropdown.css\");\n\n\n\n\n\n\nconsole.log(`🌸 Hello from Wellflow Petal v${\"0.0.79\"}`);\n(0,_modules_modal_modal__WEBPACK_IMPORTED_MODULE_0__.initializeAllModals)();\n(0,_modules_banner_banner__WEBPACK_IMPORTED_MODULE_1__.initializeBanner)();\n(0,_modules_dropdown_dropdown__WEBPACK_IMPORTED_MODULE_2__.initializeDropdowns)();\n(0,_modules_overlay_overlay__WEBPACK_IMPORTED_MODULE_3__.initializeOverlays)();\n\n\n//# sourceURL=webpack://petal/./src/petal.ts?");
|
|
360
360
|
|
|
361
361
|
/***/ }),
|
|
362
362
|
|