https://ashleyedwards.co.uk/wp-content/themes/s4l-genesis-template-1/js/responsive-menus.js?ver=1.2.2

1/**
2 * This script adds the accessibility-ready responsive menus to Kreativ Pro.
3 *
4 * @author StudioPress, ThemeSquare
5 * @link 	https://github.com/copyblogger/responsive-menus
6 * @link http://robincornett.com/genesis-responsive-menu/
7 * @version 1.0.0
8 * @license GPL-2.0+
9 */
10
11var genesisMenuParams    = typeof genesis_responsive_menu === 'undefined' ? '' : genesis_responsive_menu,
12	genesisMenusUnchecked  = genesisMenuParams.menuClasses,
13	genesisMenus           = {},
14	menusToCombine         = [];
15
16( function ( document, $, undefined ) {
17
18	'use strict';
19
20	// Make our menus unique if there's more than one instance on the page.
21	/**
22	 * Validate the menus passed by the theme with what's being loaded on the page,
23	 * and pass the new and accurate information to our new data.
24	 * @param {genesisMenusUnchecked} Raw data from the localized script in the theme.
25	 * @return {array} genesisMenus array gets populated with updated data.
26	 * @return {array} menusToCombine array gets populated with relevant data.
27	 */
28	$.each( genesisMenusUnchecked, function( group ) {
29
30		// Mirror our group object to populate.
31		genesisMenus[group] = [];
32
33		// Loop through each instance of the specified menu on the page.
34		$.each( this, function( key, value ) {
35
36			var menuString = value,
37				$menu      = $(value);
38
39			// If there is more than one instance, append the index and update array.
40			if ( $menu.length > 1 ) {
41
42				$.each( $menu, function( key, value ) {
43
44					var newString = menuString + '-' + key;
45
46					$(this).addClass( newString.replace('.','') );
47
48					genesisMenus[group].push( newString );
49
50					if ( 'combine' === group ) {
51						menusToCombine.push( newString );
52					}
53
54				});
55
56			} else if ( $menu.length == 1 ) {
57
58				genesisMenus[group].push( menuString );
59
60				if ( 'combine' === group ) {
61					menusToCombine.push( menuString );
62				}
63
64			}
65
66		});
67
68	});
69
70	// Make sure there is something to use for the 'others' array.
71	if ( typeof genesisMenus.others == 'undefined' ) {
72		genesisMenus.others = [];
73	}
74
75
76	// If there's only one menu on the page for combining, push it to the 'others' array and nullify our 'combine' variable.
77	if ( menusToCombine.length == 1 ) {
78		genesisMenus.others.push( menusToCombine[0] );
79		genesisMenus.combine = null;
80		menusToCombine = null;
81	}
82
83	var genesisMenu         = {},
84		mainMenuButtonClass = 'menu-toggle',
85		subMenuButtonClass  = 'sub-menu-toggle',
86		responsiveMenuClass = 'genesis-responsive-menu';
87
88	// Initialize.
89	genesisMenu.init = function() {
90
91		// Exit early if there are no menus to do anything.
92		if ( $( _getAllMenusArray() ).length == 0 ) {
93			return;
94		}
95
96		var menuIconClass     = typeof genesisMenuParams.menuIconClass !== 'undefined' ? genesisMenuParams.menuIconClass : '',
97			subMenuIconClass  = typeof genesisMenuParams.subMenuIconClass !== 'undefined' ? genesisMenuParams.subMenuIconClass : '',
98			toggleButtons     = {
99				menu : $( '<button />', {
100					'class' : mainMenuButtonClass,
101					'aria-expanded' : false,
102					'aria-pressed' : false,
103					'role' : 'button'
104					} )
105					.append( genesisMenuParams.mainMenu ),
106				submenu : $( '<button />', {
107					'class' : subMenuButtonClass,
108					'aria-expanded' : false,
109					'aria-pressed' : false,
110					'role' : 'button'
111					} )
112					.append( $( '<span />', {
113						'class' : 'screen-reader-text',
114						'text' : genesisMenuParams.subMenu
115					} ) )
116			};
117
118		// Add the responsive menu class to the active menus.
119		_addResponsiveMenuClass();
120
121		// Add the main nav button to the primary menu, or exit the plugin.
122		_addMenuButtons( toggleButtons );
123
124		// Setup additional classes.
125		$( '.' + mainMenuButtonClass ).addClass( menuIconClass );
126		$( '.' + subMenuButtonClass ).addClass( subMenuIconClass );
127		$( '.' + mainMenuButtonClass ).on( 'click.genesisMenu-mainbutton', _mainmenuToggle ).each( _addClassID );
128		$( '.' + subMenuButtonClass ).on( 'click.genesisMenu-subbutton', _submenuToggle );
129		$( window ).on( 'resize.genesisMenu', _doResize ).triggerHandler( 'resize.genesisMenu' );
130	};
131
132	/**
133	 * Add menu toggle button to appropriate menus.
134	 * @param {toggleButtons} Object of menu buttons to use for toggles.
135	 */
136	function _addMenuButtons( toggleButtons ) {
137
138		// Apply sub menu toggle to each sub-menu found in the menuList.

139		$( _getMenuSelectorString( genesisMenus ) ).find( '.sub-menu' ).before( toggleButtons.submenu );
140
141
142		if ( menusToCombine !== null ) {
143
144			var menusToToggle = genesisMenus.others.concat( menusToCombine[0] );
145
146		 	// Only add menu button the primary menu and navs NOT in the combine variable.
147		 	$( _getMenuSelectorString( menusToToggle ) ).before( toggleButtons.menu );
148
149		} else {
150
151			// Apply the main menu toggle to all menus in the list.
152			$( _getMenuSelectorString( genesisMenus.others ) ).before( toggleButtons.menu );
153
154		}
155
156	}
157
158	/**
159	 * Add the responsive menu class.
160	 */
161	function _addResponsiveMenuClass() {
162		$( _getMenuSelectorString( genesisMenus ) ).addClass( responsiveMenuClass );
163	}
164
165	/**
166	 * Execute our responsive menu functions on window resizing.
167	 */
168	function _doResize() {
169		var buttons   = $( 'button[id^="genesis-mobile-"]' ).attr( 'id' );
170		if ( typeof buttons === 'undefined' ) {
171			return;
172		}
173		_maybeClose( buttons );
174		_superfishToggle( buttons );
175		_changeSkipLink( buttons );
176		_combineMenus( buttons );
177	}
178
179	/**
180	 * Add the nav- class of the related navigation menu as
181	 * an ID to associated button (helps target specific buttons outside of context).
182	 */
183	function _addClassID() {
184		var $this = $( this ),
185			nav   = $this.next( 'nav' ),
186			id    = 'class';
187
188		$this.attr( 'id', 'genesis-mobile-' + $( nav ).attr( id ).match( /nav-\w*\b/ ) );
189	}
190
191	/**
192	 * Combine our menus if the mobile menu is visible.
193	 * @params buttons
194	 */
195	function _combineMenus( buttons ){
196
197		// Exit early if there are no menus to combine.
198		if ( menusToCombine == null ) {
199			return;
200		}
201
202		// Split up the menus to combine based on order of appearance in the array.
203		var primaryMenu   = menusToCombine[0],
204			combinedMenus = $( menusToCombine ).filter( function(index) { if ( index > 0 ) { return index; } });
205
206		// If the responsive menu is active, append items in 'combinedMenus' object to the 'primaryMenu' object.
207		if ( 'none' !== _getDisplayValue( buttons ) ) {
208
209			$.each( combinedMenus, function( key, value ) {
210				$(value).find( '.menu > li' ).addClass( 'moved-item-' + value.replace( '.','' ) ).appendTo( primaryMenu + ' ul.genesis-nav-menu' );
211			});
212			$( _getMenuSelectorString( combinedMenus ) ).hide();
213
214		} else {
215
216			$( _getMenuSelectorString( combinedMenus ) ).show();
217			$.each( combinedMenus, function( key, value ) {
218				$( '.moved-item-' + value.replace( '.','' ) ).appendTo( value + ' ul.genesis-nav-menu' ).removeClass( 'moved-item-' + value.replace( '.','' ) );
219			});
220
221		}
222
223	}
224
225	/**
226	 * Action to happen when the main menu button is clicked.
227	 */
228	function _mainmenuToggle() {
229		var $this = $( this );
230		_toggleAria( $this, 'aria-pressed' );
231		_toggleAria( $this, 'aria-expanded' );
232		$this.toggleClass( 'activated' );
233		$this.next( 'nav' ).slideToggle( 'fast' );
234	}
235
236	/**
237	 * Action for submenu toggles.
238	 */
239	function _submenuToggle() {
240
241		var $this  = $( this ),
242			others = $this.closest( '.menu-item' ).siblings();
243		_toggleAria( $this, 'aria-pressed' );
244		_toggleAria( $this, 'aria-expanded' );
245		$this.toggleClass( 'activated' );
246		$this.next( '.sub-menu' ).slideToggle( 'fast' );
247
248		others.find( '.' + subMenuButtonClass ).removeClass( 'activated' ).attr( 'aria-pressed', 'false' );
249		others.find( '.sub-menu' ).slideUp( 'fast' );
250
251	}
252
253	/**
254	 * Activate/deactivate superfish.
255	 * @params buttons
256	 */
257	function _superfishToggle( buttons ) {
258		var _superfish = $( '.' + responsiveMenuClass + ' .js-superfish' ),
259			$args      = 'destroy';
260		if ( typeof _superfish.superfish !== 'function' ) {
261			return;
262		}
263		if ( 'none' === _getDisplayValue( buttons ) ) {
264			$args = {
265				'delay': 100,
266				'animation': {'opacity': 'show', 'height': 'show'},
267				'dropShadows': false,
268				'speed': 'fast'
269			};
270		}
271		_superfish.superfish( $args );
272	}
273
274	/**
275	 * Modify skip link to match mobile buttons.
276	 * @param buttons
277	 */
278	function _changeSkipLink( buttons ) {
279
280		// Start with an empty array.
281		var menuToggleList = _getAllMenusArray();
282
283		// Exit out if there are no menu items to update.
284		if ( ! $( menuToggleList ).length > 0 ) {
285			return;
286		}
287
288		$.each( menuToggleList, function ( key, value ) {
289
290			var newValue  = value.replace( '.', '' ),
291				startLink = 'genesis-' + newValue,
292				endLink   = 'genesis-mobile-' + newValue;
293
294			if ( 'none' == _getDisplayValue( buttons ) ) {
295				startLink = 'genesis-mobile-' + newValue;
296				endLink   = 'genesis-' + newValue;
297			}
298
299			var $item = $( '.genesis-skip-link a[href="#' + startLink + '"]' );
300
301			if ( menusToCombine !== null && value !== menusToCombine[0] ) {
302				$item.toggleClass( 'skip-link-hidden' );
303			}
304
305			if ( $item.length > 0 ) {
306				var link  = $item.attr( 'href' );
307					link  = link.replace( startLink, endLink );
308
309				$item.attr( 'href', link );
310			} else {
311				return;
312			}
313
314		});
315
316	}
317
318	/**
319	 * Close all the menu toggles if buttons are hidden.
320	 * @param buttons
321	 */
322	function _maybeClose( buttons ) {
323		if ( 'none' !== _getDisplayValue( buttons ) ) {
324			return true;
325		}
326
327		$( '.' + mainMenuButtonClass + ', .' + responsiveMenuClass + ' .sub-menu

327-toggle' )
328			.removeClass( 'activated' )
329			.attr( 'aria-expanded', false )
330			.attr( 'aria-pressed', false );
331
332		$( '.' + responsiveMenuClass + ', ' + responsiveMenuClass + ' .sub-menu' )
333			.attr( 'style', '' );
334	}
335
336	/**
337	 * Generic function to get the display value of an element.
338	 * @param  {id} $id ID to check
339	 * @return {string}     CSS value of display property
340	 */
341	function _getDisplayValue( $id ) {
342		var element = document.getElementById( $id ),
343			style   = window.getComputedStyle( element );
344		return style.getPropertyValue( 'display' );
345	}
346
347	/**
348	 * Toggle aria attributes.
349	 * @param  {button} $this     passed through
350	 * @param  {aria-xx} attribute aria attribute to toggle
351	 * @return {bool}           from _ariaReturn
352	 */
353	function _toggleAria( $this, attribute ) {
354		$this.attr( attribute, function( index, value ) {
355			return 'false' === value;
356		});
357	}
358
359	/**
360	 * Helper function to return a comma separated string of menu selectors.
361	 * @param {itemArray} Array of menu items to loop through.
362	 * @param {ignoreSecondary} boolean of whether to ignore the 'secondary' menu item.
363	 * @return {string} Comma-separated string.
364	 */
365	function _getMenuSelectorString( itemArray ) {
366
367		var itemString = $.map( itemArray, function( value, key ) {
368			return value;
369		});
370
371		return itemString.join( ',' );
372
373	}
374
375	/**
376	 * Helper function to return a group array of all the menus in
377	 * both the 'others' and 'combine' arrays.
378	 * @return {array} Array of all menu items as class selectors.
379	 */
380	function _getAllMenusArray() {
381
382		// Start with an empty array.
383		var menuList = [];
384
385		// If there are menus in the 'menusToCombine' array, add them to 'menuList'.
386		if ( menusToCombine !== null ) {
387
388			$.each( menusToCombine, function( key, value ) {
389				menuList.push( value.valueOf() );
390			});
391
392		}
393
394		// Add menus in the 'others' array to 'menuList'.
395		$.each( genesisMenus.others, function( key, value ) {
396			menuList.push( value.valueOf() );
397		});
398
399		if ( menuList.length > 0 ) {
400			return menuList;
401		} else {
402			return null;
403		}
404
405	}
406
407	$(document).ready(function () {
408
409		if ( _getAllMenusArray() !== null ) {
410
411			genesisMenu.init();
412
413		}
414
415	});
416
417})( document, jQuery );