@madj2k/fe-frontend-kit 2.0.25 → 2.0.27

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madj2k/fe-frontend-kit",
-  "version": "2.0.25",
+  "version": "2.0.27",
   "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,170 +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:
-```
-/**
- * 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
 
-# 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:
+Init with available options:
 ```
-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/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-slider');
+ *
+ * @example
+ * // Initialize with custom config
+ * const slider = new Madj2kSimpleFadeSlider('.js-fade-slider', {
+ *   duration: 8,
+ *   classSlide: 'fade-slider-item',
+ *   classVisible: 'is-visible',
+ *   debug: true
+ * });
+ *
+ * @example
+ * // Example HTML
+ * <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>
+ *
+ * @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-slider-item',
+    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;
+        }
+    }
+}