@profitlich/template-toolkit 2.18.7 → 2.20.0

package/components/menu-toggle/MenuToggle.js

@@ -8,18 +8,22 @@ export class MenuToggle {
     #menuItemClass;
     #scrollbarWidth;
     #shiftElement;
+    #shiftDelay;
+    #deferPositionFixed;
     #y;
     #bodyClickHandler;
     #resizeHandler;
     #escapeHandler;
     isActive;
 
-    constructor(menuButtonId, menuId, menuLinkClass, menuItemClass, shiftElementId) {
+    constructor(menuButtonId, menuId, menuLinkClass, menuItemClass, shiftElementId, shiftDelay = 0, deferPositionFixed = false) {
         this.#menuButton = document.getElementById(menuButtonId);
         this.#menu = document.getElementById(menuId);
         this.#menuLinkClass = menuLinkClass;
         this.#menuItemClass = menuItemClass;
         this.#shiftElement = shiftElementId ? document.getElementById(shiftElementId) : null;
+        this.#shiftDelay = shiftDelay * 1000;
+        this.#deferPositionFixed = deferPositionFixed;
         this.#scrollbarWidth = 0;
         this.isActive = false;
         this.#y = 0;
@@ -39,14 +43,18 @@ export class MenuToggle {
                 this.#toggleMenu();
             }
         });
+
+        this.#setBodyAttribute('data-menu-active', 'false');
+        this.#setBodyAttribute('data-menu-moving', 'false');
+        this.#setBodyAttribute('data-menu-fixed', 'false');
     }
 
-    static getInstance(menuButtonId, menuId, menuLinkClass, menuItemClass, shiftElementId) {
+    static getInstance(menuButtonId, menuId, menuLinkClass, menuItemClass, shiftElementId, shiftDelay, deferPositionFixed) {
         if (!MenuToggle.#instance) {
             if (!menuButtonId || !menuId || !menuLinkClass || !menuItemClass) {
                 throw new Error("MenuToggle muss beim ersten Aufruf mit menuButtonId, menuId, menuLinkClass und menuItemClass initialisiert werden.");
             }
-            MenuToggle.#instance = new MenuToggle(menuButtonId, menuId, menuLinkClass, menuItemClass, shiftElementId);
+            MenuToggle.#instance = new MenuToggle(menuButtonId, menuId, menuLinkClass, menuItemClass, shiftElementId, shiftDelay, deferPositionFixed);
         }
         return MenuToggle.#instance;
     }
@@ -57,6 +65,7 @@ export class MenuToggle {
             document.body.removeEventListener('click', this.#bodyClickHandler);
             window.removeEventListener('resize', this.#resizeHandler);
             this.#setBodyAttribute('data-menu-active', 'false');
+            this.#setBodyAttribute('data-menu-fixed', 'false');
             if (this.#shiftElement) {
                 this.#shiftElement.style.marginRight = '';
                 this.#shiftElement.style.width = '';
@@ -69,16 +78,26 @@ export class MenuToggle {
             this.isActive = true;
             document.body.addEventListener('click', this.#bodyClickHandler);
             window.addEventListener('resize', this.#resizeHandler);
-            this.#scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-            this.#y = window.scrollY;
             this.#setBodyAttribute('data-menu-active', 'true');
-            document.body.style.paddingRight = `${this.#scrollbarWidth}px`;
-            document.body.style.top = `-${this.#y}px`;
-            if (this.#shiftElement) {
-                const marginOriginal = parseFloat(window.getComputedStyle(this.#menuButton).marginRight);
-                this.#shiftElement.style.marginRight = `${marginOriginal + this.#scrollbarWidth}px`;
-                this.#adjustShiftElementWidth();
+            this.#setBodyAttribute('data-menu-moving', 'true');
+            if (!this.#deferPositionFixed) {
+                this.#setBodyAttribute('data-menu-fixed', 'true');
             }
+            setTimeout(() => {
+                this.#scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+                this.#y = window.scrollY;
+                document.body.style.paddingRight = `${this.#scrollbarWidth}px`;
+                document.body.style.top = `-${this.#y}px`;
+                if (this.#deferPositionFixed) {
+                    this.#setBodyAttribute('data-menu-fixed', 'true');
+                }
+                if (this.#shiftElement) {
+                    const marginOriginal = parseFloat(window.getComputedStyle(this.#menuButton).marginRight);
+                    this.#shiftElement.style.marginRight = `${marginOriginal + this.#scrollbarWidth}px`;
+                    this.#adjustShiftElementWidth();
+                }
+                this.#setBodyAttribute('data-menu-moving', 'false');
+            }, this.#shiftDelay);
             this.#toggleEscape(true);
         }
         const event = new CustomEvent('eventMenuestatus', {

package/components/menu-toggle/menu-toggle.scss

@@ -1,9 +1,11 @@
 body {
 
-    &[data-menu-active="true"] {
+    &[data-menu-fixed="true"] {
         position: fixed;
         width: 100%;
+    }
 
+    &[data-menu-active="true"] {
         // Bedeckt das Menü nur einen Teil der Seite, ist also ein Teil der Seite weiterhin zu sehen,
         // soll die Maus Interaktionen ausserhalb des Menüs ignorieren
         .main {

package/components/mux-player/MuxPlayer.js

@@ -1,6 +1,25 @@
 import '@mux/mux-player';
 import './mux-player.scss';
 
+/**
+ * Lädt Mux-Videos lazy und steuert Autoplay per IntersectionObserver.
+ *
+ * Ladereihenfolge:
+ * 1. observeLazyElements() beobachtet alle .mux-player-Container.
+ * 2. Betritt ein Container den Viewport, ersetzt #handleLazyLoad ihn durch
+ *    ein <mux-player>-Element und ruft handleVisibilityChange auf.
+ * 3. handleVisibilityChange → #setup für alle sichtbaren Videos:
+ *    - Autoplay: muted, Controls versteckt, #playPauseObserver startet
+ *    - Kein Autoplay: keine Änderungen, User steuert Wiedergabe selbst
+ *    - display:none beim Laden: Setup wird übersprungen; Projekt ruft
+ *      handleVisibilityChange erneut auf, sobald das Video sichtbar wird.
+ * 4. onPlayerCreated (optional): wird für alle Player aufgerufen, unabhängig
+ *    von Autoplay und nach dem internen Setup.
+ *
+ * Pausierlogik:
+ * - Viewport verlassen → #handlePlayPause via IntersectionObserver (nur Autoplay)
+ * - display:none gesetzt → handleVisibilityChange (manuell vom Projekt aufzurufen)
+ */
 export class MuxPlayer {
     #lazyLoadObserver;
     #playPauseObserver;
@@ -36,16 +55,19 @@ export class MuxPlayer {
         // Flag setzen, um zukünftige Ausführungen zu verhindern.
         player.dataset.isSetup = 'true';
 
-        // Den playPauseObserver starten, sobald die Daten geladen sind.
-        if (player.readyState >= 2) { // HAVE_CURRENT_DATA oder höher
-            this.#playPauseObserver.observe(player);
-        } else {
-            player.addEventListener('loadeddata', () => {
+        if (autoplay) {
+            if (player.readyState >= 2) { // HAVE_CURRENT_DATA oder höher
                 this.#playPauseObserver.observe(player);
-            }, { once: true });
+            } else {
+                player.addEventListener('loadeddata', () => {
+                    this.#playPauseObserver.observe(player);
+                }, { once: true });
+            }
         }
     }
 
+    // Für Videos, die ein-/ausgeblendet werden
+    // zum Beispiel Startseite Angebote
     handleVisibilityChange(player) {
         const isVisible = window.getComputedStyle(player).display !== 'none';
 
@@ -100,13 +122,16 @@ export class MuxPlayer {
 
                 if (autoplay) {
                     player.setAttribute('data-autoplay', 'true');
+                } else {
+                    player.setAttribute('data-autoplay', 'false');
                 }
 
-                const setPlaying = value => player.setAttribute('data-playing', value);
+                const setStatus = value => player.setAttribute('data-status', value);
 
-                player.addEventListener('playing', () => setPlaying('true'));
-                player.addEventListener('pause', () => setPlaying('pause'));
-                player.addEventListener('ended', () => setPlaying('ended'));
+                player.addEventListener('loadstart', () => setStatus('loadstart'));
+                player.addEventListener('playing', () => setStatus('playing'));
+                player.addEventListener('pause', () => setStatus('pause'));
+                player.addEventListener('ended', () => setStatus('ended'));
 
                 console.log(
                     'Toolkit Video',
@@ -116,17 +141,17 @@ export class MuxPlayer {
                 );
 
                 container.replaceWith(player);
-                setPlaying('false');
+                setStatus('false');
 
+                this.handleVisibilityChange(player);
                 if (this.#onPlayerCreated) {
                     this.#onPlayerCreated(player, container);
-                } else if (autoplay) {
-                    this.handleVisibilityChange(player);
                 }
             }
         }
     }
 
+    // Für autoplay Videos: play und pause
     #handlePlayPause(entries) {
         for (const entry of entries) {
             const player = entry.target;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@profitlich/template-toolkit",
-    "version": "2.18.7",
+    "version": "2.20.0",
     "description": "Shared SCSS layout system, JS utilities, components and build scripts for profitlich template repos",
     "type": "module",
     "exports": {