@madj2k/fe-frontend-kit 2.0.36 → 2.0.38

package/menus/flyout-menu/flyout-menu-2.0.js

@@ -7,7 +7,7 @@
  *
  * @author Steffen Kroggel <developer@steffenkroggel.de>
  * @copyright 2025 Steffen Kroggel
- * @version 2.0.1
+ * @version 2.0.3
  * @license GNU General Public License v3.0
  * @see https://www.gnu.org/licenses/gpl-3.0.en.html
  *
@@ -50,10 +50,13 @@ class Madj2kFlyoutMenu {
       menuContainerClass: "js-flyout-container",
       menuInnerClass: "js-flyout-inner",
       heightCalculationClass: 'calculate',
+      hoverParentClass: 'nav-main',
       heightMode: 'full',
+      eventMode: 'click',
       paddingBehavior: 0,
       paddingViewPortMinWidth: 0,
-      animationDuration: 500
+      animationDuration: 500,
+      scrollHelper: true,
     };
 
     this.settings = Object.assign({}, defaults, options);
@@ -73,6 +76,8 @@ class Madj2kFlyoutMenu {
     this.settings.$menuContainer = this.settings.$menu.querySelector(`.${this.settings.menuContainerClass}`);
     this.settings.$menuInner = this.settings.$menu.querySelector(`.${this.settings.menuInnerClass}`);
 
+    // Bind persistent event handlers
+
     this.initNoScrollHelper();
     this.resizeAndPositionMenu();
     this.paddingMenu();
@@ -111,25 +116,102 @@ class Madj2kFlyoutMenu {
     }
   }
 
+
+  /**
+   * Handles mouseleave on menu container
+   * @param {MouseEvent} e
+   */
+  containerLeaveEvent(e) {
+    const to = e.relatedTarget;
+    const parentContainer = this.$element.closest(this.settings.hoverParentSelector) || null;
+    if (to && this.$element.contains(to)) return;
+    if (to && parentContainer?.contains(to)) return;
+    if (this.$element.classList.contains(this.settings.openStatusClass)) {
+      document.dispatchEvent(new CustomEvent('madj2k-flyoutmenu-close'));
+    }
+  }
+
+  /**
+   * Handles mouseleave on trigger element
+   * @param {MouseEvent} e
+   */
+  triggerLeaveEvent(e) {
+    const to = e.relatedTarget;
+    const parentContainer = this.$element.closest('.' + this.settings.hoverParentClass) || null;
+
+    if (to && this.settings.$menu.contains(to)) return;
+    if (to && parentContainer?.contains(to)) return;
+    if (this.$element.classList.contains(this.settings.openStatusClass)) {
+      document.dispatchEvent(new CustomEvent('madj2k-flyoutmenu-close'));
+    }
+  }
+
+  /**
+   * Handles touchstart outside the flyout menu
+   * @param {TouchEvent} e
+   */
+  touchStartEvent(e) {
+    const target = e.target;
+    if (!target) return;
+    if (this.settings.$menuInner.contains(target)) return;
+    if (this.$element.classList.contains(this.settings.openStatusClass)) {
+      document.dispatchEvent(new CustomEvent('madj2k-flyoutmenu-close'));
+    }
+  }
+
   /**
    * Binds all necessary event listeners
    */
   bindEvents() {
     if (this.settings.$closeBtn) {
-      this.settings.$closeBtn.addEventListener('click', e => this.closeEvent(e));
+      const closeEvent = this.settings.eventMode === 'mouseover' ? 'mouseenter' : 'click';
+      this.settings.$closeBtn.addEventListener(closeEvent, e => this.closeEvent(e));
       this.settings.$closeBtn.addEventListener('keydown', e => this.keyboardEvent(e));
     }
 
-    this.$element.addEventListener('click', e => this.toggleEvent(e));
-    this.$element.addEventListener('keydown', e => this.keyboardEvent(e));
+    if (this.settings.eventMode === 'mouseover') {
+      this.$element.addEventListener('mouseenter', e => this.openEvent(e));
+      this.$element.addEventListener('mouseleave',e =>  this.triggerLeaveEvent(e));
+      this.settings.$menuContainer?.addEventListener('mouseleave', e => this.containerLeaveEvent(e));
+      document.addEventListener('touchstart', e => this.touchStartEvent(e), { passive: true });
+    } else {
+      this.$element.addEventListener('click', e => this.toggleEvent(e));
+    }
 
+    this.$element.addEventListener('keydown', e => this.keyboardEvent(e));
     this.settings.$menu.querySelectorAll('a,button,input,textarea,select')
       .forEach(el => el.addEventListener('keydown', e => this.keyboardEvent(e)));
-
     document.addEventListener('madj2k-flyoutmenu-close', e => this.closeEvent(e));
     document.addEventListener('madj2k-flyoutmenu-resize', e => this.resizeAndPositionMenuEvent(e));
   }
 
+
+  /**
+   * Removes all event listeners (including dynamic hover/touch)
+   */
+  destroyEvents() {
+    if (this.settings.$closeBtn) {
+      const closeEvent = this.settings.eventMode === 'mouseover' ? 'mouseenter' : 'click';
+      this.settings.$closeBtn.removeEventListener(closeEvent, e => this.closeEvent(e));
+      this.settings.$closeBtn.removeEventListener('keydown', e => this.keyboardEvent(e));
+    }
+
+    if (this.settings.eventMode === 'mouseover') {
+      this.$element.removeEventListener('mouseenter', e => this.openEvent(e));
+      this.settings.$menuContainer?.removeEventListener('mouseleave', e => this.containerLeaveEvent(e));
+      document.removeEventListener('touchstart', e => this.touchStartEvent(e), { passive: true });
+    } else {
+      this.$element.removeEventListener('click', e => this.toggleEvent(e));
+    }
+
+    this.$element.removeEventListener('keydown', e => this.keyboardEvent(e));
+    this.settings.$menu.querySelectorAll('a,button,input,textarea,select')
+      .forEach(el => el.removeEventListener('keydown', e => this.keyboardEvent(e)));
+    document.removeEventListener('madj2k-flyoutmenu-close', e => this.closeEvent(e));
+    document.removeEventListener('madj2k-flyoutmenu-resize', e => this.resizeAndPositionMenuEvent(e));
+  }
+
+
   /**
    * Initializes ResizeObserver to auto-resize menu
    */
@@ -153,24 +235,6 @@ class Madj2kFlyoutMenu {
     }
   }
 
-  /**
-   * Unbinds all event listeners
-   */
-  destroyEvents() {
-    if (this.settings.$closeBtn) {
-      this.settings.$closeBtn.removeEventListener('click', e => this.closeEvent(e));
-      this.settings.$closeBtn.removeEventListener('keydown', e => this.keyboardEvent(e));
-    }
-
-    this.$element.removeEventListener('click', e => this.toggleEvent(e));
-    this.$element.removeEventListener('keydown', e => this.keyboardEvent(e));
-
-    this.settings.$menu.querySelectorAll('a,button,input,textarea,select')
-      .forEach(el => el.removeEventListener('keydown', e => this.keyboardEvent(e)));
-
-    document.removeEventListener('madj2k-flyoutmenu-close', e => this.closeEvent(e));
-    document.removeEventListener('madj2k-flyoutmenu-resize', e => this.resizeAndPositionMenuEvent(e));
-  }
 
   /**
    * Destroys ResizeObserver
@@ -227,6 +291,16 @@ class Madj2kFlyoutMenu {
   }
 
 
+  /**
+   * Handles close event
+   * @param {Event} e - The close event
+   */
+  openEvent(e) {
+    e.preventDefault();
+    this.open();
+  }
+
+
   /**
    * Opens the flyout menu
    */
@@ -408,15 +482,19 @@ class Madj2kFlyoutMenu {
    * Initializes the no-scroll helper elements
    */
   initNoScrollHelper() {
-    const body = document.body;
-    let helper = body.querySelector('.no-scroll-helper');
-    const content = document.querySelector(`.${this.settings.contentSectionClass}`);
 
-    if (!helper) {
-      if (content) {
-        content.innerHTML = `<div class="no-scroll-helper"><div class="no-scroll-helper-inner">${content.innerHTML}</div></div>`;
-      } else {
-        body.innerHTML = `<div class="no-scroll-helper"><div class="no-scroll-helper-inner">${body.innerHTML}</div></div>`;
+    // heightMode "full" with deprecated fullHeight-setting as fallback
+    if (this.settings.scrollHelper) {
+      const body = document.body;
+      let helper = body.querySelector('.no-scroll-helper');
+      const content = document.querySelector(`.${this.settings.contentSectionClass}`);
+
+      if (!helper) {
+        if (content) {
+          content.innerHTML = `<div class="no-scroll-helper"><div class="no-scroll-helper-inner">${content.innerHTML}</div></div>`;
+        } else {
+          body.innerHTML = `<div class="no-scroll-helper"><div class="no-scroll-helper-inner">${body.innerHTML}</div></div>`;
+        }
       }
     }
   }
@@ -451,7 +529,6 @@ class Madj2kFlyoutMenu {
         body.classList.remove(this.settings.openStatusBodyClassOverflow);
         window.scrollTo({top: scrollTop, behavior: 'instant'});
       }
-
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madj2k/fe-frontend-kit",
-  "version": "2.0.36",
+  "version": "2.0.38",
   "description": "Shared frontend utilities, menus and mixins for projects",
 	"main": "index.js",
 	"style": "index.scss",

package/readme.md

@@ -79,7 +79,7 @@ CSS:
     </nav>
 </div>
 ```
-IMPORTANT: If the siteheader is positioned with ```position:fixed```, you have to switch that to ```position:absolute``` when the menu is opened.
+IMPORTANT: If the siteheader is positioned with ```position:fixed``` and you are using full-height-mode (which is the default) you have to switch that to ```position:absolute``` when the menu is opened.
 Otherwise in the opened menu the scrolling won't work.
 ```
 .flyout-open {
@@ -88,6 +88,57 @@ Otherwise in the opened menu the scrolling won't work.
     }
 }
 ```
+
+
+## Options Reference
+
+### State & Animation Classes
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| openStatusClass | string | 'open' | Applied to trigger and menu when open. |
+| animationOpenStatusClass | string | 'opening' | Applied during opening animation. |
+| animationCloseStatusClass | string | 'closing' | Applied during closing animation. |
+| animationBodyClassPrefix | string | 'flyout' | Prefix for body animation classes like `flyout-opening`. |
+| openStatusBodyClass | string | 'flyout-open' | Applied to `body` when the flyout is open. |
+| openStatusBodyClassOverflow | string | 'flyout-open-overflow' | Applied when page height exceeds viewport (used in scroll-locking). |
+
+### CSS Class Selectors
+
+| Option                 | Type | Default               | Description                                                     |
+|------------------------|------|-----------------------|-----------------------------------------------------------------|
+| contentSectionClass    | string | 'js-main-content'     | Content wrapper used when creating no-scroll helper.            |
+| menuClass              | string | 'js-flyout'           | Menu root element class.                                        |
+| menuToggleClass        | string | 'js-flyout-toggle'    | Class for toggle buttons.                                       |
+| menuCloseClass         | string | 'js-flyout-close'     | Class for close buttons inside the flyout.                      |
+| menuContainerClass     | string | 'js-flyout-container' | Container used for slide animations (`top` transition).         |
+| menuInnerClass         | string | 'js-flyout-inner'     | Inner content wrapper. Observed via ResizeObserver.             |
+| heightCalculationClass | string | 'calculate'           | Temporary class used during height determination.               |
+| hoverParentClass       | string | 'nav-main'            | Class of main container of menu (used in eventMode: 'moueover'. |
+
+### Height & Size Behavior
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| heightMode | 'full' \| 'maxContent' | 'full' | Determines height behavior of the flyout. |
+| animationDuration | number | 500 | Animation duration in milliseconds. |
+
+### Padding & Layout Behavior
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| paddingBehavior | number | 0 | Controls dynamic horizontal padding. |
+| paddingViewPortMinWidth | number | 0 | Minimum viewport width required before padding applies. |
+| scrollHelper | boolean | true | Creates additional wrapper structure to enable scroll-locking. |
+
+
+### Event Handling
+
+| Option | Type | Default | Description |
+|--------|------|-------------|
+| `eventMode` | `string` | `'click'` | Default event used for toggling the menu. Can be set to `click` or `mouseover`. |
+
+
 ## Special: blur/gray effect for background
 * In order to achieve a blur/gray-effect for the background we add the following DIV to the main-content section:
 ```
@@ -199,6 +250,36 @@ CSS:
 ```
 
 
+## Options Reference
+
+### State & Structural Classes
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| **openStatusClass** | `string` | `'open'` | Applied to menu, wrapper, and toggle when the pulldown is open. |
+| **menuClass** | `string` | `'js-pulldown'` | Root class of the pulldown menu. Must match your HTML structure. |
+| **menuToggleClass** | `string` | `'js-pulldown-toggle'` | Toggle buttons that control pulldown menus and also close others. |
+| **menuWrapClass** | `string` | `'js-pulldown-wrap'` | Optional wrapper container that receives open/closed states. |
+
+
+### Animation & Timing
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| **animationDuration** | `number` | `500` | Reserved for future open/close animation timing. Currently no CSS transition is applied by JavaScript. |
+
+
+### Internal Element References
+
+These are automatically detected:
+
+| Property | Description |
+|----------|-------------|
+| **menu** | The menu element referenced via `aria-controls`. |
+| **menuWrap** | Closest parent using `menuWrapClass`. |
+| **toggleElement** | The trigger element passed to the constructor. |
+
+
 # JS: Banner
 A lightweight class to show a full-page overlay (banner, popup, hint or cookie layer),
 with opening and closing animation and optional cookie persistence.