@madj2k/fe-frontend-kit 2.0.4 → 2.0.6

package/index.js

@@ -1,7 +1,10 @@
 // Tools
-export { Madj2kOwlThumbnail } from './tools/owl/owl-thumbnail.js';
-export { Madj2kScrolling } from './tools/scrolling/scrolling.js';
+export { Madj2kBanner } from './tools/banner';
+export { Madj2kOwlThumbnail } from './tools/owl-thumbnail';
+export { Madj2kResizeEnd } from './tools/resize-end';
+export { Madj2kScrolling } from './tools/scrolling';
+export { Madj2kToggledOverlay } from './tools/toggled-overlay';
 
 // Menus
-export { Madj2kFlyoutMenu } from './menus/flyout-menu-1.0';
-export { Madj2kPulldownMenu } from './menus/pulldown-menu-1.0';
+export { Madj2kFlyoutMenu } from './menus/flyout-menu';
+export { Madj2kPulldownMenu } from './menus/pulldown-menu';

package/index.scss

@@ -1,6 +1,13 @@
 // Forward all mixins
-@forward './sass/bootstrap-5.3.0/index';
+@forward 'sass/bootstrap-5.3/index';
 
 // Forward all menu styles
 @forward './menus/flyout-menu';
 @forward './menus/pulldown-menu';
+
+// Forward all tools
+@forward 'tools/banner/index';
+@forward 'tools/owl-thumbnail/index';
+@forward 'tools/resize-end/index';
+@forward 'tools/scrolling/index';
+@forward 'tools/toggled-overlay/index';

package/menus/flyout-menu/{flyout-menu-2.0.0.js → flyout-menu-2.0.js}

@@ -7,7 +7,7 @@
  *
  * @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
  *
@@ -49,7 +49,7 @@ class Madj2kFlyoutMenu {
       menuCloseClass: "js-flyout-close",
       menuContainerClass: "js-flyout-container",
       menuInnerClass: "js-flyout-inner",
-      heightMode: 'maxContent',
+      heightMode: 'full',
       paddingBehavior: 0,
       paddingViewPortMinWidth: 0,
       animationDuration: 500
@@ -76,25 +76,7 @@ class Madj2kFlyoutMenu {
     this.resizeAndPositionMenu();
     this.paddingMenu();
     this.bindEvents();
-  }
-
-  /**
-   * Binds all necessary event listeners
-   */
-  bindEvents() {
-    if (this.settings.$closeBtn) {
-      this.settings.$closeBtn.addEventListener('click', 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));
-
-    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));
+    this.initObservers();
   }
 
   /**
@@ -128,6 +110,88 @@ class Madj2kFlyoutMenu {
     }
   }
 
+  /**
+   * Binds all necessary event listeners
+   */
+  bindEvents() {
+    if (this.settings.$closeBtn) {
+      this.settings.$closeBtn.addEventListener('click', 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));
+
+    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));
+  }
+
+  /**
+   * Initializes ResizeObserver to auto-resize menu
+   */
+  initObservers() {
+    // check if supported
+    if (typeof ResizeObserver === 'undefined') {
+      console.warn('ResizeObserver is not supported in this browser.');
+      return;
+    }
+
+    // create observer
+    this.resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        this.resizeMenu();
+      }
+    });
+
+    // observe inner container
+    if (this.settings.$menuInner) {
+      this.resizeObserver.observe(this.settings.$menuInner);
+    }
+  }
+
+  /**
+   * 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
+   */
+  destroyResizeObserver() {
+    if (this.resizeObserver && this.settings.$menuInner) {
+      this.resizeObserver.unobserve(this.settings.$menuInner);
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  }
+
+  /**
+   * Destroys flyout menu instance
+   */
+  destroy() {
+    this.destroyEvents();
+    this.destroyResizeObserver();
+    this.close();
+  }
+
+
   /**
    * Handles toggle click event
    * @param {Event} e - The click event
@@ -153,6 +217,15 @@ class Madj2kFlyoutMenu {
     }
   }
 
+  /**
+   * Sets focus to the toggle element
+   * @param {number} timeout - Delay before focusing
+   */
+  focusToggle(timeout = 0) {
+    setTimeout(() => this.$element.focus(), timeout);
+  }
+
+
   /**
    * Opens the flyout menu
    */
@@ -184,6 +257,14 @@ class Madj2kFlyoutMenu {
     }
   }
 
+  /**
+   * Returns true if menu is currently open
+   * @returns {boolean}
+   */
+  isOpen() {
+    return this.settings.$menu.classList.contains(this.settings.openStatusClass);
+  }
+
   /**
    * Handles close event
    * @param {Event} e - The close event
@@ -237,29 +318,54 @@ class Madj2kFlyoutMenu {
   }
 
   /**
-   * Resizes and positions the menu based on reference elements
+   * Resizes and positions the menu
    */
   resizeAndPositionMenu() {
+    this.positionMenu();
+    this.resizeMenu();
+  }
+
+  /**
+   * Resizes the menu based on height mode and inner content
+   */
+  resizeMenu() {
     const refObj = this.settings.$positionReference || this.$element;
     const refPos = refObj.getBoundingClientRect();
     const flyoutTop = refPos.top + refObj.offsetHeight;
     let height = this.settings.$menuInner.offsetHeight || this.settings.$menu.offsetHeight;
 
-    this.settings.$menu.style.top = `${flyoutTop}px`;
+    if ('fullHeight' in this.settings) {
+      console.warn('Option "fullHeight" is deprecated. Please use "heightMode" instead.');
+    }
 
-    // deprecated fullHeight-setting as fallback
+    // heightMode "full" with deprecated fullHeight-setting as fallback
     if (this.settings.heightMode === 'full' || this.settings.fullHeight === true) {
-      height = window.innerHeight - refPos.top - refObj.offsetHeight;
+      const viewPortHeight = window.innerHeight;
+      if (height < viewPortHeight) {
+        height = viewPortHeight - flyoutTop;
+      }
       this.settings.$menu.style.height = `${height}px`;
 
-    } else if (this.settings.heightMode === 'maxContent'){
+    } else if (this.settings.heightMode === 'maxContent') {
       this.settings.$menu.style.height = `max-content`;
+      console.warn('heightMode: maxContent is not working on Apple Safari. Please use heightMode: full instead.');
 
     } else {
       this.settings.$menu.style.height = `${height}px`;
     }
   }
 
+  /**
+   * Positions the menu based on the reference element
+   */
+  positionMenu() {
+    const refObj = this.settings.$positionReference || this.$element;
+    const refPos = refObj.getBoundingClientRect();
+    const flyoutTop = refPos.top + refObj.offsetHeight;
+
+    this.settings.$menu.style.top = `${flyoutTop}px`;
+  }
+
   /**
    * Adjusts menu padding based on settings
    */
@@ -275,6 +381,23 @@ class Madj2kFlyoutMenu {
     this.settings.$menuInner.setAttribute('data-padding-set', 'true');
   }
 
+  /**
+   * 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>`;
+      }
+    }
+  }
+
   /**
    * Toggles scroll behavior of the page
    */
@@ -303,29 +426,4 @@ class Madj2kFlyoutMenu {
       window.scrollTo({top: scrollTop, behavior: 'instant'});
     }
   }
-
-  /**
-   * 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>`;
-      }
-    }
-  }
-
-  /**
-   * Sets focus to the toggle element
-   * @param {number} timeout - Delay before focusing
-   */
-  focusToggle(timeout = 0) {
-    setTimeout(() => this.$element.focus(), timeout);
-  }
 }

package/menus/flyout-menu/index.js

@@ -1,2 +1,2 @@
-import Madj2kFlyoutMenu from './flyout-menu-2.0.0.js';
+import Madj2kFlyoutMenu from './flyout-menu-2.0.js';
 export { Madj2kFlyoutMenu  };

package/menus/flyout-menu/index.scss

@@ -1 +1 @@
-@forward './flyout-menu-2.0.0';
+@forward './flyout-menu-2.0';

package/menus/pulldown-menu/index.js

@@ -1,2 +1,2 @@
-import Madj2kPulldownMenu from './pulldown-menu-2.0.0.js';
+import Madj2kPulldownMenu from './pulldown-menu-2.0.js';
 export { Madj2kPulldownMenu  };

package/menus/pulldown-menu/index.scss

@@ -1 +1 @@
-@forward './pulldown-menu-2.0.0';
+@forward './pulldown-menu-2.0';

package/package.json

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

package/readme.md

@@ -26,6 +26,25 @@ Or import individual mixins:
 ###  Menu components (JS and SCSS):
 Each menu component can be used separately.
 
+# 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.
+
+# JS: OWL-Thumbnails
+A JavaScript helper class to create a main OWL carousel with a synchronized thumbnail navigation carousel.
+
+Supports flexible configurations for both the main and the thumbnail carousels,
+including:
+- Custom navigation
+- Syncing main carousel to clicked thumbnails
+- Syncing thumbnails to main carousel changes
+- Optionally equalizing thumbnail heights
+- Optionally preventing the centered thumbnail stage shift (for designs where thumbs should stay left aligned)
+- Responsive and CMS-friendly (works with dynamic content)
+
+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
 when the user finishes resizing the browser window.
@@ -43,20 +62,11 @@ 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.
 
-# JS: OWL-Thumbnails
-A JavaScript helper class to create a main OWL carousel with a synchronized thumbnail navigation carousel.
-
-Supports flexible configurations for both the main and the thumbnail carousels,
-including:
-- Custom navigation
-- Syncing main carousel to clicked thumbnails
-- Syncing thumbnails to main carousel changes
-- Optionally equalizing thumbnail heights
-- Optionally preventing the centered thumbnail stage shift (for designs where thumbs should stay left aligned)
-- Responsive and CMS-friendly (works with dynamic content)
+# 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.
 
-This is especially useful for image galleries or product carousels in CMS setups (e.g. TYPO3, WordPress, etc.)
-where content may change dynamically.
 
 # Flyout-Navigation
 ## Usage

package/tools/banner/index.js

@@ -1,2 +1,2 @@
-import Madj2kBanner from './banner-2.0.0.js';
+import Madj2kBanner from './banner-2.0.js';
 export { Madj2kBanner  };

package/tools/banner/index.scss

@@ -1 +1 @@
-@forward './banner-2.0.0';
+@forward './banner-2.0';

package/tools/owl-thumbnail/index.js

@@ -0,0 +1,2 @@
+import Madj2kOwlThumbnail from './owl-thumbnail-2.0.js';
+export { Madj2kOwlThumbnail  };

package/tools/owl-thumbnail/index.scss

@@ -0,0 +1 @@
+@forward 'owl-thumbnail-2.0';

package/tools/resize-end/index.js

@@ -1,2 +1,2 @@
-import Madj2kResizeEnd from './resize-end-2.0.0.js';
+import Madj2kResizeEnd from './resize-end-2.0.js';
 export { Madj2kResizeEnd  };

package/tools/resize-end/index.scss

@@ -1 +1 @@
-@forward './resize-end-2.0.0';
+@forward './resize-end-2.0';

package/tools/scrolling/index.js

@@ -1,2 +1,2 @@
-import Madj2kScrolling from './scrolling-2.0.0.js';
+import Madj2kScrolling from './scrolling-2.0.js';
 export { Madj2kScrolling  };

package/tools/scrolling/index.scss

@@ -1 +1 @@
-@forward './scrolling-2.0.0';
+@forward './scrolling-2.0';

package/tools/toggled-overlay/index.js

@@ -0,0 +1,2 @@
+import Madj2kToggledOverlay from './toggled-overlay-2.0.js';
+export { Madj2kToggledOverlay };

package/tools/toggled-overlay/index.scss

@@ -0,0 +1 @@
+@forward './toggled-overlay-2.0';

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

@@ -0,0 +1,125 @@
+/**!
+ * ToggledOverlay
+ *
+ * @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
+ *
+ * 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"
+ *         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>
+ *
+ * Example JavaScript:
+ * const overlayToggle = new Madj2kToggledOverlay('.js-toggled-overlay');
+ *
+ * // External close trigger
+ * window.dispatchEvent(new CustomEvent('madj2k-toggledoverlay-close'));
+ *
+ * Example CSS:
+ * .toggled-overlay {
+ *   opacity: 0;
+ *   visibility: hidden;
+ *   transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s;
+ *
+ *   &.is-visible {
+ *     opacity: 1;
+ *     visibility: visible;
+ *     transition: opacity 0.5s ease-in-out, visibility 0s linear 0s;
+ *   }
+ * }
+ *
+ * .toggled-overlay-button[aria-expanded="true"] .icon-info::before {
+ *   content: "\e8bb"; // Example: "close" icon (replace with actual icon code)
+ * }
+ */
+class Madj2kToggledOverlay {
+  /**
+   * Creates a new ToggledOverlay instance.
+   * @param {string} toggleSelector - CSS selector to identify all toggle buttons.
+   */
+  constructor(toggleSelector) {
+    /** @type {NodeListOf<HTMLElement>} */
+    this.toggles = document.querySelectorAll(toggleSelector);
+    this.init();
+    this.registerEvents();
+  }
+
+  /**
+   * Initializes toggle buttons and sets up toggle behavior.
+   */
+  init() {
+    this.toggles.forEach(toggle => {
+      const targetId = toggle.getAttribute('aria-controls');
+      const target = document.getElementById(targetId);
+      if (!target) return;
+
+      // Set initial ARIA state
+      target.setAttribute('aria-hidden', 'true');
+      toggle.setAttribute('aria-expanded', 'false');
+
+      toggle.addEventListener('click', () => {
+        const isExpanded = toggle.getAttribute('aria-expanded') === 'true';
+        toggle.setAttribute('aria-expanded', String(!isExpanded));
+        target.setAttribute('aria-hidden', String(isExpanded));
+        target.classList.toggle('is-visible', !isExpanded);
+      });
+    });
+  }
+
+  /**
+   * Closes all overlays by removing the 'is-visible' class and updating ARIA attributes.
+   */
+  close() {
+    this.toggles.forEach(toggle => {
+      const targetId = toggle.getAttribute('aria-controls');
+      const target = document.getElementById(targetId);
+      if (!target) return;
+
+      toggle.setAttribute('aria-expanded', 'false');
+      target.setAttribute('aria-hidden', 'true');
+      target.classList.remove('is-visible');
+    });
+  }
+
+  /**
+   * Handles clicks outside the overlay and toggles to close them.
+   * @param {MouseEvent} event
+   */
+  handleClickOutside(event) {
+    this.toggles.forEach(toggle => {
+      const targetId = toggle.getAttribute('aria-controls');
+      const target = document.getElementById(targetId);
+      if (!target) return;
+
+      const clickedInsideToggle = toggle.contains(event.target);
+      const clickedInsideTarget = target.contains(event.target);
+
+      if (!clickedInsideToggle && !clickedInsideTarget && toggle.getAttribute('aria-expanded') === 'true') {
+        this.close();
+      }
+    });
+  }
+
+  /**
+   * Registers all global event listeners.
+   */
+  registerEvents() {
+    document.addEventListener('click', this.handleClickOutside.bind(this));
+    document.addEventListener('madj2k-toggledoverlay-close', this.close.bind(this));
+  }
+}

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

@@ -0,0 +1,11 @@
+.toggled-overlay {
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s;
+
+    &.is-visible {
+        opacity: 1;
+        visibility: visible;
+        transition: opacity 0.5s ease-in-out, visibility 0s linear 0s;
+    }
+}

package/tools/owl/index.js

@@ -1,2 +0,0 @@
-import Madj2kOwlThumbnail from './owl-thumbnail-2.0.0.js';
-export { Madj2kOwlThumbnail  };

package/tools/owl/index.scss

@@ -1 +0,0 @@
-@forward './owl-thumbnail-2.0.0';