https://crowdbooks.com/wp-content/themes/infinity-pro/js/responsive-menu.js

1(function(document, $, undefined) {
2
3	// Add js body class when javascript is enabled
4	$('body').addClass('js');
5
6	// Add accessibility menu
7	'use strict';
8
9	var infinity = {},
10		mainMenuButtonClass = 'menu-toggle',
11		subMenuButtonClass = 'sub-menu-toggle';
12
13	infinity.init = function() {
14		var toggleButtons = {
15			menu: $('<button />', {
16					'class': mainMenuButtonClass,
17					'aria-expanded': false,
18					'aria-pressed': false,
19					'role': 'button'
20				})
21				.append(infinity.params.mainMenu),
22			submenu: $('<button />', {
23					'class': subMenuButtonClass,
24					'aria-expanded': false,
25					'aria-pressed': false,
26					'role': 'button'
27				})
28				.append($('<span />', {
29					'class': 'screen-reader-text',
30					text: infinity.params.subMenu
31				}))
32		};
33		$('.nav-primary').before(toggleButtons.menu); // add the main nav buttons
34		$('nav .sub-menu').before(toggleButtons.submenu); // add the submenu nav buttons
35		$('.' + mainMenuButtonClass).each(_addClassID);
36		$('.' + mainMenuButtonClass).addClass('ionicons-before ion-drag');
37		$('.' + subMenuButtonClass).addClass('ionicons-before ion-chevron-down');
38		$(window).on('resize.infinity', _doResize).triggerHandler('resize.infinity');
39		$('.' + mainMenuButtonClass).on('click.infinity-mainbutton', _mainmenuToggle);
40		$('.' + subMenuButtonClass).on('click.infinity-subbutton', _submenuToggle);
41	};
42
43	// add nav class and ID to related button
44	function _addClassID() {
45		var $this = $(this),
46			nav = $this.next('nav'),
47			id = 'class';
48		$this.addClass($(nav).attr('class'));
49		if ($(nav).attr('id')) {
50			id = 'id';
51		}
52		$this.attr('id', 'mobile-' + $(nav).attr(id));
53	}
54
55	// Change Skiplinks and Superfish
56	function _doResize() {
57		var buttons = $('button[id^=mobile-]').attr('id');
58		if (typeof buttons === 'undefined') {
59			return;
60		}
61		_superfishToggle(buttons);
62		_changeSkipLink(buttons);
63		_maybeClose(buttons);
64	}
65
66	/**
67	 * action to happen when the main menu button is clicked
68	 */
69	function _mainmenuToggle() {
70		var $this = $(this);
71		_toggleAria($this, 'aria-pressed');
72		_toggleAria($this, 'aria-expanded');
73		$this.toggleClass('activated');
74		$('nav.nav-primary').slideToggle('fast'); //changed to .nav-primary since we're not toggling .nav-secondary
75	}
76
77	/**
78	 * action for submenu toggles
79	 */
80	function _submenuToggle() {
81
82		var $this = $(this),
83			others = $this.closest('.menu-item').siblings();
84		_toggleAria($this, 'aria-pressed');
85		_toggleAria($this, 'aria-expanded');
86		$this.toggleClass('activated');
87		$this.next('.sub-menu').slideToggle('fast');
88
89		others.find('.' + subMenuButtonClass).removeClass('activated').attr('aria-pressed', 'false');
90		others.find('.sub-menu').slideUp('fast');
91
92	}
93
94	/**
95	 * activate/deactivate superfish
96	 */
97	function _superfishToggle(buttons) {
98		if (typeof $('.js-superfish').superfish !== 'function') {
99			return;
100		}
101		if ('none' === _getDisplayValue(buttons)) {
102			$('.js-superfish').superfish({
103				'delay': 100,
104				'animation': {
105					'opacity': 'show',
106					'height': 'show'
107				},
108				'dropShadows': false
109			});
110		} else {
111			$('.js-superfish').superfish('destroy');
112		}
113	}
114
115	/**
116	 * modify skip links to match mobile buttons
117	 */
118	function _changeSkipLink(buttons) {
119		var startLink = 'genesis-nav',
120			endLink = 'mobile-genesis-nav';
121		if ('none' === _getDisplayValue(buttons)) {
122			startLink = 'mobile-genesis-nav';
123			endLink = 'genesis-nav';
124		}
125		$('.genesis-skip-link a[href^="#' + startLink + '"]').each(function() {
126			var link = $(this).attr('href');
127			link = link.replace(startLink, endLink);
128			$(this).attr('href', link);
129		});
130	}
131
132	function _maybeClose(buttons) {
133		if ('none' !== _getDisplayValue(buttons)) {
134			return;
135		}
136		$('.menu-toggle, .sub-menu-toggle')
137			.removeClass('activated')
138			.attr('aria-expanded', false)
139			.attr('aria-pressed', false);
140		$('nav, .sub-menu')
141			.attr('style', '');
142	}
143
144	/**
145	 * generic function to get the display value of an element
146	 * @param  {id} $id ID to check
147	 * @return {string}     CSS value of display property
148	 */
149	function _getDisplayValue($id) {
150		var element = document.getElementById($id),
151			style = window.getComputedStyle(element);
152		return style.getPropertyValue('display');
153	}
154
155	/**
156	 * Toggle aria attributes
157	 * @param  {button} $this     passed through
158	 * @param  {aria-xx} attribute aria attribute to toggle
159	 * @return {bool}           from _ariaReturn
160	 */
161	function _toggleAria($this, attribute) {
162		$this.attr(attribute, function(index, value) {

163			return 'false' === value;
164		});
165	}
166
167	$(document).ready(function() {
168
169		infinity.params = typeof InfinityL10n === 'undefined' ? '' : InfinityL10n;
170
171		if (typeof infinity.params !== 'undefined') {
172			infinity.init();
173		}
174
175	});
176
177})(document, jQuery);;