chore: complete update

resources/js/modules/scroll-timeline/index.js

@@ -0,0 +1,53 @@
+// modules/scroll-timeline/index.js
+import { Logger } from '../../core/logger.js';
+import { scrollSteps } from './steps.js';
+import {registerFrameTask, unregisterFrameTask} from '../../core/frameloop.js';
+
+export function init(userConfig = {}) {
+    Logger.info('ScrollTimeline init');
+
+    const defaultConfig = {
+        attribute: 'data-scroll-step',
+        triggerPoint: 0.4,
+        once: true
+    };
+
+    const config = { ...defaultConfig, ...userConfig };
+
+    const steps = Array.from(document.querySelectorAll(`[${config.attribute}]`)).map(el => ({
+        el,
+        index: parseInt(el.getAttribute(config.attribute), 10),
+        active: false
+    }));
+
+    function update() {
+        const triggerY = window.innerHeight * config.triggerPoint;
+
+        steps.forEach(step => {
+            const rect = step.el.getBoundingClientRect();
+            const isVisible = rect.top < triggerY && rect.bottom > 0;
+
+            if (isVisible && !step.active) {
+                step.active = true;
+                step.el.classList.add('active');
+                Logger.log(`➡️ ENTER step ${step.index}`);
+                scrollSteps.onEnter?.(step.index, step.el);
+            }
+
+            if (!isVisible && step.active) {
+                step.active = false;
+                step.el.classList.remove('active');
+                Logger.log(`⬅️ LEAVE step ${step.index}`);
+                if (!config.once) {
+                    scrollSteps.onLeave?.(step.index, step.el);
+                }
+            }
+        });
+    }
+
+    registerFrameTask('scroll-timeline', update, { autoStart: true });
+}
+
+export function destroy () {
+    unregisterFrameTask('scroll-timeline');
+}

resources/js/modules/scroll-timeline/steps.js

@@ -0,0 +1,33 @@
+export const scrollSteps = {
+    onEnter(index, el) {
+        el.classList.add('active');
+        document.body.dataset.activeScrollStep = index;
+        console.log(`[ScrollStep] Enter: ${index}`);
+        // Beispielaktionen
+        if (index === 1) showIntro();
+        if (index === 2) activateChart();
+        if (index === 3) revealQuote();
+    },
+
+    onLeave(index, el) {
+        el.classList.remove('active');
+        el.style.transitionDelay = '';
+        console.log(`[ScrollStep] Leave: ${index}`);
+
+        if (document.body.dataset.activeScrollStep === String(index)) {
+            delete document.body.dataset.activeScrollStep;
+        }
+
+        if (index === 1) hideIntro();
+        if (index === 2) deactivateChart();
+        if (index === 3) hideQuote();
+    }
+};
+
+
+function showIntro()   { console.log('Intro sichtbar'); }
+function hideIntro()   { console.log('Intro ausgeblendet'); }
+function activateChart() { console.log('Chart aktiviert'); }
+function deactivateChart() { console.log('Chart deaktiviert'); }
+function revealQuote() { console.log('Zitat eingeblendet'); }
+function hideQuote()   { console.log('Zitat ausgeblendet'); }