https://dortmunder-u.de/wp-content/themes/dortmunderU2022/js/navigation.js?ver=1.3.29

1/**
2 * File navigation.js.
3 *
4 * Handles toggling the navigation menu for small screens and enables TAB key
5 * navigation support for dropdown menus.
6 */
7(function () {
8	const siteNavigation = document.querySelector('.main-navigation');
9
10	// Return early if the navigation don't exist.
11	if (!siteNavigation) {
12		return;
13	}
14
15	const burgerButton = siteNavigation.querySelector('.menu-toggle');
16	const backButtons = siteNavigation.querySelectorAll('.menu-back-toggle');
17
18	// Return early if the burgerButton don't exist.
19	if ('undefined' === typeof burgerButton) {
20		return;
21	}
22
23	const menu = siteNavigation.getElementsByTagName('ul')[0];
24
25	if (!menu.classList.contains('nav-menu')) {
26		menu.classList.add('nav-menu');
27	}
28
29	// Toggle the .toggled class and the aria-expanded value each time the burgerButton is clicked.
30	burgerButton.addEventListener('click', function () {
31		if (burgerButton.getAttribute('aria-expanded') === 'true') {
32			closeMenu();
33		} else {
34			openMenu();
35		}
36	});
37
38	backButtons.forEach((backButton) => {
39		backButton.addEventListener('click', function () {
40			siteNavigation.classList.remove('sub-menu-toggled');
41			siteNavigation
42				.getElementsByClassName('menu-item--toggled')[0]
43				.classList.remove('menu-item--toggled');
44		});
45	});
46
47	// Remove the .toggled class and set aria-expanded to false when the user clicks outside the navigation.
48	document.addEventListener('click', function (event) {
49		const isClickInside = siteNavigation.contains(event.target);
50
51		if (!isClickInside) {
52			closeMenu();
53		}
54	});
55
56	// Get all the link elements within the menu.
57	const links = menu.getElementsByTagName('a');
58
59	// Get all the link elements with children within the menu.
60	const linksWithChildren = menu.querySelectorAll(
61		'.menu-item-has-children > a, .page_item_has_children > a'
62	);
63
64	// Toggle focus each time a menu link is focused or blurred.
65	for (const link of links) {
66		link.addEventListener('focus', toggleFocus, true);
67		link.addEventListener('blur', toggleFocus, true);
68	}
69
70	// Toggle focus each time a menu link with children receive a touch event.
71	for (const link of linksWithChildren) {
72		link.addEventListener('touchstart', toggleFocus, false);
73	}
74
75	// Toggle submenu visibility each time a menu link with children receive a click event.
76	for (const link of linksWithChildren) {
77		link.addEventListener('click', toggleSubmenu);
78		link.addEventListener('touchend', toggleSubmenu);
79	}
80
81	/**
82	 * Sets or removes .focus class on an element.
83	 */
84	function toggleFocus() {
85		if (event.type === 'focus' || event.type === 'blur') {
86			let self = this;
87			// Move up through the ancestors of the current link until we hit .nav-menu.
88			while (!self.classList.contains('nav-menu')) {
89				// On li elements toggle the class .focus.
90				if ('li' === self.tagName.toLowerCase()) {
91					self.classList.toggle('focus');
92				}
93				self = self.parentNode;
94			}
95		}
96
97		if (event.type === 'touchstart') {
98			const menuItem = this.parentNode;
99			event.preventDefault();
100			for (const link of menuItem.parentNode.children) {
101				if (menuItem !== link) {
102					link.classList.remove('focus');
103				}
104			}
105			menuItem.classList.toggle('focus');
106		}
107	}
108
109	function openMenu() {
110		window.dispatchEvent(new Event('resize'));
111		document.body.classList.add('main-navigation--toggled');
112		burgerButton.setAttribute('aria-expanded', 'true');
113		burgerButton.classList.add('is-active');
114	}
115
116	function closeMenu() {
117		siteNavigation.classList.remove('sub-menu-toggled');
118		burgerButton.setAttribute('aria-expanded', 'false');
119		burgerButton.classList.remove('is-active');
120		document.body.classList.remove('main-navigation--toggled');
121		const toggledItem = siteNavigation.querySelector('.menu-item--toggled');
122		if (toggledItem) {
123			toggledItem.classList.remove('menu-item--toggled');
124			toggledItem.setAttribute('aria-expanded', 'false');
125		}
126	}
127
128	/**
129	 * Shows or hides submenu
130	 */
131	function toggleSubmenu() {
132		const menuItem = this.parentNode;
133
134		event.preventDefault();
135		for (const link of menuItem.parentNode.children) {
136			if (menuItem !== link) {
137				link.classList.remove('menu-item--toggled');
138				//was passiert hier?
139			}
140		}
141		menuItem.classList.toggle('menu-item--toggled');
142		if (menuItem.classList.contains('menu-item--toggled')) {

143			siteNavigation.classList.add('sub-menu-toggled');
144			menuItem.setAttribute('aria-expanded', 'true');
145		} else {
146			siteNavigation.classList.remove('sub-menu-toggled');
147			menuItem.setAttribute('aria-expanded', 'false');
148		}
149	}
150})();
151
152(function () {
153	let scrollTop = 0;
154
155	document.addEventListener('scroll', function () {
156		const newScrollTop = window.scrollY;
157
158		if (newScrollTop > scrollTop || newScrollTop === 0) {
159			document.body.classList.remove('scroll-up');
160		} else {
161			document.body.classList.add('scroll-up');
162		}
163
164		scrollTop = newScrollTop;
165	});
166})();
167
168(function () {
169	let searchFieldHidden = true;
170	const searchFieldContainer = document.getElementById(
171		'site-header__search-form'
172	);
173	const searchButtons = document.querySelectorAll('.search-button');
174	const searchCloseButton = searchFieldContainer.querySelector(
175		'#search-form__close'
176	);
177	const searchFieldInput = searchFieldContainer.querySelector(
178		'.search-form__input'
179	);
180
181	searchButtons.forEach((searchButton) => {
182		searchButton.addEventListener('click', function () {
183			if (searchFieldHidden) {
184				searchFieldContainer.classList.remove(
185					'search-form__container--hidden'
186				);
187				searchButton.setAttribute('aria-expanded', 'true');
188				searchFieldInput.focus();
189			} else {
190				searchFieldContainer.classList.add(
191					'search-form__container--hidden'
192				);
193				searchButtons.forEach((searchButton) => {
194					searchButton.setAttribute('aria-expanded', 'false');
195				});
196			}
197			searchFieldHidden = !searchFieldHidden;
198		});
199	});
200
201	searchCloseButton.addEventListener('click', function () {
202		searchFieldContainer.classList.add('search-form__container--hidden');
203		searchButtons.forEach((searchButton) => {
204			searchButton.setAttribute('aria-expanded', 'false');
205		});
206		searchFieldHidden = true;
207	});
208})();
209
210function isOverflown(element) {
211	return (
212		element.scrollHeight > element.clientHeight ||
213		element.scrollWidth > element.clientWidth
214	);
215}
216
217(function () {
218	const headerCSSVars = document.querySelector('#css-props');
219	const headerMain = document.querySelector('.site-header__main');
220	const headerTop = document.querySelector('.site-header__top');
221	const headerAlert = document.querySelector('.site-header__alert');
222	const headerInstitute = document.querySelector(
223		'.institute-header__container'
224	);
225	const headerTopHeight = function () {
226		let height = 0;
227		if (headerTop && headerAlert) {
228			height =
229				headerTop.getBoundingClientRect().height +
230				headerAlert.getBoundingClientRect().height;
231		} else if (headerTop) {
232			height = headerTop.getBoundingClientRect().height;
233		} else if (headerAlert) {
234			height = headerAlert.getBoundingClientRect().height;
235		}
236
237		return height;
238	};
239	function resize() {
240		headerCSSVars.innerHTML = `
241		:root {
242			--site-header__main--height:${headerMain.getBoundingClientRect().height}px;
243			--site-header__top--height:${
244				// headerTop ? headerTop.getBoundingClientRect().height : 0
245				headerTopHeight()
246			}px;
247			--site-header__alert--height:${
248				headerAlert ? headerAlert.getBoundingClientRect().height : 0
249			}px;
250			--institute-header--height:${
251				headerInstitute
252					? headerInstitute.getBoundingClientRect().height
253					: '0'
254			}px;
255			--client--width:${document.body.clientWidth}px;
256			--client--height:${document.body.clientHeight}px;
257			--window--width:${window.innerWidth}px;
258			--window--height:${window.innerHeight}px;
259		}
260		`;
261		// if (instituteMenu) {
262		// 	if (isOverflown(instituteMenu)) {
263		// 		instituteMenu.classList.remove(
264		// 			'institute-menu__list--no-overflow'
265		// 		);
266		// 	} else {
267		// 		instituteMenu.classList.add(
268		// 			'institute-menu__list--no-overflow'
269		// 		);
270		// 	}
271		// }
272	}
273	window.addEventListener('resize', resize);
274	resize();
275	setTimeout(() => {
276		resize();
277	}, 1000);
278})();
279
280//flag rotation
281function flagRotation() {
282	const multiflags = document.querySelectorAll(
283		'.tile__institute-flag--multi:not(.rotate)'
284	);
285
286	multiflags.forEach((multiflag) => {
287		multiflag.classList.add('rotate');
288		let currentFlagIndex = 0;
289		const flags = multiflag.querySelectorAll('.tile__institute-icon');
290
291		setInterval(() => {
292			flags[currentFlagIndex].classList.remove(
293				'tile__institute-icon--active'
294			);
295
296			currentFlagIndex =
297				currentFlagIndex >= flags.length - 1 ? 0 : currentFlagIndex + 1;
298
299			flags[currentFlagIndex].classList.add(
300				'tile__institute-icon--active'
301			);
302		}, 4000);
303	});
304}
305flagRotation();
306
307//logo rotation
308(function () {
309	const multiflags = document.querySelectorAll(
310		'.entry-meta--institute-image-container--multi'
311	);
312

313	multiflags.forEach((multiflag) => {
314		let currentFlagIndex = 0;
315		const flags = multiflag.querySelectorAll(
316			'.entry-meta--institute-image'
317		);
318
319		setInterval(() => {
320			flags[currentFlagIndex].classList.remove(
321				'entry-meta--institute-image--active'
322			);
323
324			currentFlagIndex =
325				currentFlagIndex >= flags.length - 1 ? 0 : currentFlagIndex + 1;
326
327			flags[currentFlagIndex].classList.add(
328				'entry-meta--institute-image--active'
329			);
330		}, 4000);
331	});
332})();
333
334(function () {
335	const instituteNavigation = document.querySelector('.institute-menu');
336
337	// Return early if the navigation don't exist.
338	if (!instituteNavigation) {
339		return;
340	}
341
342	const instituteMenuButton = document.querySelector(
343		'.institute-menu-toggle'
344	);
345
346	const instituteMenuButtonBurger =
347		instituteMenuButton.querySelector('.hamburger');
348
349	// Return early if the instituteMenuButton don't exist.
350	if ('undefined' === typeof instituteMenuButton) {
351		return;
352	}
353
354	const menu = instituteNavigation.getElementsByTagName('ul')[0];
355
356	if (!menu.classList.contains('nav-menu')) {
357		menu.classList.add('nav-menu');
358	}
359
360	// Toggle the .toggled class and the aria-expanded value each time the instituteMenuButton is clicked.
361	instituteMenuButton.addEventListener('click', function () {
362		if (instituteMenuButton.getAttribute('aria-expanded') === 'true') {
363			closeMenu();
364		} else {
365			openMenu();
366		}
367	});
368
369	// Remove the .toggled class and set aria-expanded to false when the user clicks outside the navigation.
370	document.addEventListener('click', function (event) {
371		const isClickInside =
372			instituteNavigation.contains(event.target) ||
373			instituteMenuButton.contains(event.target);
374
375		if (!isClickInside) {
376			closeMenu();
377		}
378	});
379
380	// Get all the link elements within the menu.
381	const links = menu.getElementsByTagName('a');
382
383	// Get all the link elements with children within the menu.
384	const linksWithChildren = menu.querySelectorAll(
385		'.menu-item-has-children > a, .page_item_has_children > a'
386	);
387
388	// Toggle focus each time a menu link is focused or blurred.
389	for (const link of links) {
390		link.addEventListener('focus', toggleFocus, true);
391		link.addEventListener('blur', toggleFocus, true);
392	}
393
394	// Toggle focus each time a menu link with children receive a touch event.
395	for (const link of linksWithChildren) {
396		link.addEventListener('touchstart', toggleFocus, false);
397	}
398
399	// Toggle submenu visibility each time a menu link with children receive a click event.
400	for (const link of linksWithChildren) {
401		link.addEventListener('click', toggleSubmenu);
402		link.nextSibling.addEventListener('click', toggleSubmenu);
403	}
404
405	/**
406	 * Sets or removes .focus class on an element.
407	 */
408	function toggleFocus() {
409		if (event.type === 'focus' || event.type === 'blur') {
410			let self = this;
411			// Move up through the ancestors of the current link until we hit .nav-menu.
412			while (!self.classList.contains('nav-menu')) {
413				// On li elements toggle the class .focus.
414				if ('li' === self.tagName.toLowerCase()) {
415					self.classList.toggle('focus');
416				}
417				self = self.parentNode;
418			}
419		}
420
421		if (event.type === 'touchstart') {
422			const menuItem = this.parentNode;
423			event.preventDefault();
424			for (const link of menuItem.parentNode.children) {
425				if (menuItem !== link) {
426					link.classList.remove('focus');
427				}
428			}
429			menuItem.classList.toggle('focus');
430		}
431	}
432
433	function openMenu() {
434		// window.dispatchEvent(new Event('resize'));
435		document.body.classList.add('institute-navigation--toggled');
436		instituteMenuButton.getElementsByClassName.opacity = 0.5;
437		instituteMenuButton.setAttribute('aria-expanded', 'true');
438		instituteMenuButtonBurger.classList.add('is-active');
439	}
440
441	function closeMenu() {
442		console.log('close');
443		instituteNavigation.classList.remove('sub-menu-toggled');
444		instituteMenuButton.setAttribute('aria-expanded', 'false');
445		instituteMenuButtonBurger.classList.remove('is-active');
446		document.body.classList.remove('institute-navigation--toggled');
447		// const toggledItem = instituteNavigation.querySelector(
448		// 	'.menu-item--toggled'
449		// );
450		// if (toggledItem) {
451		// 	toggledItem.classList.remove('menu-item--toggled');
452		// 	toggledItem.setAttribute('aria-expanded', 'false');
453		// }
454	}
455
456	/**
457	 * Shows or hides submenu
458	 */
459	function toggleSubmenu() {
460		const menuItem = this.parentNode;
461
462		const menuItemSub = menuItem.querySelector('.institute-menu__sub-list');
463
464		// console.log(menuItem);
465
466		if (
467			this.getAttribute('href') !== '#' &&
468			this.getAttribute('href') &&
469			!menuItem.classList.contains('current_page_item')
470		) {
471			return;
472		}
473
474		menuItem.classList.toggle('menu-item--toggled');
475		if (menuItem.classList.contains('menu-item--toggled')) {

476			instituteNavigation.classList.add('sub-menu-toggled');
477			menuItem.setAttribute('aria-expanded', 'true');
478			menuItem.querySelector('.hamburger').classList.add('is-active');
479			// console.log(menuItemSub.getBoundingClientRect().height);
480		} else {
481			instituteNavigation.classList.remove('sub-menu-toggled');
482			menuItem.setAttribute('aria-expanded', 'false');
483			menuItem.querySelector('.hamburger').classList.remove('is-active');
484			// console.log(menuItemSub.getBoundingClientRect().height);
485		}
486	}
487})();
488
489//alert
490(function () {
491	const alertContainer = document.querySelector('.site-header__alert');
492
493	// Return early if the alert don't exist.
494	if (!alertContainer) {
495		return;
496	}
497
498	const closeBtn = alertContainer.querySelector('.alert__close');
499
500	const cookieFC = typeof alertFC !== 'undefined' ? alertFC : 24;
501
502	closeBtn.addEventListener('click', () => {
503		alertContainer.remove();
504		window.dispatchEvent(new Event('resize'));
505		setCookie('dortmunder-u_alert_fc', 1, cookieFC);
506	});
507
508	window.scrollTo({ top: 0, behavior: 'smooth' });
509})();
510
511function setCookie(name, value, hours) {
512	var expires = '';
513	if (hours) {
514		var date = new Date();
515		date.setTime(date.getTime() + hours * 60 * 60 * 1000);
516		expires = '; expires=' + date.toUTCString();
517	}
518	document.cookie = name + '=' + (value || '') + expires + '; path=/';
519}
520
521//scroll-to-top
522(function () {
523	const button = document.querySelector('#scroll-to-top');
524
525	// Return early if the button don't exist.
526	if (!button) {
527		return;
528	}
529
530	document.addEventListener('scroll', function () {
531		if (window.scrollY >= window.innerHeight) {
532			button.style.display = 'block';
533		} else {
534			button.style.display = '';
535		}
536	});
537
538	button.addEventListener('click', () => {
539		window.scrollTo({ top: 0, behavior: 'smooth' });
540	});
541})();