https://www.welzheim.de/fileadmin/templates/extensions/hw_banner/js/hw_banner.js?1785697911

1import {initializeSwiper, getPlayPauseCookie} from './hw_banner_shared.js';
2
3
4// ToDo global config for ex prefers-reduced-motion: no-preference
5
6function hwBanner() {
7
8    let bannerConfigElement = document.getElementById('hw_banner__js_attributes');
9
10    // play pause
11    let playPauseWrapper = document.getElementById('hw_banner_play_pause_wrap');
12    if (playPauseWrapper) {
13        playPauseWrapper.classList.remove('wait_init');
14    }
15    let playPauseButton = document.getElementById('hw_banner_play_pause');
16
17    let prevNextWrapper = document.getElementById('hw_banner_prev_next');
18    if (prevNextWrapper) {
19        prevNextWrapper.classList.remove('wait_init');
20    }
21
22    let bannerVideo = document.querySelector('.hw_banner__video');
23
24    if (bannerVideo) {
25
26        if (window.innerWidth > 1023 && (getPlayPauseCookie() === 'play')) {
27            bannerVideo.src = bannerVideo.dataset.src;
28            bannerVideo.classList.add('hw_banner__video--playing');
29            delete bannerVideo.dataset.src;
30            playPauseButton.classList.add('control_pause');
31            playPauseButton.title = playPauseButton.dataset.textPause;
32            playPauseButton.dataset.playState = 'play';
33            setTimeout(() => {
34                bannerVideo.nextElementSibling.style.display = 'none';
35            }, 500)
36        } else {
37            playPauseButton.classList.add('control_play');
38            playPauseButton.dataset.playState = 'pause';
39            playPauseButton.title = playPauseButton.dataset.textPlay;
40        }
41    }
42
43    let autoplay = false;
44    if (getPlayPauseCookie() === 'play' || getPlayPauseCookie() === 'false') {
45        autoplay = [];
46        // ChangeBanner autoplay setting here
47        autoplay['delay'] = 2500;
48    }
49
50    // default swiper
51    let swiperSettings = {
52        navigation: {
53            prevEl: document.getElementById('hw_banner_prev'),
54            nextEl: document.getElementById('hw_banner_next'),
55        },
56        pagination: {
57            el: document.getElementById('hw_banner_pager'),
58            type: 'fraction',
59            clickable: true,
60            renderBullet: (index, className) => {
61                return '<span class="' + className + '" aria-label="'+bannerConfigElement.dataset.languagePagination + ' ' + (index + 1) +'">'
62                    + '</span>';
63            },
64            renderFraction: function (currentClass, totalClass) {
65                return '<span class="' + currentClass + '"></span>' +
66                    '<span class="hw_banner__pagination__split">/</span>' +
67                    '<span class="' + totalClass + '"></span>';
68            },
69        },
70        effect: 'fade',
71        fadeEffect: {
72            crossFade: true
73        },
74        autoplay,
75        scrollbar: {
76            el: document.getElementById('hw_banner__scrollbar'),
77            draggable: true,
78        },
79        keyboard: {
80            enabled: true,
81            onlyInViewport: true,
82        },
83        loop: false,
84        speed: 400,
85        spaceBetween: 100,
86        on: {
87            afterInit: function () {
88                // console.log("banner is initialized");
89                document.body.classList.add("hw_banner__init");
90            },
91            lock: function () {
92                // console.log("banner is lock");
93                document.body.classList.remove("hw_banner__unlocked");
94                document.body.classList.add("hw_banner__locked");
95            },
96            unlock: function () {
97                // console.log("banner is unlock");
98                document.body.classList.remove("hw_banner__locked");
99                document.body.classList.add("hw_banner__unlocked");
100            }
101        }
102    };
103
104    initializeSwiper(playPauseButton, swiperSettings);
105}
106
107
108if (document.readyState === 'complete') {
109    hwBanner();
110} else {
111    document.addEventListener('readystatechange', () => {
112        if (document.readyState === 'complete') {
113            hwBanner();
114        }
115    });
116}