@madj2k/fe-frontend-kit 2.0.36 → 2.0.37

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.2
  * @license GNU General Public License v3.0
  * @see https://www.gnu.org/licenses/gpl-3.0.en.html
  *
@@ -51,9 +51,13 @@ class Madj2kFlyoutMenu {
       menuInnerClass: "js-flyout-inner",
       heightCalculationClass: 'calculate',
       heightMode: 'full',
+      eventMode: 'click',
+      eventModeOpen: '',
+      eventModeClose: '',
       paddingBehavior: 0,
       paddingViewPortMinWidth: 0,
-      animationDuration: 500
+      animationDuration: 500,
+      scrollHelper: true,
     };
 
     this.settings = Object.assign({}, defaults, options);
@@ -116,11 +120,26 @@ class Madj2kFlyoutMenu {
    */
   bindEvents() {
     if (this.settings.$closeBtn) {
-      this.settings.$closeBtn.addEventListener('click', e => this.closeEvent(e));
+
+      if (this.settings.eventModeClose) {
+        this.settings.$closeBtn.addEventListener(this.settings.eventModeClose, e => this.closeEvent(e));
+      } else {
+        this.settings.$closeBtn.addEventListener(this.settings.eventMode, e => this.closeEvent(e));
+      }
       this.settings.$closeBtn.addEventListener('keydown', e => this.keyboardEvent(e));
     }
 
-    this.$element.addEventListener('click', e => this.toggleEvent(e));
+    if (this.settings.eventModeOpen || this.settings.eventModeClose) {
+      if (this.settings.eventModeOpen) {
+        this.$element.addEventListener(this.settings.eventModeOpen, e => this.openEvent(e));
+      }
+      if (this.settings.eventModeClose) {
+        this.$element.addEventListener(this.settings.eventModeClose, e => this.closeEvent(e));
+      }
+    } else {
+      this.$element.addEventListener(this.settings.eventMode, e => this.toggleEvent(e));
+    }
+
     this.$element.addEventListener('keydown', e => this.keyboardEvent(e));
 
     this.settings.$menu.querySelectorAll('a,button,input,textarea,select')
@@ -158,11 +177,24 @@ class Madj2kFlyoutMenu {
    */
   destroyEvents() {
     if (this.settings.$closeBtn) {
-      this.settings.$closeBtn.removeEventListener('click', e => this.closeEvent(e));
+      if (this.settings.eventModeClose) {
+        this.settings.$closeBtn.removeEventListener(this.settings.eventModeClose, e => this.closeEvent(e));
+      } else {
+        this.settings.$closeBtn.removeEventListener(this.settings.eventMode, e => this.closeEvent(e));
+      }
       this.settings.$closeBtn.removeEventListener('keydown', e => this.keyboardEvent(e));
     }
 
-    this.$element.removeEventListener('click', e => this.toggleEvent(e));
+    if (this.settings.eventModeOpen || this.settings.eventModeClose) {
+      if (this.settings.eventModeOpen) {
+        this.$element.removeEventListener(this.settings.eventModeOpen, e => this.openEvent(e));
+      }
+      if (this.settings.eventModeClose) {
+        this.$element.removeEventListener(this.settings.eventModeClose, e => this.closeEvent(e));
+      }
+    } else {
+      this.$element.removeEventListener(this.settings.eventMode, e => this.toggleEvent(e));
+    }
     this.$element.removeEventListener('keydown', e => this.keyboardEvent(e));
 
     this.settings.$menu.querySelectorAll('a,button,input,textarea,select')
@@ -227,6 +259,16 @@ class Madj2kFlyoutMenu {
   }
 
 
+  /**
+   * Handles close event
+   * @param {Event} e - The close event
+   */
+  openEvent(e) {
+    e.preventDefault();
+    this.open();
+  }
+
+
   /**
    * Opens the flyout menu
    */
@@ -408,15 +450,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 +497,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.37",
   "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,58 @@ 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. |
+
+### 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. Replaced if `eventModeOpen` or `eventModeClose` are set. |
+| `eventModeOpen` | `string` | `''` | Defines a custom event for opening the menu. |
+| `eventModeClose` | `string` | `''` | Defines a custom event for closing the menu. |
+
+
 ## 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 +251,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.