@madj2k/fe-frontend-kit 2.0.24 → 2.0.26

package/index.js

@@ -4,6 +4,7 @@ export { Madj2kBetterResizeEvent } from './tools/better-resize-event';
 export { Madj2kOwlThumbnail } from './tools/owl-thumbnail';
 export { Madj2kResizeEnd } from './tools/resize-end';
 export { Madj2kScrolling } from './tools/scrolling';
+export { Madj2kSimpleFadeSlider } from './tools/simple-fade-slider';
 export { Madj2kToggledOverlay } from './tools/toggled-overlay';
 
 // Menus

package/index.scss

@@ -10,4 +10,5 @@
 @forward 'tools/owl-thumbnail/index';
 @forward 'tools/resize-end/index';
 @forward 'tools/scrolling/index';
+@forward 'tools/simple-fade-slider/index';
 @forward 'tools/toggled-overlay/index';

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

@@ -49,6 +49,7 @@ class Madj2kFlyoutMenu {
       menuCloseClass: "js-flyout-close",
       menuContainerClass: "js-flyout-container",
       menuInnerClass: "js-flyout-inner",
+      heightCalculationClass: 'calculate',
       heightMode: 'full',
       paddingBehavior: 0,
       paddingViewPortMinWidth: 0,
@@ -230,7 +231,9 @@ class Madj2kFlyoutMenu {
    * Opens the flyout menu
    */
   open() {
-    const {$menu, $element, animationOpenStatusClass, openStatusClass} = this.settings;
+    const {$menu, $element, animationOpenStatusClass, openStatusClass, openStatusBodyClass, animationBodyClassPrefix} = this.settings;
+    const $body = document.body;
+
     if (!$menu.classList.contains(openStatusClass) && !$menu.classList.contains(animationOpenStatusClass)) {
       document.dispatchEvent(new CustomEvent('madj2k-slidemenu-close'));
       document.dispatchEvent(new CustomEvent('madj2k-pulldownmenu-close'));
@@ -244,7 +247,8 @@ class Madj2kFlyoutMenu {
       $menu.classList.add(openStatusClass, animationOpenStatusClass);
       $element.classList.add(openStatusClass, animationOpenStatusClass);
       $element.setAttribute('aria-expanded', true);
-      document.body.classList.add(`${this.settings.animationBodyClassPrefix}-${animationOpenStatusClass}`);
+      $body.classList.add(openStatusBodyClass);
+      $body.classList.add(`${animationBodyClassPrefix}-${animationOpenStatusClass}`);
 
       this.settings.$menuContainer.style.transition = `top ${this.settings.animationDuration}ms`;
       this.settings.$menuContainer.style.top = '0';
@@ -252,7 +256,7 @@ class Madj2kFlyoutMenu {
       setTimeout(() => {
         $menu.classList.remove(animationOpenStatusClass);
         $element.classList.remove(animationOpenStatusClass);
-        document.body.classList.remove(`${this.settings.animationBodyClassPrefix}-${animationOpenStatusClass}`);
+        $body.classList.remove(`${animationBodyClassPrefix}-${animationOpenStatusClass}`);
         document.dispatchEvent(new CustomEvent('madj2k-flyoutmenu-opened'));
       }, this.settings.animationDuration);
     }
@@ -284,17 +288,20 @@ class Madj2kFlyoutMenu {
    * Closes the flyout menu
    */
   close() {
-    const {$menu, $element, animationCloseStatusClass, openStatusClass} = this.settings;
+    const {$menu, $element, animationCloseStatusClass, openStatusClass, openStatusBodyClass, animationBodyClassPrefix} = this.settings;
+    const $body = document.body;
+
     if ($menu.classList.contains(openStatusClass) && !$menu.classList.contains(animationCloseStatusClass)) {
       document.dispatchEvent(new CustomEvent('madj2k-flyoutmenu-closing'));
 
+      this.toggleNoScroll();
+
       $menu.classList.add(animationCloseStatusClass);
       $element.classList.add(animationCloseStatusClass);
-      document.body.classList.add(`${this.settings.animationBodyClassPrefix}-${animationCloseStatusClass}`);
       $element.classList.remove(openStatusClass);
       $element.setAttribute('aria-expanded', false);
-
-      this.toggleNoScroll();
+      $body.classList.add(`${animationBodyClassPrefix}-${animationCloseStatusClass}`);
+      $body.classList.remove(openStatusBodyClass);
 
       this.settings.$menuContainer.style.transition = `top ${this.settings.animationDuration}ms`;
       this.settings.$menuContainer.style.top = '-100%';
@@ -302,7 +309,7 @@ class Madj2kFlyoutMenu {
       setTimeout(() => {
         $menu.classList.remove(openStatusClass, animationCloseStatusClass);
         $element.classList.remove(animationCloseStatusClass);
-        document.body.classList.remove(`${this.settings.animationBodyClassPrefix}-${animationCloseStatusClass}`);
+        $body.classList.remove(`${animationBodyClassPrefix}-${animationCloseStatusClass}`);
         document.dispatchEvent(new CustomEvent('madj2k-flyoutmenu-closed'));
       }, this.settings.animationDuration);
     }
@@ -334,29 +341,41 @@ class Madj2kFlyoutMenu {
       console.warn('Option "fullHeight" is deprecated. Please use "heightMode" instead.');
     }
 
-    let height = this.settings.$menuInner.offsetHeight || this.settings.$menu.offsetHeight;
+    // remove max-height for correct calculation
+    this.settings.$menu.classList.add(this.settings.heightCalculationClass);
+
+    const innerHeight = 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;
+    const refHeight = refObj.offsetHeight;
+    const flyoutTop = refPos.top + refHeight;
+    let newHeight = '';
 
     // heightMode "full" with deprecated fullHeight-setting as fallback
     if (this.settings.heightMode === 'full' || this.settings.fullHeight === true) {
+
+      // we use the viewport height because it may be the case that accordions are used here
       const viewPortHeight = window.innerHeight;
-      if (height < viewPortHeight) {
-        this.settings.$menu.style.height = `calc(100vh + ${flyoutTop}px)`;
+      if (innerHeight < (viewPortHeight - flyoutTop)) {
+        newHeight = `calc(100vh - ${flyoutTop}px)`;
       } else {
-        this.settings.$menu.style.height = `${height}px`;
+        newHeight = `${innerHeight}px`;
       }
 
     } else if (this.settings.heightMode === 'maxContent') {
-      this.settings.$menu.style.height = `max-content`;
+      newHeight = `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`;
+      newHeight = `${innerHeight}px`;
     }
+
+    // set max-height again so that longer flyouts do not lead to scrolling on smaller ones
+    this.settings.$menu.classList.remove(this.settings.heightCalculationClass);
+    this.settings.$menu.style.height = newHeight;
   }
 
+
   /**
    * Positions the menu based on the reference element
    */
@@ -406,28 +425,33 @@ class Madj2kFlyoutMenu {
    * Toggles scroll behavior of the page
    */
   toggleNoScroll() {
-    const body = document.body;
-    const helper = body.querySelector('.no-scroll-helper');
-    const inner = body.querySelector('.no-scroll-helper-inner');
-    let noScrollClass = this.settings.openStatusBodyClass;
 
-    if (document.documentElement.scrollHeight > window.innerHeight) {
-      noScrollClass += ' ' + this.settings.openStatusBodyClassOverflow;
-    }
+    // heightMode "full" with deprecated fullHeight-setting as fallback
+    if (this.settings.heightMode === 'full' || this.settings.fullHeight === true) {
+      const body = document.body;
+      const helper = body.querySelector('.no-scroll-helper');
+      const inner = body.querySelector('.no-scroll-helper-inner');
+      let noScrollClass ='';
+
+      if (document.documentElement.scrollHeight > window.innerHeight) {
+        noScrollClass = this.settings.openStatusBodyClassOverflow;
+      }
+
+      if (!body.classList.contains(this.settings.openStatusBodyClass)) {
+        const scrollTop = -document.documentElement.scrollTop;
+        helper.setAttribute('data-scroll-top', scrollTop);
+        helper.style.cssText = 'position:relative;overflow:hidden;height:100vh;width:100%';
+        inner.style.cssText = `position:absolute;top:${scrollTop}px;height:100%;width:100%`;
+        body.classList.add(noScrollClass);
+        window.scrollTo({top: 0, behavior: 'instant'});
+      } else {
+        const scrollTop = parseInt(helper.getAttribute('data-scroll-top') || '0') * -1;
+        helper.removeAttribute('style');
+        inner.removeAttribute('style');
+        body.classList.remove(this.settings.openStatusBodyClassOverflow);
+        window.scrollTo({top: scrollTop, behavior: 'instant'});
+      }
 
-    if (!body.classList.contains(this.settings.openStatusBodyClass)) {
-      const scrollTop = -document.documentElement.scrollTop;
-      helper.setAttribute('data-scroll-top', scrollTop);
-      helper.style.cssText = 'position:relative;overflow:hidden;height:100vh;width:100%';
-      inner.style.cssText = `position:absolute;top:${scrollTop}px;height:100%;width:100%`;
-      body.classList.add(...noScrollClass.split(' '));
-      window.scrollTo({top: 0, behavior: 'instant'});
-    } else {
-      const scrollTop = parseInt(helper.getAttribute('data-scroll-top') || '0') * -1;
-      helper.removeAttribute('style');
-      inner.removeAttribute('style');
-      body.classList.remove(this.settings.openStatusBodyClass, this.settings.openStatusBodyClassOverflow);
-      window.scrollTo({top: scrollTop, behavior: 'instant'});
     }
   }
 }

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

@@ -1,3 +1,7 @@
+html, body {
+    height: 100.1%; // enforce scrollbar
+}
+
 .flyout {
     position: absolute;
     left: 0;
@@ -5,12 +9,18 @@
 
     width: 100%;
     z-index: -1;
-    overflow:hidden;
+    overflow: hidden;
     visibility: hidden;
+    max-height: 0;
+
+    &.calculate {
+        max-height: none;
+    }
 
     &.open {
         z-index: 890;
         visibility: visible;
+        max-height: none;
 
         .flyout-container {
             pointer-events: auto;

package/package.json

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

package/readme.md

@@ -26,6 +26,179 @@ Or import individual mixins:
 ###  Menu components (JS and SCSS):
 Each menu component can be used separately.
 
+###  JS components (JS and SCSS):
+Each JS component can be used separately.
+
+
+# Flyout-Navigation
+## Usage
+Integrate the CSS- and JS-file into your project. Make sure jQuery is included.
+Then init the menu with
+```
+import { Madj2kFlyoutMenu } from '@madj2k/fe-frontend-kit/menus/flyout-menu';
+document.querySelectorAll('.js-flyout-toggle').forEach((el) => {
+  new Madj2kFlyoutMenu(el, { animationDuration: 800 });
+});
+```
+Optional for automatically closing of the flyout menu resizing the browser window:
+```
+import { Madj2kBetterResizeEvent } from '@madj2k/fe-frontend-kit/tools/better-resize-event';
+document.addEventListener('madj2k-better-resize-event', () => {
+    document.dispatchEvent(new CustomEvent('madj2k-flyoutmenu-close'));
+});
+```
+
+CSS:
+```
+@use '@madj2k/fe-frontend-kit/menus/flyout-menu' as *;
+```
+
+## Basic HTML
+```
+<div class="siteheader" id="siteheader">
+
+    [...]
+
+    <nav>
+        <button class="js-flyout-toggle"
+            aria-label="Open menu"
+            aria-controls="nav-mobile"
+            aria-haspopup="true"
+            aria-expanded="false">
+            <span class="icon-bars"></span>
+        </button>
+        <div class="flyout js-flyout"
+             id="nav-mobile"
+             data-position-ref="siteheader">
+            <div class="flyout-container js-flyout-container">
+                <div class="nav-mobile-inner js-flyout-inner">
+                    CONTENT HERE
+                </div>
+            </div>
+        </div>
+    </nav>
+</div>
+```
+IMPORTANT: If the siteheader is positioned with ```position:fixed```, 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 {
+    .siteheader {
+        position:absolute;
+    }
+}
+```
+## 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:
+```
+<div class="background-blur"></div>
+```
+Then we deactivate the fullHeight of the flyout menu and make the blurry background clickable
+```
+import { Madj2kFlyoutdownMenu } from '@madj2k/fe-frontend-kit/menus/flyout-menu';
+document.querySelectorAll('.js-flyout-toggle').forEach((el) => {
+  new Madj2kFlyoutMenu(el, { fullHeight: false });
+});
+document.querySelector('.js-background-blur').addEventListener('click', function() {
+    document.dispatchEvent(new CustomEvent('madj2k-flyoutmenu-close'));
+});
+```
+* And we need this additional CSS:
+```
+/**
+ * background-blur for opened flyout
+ */
+.background-blur {
+    position:fixed;
+    top:0;
+    left:0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(1px) grayscale(100%);
+    background-color: rgba(255, 255, 255, 0.7);
+    transition: opacity 0.3s ease-in-out;
+    opacity:0;
+    z-index:-1;
+}
+
+.flyout-open,
+.flyout-closing {
+    .background-blur {
+        z-index:90;
+    }
+}
+
+.flyout-open{
+    .background-blur {
+        opacity:1;
+    }
+ }
+
+
+```
+
+# Pulldown-Navigation
+## Usage
+Integrate the CSS- and JS-file into your project. Make sure jQuery is included.
+Then init the menu with
+```
+import { Madj2kPulldownMenu } from '@madj2k/fe-frontend-kit/menus/pulldown-menu';
+document.querySelectorAll('.js-pulldown-toggle').forEach((el) => {
+  new Madj2kPulldownMenu(el);
+});
+```
+Optional for automatically closing of the flyout menu resizing the browser window:
+```
+import { Madj2kBetterResizeEvent } from '@madj2k/fe-frontend-kit/tools/better-resize-event';
+document.addEventListener('madj2k-better-resize-event', () => {
+    document.dispatchEvent(new CustomEvent('madj2k-pulldownmenu-close'));
+});
+```
+
+CSS:
+```
+@use '@madj2k/fe-frontend-kit/menus/pulldown-menu' as *;
+```
+
+## Basic HTML
+```
+<div class="siteheader">
+
+    [...]
+
+    <nav class="pulldown-wrap js-pulldown-wrap">
+        <button class="pulldown-toggle js-pulldown-toggle"
+           aria-label="Open Menu"
+           aria-controls="nav-language"
+           aria-haspopup="true"
+           aria-expanded="false">
+            <span>Menu-Item Level 1</span>
+        </button>
+
+        <div class="pulldown js-pulldown" id="nav-language">
+            <div class="pulldown-inner">
+                <ul>
+                    <!-- used to have the right padding-top of the pulldown -->
+                    <li class="pulldown-hide">
+                        <a href="#" tabIndex="-1"><span>Menu-Item Level 1</span></a>
+                    </li>
+                    <li>
+                        <a href="#"><span>Menu-Item I Level 2</span></a>
+                    </li>
+                    <li>
+                        <a href="#"><span>Menu-Item II Level 2</span></a>
+                    </li>
+                    <li>
+                        ...
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+</div>
+```
+
+
 # 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.
@@ -218,177 +391,36 @@ HTML:
 </div>
 ```
 
-# Flyout-Navigation
-## Usage
-Integrate the CSS- and JS-file into your project. Make sure jQuery is included.
-Then init the menu with
-```
-import { Madj2kFlyoutMenu } from '@madj2k/fe-frontend-kit/menus/flyout-menu';
-document.querySelectorAll('.js-flyout-toggle').forEach((el) => {
-  new Madj2kFlyoutMenu(el, { animationDuration: 800 });
-});
-```
-Optional for automatically closing of the flyout menu resizing the browser window:
-```
-import { Madj2kBetterResizeEvent } from '@madj2k/fe-frontend-kit/tools/better-resize-event';
-document.addEventListener('madj2k-better-resize-event', () => {
-    document.dispatchEvent(new CustomEvent('madj2k-flyoutmenu-close'));
-});
-```
-
-CSS:
-```
-@use '@madj2k/fe-frontend-kit/menus/flyout-menu' as *;
-```
-
-## Basic HTML
-```
-<div class="siteheader" id="siteheader">
-
-    [...]
-
-    <nav>
-        <button class="js-flyout-toggle"
-            aria-label="Open menu"
-            aria-controls="nav-mobile"
-            aria-haspopup="true"
-            aria-expanded="false">
-            <span class="icon-bars"></span>
-        </button>
-        <div class="flyout js-flyout"
-             id="nav-mobile"
-             data-position-ref="siteheader">
-            <div class="flyout-container js-flyout-container">
-                <div class="nav-mobile-inner js-flyout-inner">
-                    CONTENT HERE
-                </div>
-            </div>
-        </div>
-    </nav>
-</div>
-```
-IMPORTANT: If the siteheader is positioned with ```position:fixed```, 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 {
-    .siteheader {
-        position:absolute;
-    }
-}
-```
-## 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:
-```
-<div class="background-blur"></div>
-```
-Then we deactivate the fullHeight of the flyout menu and make the blurry background clickable
-```
-import { Madj2kFlyoutdownMenu } from '@madj2k/fe-frontend-kit/menus/flyout-menu';
-document.querySelectorAll('.js-flyout-toggle').forEach((el) => {
-  new Madj2kFlyoutMenu(el, { fullHeight: false });
-});
-document.querySelector('.js-background-blur').addEventListener('click', function() {
-    document.dispatchEvent(new CustomEvent('madj2k-flyoutmenu-close'));
-});
-```
-* And we need this additional CSS:
-```
-/**
- * Prevent jumping because of scrollbar
- */
-html,body {
-    min-height: 100.1%;
-}
-
-/**
- * background-blur for opened flyout
- */
-.background-blur {
-    position:fixed;
-    top:0;
-    left:0;
-    width: 100%;
-    height: 100%;
-    backdrop-filter: blur(1px) grayscale(100%);
-    background-color: rgba(255, 255, 255, 0.7);
-    transition: opacity 0.3s ease-in-out;
-    opacity:0;
-    z-index:-1;
-}
-
-.flyout-open,
-.flyout-closing {
-    .background-blur {
-        z-index:90;
-    }
-}
-
-.flyout-open{
-    .background-blur {
-        opacity:1;
-    }
- }
-
+# JS: Simple Fade Slider
+A lightweight fade slider using opacity and z-index.
+- Purely DOM based (no keyframes required)
+- Automatic looping through an arbitrary number of slides
+- Fully accessible with aria-hidden management
+- Configurable via options
+- Designed for CMS contexts with dynamic content
 
+Init with available options:
 ```
-
-# Pulldown-Navigation
-## Usage
-Integrate the CSS- and JS-file into your project. Make sure jQuery is included.
-Then init the menu with
-```
-import { Madj2kPulldownMenu } from '@madj2k/fe-frontend-kit/menus/pulldown-menu';
-document.querySelectorAll('.js-pulldown-toggle').forEach((el) => {
-  new Madj2kPulldownMenu(el);
-});
-```
-Optional for automatically closing of the flyout menu resizing the browser window:
-```
-import { Madj2kBetterResizeEvent } from '@madj2k/fe-frontend-kit/tools/better-resize-event';
-document.addEventListener('madj2k-better-resize-event', () => {
-    document.dispatchEvent(new CustomEvent('madj2k-pulldownmenu-close'));
+import { Madj2kSimpleFadeSlider } from '@madj2k/fe-frontend-kit/tools/simple-fade-slider';
+const fadeSlider = new Madj2kSimpleFadeSlider('.js-fade-slider', {
+    duration: 8,
+    classSlide: 'fade-slider-item',
+    classVisible: 'is-visible',
+    debug: true
 });
 ```
 
-CSS:
-```
-@use '@madj2k/fe-frontend-kit/menus/pulldown-menu' as *;
-```
-
-## Basic HTML
+HTML:
 ```
-<div class="siteheader">
-
-    [...]
-
-    <nav class="pulldown-wrap js-pulldown-wrap">
-        <button class="pulldown-toggle js-pulldown-toggle"
-           aria-label="Open Menu"
-           aria-controls="nav-language"
-           aria-haspopup="true"
-           aria-expanded="false">
-            <span>Menu-Item Level 1</span>
-        </button>
-
-        <div class="pulldown js-pulldown" id="nav-language">
-            <div class="pulldown-inner">
-                <ul>
-                    <!-- used to have the right padding-top of the pulldown -->
-                    <li class="pulldown-hide">
-                        <a href="#" tabIndex="-1"><span>Menu-Item Level 1</span></a>
-                    </li>
-                    <li>
-                        <a href="#"><span>Menu-Item I Level 2</span></a>
-                    </li>
-                    <li>
-                        <a href="#"><span>Menu-Item II Level 2</span></a>
-                    </li>
-                    <li>
-                        ...
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-</div>
+<section class="fade-slider js-fade-slider" aria-label="Image gallery">
+    <div class="fade-slider-item">
+        <img src="img1.jpg" alt="Description 1">
+    </div>
+    <div class="fade-slider-item">
+        <img src="img2.jpg" alt="Description 2">
+    </div>
+    <div class="fade-slider-item">
+        <img src="img3.jpg" alt="Description 3">
+    </div>
+</section>
 ```

package/sass/bootstrap-5.3/10_mixins/_nav.scss

@@ -268,11 +268,24 @@
 /// @param {Color} $icon-color - Icon color (e.g., fill or text color). Defaults to `$color-primary`.
 /// @param {Map} $icon-mappings - Map of icon toggle states (e.g., hamburger → close). Defaults to a predefined map.
 ///
-/// @example html
+/// @example html with icon font
+///   <button class="nav-toggle" aria-expanded="false">
+///     <i class="nav-toggle-icon icon-hamburger icon"></i>
+///   </button>
+///
+/// @example html with icon sprite
 ///   <button class="nav-toggle" aria-expanded="false">
-///     <i class="nav-toggle-icon icon-hamburger"></i>
+///     <i class="nav-toggle-icon">
+///         <svg class="nav-toggle-icon-opened" aria-hidden="true" focusable="false">
+///             <use href="sprite.svg#search"></use>
+///         </svg>
+///         <svg class="nav-toggle-icon-closed" aria-hidden="true" focusable="false">
+///             <use href="sprite.svg#close"></use>
+///         </svg>
+///     </i>
 ///   </button>
 ///
+///
 /// @example scss
 ///   .nav-toggle {
 ///     @include nav-toggle(
@@ -305,6 +318,7 @@
         display: flex;
         align-items: center;
 
+        // variant with icons as font
         &[aria-expanded="true"] {
             @each $icon-class, $content in $icon-mappings {
                 .#{$icon-class} {
@@ -314,11 +328,30 @@
                 }
             }
         }
+
+        // variant with icons in a sprite
+        .nav-toggle-icon-opened {
+            display: none;
+        }
+
+        &[aria-expanded="true"] {
+            .nav-toggle-icon-opened {
+                display: inline-block;
+            }
+            .nav-toggle-icon-closed {
+                display: none;
+            }
+        }
     }
 
-    &-icon {
+    &-icon:not(:has(svg)),
+    &-icon svg {
         font-size: rem-calc($icon-size);
         width: rem-calc($icon-size);
         color: $icon-color;
     }
+
+    &-icon svg {
+        height: 100%;
+    }
 }

package/tools/simple-fade-slider/index.js

@@ -0,0 +1,2 @@
+import Madj2kSimpleFadeSlider from './simple-fade-slider-2.0';
+export { Madj2kSimpleFadeSlider };

package/tools/simple-fade-slider/index.scss

@@ -0,0 +1 @@
+@forward './simple-fade-slider-2.0';

package/tools/simple-fade-slider/simple-fade-slider-2.0.js

@@ -0,0 +1,148 @@
+/**
+ * Madj2kSimpleFadeSlider
+ *
+ * A lightweight fade slider using opacity and z-index.
+ * - Purely DOM based (no keyframes required)
+ * - Automatic looping through an arbitrary number of slides
+ * - Fully accessible with aria-hidden management
+ * - Configurable via options
+ * - Designed for CMS contexts with dynamic content
+ *
+ * @author Steffen Kroggel <developer@steffenkroggel.de>
+ * @copyright 2025 Steffen Kroggel
+ * @version 1.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 slider = new Madj2kSimpleFadeSlider('.js-fade-sliderr');
+ *
+ * @example
+ * // Initialize with custom config
+ * const slider = new Madj2kSimpleFadeSlider('.js-fade-sliderr', {
+ *   duration: 8,
+ *   classSlide: 'fade-slider-item',
+ *   classVisible: 'is-visible',
+ *   debug: true
+ * });
+ *
+ * @example
+ * // Example HTML
+ * <section class="fade-slider js-fade-sliderr" aria-label="Image gallery">
+ *   <div class="fade-slider-item"><img src="img1.jpg" alt="Description 1"></div>
+ *   <div class="fade-slider-item"><img src="img2.jpg" alt="Description 2"></div>
+ *   <div class="fade-slider-item"><img src="img3.jpg" alt="Description 3"></div>
+ * </section>
+ *
+ * @example
+ * // Example SCSS
+ * .fade-slider {
+ *   position: relative;
+ *   height: 300px;
+ *   overflow: hidden;
+ * }
+ *
+ * .fade-slide, .fade-slider-item {
+ *   position: absolute;
+ *   inset: 0;
+ *   opacity: 0;
+ *   z-index: 1;
+ *   transition: opacity 1s ease-in-out;
+ * }
+ *
+ * .fade-slide.is-visible, .fade-slider-item.is-visible {
+ *   opacity: 1;
+ *   z-index: 2;
+ * }
+ */
+
+class Madj2kSimpleFadeSlider {
+  config = {
+    duration: 12,
+    classSlide: 'fade-slide',
+    classVisible: 'is-visible',
+    debug: false
+  };
+
+  /**
+   * @param {string} selector - CSS selector for the slider container
+   * @param {Object} config - configuration options
+   * @param {number} [config.duration=12] - time in seconds between slide changes
+   * @param {string} [config.classSlide='fade-slide'] - class for each slide
+   * @param {string} [config.classVisible='is-visible'] - class for visible slide
+   * @param {boolean} [config.debug=false] - enable debug logging
+   */
+  constructor(selector, config = {}) {
+    this.container = document.querySelector(selector);
+    if (!this.container) return;
+
+    this.config = {
+      ...this.config,
+      ...config
+    };
+
+    this.slides = Array.from(this.container.querySelectorAll(`.${this.config.classSlide}`));
+    this.total = this.slides.length;
+    this.current = 0;
+
+    this._log('Initialized with config:', this.config);
+
+    this.setup();
+    this.start();
+  }
+
+  /**
+   * Initializes all slides
+   * @private
+   */
+  setup() {
+    this.slides.forEach((slide, index) => {
+      slide.classList.add(this.config.classSlide);
+      slide.setAttribute('aria-hidden', index === 0 ? 'false' : 'true');
+    });
+    if (this.slides[0]) {
+      this.slides[0].classList.add(this.config.classVisible);
+    }
+  }
+
+  /**
+   * Starts the automatic fade loop
+   * @private
+   */
+  start() {
+    setInterval(() => this.showNext(), this.config.duration * 1000);
+  }
+
+  /**
+   * Shows the next slide
+   * @private
+   */
+  showNext() {
+    const currentSlide = this.slides[this.current];
+    if (currentSlide) {
+      currentSlide.classList.remove(this.config.classVisible);
+      currentSlide.setAttribute('aria-hidden', 'true');
+    }
+
+    this.current = (this.current + 1) % this.total;
+
+    const nextSlide = this.slides[this.current];
+    if (nextSlide) {
+      nextSlide.classList.add(this.config.classVisible);
+      nextSlide.setAttribute('aria-hidden', 'false');
+    }
+
+    this._log('Switched to slide', this.current);
+  }
+
+  /**
+   * Debug logging helper
+   * @private
+   */
+  _log(...args) {
+    if (this.config.debug) {
+      console.log('[Madj2kSimpleFadeSlider]', ...args);
+    }
+  }
+}

package/tools/simple-fade-slider/simple-fade-slider-2.0.scss

@@ -0,0 +1,18 @@
+.fade-slider {
+    position: relative;
+    height: 100vh;
+    overflow: hidden;
+
+    &-item {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        z-index: 1;
+        transition: opacity 1s ease-in-out;
+
+        &.is-visible {
+            opacity: 1;
+            z-index: 2;
+        }
+    }
+}