https://www.hochheim.de/fileadmin/templates/extensions/hw_menu/js/hw_menu.js?1742976468

1import {
2	closeMenu
3} from './hw_menu__shared.js';
4
5import {
6	generateMainMenuData,
7	generateMainMenu 
8} from './hw_mainmenu.js';
9
10// import {
11// 	generateSubMenuData,
12// 	generateSubMenu
13// } from './hw_submenu.js';
14
15import {
16	generateMobileMenuData,
17	generateMobileMenu 
18} from './hw_mobilemenu.js';
19
20import {
21	generateBreadcrumbData,
22	generateBreadcrumb 
23} from './hw_breadcrumb.js';
24
25if (document.readyState === 'complete') {
26	setupMenu();
27} else {
28	document.addEventListener('readystatechange', () => {
29		if (document.readyState === 'complete') {
30			setupMenu();
31		}
32	});
33}
34
35function setupMenu() {
36
37	// Die Page ID der aktuellen Seite wird abgefragt
38	const currentId = document.body.id.split('id')[1];
39	const maxMenuDepth = 3;
40	const mobileBreakPoint = 1024;
41
42	const mainMenuData = generateMainMenuData(currentId);
43	// const subMenuData = generateSubMenuData(currentId);
44	const mobileMenuData = generateMobileMenuData(currentId);
45	const breadcrumbData = generateBreadcrumbData(currentId);
46
47	const searchElement = document.querySelector('.hw_search__wrap');
48
49	const menuBackdrop = document.querySelector('.hw_menu__backdrop');
50
51	if (document.querySelector('.hw_breadcrumb')) {
52		generateBreadcrumb(document.querySelector('.hw_breadcrumb'), breadcrumbData, 99);
53	}
54
55	if (document.querySelector('.hw_menu__primary')) {
56		document.querySelector('.hw_menu__primary').remove();
57	}
58
59	if (document.querySelector('.hw_menu__secondary')) {
60		document.querySelector('.hw_menu__secondary').remove();
61	}
62
63	if (searchElement) {
64		searchElement.remove(); 
65	}
66 
67	if (window.innerWidth > mobileBreakPoint) {
68		generateMainMenu(document.querySelector('.hw_header'), mainMenuData, maxMenuDepth, searchElement);
69
70		if (!document.body.classList.contains('home')) {
71			// generateSubMenu(document.querySelector('#structure-wrap'), subMenuData, 99);
72
73			// const structureWrap = document.querySelector('#structure-wrap');
74			// const subnaviWrap = document.querySelector('#subnavi-wrap');
75			
76			// const topOffset = document.querySelector('header').getBoundingClientRect().height;
77
78			// const observerOptions = {
79			// 	root: null,
80			// 	rootMargin: '0px 0px -' + (window.innerHeight - topOffset - 50) + 'px 0px',
81			// 	threshold: 0,
82			// };
83
84			// const observer = new IntersectionObserver(entries => {
85			// 	entries.forEach(entry => {
86			//
87			// 		if (entry.isIntersecting) {
88			// 			subnaviWrap.classList.add('fixed');
89			// 		} else {
90			// 			if (window.scrollY <= window.innerHeight) {
91			// 				subnaviWrap.classList.remove('fixed');
92			// 			}
93			// 		}
94			// 	});
95			// }, observerOptions);
96
97			// observer.observe(structureWrap);
98		}
99	} else {
100		// if (document.querySelector('#subnavi-wrap')) {
101		// 	document.querySelector('#subnavi-wrap').remove();
102		// }
103
104		generateMobileMenu(document.querySelector('header'), mobileMenuData, 99, searchElement);
105	}
106
107	menuBackdrop.addEventListener('click', (event) => {
108		event.stopImmediatePropagation();
109
110		if (window.innerWidth > mobileBreakPoint) {
111			mainMenuData[0].children.filter(child => child.expanded === true).forEach(child => {
112				closeMenu(child);
113			});
114
115			if (document.body.classList.contains('hw_search__open')) {
116				document.querySelector('.hw_menu__mobile_button__search').click();
117			}
118		} else {
119			closeMenu(mobileMenuData[0]);
120		}
121	});
122	
123	let previousWidth = window.innerWidth;
124	let resizeRAF;
125
126	const menuResizeObserver = new ResizeObserver(() => {
127		if (resizeRAF) {
128			cancelAnimationFrame(resizeRAF);
129		}
130
131		resizeRAF = requestAnimationFrame(() => {
132			const currentWidth = window.innerWidth;
133
134			if (previousWidth <= mobileBreakPoint && currentWidth > mobileBreakPoint) {
135				document.body.classList.remove('hw_menu__open');
136
137				if (document.querySelector('.hw_menu__mobile_button_wrap')) {
138					document.querySelector('.hw_menu__mobile_button_wrap').remove();
139				}
140
141				if (document.querySelector('.hw_menu__primary')) {
142					document.querySelector('.hw_menu__primary').remove();
143				}
144
145				generateMainMenu(document.querySelector('header .hw_header'), mainMenuData, maxMenuDepth, searchElement);
146			} else if (previousWidth > mobileBreakPoint && currentWidth <= mobileBreakPoint) {
147				document.body.classList.remove('hw_menu__open');
148
149				if (document.querySelector('#subnavi-wrap')) {
150					document.querySelector('#subnavi-wrap').remove();
151				}
152
153				if (document.querySelector('.hw_menu__primary')) {
154					document.querySelector('.hw_menu__primary').remove();
155				}
156
157				generateMobileMenu(document.querySelector('header'), mobileMenuData, 99, searchElement);
158			}
159
160			previousWidth = currentWidth;
161		});
162	});
163
164	menuResizeObserver.observe(document.body);
165
166	document.addEventListener('keydown', event => {
167		if (event.key === 'Escape') {
168			if (window.innerWidth > mobileBreakPoint) {
169				mainMenuData[0].children.filter(child => child.expanded === true).forEach(child => {
170					closeMenu(child);
171				});
172
173				if (document.body.classList.contains('hw_search__open')) {
174					document.querySelector('.hw_menu__mobile_button__search').click();
175				}
176			} else {
177				closeMenu(mobileMenuData[0]);
178
179				if (document.querySelector('.hw_menu__mobile_button__search')) {
180					const mobileSearchButton = document.querySelector('.hw_menu__mobile_button__search');
181
182					if (mobileSearchButton.getAttribute('aria-pressed') === 'true') {
183						mobileSearchButton.setAttribute('aria-pressed', false);
184						mobileSearchButton.nextElementSibling.setAttribute('aria-expanded', false);
185					}
186				}
187			}
188		}
189	});
190
191	subMenuControl();
192}
193
194function subMenuControl() {
195	if (document.getElementById('subnavi_open')) {
196		var btnsub = document.getElementById('subnavi_open');
197
198		btnsub.addEventListener('click', opensubnavi);
199	}
200
201	if (document.getElementById('subnavi_close')) {
202		let btnclose = document.getElementById('subnavi_close');
203
204		btnclose.addEventListener('click', closesubnavi);
205		btnclose.addEventListener('keydown', (event) => {
206			if (event.key === 'Tab' && !event.shiftKey) {
207				event.preventDefault();
208				
209				closesubnavi();
210			}
211		});
212	}
213				
214	function closesubnavi() {
215		if (document.body.classList.contains('subnavi-is-open')) {
216			document.body.classList.remove('subnavi-is-open');
217
218			btnsub.setAttribute('title',btnsub.getAttribute('data-text-open'));
219
220			window.setTimeout(() => {
221				if (document.getElementById('subnavi')) {
222					document.getElementById('subnavi').style.display = 'none';
223				}
224			}, 400);
225		}
226	}
227
228	function opensubnavi() {
229		if (document.body.classList.contains('subnavi-is-open')) {
230			document.body.classList.remove('subnavi-is-open');
231
232			btnsub.setAttribute('title', btnsub.getAttribute('data-text-open'));
233
234			window.setTimeout(() => {
235				if (document.getElementById('subnavi')) {
236					document.getElementById('subnavi').style.display = 'none';
237				}
238			}, 400);
239		} else {
240			document.body.classList.add('subnavi-is-open');
241			
242			btnsub.setAttribute('title',btnsub.getAttribute('data-text-close'));
243
244			if(document.getElementById('subnavi')) {
245				document.getElementById('subnavi').style.display = 'block';
246			}
247		}
248	}
249}