https://www.luxentu.de/templates/NIUplus/js/niu-app/niu.scrollMore.js?v=7.14.0

1import NiuBase from "niu-base";
2
3class NiuScrollMore extends NiuBase{
4    static Selectors = {
5        wrapper:()=>{return'.niu-scroll-more-wrapper'},
6        container:'.niu-scroll-more-container',
7        indicator:'.niu-scroll-more-indicator',
8        indicatorInner:'.niu-scroll-more-indicator-inner'
9
10    }
11
12    constructor(wrapper) {
13        super(wrapper);
14        this.container = false;
15        this.indicatorInner = false;
16        this.indicator = false;
17        this.mutationObserver = false;
18        this.resizeObserver = false;
19        // Methode binden, damit sie auch als Event-Handler / Observer-Callback
20        // mit korrektem `this` laeuft.
21        this.updateIndicatorVisibility = this.updateIndicatorVisibility.bind(this);
22    }
23
24    init(){
25        this.container = this.wrapper.querySelector(NiuScrollMore.Selectors.container);
26        this.indicator = this.wrapper.querySelector(NiuScrollMore.Selectors.indicator);
27        if(!this.container || !this.indicator)return;
28        // indicatorInner liegt INNERHALB des indicator, nicht im container.
29        this.indicatorInner = this.indicator.querySelector(NiuScrollMore.Selectors.indicatorInner);
30
31        // Erst-Check synchron + nochmal nach Layout-Pass.
32        // Beim ersten Lauf koennen Bilder/Collapse die finale Container-Hoehe
33        // noch nicht ermittelt haben.
34        this.updateIndicatorVisibility();
35        requestAnimationFrame(this.updateIndicatorVisibility);
36
37        window.addEventListener('resize', this.updateIndicatorVisibility);
38
39        // ResizeObserver: faengt Hoehenaenderungen ab, die ohne Window-Resize passieren
40        // (Bilder laden nach, parent-Collapse oeffnet, Item entfernt, ...).
41        if(typeof ResizeObserver !== 'undefined'){
42            this.resizeObserver = new ResizeObserver(this.updateIndicatorVisibility);
43            this.resizeObserver.observe(this.container);
44        }
45
46        // MutationObserver: faengt strukturelle DOM-Aenderungen ab.
47        this.mutationObserver = new MutationObserver(this.updateIndicatorVisibility);
48        this.mutationObserver.observe(this.container,{childList:true, subtree:true});
49
50        this.container.addEventListener('scroll',()=>{
51            // Toggle der hidden-Klasse reicht – die Animation laeuft per CSS-Transition
52            // auf .niu-scroll-more-indicator-inner (transform + opacity). Kein
53            // Animation-Reset-Trick noetig.
54            if(this.container.scrollTop > 10){
55                this.indicator.classList.add('hidden');
56            }else{
57                this.indicator.classList.remove('hidden');
58            }
59        });
60
61        this.indicator.addEventListener('click',()=>{
62            this.container.scroll({
63                top: this.container.scrollTop + 200,
64                left: 0,
65                behavior: "smooth",
66            });
67        });
68
69        // Erbt-Verhalten von NiuBase: dzmInit-Flag setzen, damit ein erneuter
70        // Scan() den Wrapper nicht doppelt initialisiert (sonst stapeln sich
71        // Observer und Listener bei jedem dzm-Event-Trigger).
72        super.init();
73        this.register();
74    }
75
76    updateIndicatorVisibility(){
77        if(!this.container || !this.indicator)return;
78        // +1 Toleranz fuer subpixel-Rundung in einigen Browsern.
79        const hasOverflow = this.container.scrollHeight > this.container.clientHeight + 1;
80        if(hasOverflow){
81            this.indicator.style.display = 'flex';
82        }else{
83            this.indicator.style.display = 'none';
84            // Falls die hidden-Class noch von einem frueheren Scroll-State haengt: zuruecksetzen.
85            this.indicator.classList.remove('hidden');
86        }
87    }
88
89
90
91
92    register(){
93
94
95    }
96
97
98}
99
100NiuBase.listenTo([
101    dzm.events.controller.initialized
102
103],()=>{
104
105    NiuScrollMore.Scan()
106})