https://www.weingarten-baden.de/fileadmin/templates/extensions/hw_banner/js/hw_banner.js?1765178925

1import {
2	initializeSwiper, getPlayPauseCookie
3} from './hw_banner_shared.js';
4
5
6// ToDo global config for ex prefers-reduced-motion: no-preference
7
8function hwBanner() {
9
10	let bannerConfigElement = document.getElementById('hw_banner__js_attributes');
11
12	// play pause
13	let playPauseWrapper = document.getElementById('hw_banner__play_pause_wrap');
14
15
16	if (playPauseWrapper) {
17		playPauseWrapper.classList.remove('wait_init');
18	}
19
20	let playPauseButton = document.getElementById('hw_banner__play_pause');
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
45
46	if (getPlayPauseCookie() === 'play' || getPlayPauseCookie() === 'false') {
47		autoplay = [];
48
49		// ChangeBanner autoplay setting here
50		autoplay['delay'] = 10000;
51	}
52
53	// default swiper
54	let swiperSettings = {
55		navigation: {
56			prevEl: document.getElementById('hw_banner__button_prev'),
57			nextEl: document.getElementById('hw_banner__button_next'),
58		},
59		pagination: {
60			el: document.getElementById('hw_banner__pagination'),
61			type: 'fraction',
62			clickable: true,
63			renderBullet: (index, className) => {
64				return '<span class="' + className + '" aria-label="'+bannerConfigElement.dataset.languagePagination + ' ' + (index + 1) +'">'
65                    + '</span>';
66			},
67			renderFraction: function (currentClass, totalClass) {
68				return '<span class="' + currentClass + '"></span>' +
69                    '<span class="hw_banner__pagination__split">/</span>' +
70                    '<span class="' + totalClass + '"></span>';
71			},
72		},
73		effect: 'fade',
74		fadeEffect: {
75			crossFade: true
76		},
77		autoplay,
78		scrollbar: {
79			el: document.getElementById('hw_banner__scrollbar'),
80			draggable: true,
81		},
82		keyboard: {
83			enabled: true,
84			onlyInViewport: true,
85		},
86		loop: false,
87		speed: 800,
88		spaceBetween: 100,
89	};
90
91	initializeSwiper(playPauseButton, swiperSettings);
92}
93
94
95if (document.readyState === 'complete') {
96	hwBanner();
97} else {
98	document.addEventListener('readystatechange', () => {
99		if (document.readyState === 'complete') {
100			hwBanner();
101		}
102	});
103}