https://evang.at/wp-content/themes/evang20/js/navigation.js

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
9	var overlay, container, button, menu, leftmenu, leftlinks, rightmenu, rightlinks, links, i, len;
10
11	overlay = document.getElementById( 'site-overlay' );
12
13	container = document.getElementById( 'site-navigation' );
14	if ( ! container ) {
15		return;
16	}
17
18	button = container.getElementsByTagName( 'button' )[0];
19	if ( 'undefined' === typeof button ) {
20		return;
21	}
22
23	menu = container.getElementsByTagName( 'ul' )[0];
24
25	// Hide menu toggle button if menu is empty and return early.
26	if ( 'undefined' === typeof menu ) {
27		button.style.display = 'none';
28		return;
29	}
30
31	menu.setAttribute( 'aria-expanded', 'false' );
32	if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
33		menu.className += ' nav-menu';
34	}
35
36	button.onclick = toggleit;
37	overlay.onclick = toggleit;
38  
39  function toggleit() {
40		if ( -1 !== container.className.indexOf( 'toggled' ) ) {
41			container.className = container.className.replace( ' toggled', '' );
42			overlay.className = '';
43			button.setAttribute( 'aria-expanded', 'false' );
44			menu.setAttribute( 'aria-expanded', 'false' );
45		} else {
46			container.className += ' toggled';
47			overlay.className = 'toggled';
48			button.setAttribute( 'aria-expanded', 'true' );
49			menu.setAttribute( 'aria-expanded', 'true' );
50		}
51	}
52
53	// Get all the link elements within the menu.
54	links    = menu.getElementsByTagName( 'a' );
55
56	// Each time a menu link is focused or blurred, toggle focus.
57	for ( i = 0, len = links.length; i < len; i++ ) {
58		links[i].addEventListener( 'focus', toggleFocus, true );
59		links[i].addEventListener( 'blur', toggleFocus, true );
60	}
61
62
63
64
65
66	// Get all the link elements within the menu.
67	leftmenu = document.getElementById( 'topleft' );
68	leftlinks = leftmenu.getElementsByTagName( 'a' );
69
70	if ( -1 === leftmenu.className.indexOf( 'nav-menu' ) ) {
71		leftmenu.className += ' nav-menu';
72	}
73
74	// Each time a menu link is focused or blurred, toggle focus.
75	for ( i = 0, len = leftlinks.length; i < len; i++ ) {
76		leftlinks[i].addEventListener( 'focus', toggleFocus, true );
77		leftlinks[i].addEventListener( 'blur', toggleFocus, true );
78	}
79
80
81	// Get all the link elements within the menu.
82	rightmenu = document.getElementById( 'topright' );
83	rightlinks = rightmenu.getElementsByTagName( 'a' );
84
85	if ( -1 === rightmenu.className.indexOf( 'nav-menu' ) ) {
86		rightmenu.className += ' nav-menu';
87	}
88
89	// Each time a menu link is focused or blurred, toggle focus.
90	for ( i = 0, len = rightlinks.length; i < len; i++ ) {
91		rightlinks[i].addEventListener( 'focus', toggleFocus, true );
92		rightlinks[i].addEventListener( 'blur', toggleFocus, true );
93	}
94
95
96
97
98	/**
99	 * Sets or removes .focus class on an element.
100	 */
101	function toggleFocus() { 
102		var self = this;
103
104		// Move up through the ancestors of the current link until we hit .nav-menu.
105		while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
106
107			// On li elements toggle the class .focus.
108			if ( 'li' === self.tagName.toLowerCase() ) {
109				if ( -1 !== self.className.indexOf( 'focus' ) ) {
110					self.className = self.className.replace( ' focus', '' );
111				} else {
112					self.className += ' focus';
113				}
114			}
115
116			self = self.parentElement;
117		}
118	}
119
120	/**
121	 * Toggles `focus` class to allow submenu access on tablets.
122	 */
123	( function( container ) {
124		var touchStartFn, i,
125			parentLink = container.querySelectorAll( '.parent > a' );
126
127			touchStartFn = function( e ) {
128				var menuItem = this.parentNode, i;
129
130				if ( ! menuItem.classList.contains( 'open' ) ) {
131					e.preventDefault(); 
132					for ( i = 0; i < menuItem.parentNode.children.length; ++i ) {
133						if ( menuItem === menuItem.parentNode.children[i] ) {
134							continue;
135						}
136						menuItem.parentNode.children[i].classList.remove( 'open' );
137					}
138					menuItem.classList.add( 'open' );
139				} else {
140					menuItem.classList.remove( 'open' );
141				}
142			};
143
144			for ( i = 0; i < parentLink.length; ++i ) {
145				parentLink[i].addEventListener( 'click', touchStartFn, false );
146            }
147        
148
149    }( container ) );
150    
151	/**
152	 * Toggles `focus` class to allow submenu access on tablets.
153	 */
154	( function( leftmenu ) {
155		var touchStartFn, i,
156			parentLink = leftmenu.querySelectorAll( '.parent > a' );
157
158			touchStartFn = function( e ) {
159				var menuItem = this.parentNode, i;
160
161				if ( ! menuItem.classList.contains( 'open' ) ) {
162					e.preventDefault(); 
163					for ( i = 0; i < menuItem.parentNode.children.length; ++i ) {
164						if ( menuItem === menuItem.parentNode.children[i] ) {
165							continue;
166						}
167						menuItem.parentNode.children[i].classList.remove( 'open' );
168					}
169					menuItem.classList.add( 'open' );
170				} else {
171					menuItem.classList.remove( 'open' );
172				}
173			};
174
175			for ( i = 0; i < parentLink.length; ++i ) {
176				parentLink[i].addEventListener( 'click', touchStartFn, false );
177            }
178          
179
180	}( leftmenu ) );
181
182

183/**
184	 * Toggles `focus` class to allow submenu access on tablets.
185	 */
186	( function( rightmenu ) {
187		var touchStartFn, i,
188			parentLink = rightmenu.querySelectorAll( '.parent > a' );
189
190			touchStartFn = function( e ) {
191				var menuItem = this.parentNode, i;
192
193				if ( ! menuItem.classList.contains( 'open' ) ) {
194					e.preventDefault(); 
195					for ( i = 0; i < menuItem.parentNode.children.length; ++i ) {
196						if ( menuItem === menuItem.parentNode.children[i] ) {
197							continue;
198						}
199						menuItem.parentNode.children[i].classList.remove( 'open' );
200					}
201					menuItem.classList.add( 'open' );
202				} else {
203					menuItem.classList.remove( 'open' );
204				}
205			};
206
207			for ( i = 0; i < parentLink.length; ++i ) {
208				parentLink[i].addEventListener( 'click', touchStartFn, false );
209			}
210	}( rightmenu ) );
211
212
213} )();