@madj2k/fe-frontend-kit 2.0.7 → 2.0.10

package/index.js

@@ -1,5 +1,6 @@
 // Tools
 export { Madj2kBanner } from './tools/banner';
+export { Madj2kBetterResizeEvent } from './tools/better-resize-event';
 export { Madj2kOwlThumbnail } from './tools/owl-thumbnail';
 export { Madj2kResizeEnd } from './tools/resize-end';
 export { Madj2kScrolling } from './tools/scrolling';

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

@@ -334,12 +334,15 @@ class Madj2kFlyoutMenu {
     }
 
     let height = this.settings.$menuInner.offsetHeight || this.settings.$menu.offsetHeight;
+    const refObj = this.settings.$positionReference || this.$element;
+    const refPos = refObj.getBoundingClientRect();
+    const flyoutTop = refPos.top + refObj.offsetHeight;
 
     // heightMode "full" with deprecated fullHeight-setting as fallback
     if (this.settings.heightMode === 'full' || this.settings.fullHeight === true) {
       const viewPortHeight = window.innerHeight;
       if (height < viewPortHeight) {
-        this.settings.$menu.style.height = `100vh`;
+        this.settings.$menu.style.height = `calc(100vh + ${flyoutTop}px)`;
       } else {
         this.settings.$menu.style.height = `${height}px`;
       }

package/package.json

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

package/readme.md

@@ -30,6 +30,45 @@ Each menu component can be used separately.
 A lightweight class to show a full-page overlay (banner, popup, hint or cookie layer),
 with opening and closing animation and optional cookie persistence.
 
+Init:
+```
+import { Madj2kBanner } from '@madj2k/frontend-kit/tools/banner';
+const banner = new Madj2kBanner({
+  bannerId: 'my-banner',
+  activeClass: 'active',
+  openClass: 'open',
+  closingClass: 'closing',
+  openingClass: 'opening',
+  timeout: 1000,
+  cookieName: 'myBannerCookie',
+  cookieDays: 30,
+  debug: false
+});
+```
+
+HTML:
+```
+<div id="my-banner" class="banner my-banner">
+  <div class="my-banner-content">
+    <button class="my-banner-close" aria-controls="my-banner">Close</button>
+    <p>Your overlay content here ...</p>
+  </div>
+</div>
+```
+
+CSS:
+```
+.my-banner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 9999;
+}
+```
+
 # JS: OWL-Thumbnails
 A JavaScript helper class to create a main OWL carousel with a synchronized thumbnail navigation carousel.
 
@@ -45,12 +84,67 @@ including:
 This is especially useful for image galleries or product carousels in CMS setups (e.g. TYPO3, WordPress, etc.)
 where content may change dynamically.
 
-# JS: Resize-End
-A lightweight helper class that triggers a debounced 'madj2k-resize-end' event
+Init with available options:
+```
+const owlThumbnail = new Madj2kOwlThumbnail('.js-main-carousel', '.js-thumbs-carousel', {
+    main: {
+      items: 1,
+      margin: 20,
+      dots: true,
+      nav: true,
+      autoHeight: true
+    },
+    thumbs: {
+      items: 3,
+      margin: 10,
+      dots: false,
+      nav: true,
+      center: true
+    },
+    resizeEvent: 'custom.resize',
+    equalizeThumbHeights: true,
+    noStageOffset: true
+    }
+  });
+```
+
+HTML:
+```
+<div class="js-main-carousel owl-carousel">
+  <div class="item"><img src="image1.jpg" alt=""></div>
+  <div class="item"><img src="image2.jpg" alt=""></div>
+  <div class="item"><img src="image3.jpg" alt=""></div>
+</div>
+<div class="js-thumbs-carousel owl-carousel">
+  <div class="item" data-index="0"><img src="thumb1.jpg" alt=""></div>
+  <div class="item" data-index="1"><img src="thumb2.jpg" alt=""></div>
+  <div class="item" data-index="2"><img src="thumb3.jpg" alt=""></div>
+</div>
+```
+
+# JS: Better Resize Event
+A lightweight helper class that triggers a debounced 'madj2k-better-resize-event' event
 when the user finishes resizing the browser window.
 
 It also manages a scrolling detection state (via body attribute) to avoid triggering
-resize-end during user scrolling, and respects active input fields (useful on mobile).
+resize-events during user scrolling on mobile, and respects active input fields (keyboard-issue on mobile).
+
+Init with available options:
+```
+import { Madj2kBetterResizeEvent } from '@madj2k/frontend-kit/tools/better-resize-event';
+const betterResizeEvent = new Madj2kBetterResizeEvent({
+    resizeEndTimeout: 300,
+    scrollingEndTimeout: 600,
+    viewportDeltaThreshold: 50
+});
+```
+Usage:
+```
+document.addEventListener('madj2k-better-resize-event', () => {
+  console.log('Resize fired');
+});
+```
+
 
 # JS: Scrolling
 A lightweight scrolling helper class that enables:
@@ -62,11 +156,52 @@ A lightweight scrolling helper class that enables:
 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.
 
+Init with available options:
+```
+import { Madj2kScrolling } from '@madj2k/frontend-kit/tools/scrolling';
+const scrolling = new Madj2kScrolling({
+  anchorScrollingCollapsibleSelector: ['.collapse', '.custom-collapse'],
+  anchorScrollingSelector: ['a[href^="#"]', '.btn-scroll'],
+  anchorScrollingOffsetSelector: '#siteheader',
+  anchorScrollingDisableSelector: '.js-no-scroll',
+  appearOnScrollSelector: ['.js-appear-on-scroll'],
+  appearOnScrollTimeout: 500,
+  appearOnScrollThreshold: 25,
+  debug: true
+});
+```
+Usage with Appear-On-Scroll (HTML):
+```
+<div class="js-appear-on-scroll">
+  <h2>Animated content</h2>
+  <p>This will fade and move in when scrolled into view.</p>
+</div>
+```
+
 # JS: Toggled Overlay
 This class toggles the visibility of any target element referenced by the `aria-controls`
 attribute of a trigger element (button, link, etc.). It manages ARIA attributes for accessibility
 and allows overlays to be closed externally via a custom event.
 
+Init with available options:
+```
+import { Madj2kToggledOverlay } from '@madj2k/frontend-kit/tools/toggled-overlay';
+const overlayToggle = new Madj2kToggledOverlay('.js-toggled-overlay');
+```
+
+HTML:
+```
+<button class="js-toggled-overlay toggled-overlay-button"
+        aria-label="Open overlay"
+        aria-controls="my-overlay"
+        aria-expanded="false">
+  <span class="icon icon-info"></span>
+</button>
+
+<div id="my-overlay" class="toggled-overlay" aria-hidden="true">
+  <!-- Overlay content -->
+</div>
+```
 
 # Flyout-Navigation
 ## Usage

package/tools/banner/banner-2.0.js

@@ -1,5 +1,5 @@
 /**
- * Overlay (Vanilla JS)
+ * Banner / Overlay (Vanilla JS)
  *
  * A lightweight class to show a full-page overlay (banner, popup, hint or cookie layer),
  * with opening and closing animation and optional cookie persistence.
@@ -15,23 +15,33 @@
  *
  * @author Steffen Kroggel <developer@steffenkroggel.de>
  * @copyright 2025 Steffen Kroggel
- * @version 2.0.0
+ * @version 2.0.1 – legacy bannerCloseId fallback
  * @license GNU General Public License v3.0
  * @see https://www.gnu.org/licenses/gpl-3.0.en.html
  *
+ * @example
+ * // Advanced usage with config:
+ * const banner = new Madj2kBanner({
+ *   bannerId: 'my-banner',
+ *   activeClass: 'active',
+ *   openClass: 'open',
+ *   closingClass: 'closing',
+ *   openingClass: 'opening',
+ *   timeout: 1000,
+ *   cookieName: 'myBannerCookie',
+ *   cookieDays: 30,
+ *   debug: false
+ * });
  *
- * Basic HTML structure:
- *
- * <div id="my-banner" class="my-banner">
+ * @example
+ * <div id="my-banner" class="banner my-banner">
  *   <div class="my-banner-content">
- *     <button id="my-banner-close" class="my-banner-close">Close</button>
+ *     <button class="my-banner-close" aria-controls="my-banner">Close</button>
  *     <p>Your overlay content here ...</p>
  *   </div>
  * </div>
  *
- *
- * Example CSS:
- *
+ * @example
  * .my-banner {
  *   position: fixed;
  *   top: 0;
@@ -39,58 +49,23 @@
  *   width: 100%;
  *   height: 100%;
  *   background: rgba(0, 0, 0, 0.8);
- *   opacity: 0;
- *   visibility: hidden;
- *   transition: opacity 0.5s ease, visibility 0.5s ease;
  *   z-index: 9999;
  * }
- *
- * .my-banner.active {
- *   visibility: visible;
- * }
- *
- * .my-banner.open {
- *   opacity: 1;
- * }
- *
- * .my-banner.closing {
- *   opacity: 0;
- * }
- *
- *
- * Basic usage:
- *
- * const banner = new Madj2kBanner();
- *
- *
- * Advanced usage with config:
- *
- * const overlay = new Madj2kBanner({
- *   overlayId: 'my-banner',
- *   overlayCloseId: 'my-banner-close',
- *   activeClass: 'active',
- *   openClass: 'open',
- *   closingClass: 'closing',
- *   openingClass: 'opening',
- *   timeout: 1000,
- *   cookieName: 'myOverlayCookie',
- *   cookieDays: 30
- * });
- *
  */
+
 class Madj2kBanner {
 
   config = {
-    'overlayId' : 'overlay',
-    'overlayCloseId' : 'overlay-close',
+    'bannerId' : 'banner',
+    'bannerCloseId': 'banner-close', // fallback legacy
     'activeClass': 'active',
     'openClass': 'open',
     'closingClass': 'closing',
     'openingClass': 'opening',
     'timeout': '1000',
-    'cookieName': 'overlay',
-    'cookieDays': '365'
-
+    'cookieName': 'banner',
+    'cookieDays': '365',
+    'debug': false
   };
 
   /**
@@ -99,44 +74,76 @@ class Madj2kBanner {
    */
   constructor(config) {
     this.config = {...this.config, ...config }
-    this.initOverlay();
+    this._log('Init Madj2kBanner');
+    this.initBanner();
   }
 
   /**
-   * Init overlay if no cookie is set!
+   * Init banner if no cookie is set!
    */
-  initOverlay () {
-    const overlay = document.getElementById(this.config.overlayId);
+  initBanner () {
+    const banner = document.getElementById(this.config.bannerId);
     const self = this;
 
-    if (overlay && ! this.getCookie()) {
+    if (banner && ! this.getCookie()) {
+      this._log('No cookie found, showing banner');
 
-      overlay.classList.add(self.config.activeClass);
+      banner.classList.add(self.config.activeClass);
       setTimeout(function(){
-        overlay.classList.add(self.config.openingClass);
+        banner.classList.add(self.config.openingClass);
         setTimeout(function(){
-          overlay.classList.add(self.config.openClass);
-          overlay.classList.remove(self.config.openingClass);
+          banner.classList.add(self.config.openClass);
+          banner.classList.remove(self.config.openingClass);
+          self._log('Banner opened');
         }, self.config.timeout);
-      }, 1 ); // minimum timeout for transitions!
+      }, 1 );
 
-      const overlayClose = document.getElementById(this.config.overlayCloseId);
-      if (overlayClose) {
-        overlayClose.addEventListener('click', (ee) => {
+      // Add close button(s) via aria-controls
+      let bannerCloseButtons = document.querySelectorAll('[aria-controls="' + this.config.bannerId + '"]');
 
-          this.setCookie();
+      // fallback to legacy ID
+      if (bannerCloseButtons.length === 0 && this.config.bannerCloseId) {
+        const legacyButton = document.getElementById(this.config.bannerCloseId);
+        if (legacyButton) {
+          this._log('Legacy close button fallback used:', this.config.bannerCloseId);
+          legacyButton.addEventListener('click', (ee) => {
+            this._closeBanner(banner);
+          });
+        }
+      } else {
 
-          overlay.classList.add(self.config.closingClass);
-          overlay.classList.remove(self.config.openClass);
-          setTimeout(function(){
-            overlay.classList.remove(self.config.closingClass);
-            overlay.classList.remove(self.config.activeClass);
-          }, self.config.timeout);
+        bannerCloseButtons.forEach(button => {
+          button.addEventListener('click', (ee) => {
+            this._closeBanner(banner);
+          });
         });
       }
+
+    } else {
+      if (banner) {
+        this._log('Banner not shown (cookie found)');
+      }
     }
   }
 
+  /**
+   * Closes the banner and sets cookie
+   * @param banner
+   * @private
+   */
+  _closeBanner(banner) {
+    this.setCookie();
+
+    banner.classList.add(this.config.closingClass);
+    banner.classList.remove(this.config.openClass);
+    this._log('Banner closing');
+
+    setTimeout(() => {
+      banner.classList.remove(this.config.closingClass);
+      banner.classList.remove(this.config.activeClass);
+      this._log('Banner closed');
+    }, this.config.timeout);
+  }
 
   /**
    * Sets cookie
@@ -146,9 +153,9 @@ class Madj2kBanner {
     d.setTime(d.getTime() + (this.config.cookieDays * 24 * 60 * 60 * 1000));
     let expires = "expires=" + d.toUTCString();
     document.cookie = (this.config.cookieName + '=1;' + expires + ';path=/' + '; SameSite=Strict');
+    this._log('Cookie set:', this.config.cookieName);
   }
 
-
   /**
    * Gets cookie values
    * @returns {string}
@@ -163,10 +170,21 @@ class Madj2kBanner {
         c = c.substring(1);
       }
       if (c.indexOf(name) === 0) {
+        this._log('Cookie found:', this.config.cookieName);
         return c.substring(name.length, c.length);
       }
     }
 
     return '';
   }
+
+  /**
+   * Debug logging helper
+   * @private
+   */
+  _log(...args) {
+    if (this.config.debug) {
+      console.log('[Madj2kBanner]', ...args);
+    }
+  }
 }

package/tools/banner/banner-2.0.scss

@@ -1,14 +1,7 @@
-.my-banner {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.8);
+.banner {
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.5s ease, visibility 0.5s ease;
-    z-index: 9999;
 
     &.active {
         visibility: visible;

package/tools/better-resize-event/better-resize-event-2.0.js

@@ -0,0 +1,136 @@
+/**
+ * Madj2kBetterResizeEvent
+ *
+ * A lightweight helper class that triggers a debounced 'madj2k-better-resize-event' event
+ * when the user finishes resizing the browser window.
+ *
+ * In some cases, you need to be able to react to the window's resize event. Unfortunately, however, the resize event is not only triggered at the end of the
+ * resizing of the browser window, but every time the size is changed in between. This can lead to an overhead if the event is handled every
+ * the event every time. With the JS-module, a final event is only triggered when the browser window has been resized.
+ *
+ * The script also considers edge-cases such as showing the software-keyboard and showing / hiding the navigation bar on mobile devices
+ * (both trigger a resize event).
+ *
+ * Notes:
+ * - On iOS (Safari), viewport height and width can change during scroll bounce or keyboard animation.
+ * - This version adds "viewport delta" detection to prevent false-positive resize events.
+ * - Scrolling state is now internal (no more data-resizeend-scrolling attribute).
+ * - New event: 'madj2k-better-resize-event' (legacy event still supported).
+ *
+ * @author Steffen Kroggel <developer@steffenkroggel.de>
+ * @copyright 2025 Steffen Kroggel
+ * @version 2.0.1
+ * @license GNU General Public License v3.0
+ * @see https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * @example
+ * // Initialize with defaults
+ * const betterResizeEvent = new Madj2kBetterResizeEvent();
+ *
+ * @example
+ * // Initialize with custom config
+ * const betterResizeEvent = new Madj2kBetterResizeEvent({
+ *   resizeEndTimeout: 300,
+ *   scrollingEndTimeout: 600,
+ *   viewportDeltaThreshold: 50
+ * });
+ *
+ * @example
+ * // Listen to resize-end event
+ * document.addEventListener('madj2k-better-resize-event', () => {
+ *   console.log('Resize fired');
+ * });
+ */
+
+class Madj2kBetterResizeEvent {
+
+  config = {
+    scrollingEndTimeout: 500,
+    resizeEndTimeout: 200,
+    viewportDeltaThreshold: 50 // px threshold to filter small height/width changes (default: 50)
+  };
+
+  finalEventTimers = {};
+  lastViewportHeight = window.innerHeight;
+  lastViewportWidth = window.innerWidth;
+  isScrolling = false;
+
+  /**
+   * Constructor
+   * @param {Object} config - Optional config overrides
+   */
+  constructor(config = {}) {
+    this.config = { ...this.config, ...config };
+
+    this.lastViewportHeight = window.innerHeight;
+    this.lastViewportWidth = window.innerWidth;
+    this.isScrolling = false;
+
+    this.initScrollingDetection();
+    this.initResizeEvent();
+  }
+
+  /**
+   * Init resize event
+   */
+  initResizeEvent() {
+    window.addEventListener('resize', () => {
+      const currentHeight = window.innerHeight;
+      const currentWidth = window.innerWidth;
+
+      const deltaH = Math.abs(this.lastViewportHeight - currentHeight);
+      const deltaW = Math.abs(this.lastViewportWidth - currentWidth);
+
+      // Skip if height/width change is below threshold (keyboard open/close or bounce)
+      if (deltaH < this.config.viewportDeltaThreshold && deltaW < this.config.viewportDeltaThreshold) {
+        return;
+      }
+
+      this.lastViewportHeight = currentHeight;
+      this.lastViewportWidth = currentWidth;
+
+      if (!this.isScrolling) {
+        this.waitForFinalEvent(() => {
+          // Skip if input is focused (e.g. keyboard open on mobile)
+          const active = document.activeElement;
+          if (!(active && active.tagName === 'INPUT')) {
+
+            // New event
+            const newEvent = new CustomEvent('madj2k-better-resize-event');
+            document.dispatchEvent(newEvent);
+
+            // Legacy event for backwards compatibility
+            const legacyEvent = new CustomEvent('madj2k-resize-end');
+            document.dispatchEvent(legacyEvent);
+          }
+        }, this.config.resizeEndTimeout, 'resize');
+      }
+    });
+  }
+
+  /**
+   * Init scrolling detection
+   */
+  initScrollingDetection() {
+    const handler = () => {
+      this.isScrolling = true;
+
+      this.waitForFinalEvent(() => {
+        this.isScrolling = false;
+      }, this.config.scrollingEndTimeout, 'scrolling');
+    };
+
+    window.addEventListener('scroll', handler, { passive: true });
+    window.addEventListener('touchmove', handler, { passive: true });
+  }
+
+  /**
+   * Debounced final event dispatcher
+   */
+  waitForFinalEvent(callback, ms, uniqueId = "default") {
+    if (this.finalEventTimers[uniqueId]) {
+      clearTimeout(this.finalEventTimers[uniqueId]);
+    }
+    this.finalEventTimers[uniqueId] = setTimeout(callback, ms);
+  }
+}

package/tools/better-resize-event/index.js

@@ -0,0 +1,2 @@
+import Madj2kBetterResizeEvent from './better-resize-event-2.0.js';
+export { Madj2kBetterResizeEvent  };

package/tools/better-resize-event/index.scss

@@ -0,0 +1 @@
+@forward './better-resize-event-2.0';

package/tools/owl-thumbnail/owl-thumbnail-2.0.js

@@ -21,6 +21,27 @@
  * @license GNU General Public License v3.0
  * @see https://www.gnu.org/licenses/gpl-3.0.en.html
  *
+ * @example:
+ * const owlThumbnail = new Madj2kOwlThumbnail('.js-main-carousel', '.js-thumbs-carousel', {
+ *     main: {
+ *       items: 1,
+ *       margin: 20,
+ *       dots: true,
+ *       nav: true,
+ *       autoHeight: true
+ *     },
+ *     thumbs: {
+ *       items: 3,
+ *       margin: 10,
+ *       dots: false,
+ *       nav: true,
+ *       center: true
+ *     },
+ *     resizeEvent: 'custom.resize',
+ *     equalizeThumbHeights: true,
+ *     noStageOffset: true
+ *     }
+ *   });
  * HTML example without data attributes:
  * <div class="js-main-carousel owl-carousel">
  *   <div class="item"><img src="image1.jpg" alt=""></div>
@@ -45,28 +66,6 @@
  *   <div class="item" data-index="2"><img src="thumb3.jpg" alt=""></div>
  * </div>
  *
- * @example:
- *
- * const owlThumbnail = new Madj2kOwlThumbnail('.js-main-carousel', '.js-thumbs-carousel', {
- *     main: {
- *       items: 1,
- *       margin: 20,
- *       dots: true,
- *       nav: true,
- *       autoHeight: true
- *     },
- *     thumbs: {
- *       items: 3,
- *       margin: 10,
- *       dots: false,
- *       nav: true,
- *       center: true
- *     },
- *     resizeEvent: 'custom.resize',
- *     equalizeThumbHeights: true,
- *     noStageOffset: true
- *     }
- *   });
  */
 class Madj2kOwlThumbnail {
   constructor(mainSelector, thumbSelector, options = {}, debug = false) {

package/tools/resize-end/index.js

@@ -1,2 +1,6 @@
-import Madj2kResizeEnd from './resize-end-2.0.js';
-export { Madj2kResizeEnd  };
+/**
+ * Legacy Wrapper: ResizeEnd
+ */
+import Madj2kBetterResizeEvent from '../better-resize-event/better-resize-event-2.0.js';
+class Madj2kResizeEnd extends Madj2kBetterResizeEvent {}
+export { Madj2kResizeEnd };

package/tools/resize-end/index.scss

@@ -1 +1 @@
-@forward './resize-end-2.0';
+@forward '../better-resize-event/index';

package/tools/scrolling/scrolling-2.0.js

@@ -1,5 +1,5 @@
 /**
- * Scrolling-Events (Vanilla JS)
+ * Scrolling-Events
  *
  * A lightweight scrolling helper class that enables:
  * 1. Body classes based on scroll direction (scroll-up / scroll-down)
@@ -12,24 +12,25 @@
  *
  * @author Steffen Kroggel <developer@steffenkroggel.de>
  * @copyright 2025 Steffen Kroggel
- * @version 2.0.0
+ * @version 2.0.1 – Added debug option + log helper, changed anchorScrollingDisableSelector
  * @license GNU General Public License v3.0
  * @see https://www.gnu.org/licenses/gpl-3.0.en.html
  *
  * @example
  * // Initialize with defaults
- * const scrolling = new Scrolling();
+ * const scrolling = new Madj2kScrolling();
  *
  * @example
  * // Initialize with custom config
  * const scrolling = new Madj2kScrolling({
  *   anchorScrollingCollapsibleSelector: ['.collapse', '.custom-collapse'],
- *   anchorScrollingSelector: ['a[href^="#"]', '.btn-scroll'],*
+ *   anchorScrollingSelector: ['a[href^="#"]', '.btn-scroll'],
  *   anchorScrollingOffsetSelector: '#siteheader',
- *   anchorScrollingDisableClass: 'js-no-scroll',
+ *   anchorScrollingDisableSelector: '.js-no-scroll',
  *   appearOnScrollSelector: ['.js-appear-on-scroll'],
  *   appearOnScrollTimeout: 500,
- *   appearOnScrollThreshold: 25*
+ *   appearOnScrollThreshold: 25,
+ *   debug: true
  * });
  *
  * @example
@@ -66,66 +67,70 @@ class Madj2kScrolling {
     anchorScrollingSelector: ['a[href^="#"]'],
     anchorScrollingOffsetSelector: '',
     anchorScrollingScriptScrollTimeout: 800,
-    anchorScrollingDisableClass: 'js-no-scroll',
+    anchorScrollingDisableSelector: '.js-no-scroll',
     anchorScrollingCollapsibleSelector: ['.collapse'],
     anchorScrollingBehavior: 'smooth',
     appearOnScrollSelector: ['.js-appear-on-scroll'],
     appearOnScrollTimeout: 500,
-    appearOnScrollThreshold: 25
+    appearOnScrollThreshold: 25,
+    debug: false
   };
 
   constructor(config) {
     this.config = { ...this.config, ...config };
-    this.scrollTimer = null;
+
+    this.lastScrollTop = window.scrollY;
+    this.lastContentHeight = document.documentElement.scrollHeight;
+
+    this._log('Initialized with config:', this.config);
 
     this.initScrollClassesForBody();
     this.initAnchorScrolling();
     this.initAppearOnScroll();
   }
 
+  /**
+   * Adds scroll classes to body based on scroll direction
+   * @private
+   */
   initScrollClassesForBody() {
-    const body = document.body;
-    let lastScrollTop = window.scrollY;
-    let lastContentHeight = document.documentElement.scrollHeight;
-
-    const setContentHeight = () => {
-      lastContentHeight = document.documentElement.scrollHeight;
-      body.setAttribute('data-last-content-height', lastContentHeight);
-    };
-
     const addScrollClasses = () => {
       const scrollTop = window.scrollY;
       const contentHeight = document.documentElement.scrollHeight;
 
-      if (parseInt(body.getAttribute('data-last-content-height')) !== contentHeight) {
+      if (this.lastContentHeight !== contentHeight) {
+        this._log('Content height changed, skipping scroll class update');
+        this.lastContentHeight = contentHeight;
         return;
       }
 
-      if (!body.classList.contains('block-scroll-classes')) {
+      if (!document.body.classList.contains('block-scroll-classes')) {
         if (scrollTop > 0) {
-          body.classList.remove('scroll-up', 'scroll-down');
-          if (scrollTop > lastScrollTop) {
-            body.classList.add('scroll-down');
-          } else if (scrollTop < lastScrollTop) {
-            body.classList.add('scroll-up');
+          document.body.classList.remove('scroll-up', 'scroll-down');
+          if (scrollTop > this.lastScrollTop) {
+            document.body.classList.add('scroll-down');
+            this._log('Scroll direction: down');
+          } else if (scrollTop < this.lastScrollTop) {
+            document.body.classList.add('scroll-up');
+            this._log('Scroll direction: up');
           }
         } else {
-          body.classList.remove('scroll-down');
+          document.body.classList.remove('scroll-down');
         }
       }
 
-      body.setAttribute('data-last-scroll-top', Math.max(scrollTop, 0));
-      lastScrollTop = scrollTop;
+      this.lastScrollTop = scrollTop;
     };
 
-    setContentHeight();
-
     window.addEventListener('scroll', () => {
-      setContentHeight();
       addScrollClasses();
     });
   }
 
+  /**
+   * Initializes anchor scrolling with optional offset
+   * @private
+   */
   initAnchorScrolling() {
     const offsetElement = document.querySelector(this.config.anchorScrollingOffsetSelector);
     let scriptScrollTimer = null;
@@ -140,7 +145,6 @@ class Madj2kScrolling {
         }
 
         document.body.classList.add('block-scroll-classes');
-
         if (scriptScrollTimer) {
           clearTimeout(scriptScrollTimer);
         }
@@ -153,6 +157,8 @@ class Madj2kScrolling {
           top: scrollTo,
           behavior: this.config.anchorScrollingBehavior
         });
+
+        this._log('Anchor scroll to:', element);
       }
     };
 
@@ -168,7 +174,6 @@ class Madj2kScrolling {
       event.preventDefault();
 
       const anchorId = event.currentTarget.getAttribute('href');
-
       if (anchorId && anchorId.startsWith('#')) {
         const anchor = document.querySelector(anchorId);
         if (anchor) scrollToElement(anchor);
@@ -177,13 +182,13 @@ class Madj2kScrolling {
 
     const getAnchorSelector = () => {
       return this.config.anchorScrollingSelector
-        .map(sel => `${sel}:not(.visually-hidden-focusable):not(.${this.config.anchorScrollingDisableClass})`)
+        .map(sel => `${sel}:not(.visually-hidden-focusable):not(${this.config.anchorScrollingDisableSelector})`)
         .join(', ');
     };
 
     const getCollapsibleSelector = () => {
       return this.config.anchorScrollingCollapsibleSelector
-        .map(sel => `${sel}:not(.${this.config.anchorScrollingDisableClass})`)
+        .map(sel => `${sel}:not(${this.config.anchorScrollingDisableSelector})`)
         .join(', ');
     };
 
@@ -195,6 +200,7 @@ class Madj2kScrolling {
     document.querySelectorAll(getCollapsibleSelector())
       .forEach(el => {
         el.addEventListener('shown.bs.collapse', e => {
+          this._log('Collapse shown, scroll to:', e.target);
           scrollToElement(e.target);
         });
       });
@@ -202,6 +208,10 @@ class Madj2kScrolling {
     jumpToAnchorByUrl();
   }
 
+  /**
+   * Initializes appear-on-scroll animations
+   * @private
+   */
   initAppearOnScroll() {
     const initElement = (element) => {
       const rect = element.getBoundingClientRect();
@@ -210,6 +220,7 @@ class Madj2kScrolling {
 
       if (windowBottom > elementTop) {
         element.setAttribute('data-appear-on-scroll', 0);
+        this._log('Appear on scroll (init):', element);
       } else {
         element.setAttribute('data-appear-on-scroll', 1);
       }
@@ -220,8 +231,9 @@ class Madj2kScrolling {
       const windowBottom = window.scrollY + window.innerHeight;
       const elementTop = window.scrollY + rect.top;
 
-      if (windowBottom > elementTop) {
+      if (windowBottom > elementTop && element.getAttribute('data-appear-on-scroll') !== '0') {
         element.setAttribute('data-appear-on-scroll', 0);
+        this._log('Appear on scroll (show):', element);
       }
     };
 
@@ -241,4 +253,14 @@ class Madj2kScrolling {
 
     window.addEventListener('scroll', updateOnScroll);
   }
+
+  /**
+   * Debug logging helper
+   * @private
+   */
+  _log(...args) {
+    if (this.config.debug) {
+      console.log('[Madj2kScrolling]', ...args);
+    }
+  }
 }

package/tools/toggled-overlay/toggled-overlay-2.0.js

@@ -1,16 +1,16 @@
 /**!
  * ToggledOverlay
  *
+ * This class toggles the visibility of any target element referenced by the `aria-controls`
+ * attribute of a trigger element (button, link, etc.). It manages ARIA attributes for accessibility
+ * and allows overlays to be closed externally via a custom event.
+ *
  * @author Steffen Kroggel <developer@steffenkroggel.de>
  * @copyright 2025 Steffen Kroggel
- * @version 2.0.0
+ * @version 2.0.1
  * @license GNU General Public License v3.0
  * @see https://www.gnu.org/licenses/gpl-3.0.en.html
  *
- * This class toggles the visibility of any target element referenced by the `aria-controls`
- * attribute of a trigger element (button, link, etc.). It manages ARIA attributes for accessibility
- * and allows overlays to be closed externally via a custom event.
- *
  * @example
  * Example HTML:
  * <button class="js-toggled-overlay toggled-overlay-button"

package/tools/resize-end/resize-end-2.0.js

@@ -1,108 +0,0 @@
-/**
- * ResizeEnd Events (Vanilla JS)
- **
- * A lightweight helper class that triggers a debounced 'madj2k-resize-end' event
- * when the user finishes resizing the browser window.
- *
- * It also manages a scrolling detection state (via body attribute) to avoid triggering
- * resize-end during user scrolling, and respects active input fields (useful on mobile).
- *
- * @author Steffen Kroggel <developer@steffenkroggel.de>
- * @copyright 2025 Steffen Kroggel
- * @version 2.0.0
- * @license GNU General Public License v3.0
- * @see https://www.gnu.org/licenses/gpl-3.0.en.html
- *
- * @example
- * // Initialize with defaults
- * const resizeEnd = new Madj2kResizeEnd();
- *
- * @example
- * // Initialize with custom config
- * const resizeEnd = new Madj2kResizeEnd({
- *   resizeEndTimeout: 300,
- *   scrollingEndTimeout: 600
- * });
- *
- * @example
- * // Listen to resize-end event
- * document.addEventListener('madj2k-resize-end', () => {
- *   console.log('Resize-End fired');
- * });
- *
- * @example
- * // Example use case: reload masonry grid after resize ends
- * document.addEventListener('madj2k-resize-end', () => {
- *   myMasonry.reloadItems();
- *   myMasonry.layout();
- * });
- */
-class Madj2kResizeEnd {
-
-  config = {
-    scrollingEndTimeout: 500,
-    resizeEndTimeout: 200,
-    scrollingDataAttr: 'data-resizeend-scrolling'
-  };
-
-  finalEventTimers = {};
-
-  /**
-   * Constructor
-   * @param {Object} config - Optional config overrides
-   */
-  constructor(config = {}) {
-    this.config = { ...this.config, ...config };
-    this.initScrollingDetection();
-    this.initResizeEndEvent();
-  }
-
-  /**
-   * Init resizeEnd custom event
-   */
-  initResizeEndEvent() {
-    window.addEventListener('resize', () => {
-      const body = document.body;
-
-      if (
-        !body.hasAttribute(this.config.scrollingDataAttr) ||
-        body.getAttribute(this.config.scrollingDataAttr) === '0'
-      ) {
-        this.waitForFinalEvent(() => {
-          // Skip if input is focused (e.g. keyboard open on mobile)
-          const active = document.activeElement;
-          if (!(active && active.tagName === 'INPUT')) {
-            const event = new CustomEvent('madj2k-resize-end');
-            document.dispatchEvent(event);
-          }
-        }, this.config.resizeEndTimeout, 'resize');
-      }
-    });
-  }
-
-  /**
-   * Init scrolling detection
-   */
-  initScrollingDetection() {
-    const handler = () => {
-      document.body.setAttribute(this.config.scrollingDataAttr, '1');
-
-      this.waitForFinalEvent(() => {
-        document.body.setAttribute(this.config.scrollingDataAttr, '0');
-      }, this.config.scrollingEndTimeout, 'scrolling');
-    };
-
-    window.addEventListener('scroll', handler, { passive: true });
-    window.addEventListener('touchmove', handler, { passive: true });
-  }
-
-  /**
-   * Debounced final event dispatcher
-   */
-  waitForFinalEvent(callback, ms, uniqueId = "default") {
-    if (this.finalEventTimers[uniqueId]) {
-      clearTimeout(this.finalEventTimers[uniqueId]);
-    }
-    this.finalEventTimers[uniqueId] = setTimeout(callback, ms);
-  }
-}

package/tools/resize-end/resize-end-2.0.scss

@@ -1,10 +0,0 @@
-.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);
-    }
-}