https://www.dinkelsbuehl.de/fileadmin/templates/extensions/hw_banner/js/hw_banner.js?1751035122

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