https://ulmer-denkanstoesse.de/wp-content/themes/uda/js/responsive-menu.js?ver=1.0.0

1/**
2 * Accessibility-ready responsive menu.
3 */
4
5( function ( document, $, undefined ) {
6
7	$( 'body' ).addClass( 'js' );
8
9	'use strict';
10
11	var genesisSample              = {},
12		mainMenuButtonClass = 'menu-toggle',
13		subMenuButtonClass  = 'sub-menu-toggle';
14
15	genesisSample.init = function() {
16		var toggleButtons = {
17			menu : $( '<button />', {
18				'class' : mainMenuButtonClass,
19				'aria-expanded' : false,
20				'aria-pressed' : false,
21				'role' : 'button'
22				} )
23				.append( genesisSample.params.mainMenu ),
24			submenu : $( '<button />', {
25				'class' : subMenuButtonClass,
26				'aria-expanded' : false,
27				'aria-pressed' : false,
28				'role' : 'button'
29				} )
30				.append( $( '<span />', {
31					'class' : 'screen-reader-text',
32					text : genesisSample.params.subMenu
33				} ) )
34		};
35		if ($( '.nav-primary' ).length > 0 ) {
36			$( '.nav-primary' ).before( toggleButtons.menu ); // add the main nav buttons
37		} else {
38			$( '.nav-header' ).before( toggleButtons.menu );
39		}
40		$( 'nav .sub-menu' ).before( toggleButtons.submenu ); // add the submenu nav buttons
41		$( '.' + mainMenuButtonClass ).each( _addClassID );
42		$( '.' + mainMenuButtonClass ).addClass('dashicons-before dashicons-menu');
43		$( '.' + subMenuButtonClass ).addClass('dashicons-before dashicons-arrow-down');
44		$( window ).on( 'resize.genesisSample', _doResize ).triggerHandler( 'resize.genesisSample' );
45		$( '.' + mainMenuButtonClass ).on( 'click.genesisSample-mainbutton', _mainmenuToggle );
46		$( '.' + subMenuButtonClass ).on( 'click.genesisSample-subbutton', _submenuToggle );
47	};
48
49	// add nav class and ID to related button
50	function _addClassID() {
51		var $this = $( this ),
52			nav   = $this.next( 'nav' ),
53			id    = 'class';
54		if ( $( nav ).attr( 'id' ) ) {
55			id = 'id';
56		}
57		$this.attr( 'id', 'mobile-' + $( nav ).attr( id ) );
58	}
59	
60	// check CSS rule to determine width
61	function _combineMenus(){
62		if ( ( $( '.js nav' ).css( 'position' ) == 'relative' ) && $( '.nav-primary' ).length > 0 ) { // depends on .js nav having position: relative; in style.css
63			$( '.nav-header .menu > li' ).addClass( 'moved-item' ); // tag moved items so we can move them back
64			$( '.nav-header .menu > li' ).prependTo( '.nav-primary ul.genesis-nav-menu' );
65			$( '.nav-header' ).hide();
66		} else if ( ( $( '.js nav' ).css( 'position' ) !== 'relative' ) && $( '.nav-primary' ).length > 0 ) {
67			$( '.nav-header' ).show();
68			$( '.nav-primary ul.genesis-nav-menu > li.moved-item' ).appendTo( '.nav-header .menu' );
69			$( '.nav-header .menu > li' ).removeClass( 'moved-item' );
70		}
71	}
72
73	// Change Skiplinks and Superfish
74	function _doResize() {
75		var buttons = $( 'button[id^="mobile-"]' ).attr( 'id' );
76		if ( typeof buttons === 'undefined' ) {
77			return;
78		}
79		_superfishToggle( buttons );
80		_changeSkipLink( buttons );
81		_maybeClose( buttons );
82	}
83
84	/**
85	 * action to happen when the main menu button is clicked
86	 */
87	function _mainmenuToggle() {
88		var $this = $( this );
89		_toggleAria( $this, 'aria-pressed' );
90		_toggleAria( $this, 'aria-expanded' );
91		$this.toggleClass( 'activated' );
92		$this.next( 'nav, .sub-menu' ).slideToggle( 'fast' );
93	}
94
95	/**
96	 * action for submenu toggles
97	 */
98	function _submenuToggle() {
99
100		var $this  = $( this ),
101			others = $this.closest( '.menu-item' ).siblings();
102		_toggleAria( $this, 'aria-pressed' );
103		_toggleAria( $this, 'aria-expanded' );
104		$this.toggleClass( 'activated' );
105		$this.next( '.sub-menu' ).slideToggle( 'fast' );
106
107		others.find( '.' + subMenuButtonClass ).removeClass( 'activated' ).attr( 'aria-pressed', 'false' );
108		others.find( '.sub-menu' ).slideUp( 'fast' );
109
110	}
111
112	/**
113	 * activate/deactivate superfish
114	 */
115	function _superfishToggle( buttons ) {
116		if ( typeof $( '.js-superfish' ).superfish !== 'function' ) {
117			return;
118		}
119		if ( 'none' === _getDisplayValue( buttons ) ) {
120			$( '.js-superfish' ).superfish( {
121				'delay': 100,
122				'animation': {'opacity': 'show', 'height': 'show'},
123				'dropShadows': false
124			});
125		} else {
126			$( '.js-superfish' ).superfish( 'destroy' );
127		}
128	}
129
130	/**
131	 * modify skip links to match mobile buttons
132	 */
133	function _changeSkipLink( buttons ) {
134		var startLink = 'genesis-nav',
135			endLink   = 'mobile-genesis-nav';
136		if ( 'none' === _getDisplayValue( buttons ) ) {
137			startLink = 'mobile-genesis-nav';
138			endLink   = 'genesis-nav';
139		}
140		$( '.genesis-skip-link a[href^="#' + startLink + '"]' ).each( function() {
141			var link = $( this ).attr( 'href' );
142			link = link.replace( startLink, endLink );
143			$( this ).attr( 'href', link );
144		});
145	}
146
147	function _maybeClose( buttons ) {
148		if ( 'none' !== _getDisplayValue( buttons ) ) {
149			return;
150		}

151		$( '.menu-toggle, .sub-menu-toggle' )
152			.removeClass( 'activated' )
153			.attr( 'aria-expanded', false )
154			.attr( 'aria-pressed', false );
155		$( 'nav, .sub-menu' )
156			.attr( 'style', '' );
157	}
158
159	/**
160	 * generic function to get the display value of an element
161	 * @param  {id} $id ID to check
162	 * @return {string}     CSS value of display property
163	 */
164	function _getDisplayValue( $id ) {
165		var element = document.getElementById( $id ),
166			style   = window.getComputedStyle( element );
167		return style.getPropertyValue( 'display' );
168	}
169
170	/**
171	 * Toggle aria attributes
172	 * @param  {button} $this     passed through
173	 * @param  {aria-xx} attribute aria attribute to toggle
174	 * @return {bool}           from _ariaReturn
175	 */
176	function _toggleAria( $this, attribute ) {
177		$this.attr( attribute, function( index, value ) {
178			return 'false' === value;
179		});
180	}
181
182	$(document).ready(function () {
183
184		// run test on initial page load
185		_combineMenus();
186
187		// run test on resize of the window
188		$( window ).resize( _combineMenus );
189		
190		genesisSample.params = typeof genesisSampleL10n === 'undefined' ? '' : genesisSampleL10n;
191
192		if ( typeof genesisSample.params !== 'undefined' ) {
193			genesisSample.init();
194		}
195
196	});
197
198})( document, jQuery );