https://jetplant.co.uk/wp-content/themes/jetplant_/js/navigation.js?ver=1.0.0

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
8document.addEventListener('DOMContentLoaded', function() {
9	const menuItems = document.querySelectorAll('.nav-item');
10
11	menuItems.forEach(function(menuItem) {
12		menuItem.addEventListener('click', function(e) {
13			const submenu = this.querySelector('.dropdown-menu');
14			if (submenu) {
15				e.stopPropagation();
16				submenu.classList.toggle('show');
17				this.classList.toggle('active');
18			}
19		});
20	});
21
22	document.addEventListener('click', function(e) {
23		const dropdowns = document.querySelectorAll('.dropdown-menu');
24
25		dropdowns.forEach(function(dropdown) {
26			if (!dropdown.contains(e.target)) {
27				dropdown.classList.remove('show');
28				dropdown.parentElement.classList.remove('active');
29			}
30		});
31	});
32});
33
34
35( function() {
36	const siteNavigation = document.getElementById( 'site-navigation' );
37
38	// Return early if the navigation doesn't exist.
39	if ( ! siteNavigation ) {
40		return;
41	}
42
43	const button = siteNavigation.getElementsByTagName( 'button' )[ 0 ];
44
45	// Return early if the button doesn't exist.
46	if ( 'undefined' === typeof button ) {
47		return;
48	}
49
50	const menu = siteNavigation.getElementsByTagName( 'ul' )[ 0 ];
51
52	// Hide menu toggle button if menu is empty and return early.
53	if ( 'undefined' === typeof menu ) {
54		button.style.display = 'none';
55		return;
56	}
57
58	if ( ! menu.classList.contains( 'nav-menu' ) ) {
59		menu.classList.add( 'nav-menu' );
60	}
61
62	// Toggle the .toggled class and the aria-expanded value each time the button is clicked.
63	button.addEventListener( 'click', function() {
64		siteNavigation.classList.toggle( 'toggled' );
65
66		if ( button.getAttribute( 'aria-expanded' ) === 'true' ) {
67			button.setAttribute( 'aria-expanded', 'false' );
68		} else {
69			button.setAttribute( 'aria-expanded', 'true' );
70		}
71	} );
72
73	// Remove the .toggled class and set aria-expanded to false when the user clicks outside the navigation.
74	document.addEventListener( 'click', function( event ) {
75		const isClickInside = siteNavigation.contains( event.target );
76
77		if ( ! isClickInside ) {
78			siteNavigation.classList.remove( 'toggled' );
79			button.setAttribute( 'aria-expanded', 'false' );
80		}
81	} );
82
83	// Get all the link elements within the menu.
84	const links = menu.getElementsByTagName( 'a' );
85
86	// Get all the link elements with children within the menu.
87	const linksWithChildren = menu.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
88
89	// Toggle focus each time a menu link is focused or blurred.
90	for ( const link of links ) {
91		link.addEventListener( 'focus', toggleFocus, true );
92		link.addEventListener( 'blur', toggleFocus, true );
93	}
94
95	// Toggle focus each time a menu link with children receive a touch event.
96	for ( const link of linksWithChildren ) {
97		link.addEventListener( 'touchstart', toggleFocus, false );
98	}
99
100	/**
101	 * Sets or removes .focus class on an element.
102	 */
103	function toggleFocus() {
104		if ( event.type === 'focus' || event.type === 'blur' ) {
105			let self = this;
106			// Move up through the ancestors of the current link until we hit .nav-menu.
107			while ( ! self.classList.contains( 'nav-menu' ) ) {
108				// On li elements toggle the class .focus.
109				if ( 'li' === self.tagName.toLowerCase() ) {
110					self.classList.toggle( 'focus' );
111				}
112				self = self.parentNode;
113			}
114		}
115
116		if ( event.type === 'touchstart' ) {
117			const menuItem = this.parentNode;
118			event.preventDefault();
119			for ( const link of menuItem.parentNode.children ) {
120				if ( menuItem !== link ) {
121					link.classList.remove( 'focus' );
122				}
123			}
124			menuItem.classList.toggle( 'focus' );
125		}
126	}
127}() );