https://ellicottvillelibrary.org/wp-content/themes/spacious/js/navigation.js?ver=1.10.0

1/**
2 * navigation.js
3 *
4 * Handles toggling the navigation menu for small screens.
5 */
6( function () {
7	var container, button, menu, links, i, len;
8
9	container = document.getElementById( 'site-navigation' );
10	if ( ! container ) {
11		return;
12	}
13
14	button = container.getElementsByClassName( 'menu-toggle' )[0];
15	if ( 'undefined' === typeof button ) {
16		return;
17	}
18
19	menu = container.getElementsByTagName( 'ul' )[0];
20
21	// Hide menu toggle button if menu is empty and return early.
22	if ( 'undefined' === typeof menu ) {
23		button.style.display = 'none';
24		return;
25	}
26
27	if ( - 1 === menu.className.indexOf( 'nav-menu' ) ) {
28		menu.className += ' nav-menu';
29	}
30
31	button.onclick = function () {
32		if ( - 1 !== container.className.indexOf( 'main-small-navigation' ) ) {
33			container.className = container.className.replace( 'main-small-navigation', 'main-navigation' );
34		} else {
35			container.className = container.className.replace( 'main-navigation', 'main-small-navigation' );
36		}
37	};
38
39	// Get all the link elements within the menu.
40	links = menu.getElementsByTagName( 'a' );
41
42	// Each time a menu link is focused or blurred, toggle focus.
43	for ( i = 0, len = links.length; i < len; i++ ) {
44		links[i].addEventListener( 'focus', toggleFocus, true );
45		links[i].addEventListener( 'blur', toggleFocus, true );
46	}
47
48	/**
49	 * Sets or removes .focus class on an element.
50	 */
51	function toggleFocus() {
52		var self = this;
53
54		// Move up through the ancestors of the current link until we hit .nav-menu.
55		while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
56			// On li elements toggle the class .focus.
57			if ( 'li' === self.tagName.toLowerCase() ) {
58				if ( -1 !== self.className.indexOf( 'focus' ) ) {
59					self.className = self.className.replace( ' focus', '' );
60				} else {
61					self.className += ' focus';
62				}
63			}
64
65			self = self.parentElement;
66		}
67	}
68} )();
69
70// Show Submenu on click on touch enabled deviced
71( function () {
72	var container;
73	container = document.getElementById( 'site-navigation' );
74	if ( ! container ) {
75		return;
76	}
77
78	/**
79	 * Toggles `focus` class to allow submenu access on tablets.
80	 */
81	( function ( container ) {
82		var touchStartFn, i,
83		    parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
84
85		if ( ( 'ontouchstart' in window ) && ( window.matchMedia( "( min-width: 768px ) " ).matches ) ) {
86			touchStartFn = function ( e ) {
87				var menuItem = this.parentNode, i;
88
89				if ( ! menuItem.classList.contains( 'focus' ) ) {
90					e.preventDefault();
91					for ( i = 0; i < menuItem.parentNode.children.length; ++ i ) {
92						if ( menuItem === menuItem.parentNode.children[i] ) {
93							continue;
94						}
95						menuItem.parentNode.children[i].classList.remove( 'focus' );
96					}
97					menuItem.classList.add( 'focus' );
98				} else {
99					menuItem.classList.remove( 'focus' );
100				}
101			};
102
103			for ( i = 0; i < parentLink.length; ++ i ) {
104				parentLink[i].addEventListener( 'touchstart', touchStartFn, false );
105			}
106		}
107	}( container ) );
108} )();
109
110/**
111 * Fix: Menu out of view port
112 */
113( function () {
114
115	var subMenu;
116
117	jQuery( '.main-navigation ul li.menu-item-has-children a, .main-navigation ul li.page_item_has_children a' ).on( {
118
119		'mouseover touchstart' : function () {
120
121			function isElementInViewport( subMenu ) {
122
123				if ( 'function' === typeof jQuery && subMenu instanceof jQuery ) {
124					subMenu = subMenu[0];
125				}
126
127				// In case browser doesn't support getBoundingClientRect function.
128				if ( 'function' === typeof subMenu.getBoundingClientRect ) {
129
130					var rect = subMenu.getBoundingClientRect();
131
132					if ( rect.right + 2 > ( window.innerWidth || document.documentElement.clientWidth ) ) {
133						return 'spacious-menu--left'; // menu goes out of viewport from right.
134					} else if ( rect.left < 0 ) {
135						return 'spacious-menu--right'; // menu goes out of viewport from left.
136					} else {
137						return false;
138					}
139				}
140			}
141
142			subMenu = jQuery( this ).next( '.sub-menu, .children' );
143
144			// If menu item has submenu
145			if ( subMenu.length > 0 ) {
146
147				var viewportClass = isElementInViewport( subMenu );
148
149				if ( false !== viewportClass ) {
150					subMenu.addClass( viewportClass );
151				}
152			}
153
154		}
155
156	} );
157
158} )();
159
160/**
161 * Keep menu items on one line.
162 */
163(
164	function () {
165
166		jQuery( document ).ready( function () {
167			// Get required elements.
168			var mainWrapper           = document.querySelector( '#header-text-nav-container .inner-wrap' ),
169			    branding              = document.getElementById( 'header-left-section' ),
170			    headerAction          = document.querySelector( '.header-action' ),
171			    navigation            = document.getElementById( 'site-navigation' ),
172			    mainWidth             = mainWrapper ? mainWrapper.offsetWidth : 0,
173			    brandWidth            = branding ? branding.offsetWidth : 0,
174			    navWidth              = navigation ? navigation.offsetWidth : 0,
175			    headerActionWidth     = headerAction ? headerAction.offsetWidth: 0,
176			    isExtra               = ( brandWidth + navWidth + headerActionWidth ) > mainWidth,
177			    more                  = navigation ? navigation.getElementsByClassName( 'tg-menu-extras-wrap' )[0] : '',
178			    headerDisplayTypeFour = document.getElementsByClassName( 'spacious-header-display-four' )[0];
179
180			// Check for header style 4.
181			if ( headerDisplayTypeFour ) {
182				isExtra = ( navWidth + headerActionWidth ) >= mainWidth;
183			}
184
185			// Return if no excess menu items.
186			if ( ! navigation || ! navigation.classList.contains( 'tg-extra-menus' ) ) {
187				return;
188			}
189
190			function Dimension( el ) {
191				var elWidth;
192				if ( document.all ) {// IE.
193					elWidth = el.currentStyle.width + parseInt( el.currentStyle.marginLeft, 10 ) + parseInt( el.currentStyle.marginRight, 10 ) + parseInt( el.currentStyle.paddingLeft, 10 ) + parseInt( el.currentStyle.paddingRight, 10 );
194				} else {
195					elWidth = parseInt( document.defaultView.getComputedStyle( el, '' ).getPropertyValue( 'width' ) ) + parseInt( document.defaultView.getComputedStyle( el, '' ).getPropertyValue( 'margin-left' ) ) + parseInt( document.defaultView.getComputedStyle( el, '' ).getPropertyValue( 'margin-right' ) );
196				}
197
198				return elWidth;
199			}
200
201			// If menu excesses.
202			if ( ! isExtra ) {
203				more.parentNode.removeChild( more );
204			} else {
205				var widthToBe, buttons, buttonWidth, moreWidth;
206
207				widthToBe = mainWidth - headerActionWidth;
208
209				if ( ! headerDisplayTypeFour ) {
210					widthToBe = widthToBe - brandWidth;
211				}
212
213				buttons      = navigation.getElementsByClassName( 'tg-header-button-wrap' )[0];
214				buttonWidth  = buttons ? Dimension( buttons ) : 0;
215				moreWidth    = more ? Dimension( more ) : 0;
216				newNavWidth  = widthToBe - ( buttonWidth + moreWidth );
217
218				navigation.style.visibility = 'none';
219				navigation.style.width      = newNavWidth + 'px';
220
221				// Returns first children of a node.
222				function getChildNodes( node ) {
223					var children = [];
224
225					for ( var child in node.childNodes ) {
226						if ( typeof node !== 'undefined' ) {
227							if ( 1 === node.childNodes[child].nodeType ) {

228								children.push( node.childNodes[child] );
229							}
230						}
231					}
232
233					return children;
234				}
235
236				var navUl = navigation.getElementsByClassName( 'nav-menu' )[0],
237				    navLi = getChildNodes( navUl ); // Get lis.
238
239				function offset( el ) {
240					var rect       = el.getBoundingClientRect(),
241					    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
242					    scrollTop  = window.pageYOffset || document.documentElement.scrollTop;
243
244					return { top : rect.top + scrollTop, left : rect.left + scrollLeft }
245				}
246
247				var extraLi = [];
248
249				for ( var liCount = 0; liCount < navLi.length; liCount ++ ) {
250					var initialPos, li, posTop;
251
252					li     = navLi[liCount];
253					posTop = offset( li ).top;
254
255					if ( 0 === liCount ) {
256						initialPos = posTop;
257					}
258
259					if ( posTop > initialPos ) {
260						if ( ! li.classList.contains( 'header-action' ) && ! li.classList.contains( 'tg-menu-extras-wrap' ) && ! li.classList.contains( 'tg-header-button-wrap' ) ) {
261							extraLi.push( li );
262						}
263					}
264				}
265
266				var newNavWidth = newNavWidth + ( buttonWidth + moreWidth ),
267				    extraWrap   = document.getElementById( 'tg-menu-extras' );
268
269				if ( ! headerDisplayTypeFour ) {
270					newNavWidth = newNavWidth - 30;
271				}
272
273				navigation.style.width = newNavWidth + 'px';
274
275				if ( null !== extraWrap ) {
276					extraLi.forEach( function ( item, index, arr ) {
277						extraWrap.appendChild( item );
278					} );
279				}
280
281			}
282		} );
283
284	}()
285);