https://www.nuertingen.de/_assets/8301f4bb1bbc554ac0022c6abe0a6666…/HwDatenschutzElements.js?1783096165

1import * as HwDatenschutzHelper from './HwDatenschutzHelperFunctions.js';
2
3if (document.readyState === 'complete') {
4	hwCookieElements();
5} else {
6	document.addEventListener('readystatechange', () => {
7		if (document.readyState === 'complete') {
8			hwCookieElements();
9		}
10	});
11}
12
13
14
15function hwCookieElements() {
16
17	// Updated selectors for hw13 components (same as HwDatenschutzPrivacyBanner.js)
18	const cookieBannerWrapper = document.querySelector('hw13-cookiebanner-full');
19	const cookieBannerDialog = document.getElementById('hw13-cookiebanner-full');
20	const cookieBannerCustomDialog = document.querySelector('hw13-dialog[data-name="cookiebanner-full"]');
21
22	if (cookieBannerWrapper && cookieBannerDialog && cookieBannerCustomDialog) {
23
24		const loadContentButtons = document.getElementsByClassName('hw13_cookiebanner__load_iframe');
25
26		if (loadContentButtons.length > 0) {
27
28			Array.from(loadContentButtons).forEach(privacyButton => {
29				// Get data-uid from wrapper (hw13-button) or element itself
30				const uid = privacyButton.dataset.uid;
31
32				if (uid) {
33					// Find inner button if wrapped in hw13-button, otherwise use element directly
34					const clickTarget = privacyButton.querySelector('button') || privacyButton;
35
36					clickTarget.addEventListener('click', (e) => {
37
38						e.preventDefault();
39
40						let targetId = "iframe[data-uid='"+uid+"']";
41
42						let targetElement = document.querySelector(targetId);
43
44						if (targetElement) {
45							targetElement.src = targetElement.dataset.src;
46
47							const container = targetElement.closest('hw13-datenschutz-2click');
48							if (container) {
49								container.querySelector('hw13-datenschutz-iframe-overlay-bg')?.remove();
50								container.querySelector('hw13-datenschutz-iframe-overlay-content')?.remove();
51								container.classList.add('hw_datenschutz__element__iframe--loaded');
52							}
53						}
54					})
55				}
56			})
57		}
58
59		/**
60		 * Opens the cookie banner and scrolls to the target group/service
61		 * @param {string} target - The target cookie key or group name
62		 */
63		const openBannerAndScrollToTarget = (target) => {
64			// First try to find by name (normal services), then by data-identifier (extra cookies)
65			const targetCheckBox = document.querySelector('.hw13_checkbox[name="tx_hwdatenschutz_cookie[cookieForm]['+target+']"]')
66				|| document.querySelector('.hw13_checkbox[data-identifier="'+target+'"]');
67
68			// Open banner using hw13 dialog component attributes
69			const openBanner = () => {
70				cookieBannerWrapper.classList.add('hw13_datenschutz_banner--open');
71				cookieBannerWrapper.classList.add('hw13_datenschutz_banner--open-additional');
72				cookieBannerCustomDialog.setAttribute('data-open', 'true');
73			};
74
75			// Open a hw13:details element via the component's setElementOpenState API
76			// The hw13-details custom element uses data-open and exposes setElementOpenState()
77			const openDetailsElement = (detailsElement) => {
78				if (!detailsElement) return;
79
80				// If the element itself is a hw13-details component
81				if (typeof detailsElement.setElementOpenState === 'function') {
82					detailsElement.setElementOpenState(true);
83					return;
84				}
85
86				// Look for a hw13-details component inside the element (e.g. wrapper elements)
87				const component = detailsElement.querySelector('[data-open]');
88				if (component && typeof component.setElementOpenState === 'function') {
89					component.setElementOpenState(true);
90					return;
91				}
92
93				// Fallback for native <details> elements
94				if (detailsElement.tagName.toLowerCase() === 'details') {
95					detailsElement.setAttribute('open', '');
96				}
97			};
98
99			if (targetCheckBox) {
100				const targetType = targetCheckBox.dataset.typ;
101				// Use data-key for element IDs (template uses serviceItem.key for IDs)
102				const serviceKey = targetCheckBox.dataset.key;
103
104				// The ID is on the hw13:details component (banner__content_group__)
105				const targetDetailsElement = document.getElementById('banner__content_group__' + targetType);
106				// Find the parent hw13-details-element-* wrapper
107				const targetWrapper = targetDetailsElement?.closest('hw13-details-element-cookiebanner, hw13-details-element-cookiebanner-wrap, [data-hw13-components-details-open]');
108
109				// The ID is on the hw13:details component (banner__content_service__)
110				const cookieBannerDetailsElement = document.getElementById('banner__content_service__' + serviceKey);
111				// Find the parent hw13-details-element-* wrapper
112				// The DOM only emits `-service-wrap` for service nodes — without it,
113				// closest() walked past the service and matched the group wrap,
114				// which then received an ineffective focus() and left the native
115				// dialog's auto-focus on the first <summary>

115 (Essentiell).
116				const cookieBannerElement = cookieBannerDetailsElement?.closest('hw13-details-element-cookiebanner-service-wrap, hw13-details-element-cookiebanner-service, [data-hw13-components-details-open]');
117
118				openBanner();
119
120				// Open the group accordion first
121				if (targetWrapper) {
122					openDetailsElement(targetWrapper);
123				}
124
125				// Open a direct cookie or the cookieGroup
126				// Delay scroll to allow dialog/details CSS transitions to complete
127				// Scroll to parent wrap so the summary (checkbox + label) stays visible
128				if (cookieBannerElement) {
129					openDetailsElement(cookieBannerElement);
130					const scrollTarget = cookieBannerElement.closest('hw13-details-element-cookiebanner-service-wrap') || cookieBannerElement;
131					setTimeout(() => {
132						scrollTarget.scrollIntoView({behavior:'smooth'});
133						// Focus the accordion's <summary>: hw13-details-* custom elements
134						// have no tabindex, so focus() on them is a no-op and the
135						// dialog's default auto-focus on the first <summary> wins.
136						(cookieBannerElement.querySelector('summary') || cookieBannerElement).focus();
137					}, 150);
138				} else {
139					const cookieBannerGroupDetailsElement = document.getElementById('banner__content_group__' + target);
140					const cookieBannerGroupElement = cookieBannerGroupDetailsElement?.closest('hw13-details-element-cookiebanner, hw13-details-element-cookiebanner-wrap, [data-hw13-components-details-open]');
141					if (cookieBannerGroupElement) {
142						openDetailsElement(cookieBannerGroupElement);
143						setTimeout(() => {
144							cookieBannerGroupElement.scrollIntoView({behavior:'smooth'});
145							(cookieBannerGroupElement.querySelector('summary') || cookieBannerGroupElement).focus();
146						}, 150);
147					}
148				}
149			} else {
150				openBanner();
151				cookieBannerDialog.focus();
152			}
153		};
154
155		// Buttons that open the banner (used for auto-open logic in HwDatenschutzPrivacyBanner.js)
156		const openCookieBannerButtons = document.getElementsByClassName('hw13_cookiebanner__open--full');
157
158		if (openCookieBannerButtons.length > 0) {
159			Array.from(openCookieBannerButtons).forEach(wrapper => {
160				// Find inner button/link if wrapped, otherwise use element directly
161				const clickTarget = wrapper.querySelector('button') || wrapper.querySelector('a') || wrapper;
162				// Get data-target from wrapper or from the inner element
163				const target = wrapper.dataset.target || clickTarget.dataset.target;
164
165				clickTarget.addEventListener('click', (e) => {
166					e.preventDefault();
167					openBannerAndScrollToTarget(target);
168				});
169			});
170		}
171
172		// Buttons that open the banner ONLY on click (no auto-open logic)
173		const openCookieBannerButtonsManual = document.getElementsByClassName('hw13_cookiebanner__open--manual');
174
175		if (openCookieBannerButtonsManual.length > 0) {
176			Array.from(openCookieBannerButtonsManual).forEach(wrapper => {
177				// Find inner button/link if wrapped, otherwise use element directly
178				const clickTarget = wrapper.querySelector('button') || wrapper.querySelector('a') || wrapper;
179				// Get data-target from wrapper or from the inner element
180				const target = wrapper.dataset.target || clickTarget.dataset.target;
181
182				clickTarget.addEventListener('click', (e) => {
183					e.preventDefault();
184					openBannerAndScrollToTarget(target);
185				});
186			});
187		}
188
189		// Buttons to reload the page and accept the cookie
190		const acceptReloadCookieBannerButtons = document.getElementsByClassName('hw13_cookiebanner__accept_reload');
191
192		if (acceptReloadCookieBannerButtons.length > 0) {
193
194			Array.from(acceptReloadCookieBannerButtons).forEach(wrapper => {
195				// Get data-target from wrapper (hw13-button)
196				const target = wrapper.dataset.target;
197				// Find inner button if wrapped in hw13-button, otherwise use element directly
198				const clickTarget = wrapper.querySelector('button') || wrapper;
199
200				clickTarget.addEventListener('click', (e) => {
201
202					e.preventDefault();
203					const cookieBannerDialogInnerWrap = document.getElementById('hw13-datenschutz-dialog-inner');
204					const cookieBannerVersion = cookieBannerDialogInnerWrap.dataset.version;
205					HwDatenschutzHelper.setCookieBannerVersion(cookieBannerVersion);
206					HwDatenschutzHelper.setCookie(target, 1);

207					HwDatenschutzHelper.reloadCheckAndReload(target);
208				})
209			})
210		}
211	}
212}