https://www.einhausen.de/fileadmin/templates/extensions/hw_banner/js/hw_banner.js?1737966447

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