https://www.bodenfuchs24.de/templates/NIUplus/js/niu-app/niu.slider.js?v=4.7.1

1
2class NiuSlider {
3    static SliderTypes = {
4        productDetailsBox: 'productDetailsBox',
5        productDetailsSlider:'productDetailsSlider',
6        lightbox:'lightbox',
7        categorySlider:'categorySlider',
8        categorySliderAutoWidth:'categorySliderAutoWidth',
9        recommendations:'recommendations',
10        niuCategoryImageSlider:'niuCategoryImageSlider',
11        niuCategoryTextSlider:'niuCategoryTextSlider'
12
13    }
14    static Selectors = {
15        wrapper:(id='')=>{return'[data-niu-slider'+(id!==''?'='+id:'')+']'},
16        type:(type='')=>{return'[data-niu-slider-type'+(type!==''?'='+type:'')+']'},
17        sliderWrapper:'[data-niu-slider-slider]',
18        thumbnailsWrapper:'[data-niu-slider-thumbnails]',
19        lightboxTrigger:'[data-niu-lightbox-trigger]'
20    }
21
22    constructor(wrapper = null) {
23        this.wrapper = wrapper;
24        this.type = '';
25    }
26
27    static Scan(types = []){
28        let wrappers = [];
29        if(types.length === 0){
30            wrappers = document.querySelectorAll(NiuSlider.Selectors.wrapper());
31        }
32        else{
33            types.forEach(t=>{
34                wrappers = [...wrappers,...Array.from(document.querySelectorAll(NiuSlider.Selectors.type(t)))];
35            })
36        }
37        wrappers.forEach(wrapper=>{
38            if('dzmInit' in wrapper.dataset){
39
40            }else{
41                (new NiuSlider(wrapper)).init();
42            }
43        });
44    }
45    static mount(selector,options = null){
46        const wrapper = document.querySelector(selector);
47        if(!wrapper){
48            console.error('no wrapper found for',selector);
49            return;
50        }
51        (new NiuSlider(wrapper)).init(options);
52    }
53    init(options = null){
54        this.type = this.wrapper.dataset[NiuSlider.selectorToAttribute(NiuSlider.Selectors.type())];
55        if(!this.type){
56            console.error('type missing', this);
57            return;
58        }
59        switch (this.type){
60            case NiuSlider.SliderTypes.productDetailsBox:
61                this.initProductDetailsBox();
62                break;
63            case NiuSlider.SliderTypes.productDetailsSlider:
64                this.initProductDetailsSlider();
65                break;
66            case NiuSlider.SliderTypes.lightbox:
67                this.initLightBox();
68                break;
69            case NiuSlider.SliderTypes.categorySlider:
70                this.initCategorySlider();
71                break;
72            case NiuSlider.SliderTypes.categorySliderAutoWidth:
73                this.initCategorySliderAutoWidth();
74                break;
75            case NiuSlider.SliderTypes.niuCategoryImageSlider:
76                this.initNiuCategoryImageSlider(options);
77                break;
78            case NiuSlider.SliderTypes.niuCategoryTextSlider:
79                this.initNiuCategoryTextSlider(options);
80                break;
81            case NiuSlider.SliderTypes.recommendations:
82                this.initRecommendations();
83                break;
84
85            default:
86                console.error('unknown slidertyoe', this.type);
87                break;
88        }
89        this.wrapper.dataset.dzmInit = ''
90    }
91
92    initProductDetailsBox(){
93        const sliderWrapper = this.wrapper.querySelector(NiuSlider.Selectors.sliderWrapper);
94        if(!sliderWrapper){
95            console.error('no slider found for', this.wrapper);
96            return;
97        }
98
99        const slider = new Splide(sliderWrapper,{
100            type         : 'slide',
101            cloneStatus  : false,
102            cover        : false,
103            pagination      : true,
104            arrowPath       : niu.settings.slider.arrowPath !== '' ? niu.settings.slider.arrowPath : 'M 11.0058 2.2077 a 1.3997 1.3997 90 0 1 1.9819 0 l 16.7962 16.7962 a 1.3997 1.3997 90 0 1 0 1.9819 l -16.7962 16.7962 a 1.3997 1.3997 90 0 1 -1.9819 -1.9819 L 26.8138 19.9949 L 11.0058 4.1897 a 1.3997 1.3997 90 0 1 0 -1.9819 z',
105            lazyLoad        : true,
106            updateOnMove    : true,
107            perPage         : 1,
108            perMove         : 1,
109        });
110        slider.on( 'overflow', function ( isOverflow ) {
111            slider.options = {
112                arrows    : isOverflow,
113                pagination: isOverflow,
114                drag      : isOverflow,
115            };
116        } );
117        slider.mount();
118    }
119
120    initProductDetailsSlider(){
121        const sliderWrapper = this.wrapper.querySelector(NiuSlider.Selectors.sliderWrapper);

122        if(!sliderWrapper){
123            console.error('no slider found for', this.wrapper);
124            return;
125        }
126        const thumbnailsWrapper = this.wrapper.querySelector(NiuSlider.Selectors.thumbnailsWrapper);
127        if(!thumbnailsWrapper){
128            console.error('no thumbnails found for', this.wrapper);
129            return;
130        }
131        const slider = new Splide( sliderWrapper, {
132            type       : 'fade',
133            pagination : false,
134            arrows     : false,
135        } );
136
137        const thumbnails = new Splide( thumbnailsWrapper, {
138            rewind          : true,
139            fixedWidth      : 104,
140            isNavigation    : true,
141            gap             : 10,
142            focus           : '0',
143            pagination      : false,
144            cover           : false,
145            arrows          : false,
146            dragMinThreshold: {
147                mouse: 4,
148                touch: 10,
149            },
150            breakpoints : {
151                640: {
152                    fixedWidth  : '66px',
153                    fixedHeight : '66px',
154                },
155            },
156        } );
157        slider.sync( thumbnails );
158        slider.mount();
159        thumbnails.mount();
160
161    }
162
163    initLightBox(){
164
165        const sliderWrapper = this.wrapper.querySelector(NiuSlider.Selectors.sliderWrapper);
166        if(!sliderWrapper){
167            console.error('no slider found for', this.wrapper);
168            return;
169        }
170        const thumbnailsWrapper = this.wrapper.querySelector(NiuSlider.Selectors.thumbnailsWrapper);
171        if(!thumbnailsWrapper){
172            console.error('no thumbnails found for', this.wrapper);
173            return;
174        }
175        let slider = new Splide( sliderWrapper, {
176            type       : 'slide',
177            pagination : false,
178            arrows     : false,
179            fixedHeight: '78vh'
180        } );
181
182        var thumbnails = new Splide( thumbnailsWrapper, {
183            rewind          : true,
184            fixedWidth      : 104,
185            fixedHeight     : '15vh',
186            isNavigation    : true,
187            gap             : 10,
188            focus           : 'center',
189            pagination      : false,
190            cover           : false,
191            arrows          : false,
192            dragMinThreshold: {
193                mouse: 4,
194                touch: 10,
195            },
196            breakpoints : {
197                640: {
198                    fixedWidth  : 66,
199                    fixedHeight : 38,
200                },
201            },
202        } );
203        slider.sync( thumbnails );
204        slider.mount();
205        thumbnails.mount();
206
207        const triggers = document.querySelectorAll(NiuSlider.Selectors.lightboxTrigger);
208        triggers.forEach(t=>{
209            t.addEventListener('click',()=>{
210                this.wrapper.classList.add('show')
211            });
212        });
213        this.wrapper.addEventListener('click',()=>{
214            this.wrapper.classList.remove('show');
215        });
216        thumbnailsWrapper.addEventListener('click',(e)=>{
217            e.stopPropagation();
218        })
219    }
220
221    initCategorySlider(){
222        const sliderWrapper = this.wrapper.querySelector(NiuSlider.Selectors.sliderWrapper);
223        if(!sliderWrapper){
224            console.error('no slider found for', this.wrapper);
225            return;
226        }
227        const slider = new Splide( sliderWrapper, {
228            type            : 'slide',
229            perPage         : niu.settings.slider.perPagelg,
230            breakpoints     :{
231                576:{
232                    perPage:niu.settings.slider.perPagexs,
233                },
234                768:{
235                    perPage:niu.settings.slider.perPagesm,
236                },
237                992:{
238                    perPage:niu.settings.slider.perPagemd,
239                },
240            },
241            cloneStatus     : false,
242            pagination      : niu.settings.slider.pagination,
243            lazyLoad        : true,
244            updateOnMove    : true,
245            arrows          : niu.settings.slider.arrows,
246            gap:'1rem',
247            perMove: 1,
248        } );
249        slider.on( 'overflow', function ( isOverflow ) {
250            slider.options = {
251
252                arrows    : niu.settings.slider.arrows ? isOverflow : false,
253                pagination: niu.settings.slider.pagination ? isOverflow : false,
254                drag      : isOverflow,
255            };
256        } );
257        slider.mount();
258    }
259

260    initCategorySliderAutoWidth(){
261        const sliderWrapper = this.wrapper.querySelector(NiuSlider.Selectors.sliderWrapper);
262        if(!sliderWrapper){
263            console.error('no slider found for', this.wrapper);
264            return;
265        }
266        const slider = new Splide( sliderWrapper, {
267            type            : 'slide',
268
269            autoWidth:true,
270            breakpoints     :{
271                992:{
272                    padding:{left:'1rem'}
273                },
274                1504: {
275                    arrows          : false
276                },
277            },
278            cloneStatus     : false,
279            pagination      : niu.settings.slider.pagination,
280            lazyLoad        : true,
281            updateOnMove    : true,
282            arrows          : true,
283            gap:'1rem',
284            perMove: 1,
285        } );
286        slider.on( 'overflow', function ( isOverflow ) {
287
288            slider.options = {
289
290                breakpoints     :{
291
292                    1504: {
293                        arrows          : slider.options.breakpoints["1504"].arrows
294                    },
295                },
296                pagination: niu.settings.slider.pagination ? isOverflow : false,
297                drag      : isOverflow,
298            };
299        } );
300        slider.mount();
301    }
302
303    initNiuCategoryImageSlider(options){
304        console.warn(options)
305        const sliderWrapper = this.wrapper.querySelector(NiuSlider.Selectors.sliderWrapper);
306        if(!sliderWrapper){
307            console.error('no slider found for', this.wrapper);
308            return;
309        }
310        const slider = new Splide( sliderWrapper, {
311            type            : 'slide',
312            perPage : options.perPageXL,
313            gap:'1rem',
314            arrows:options.showArrows,
315            pagination:options.showPagination,
316            breakpoints     :{
317                576:{
318                    perPage:options.perPageXS,

319                },
320                768:{
321                    perPage:options.perPageSM,
322                },
323                992:{
324                    perPage:options.perPageMD,
325                },
326                1200:{
327                    perPage:options.perPageLG,
328                }
329            },
330
331        } );
332
333        slider.on( 'overflow', function ( isOverflow ) {
334            slider.options = {
335                arrows    : options.showArrows ? isOverflow : false,
336                pagination: options.showPagination ? isOverflow : false,
337                drag      : isOverflow,
338            };
339        } );
340
341        slider.mount();
342    }
343
344    initNiuCategoryTextSlider(options){
345        console.warn(options)
346        const sliderWrapper = this.wrapper.querySelector(NiuSlider.Selectors.sliderWrapper);
347        if(!sliderWrapper){
348            console.error('no slider found for', this.wrapper);
349            return;
350        }
351        const slider = new Splide( sliderWrapper, {
352            type            : 'slide',
353            autoWidth:true,
354            gap:'1rem',
355            arrows:options.showArrows,
356            pagination:options.showPagination,
357            breakpoints     :{
358
359                992:{
360                    padding:{left:'1rem'}
361                }
362            },
363
364        } );
365
366        slider.on( 'overflow', function ( isOverflow ) {
367            slider.options = {
368                arrows    : options.showArrows ? isOverflow : false,
369                pagination: options.showPagination ? isOverflow : false,
370                drag      : isOverflow,
371            };
372        } );
373
374        slider.mount();
375    }
376
377
378
379    initRecommendations(){
380        const sliderWrapper = this.wrapper.querySelector(NiuSlider.Selectors.sliderWrapper);
381        if(!sliderWrapper){
382            console.error('no slider found for', this.wrapper);
383            return;
384        }
385        //console.info('ALLES OK')
386        const options = {
387            type            : niu.settings.slider.sliderType.value,
388            rewind          : niu.settings.slider.rewind,
389            rewindByDrag    : niu.settings.slider.rewind,
390            speed           : niu.settings.slider.speed,
391            perPage         : niu.settings.slider.perPagexl,
392            padding:{right:'1rem', left:'1rem'},
393            breakpoints     :{
394                576:{
395                    perPage:niu.settings.slider.perPagexs,
396                    padding:{right:niu.settings.slider.cropMobile ? '7rem' : '1rem', left:'1rem'}
397                },
398                768:{
399                    perPage:niu.settings.slider.perPagesm,
400                    padding:{right:niu.settings.slider.cropMobile ? '5rem' : '1rem', left:'1rem'}
401                },
402                992:{
403                    perPage:niu.settings.slider.perPagemd,
404                    padding:{right:niu.settings.slider.cropMobile ? '5rem' : '1rem', left:'1rem'}
405                },
406                1200:{
407                    perPage:niu.settings.slider.perPagelg
408                },
409            },
410            cloneStatus     : false,
411            arrows          : niu.settings.slider.arrows,
412            pagination      : niu.settings.slider.pagination,
413            arrowPath       : niu.settings.slider.arrowPath !== '' ? niu.settings.slider.arrowPath : 'M 11.0058 2.2077 a 1.3997 1.3997 90 0 1 1.9819 0 l 16.7962 16.7962 a 1.3997 1.3997 90 0 1 0 1.9819 l -16.7962 16.7962 a 1.3997 1.3997 90 0 1 -1.9819 -1.9819 L 26.8138 19.9949 L 11.0058 4.1897 a 1.3997 1.3997 90 0 1 0 -1.9819 z',
414            autoplay        : niu.settings.slider.autoplay,
415            interval        : niu.settings.slider.interval,
416            pauseOnHover    : niu.settings.slider.pauseOnHover,
417            lazyLoad        : false,
418            updateOnMove    : false,
419            autoHeight:true,
420
421
422            gap:'2rem',
423            perMove: 1,
424        }
425        const slider = new Splide( sliderWrapper, options );
426        slider.on( 'overflow', function ( isOverflow ) {
427            slider.options = {
428                arrows    : niu.settings.slider.arrows ? isOverflow : false,
429                pagination: niu.settings.slider.pagination ? isOverflow : false,
430                drag      : isOverflow,
431            };
432        } );
433        slider.mount();
434    }
435
436
437
438
439    static listenTo(el, f){

440        el.forEach(e=>{
441            dzm.dispatcher.on(e,f)
442        })
443    }
444
445    dispatch(e,d){
446        dzm.dispatcher.dispatch(e,d)
447    }
448
449    static selectorToAttribute(selector){
450        let parts = selector.replace('[','').replace(']','').split('-');
451        let attribute = '';
452        parts.forEach((p,k)=>{
453            if(k === 1){
454                attribute +=p
455            }else if(k > 1){
456                attribute += p.charAt(0).toUpperCase() + p.slice(1)
457            }
458        })
459        return attribute
460    }
461}
462
463
464NiuSlider.listenTo([
465    dzm.events.controller.initialized,
466    dzm.events.jtl.article.checkVarkombiDependencies
467],()=>{
468    NiuSlider.Scan([NiuSlider.SliderTypes.recommendations]);
469});