@madj2k/fe-frontend-kit 2.0.35 → 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.35",
+  "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.

package/tools/scrolling/scrolling-2.0.js

@@ -6,6 +6,15 @@
  * 2. Smooth anchor scrolling with optional offset
  * 3. Automatic scrolling when collapsible elements (like Bootstrap .collapse) open
  * 4. Appear-on-scroll animations for elements
+ * 5. Wrapper-based smooth scrolling with easing (BETA-VERSION)
+ *
+ * New in 2.0.4:
+ * - Support for wrapper-based smooth scrolling (config.smoothScroll)
+ * - Nested config normalization for flat CMS field names
+ * - Improved config merging with `enabled` toggles per feature
+ * - Collapse scroll behavior can now be selectively disabled
+ * - Configurable offset via selector for anchor scroll
+ * - Script-controlled blocking of scroll direction classes during auto-scrolling
  *
  * The class is fully configurable via options and is designed to be used in CMS contexts
  * where elements can be added, removed or re-ordered dynamically.
@@ -38,6 +47,12 @@
  *       timeout: 500,
  *       threshold: 25
  *     },
+ *     smoothScroll: {
+ *       enabled: true,
+ *       wrapperClass: '.js-smooth-scroll-wrapper',
+ *       contentClass: '.js-smooth-scroll-content',
+ *       easing: 0.075
+ *     },
  *     debug: false
  * });
  *
@@ -57,22 +72,20 @@
  * </div>
  *
  * @example
- * // Suggested SCSS for appear on scroll:
- * .js-appear-on-scroll {
- *   opacity: 0;
- *   transition: opacity 0.5s ease-out, transform 0.5s ease-out;
- *   transform: translateY(1rem);
- *
- *   &[data-appear-on-scroll="0"] {
- *     opacity: 1;
- *     transform: translateY(0);
- *   }
- * }
+ * // Example HTML for smooth scroll wrapper:
+ * <div class="js-smooth-scroll-wrapper">
+ *   <div class="js-smooth-scroll-content">
+ *     <section>Section 1</section>
+ *     <section>Section 2</section>
+ *     <section>Section 3</section>
+ *   </div>
+ * </div>
  */
 
 class Madj2kScrolling {
   config = {
     anchorScrolling: {
+      enabled: true,
       selector: ['a[href^="#"]', 'a[href*="#"]'],
       offsetSelector: null,
       disableSelector: '.js-no-scroll',
@@ -83,10 +96,20 @@ class Madj2kScrolling {
       threshold: 40
     },
     appearOnScroll: {
+      enabled: true,
       selector: ['.js-appear-on-scroll'],
       timeout: 500,
       threshold: 25
     },
+    scrollClasses: {
+      enabled: true,
+    },
+    smoothScroll: {
+      enabled: false,
+      easing: 0.075,
+      wrapperClass: '.js-smooth-scroll-wrapper',
+      contentClass: '.js-smooth-scroll-content'
+    },
     debug: false
   };
 
@@ -100,6 +123,8 @@ class Madj2kScrolling {
     // backwards compatibility
     this._normalizeNestedConfig(config, 'anchorScrolling', 'anchorScrolling');
     this._normalizeNestedConfig(config, 'appearOnScroll', 'appearOnScroll');
+    this._normalizeNestedConfig(config, 'scrollClasses', 'scrollClasses');
+    this._normalizeNestedConfig(config, 'smoothScroll', 'smoothScroll');
 
     this.config = {
       ...this.config,
@@ -111,6 +136,14 @@ class Madj2kScrolling {
       appearOnScroll: {
         ...this.config.appearOnScroll,
         ...config.appearOnScroll
+      },
+      scrollClasses: {
+        ...this.config.scrollClasses,
+        ...config.scrollClasses
+      },
+      smoothScroll: {
+        ...this.config.smoothScroll,
+        ...config.smoothScroll
       }
     };
 
@@ -119,9 +152,18 @@ class Madj2kScrolling {
 
     this._log('Initialized with config:', this.config);
 
-    this.initScrollClassesForBody();
-    this.initAnchorScrolling();
-    this.initAppearOnScroll();
+    if (this.config.anchorScrolling.enabled) {
+      this.initAnchorScrolling();
+    }
+    if (this.config.appearOnScroll.enabled) {
+      this.initAppearOnScroll();
+    }
+    if (this.config.scrollClasses.enabled) {
+      this.initScrollClassesForBody();
+    }
+    if (this.config.smoothScroll.enabled) {
+      this.initSmoothScroll();
+    }
   }
 
   /**
@@ -319,6 +361,57 @@ class Madj2kScrolling {
     window.addEventListener('scroll', updateOnScroll);
   }
 
+  /**
+   * Initializes wrapper-based smoothScroll scrolling
+   */
+  initSmoothScroll() {
+    const wrapper = document.querySelector(this.config.smoothScroll.wrapperClass);
+    const content = document.querySelector(this.config.smoothScroll.contentClass);
+
+    if (!wrapper || !content) {
+      this._log('Smooth Scroll wrapper or content element missing.');
+      return;
+    }
+
+    const body = document.body;
+    const html = document.documentElement;
+
+    const height = content.offsetHeight;
+    body.style.height = `${height}px`;
+
+    this._smoothScroll = {
+      wrapper,
+      content,
+      current: 0,
+      target: 0,
+      ease: this.config.smoothScroll.easing
+    };
+
+    window.addEventListener('scroll', () => {
+      this._smoothScroll.target = window.scrollY;
+    });
+
+    const animate = () => {
+      this._smoothScroll.current += (this._smoothScroll.target - this._smoothScroll.current) * this._smoothScroll.ease;
+      this._smoothScroll.wrapper.style.transform = `translateY(-${this._smoothScroll.current}px)`;
+      requestAnimationFrame(animate);
+    };
+
+    requestAnimationFrame(animate);
+    this._log('Smooth Scroll Scroll activated');
+  }
+
+  /**
+   * Sets the target scroll position for smoothScroll-based scrolling
+   * @param {Number} position - The vertical scroll target in px
+   * @private
+   */
+  _setSmoothScrollTarget(position) {
+    if (this._smoothScroll) {
+      this._smoothScroll.target = position;
+    }
+  }
+
   /**
    * Debug logging helper
    * @private

package/tools/scrolling/scrolling-2.0.scss

@@ -8,3 +8,11 @@
         transform: translateY(0);
     }
 }
+
+.js-smooth-scroll-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    will-change: transform;
+}