https://www.energyandcapital.com/wp-content/themes/energyandcapital/inc/optipub/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
8(function () {
9	const siteNavigation = document.getElementById('header');
10	// Return early if the navigation doesn't exist.
11	if (!siteNavigation) {
12		return;
13	}
14
15	const navBar = document.getElementById('navbarSupportedContent');
16	// Return early if the navbar doesn't exist.
17	if ('undefined' === typeof navBar) {
18		return;
19	}
20
21	const burger = document.getElementById('nav-burger');
22	// Return early if the nav-burger doesn't exist.
23	if ('undefined' === typeof burger) {
24		return;
25	}
26
27	const button = siteNavigation.getElementsByTagName('button')[0];
28	// Return early if the button doesn't exist.
29	if ('undefined' === typeof button) {
30		return;
31	}
32
33	const menu = siteNavigation.getElementsByTagName('ul')[0];
34	// Hide menu toggle button if menu is empty and return early.
35	if ('undefined' === typeof menu) {
36		button.style.display = 'none';
37		return;
38	}
39
40	if (!menu.classList.contains('nav-menu')) {
41		menu.classList.add('nav-menu');
42	}
43
44    // Collapse nagivation when screen width hides it
45	$(window).on('resize', function() {
46		if ($(window).width() > 991.98) {
47			$('#navbarSupportedContent').collapse('hide');
48		}
49	});
50
51	// Toggle burger on navigation toggle
52	$('#navbarSupportedContent').on('shown.bs.collapse', function () {
53		$('#nav-burger').addClass('change');
54	}).on('hidden.bs.collapse', function () {
55		$('#nav-burger').removeClass('change');
56
57	});
58
59    var $searchHover = $('.search');
60    // Handle actual user hover events
61    $searchHover.hover(
62        function() { // mouseover
63			$(this).addClass('search-hovered');
64        });
65
66	// Remove the .toggled class and set aria-expanded to false when the user clicks outside the navigation.
67	document.addEventListener('click', function (event) {
68		const isClickInside = siteNavigation.contains(event.target);
69		if (!isClickInside) {
70			$('#navbarSupportedContent').collapse('hide');
71			$('.search').removeClass('search-hovered');
72		}
73	});
74
75	// Get all the link elements within the menu.
76	const links = menu.getElementsByTagName('a');
77
78	// Get all the link elements with children within the menu.
79	const linksWithChildren = menu.querySelectorAll('.menu-item-has-children > a, .page_item_has_children > a');
80
81	// Toggle focus each time a menu link is focused or blurred.
82	for (const link of links) {
83		link.addEventListener('focus', toggleFocus, true);
84		link.addEventListener('blur', toggleFocus, true);
85	}
86
87	// Toggle focus each time a menu link with children receive a touch event.
88	for (const link of linksWithChildren) {
89		link.addEventListener('touchstart', toggleFocus, false);
90	}
91
92	/**
93	 * Sets or removes .focus class on an element.
94	 */
95	function toggleFocus() {
96		if (event.type === 'focus' || event.type === 'blur') {
97			let self = this;
98			// Move up through the ancestors of the current link until we hit .nav-menu.
99			while (!self.classList.contains('nav-menu')) {
100				// On li elements toggle the class .focus.
101				if ('li' === self.tagName.toLowerCase()) {
102					self.classList.toggle('focus');
103				}
104				self = self.parentNode;
105			}
106		}
107
108		if (event.type === 'touchstart') {
109			const menuItem = this.parentNode;
110			event.preventDefault();
111			for (const link of menuItem.parentNode.children) {
112				if (menuItem !== link) {
113					link.classList.remove('focus');
114				}
115			}
116			menuItem.classList.toggle('focus');
117		}
118	}
119
120}());