https://restorativemedicine.org/wp-content/themes/aarm/js/main.js?ver=1.1

1( function( window, document, $ ) {
2
3	$(document).ready( function() {
4
5		//Allow :active styles to work in your CSS on a page in Mobile Safari:
6		//https://css-tricks.com/snippets/css/remove-gray-highlight-when-tapping-links-in-mobile-safari/
7		document.addEventListener("touchstart", function(){}, true);
8
9		// Container for global variables
10		window.aarm = window.aarm || {};
11		aarm.subMenuItem = $('.header--main .navigation__menu > .menu-item-has-children');
12		aarm.initWindowWidth = $(window).width();
13
14		// Detect flexbox
15		// Apply a more generic hook than Modernizr for flex implementations supported in both standard and tweener versions
16		(function detectFlexbox() {
17			var doc = document.body || document.documentElement,
18			style   = doc.style;
19
20			if ( style.webkitFlexWrap === '' || style.msFlexWrap === '' || style.flexWrap === '' ) {
21			 	doc.className += " flex-common";
22			}
23		})();
24
25		// Faux placholders in older browsers
26		(function detectPlaceholders(){
27			if (typeof Modernizr !== typeof undefined && !Modernizr.placeholder) {
28				// search for inputs that have a placeholder attribute and inject into the input
29				var $input = $("input[placeholder]");
30				$input.each(function(index, item) {
31					$(this).val($(this).attr('placeholder'));
32				});
33			}
34		})();
35
36		// Init instances of flexslider carousel
37		(function initFlexSlider() {
38			if (typeof $.flexslider === 'function') {
39				$('.carousel--home').flexslider({
40					slideshow: true,
41					controlNav: true,
42					directionNav: false,
43					slideshowSpeed: 6000
44				});
45				$('.carousel--testimonials').flexslider({
46					slideshow: true,
47					controlNav: false,
48					directionNav: false,
49					slideshowSpeed: 6000
50				});
51			}
52		})();
53
54		(function accessibleSubMenus() {
55			var $parentMenus = $('.navigation--header .navigation__menu > .menu-item-has-children');
56
57			$parentMenus.each(function(index, item) {
58				$(this).attr('aria-haspopup', true);
59			});
60
61		})();
62
63
64		// HELPERS
65		var toggleMobileMenu = function(hide) {
66
67			var $menu    = $('.header--main__menu-container'),
68			iconClass    = (hide || $menu.is(':visible')) ? 'fa fa-bars' : 'fa fa-close',
69			ariaExpanded = (hide || $menu.is(':visible')) ? false : true,
70			func;
71
72			if (hide) {
73				func = 'hide';
74			} else {
75				func = $menu.is(':visible') ? 'slideUp' : 'slideDown';
76			}
77
78			// If we're hiding the menu, also hide any sub-menus

79			// and change the "-" back to a "+" (via sub-menu-visible class)
80			if (func == 'hide' || func == 'slideUp') {
81				aarm.subMenuItem
82					.removeClass('sub-menu-visible')
83					.children('.sub-menu')[func]();
84			}
85
86			// If we're hiding sub menus on window resize,
87			// be sure to remove any classes added in tablet touchscreen view and remove the close button
88			// Edge case but conceivable given larger tablets with split screen capability
89			if (func == 'hide') {
90				$('.show-sub-menu')
91					.find('.sub-menu-close').remove()
92					.end().removeClass('show-sub-menu');
93			}
94
95			// Toggle the main menu hamburger button
96			// Toggle aria values
97			$('#main_menu_toggle')
98				.attr('aria-expanded', ariaExpanded)
99				.children('i').removeClass().addClass(iconClass);
100
101			$menu.find('.navigation__menu').attr('aria-expanded', ariaExpanded);
102
103			// Fire the correct show/hide function
104			$menu[func]();
105
106		};
107
108		var detectEvent = function() {
109			return ('ontouchstart' in document.documentElement || $(window).width() < 767) ? 'click' : 'hover';
110		};
111
112		var toggleSubMenuOnClick = function(e) {
113			var $this = $(this);
114			if ( $(window).width() < 767 ) {
115				// Small screen menu
116				// Follow if link is clicked / else show menu
117				// Use close button to hide menu without following link
118				if ($(e.target).is('li.menu-item')) {
119					$this.toggleClass('sub-menu-visible');
120					$this.children('.sub-menu').slideToggle();
121				}
122			} else {
123				// Large screen menu, e.g. tablet
124				// For top level menu:
125					// First click - show menu
126					// Second click - follow link
127				if (!$this.hasClass('show-sub-menu')) {
128					e.preventDefault();
129
130					// Add close button to menu
131					var $close = $('<span class="sub-menu-close" />').html('&times;'),
132					$thisMenu  = $this.children('.sub-menu').prepend($close);
133
134					$this.addClass('show-sub-menu');
135
136					$('body').one('click', '.sub-menu-close', function() {
137						toggleSubMenuOnClick(e);
138					});
139				} else {
140					// Only this menu
141					$this.children('.sub-menu').find('.sub-menu-close').remove();
142					$this.removeClass('show-sub-menu');
143				}
144			}
145		};
146
147		var toggleSubMenuOnHover = function(e) {
148			if (e.type == 'mouseenter') {
149				$(this).addClass('show-sub-menu');
150			} else {
151				$(this).removeClass('show-sub-menu');
152			}
153		};
154
155		// https://davidwalsh.name/javascript-debounce-function
156		var debounce = function(func, wait, immediate) {
157			var timeout;
158			return function() {
159				var context = this,
160				args        = arguments;
161
162				var later = function() {
163					timeout = null;
164					if (!immediate) func.apply(context, args);
165				};
166				var callNow = immediate && !timeout;
167				clearTimeout(timeout);
168				timeout = setTimeout(later, wait);
169				if (callNow) func.apply(context, args);
170			};
171		};
172
173
174		// EVENT HANDLERS
175		(function attachEventHandlers() {
176
177			// Faux placeholders in older browsers
178			if (typeof Modernizr !== typeof undefined && !Modernizr.placeholder) {
179				$("input[placeholder]")
180					.focusin(function() {
181						// console.log('focus in');
182						// var $placeholder = $(this).attr('placeholder');
183						$(this).val('');
184					})
185					.focusout(function() {
186						// console.log('focus out');
187						var $placeholder = $(this).attr('placeholder');
188						if ($(this).val().trim() === '' || $(this).val() === $placeholder) {
189							$(this).val($placeholder);
190						}
191					});
192			}
193
194			// Toggle Mobile Menu
195			$('#main_menu_toggle').click(function() {
196				toggleMobileMenu();
197			});
198
199			// Toggle Sub Menu
200			(function toggleSubMenu() {
201				// Determine event to handle for displaying sub-menus
202				// Click - if is smaller viewport or is touch enabled device
203				// Hover - if is larger viewport
204				// Uses namespaced events so can be easily toggled on and off if window is resized
205				aarm.subMenuEventToHandle = detectEvent();
206
207				// Touch event
208				if ( aarm.subMenuEventToHandle == 'click' ) {
209					aarm.subMenuItem.on('click.aarmSubMenu', function(e) {
210						toggleSubMenuOnClick.call(this, e);
211					});
212				} else {
213					aarm.subMenuItem.on( 'mouseenter.aarmSubMenu mouseleave.aarmSubMenu', function(e) {
214						toggleSubMenuOnHover.call(this, e);
215					});
216				}
217			})();
218
219			// Window Resize
220			// with debounce
221			var windowResizeFn = debounce(function(e) {
222
223				// Only proceed if window width has changed (not height)

224				var currWindowWidth = $(window).width();
225				if (currWindowWidth != aarm.initWindowWidth) {
226
227					// Reset event handlers for displaying sub-menus
228					var currentEventToHandle = detectEvent();
229					if (currentEventToHandle != aarm.subMenuEventToHandle) {
230
231						if (currentEventToHandle == 'click') {
232							aarm.subMenuItem
233								.off('mouseenter.aarmSubMenu mouseleave.aarmSubMenu')
234								.on('click.aarmSubMenu', toggleSubMenuOnClick);
235						} else {
236							aarm.subMenuItem
237								.off('click.aarmSubMenu')
238								.on('mouseenter.aarmSubMenu mouseleave.aarmSubMenu', toggleSubMenuOnHover);
239						}
240
241						aarm.subMenuEventToHandle = currentEventToHandle;
242					}
243
244					// Don't animate the menu slide up on resize; simply hides it
245					// Argument hide=true
246					toggleMobileMenu(true);
247
248					// Reset base window width for future comparisons
249					aarm.initWindowWidth = currWindowWidth;
250				}
251
252			}, 250);
253			window.addEventListener('resize', windowResizeFn);
254
255		})();
256
257	});
258
259} )( window, window.document, jQuery );