7 |
7 |
8 ( function( $ ) { |
8 ( function( $ ) { |
9 var $body, $window, $sidebar, adminbarOffset, top = false, |
9 var $body, $window, $sidebar, adminbarOffset, top = false, |
10 bottom = false, windowWidth, windowHeight, lastWindowPos = 0, |
10 bottom = false, windowWidth, windowHeight, lastWindowPos = 0, |
11 topOffset = 0, bodyHeight, sidebarHeight, resizeTimer, |
11 topOffset = 0, bodyHeight, sidebarHeight, resizeTimer, |
12 secondary, button; |
12 secondary, button; |
13 |
13 |
14 // Add dropdown toggle that display child menu items. |
14 function initMainNavigation( container ) { |
15 $( '.main-navigation .menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' ); |
15 // Add dropdown toggle that display child menu items. |
|
16 container.find( '.menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' ); |
16 |
17 |
17 // Toggle buttons and submenu items with active children menu items. |
18 // Toggle buttons and submenu items with active children menu items. |
18 $( '.main-navigation .current-menu-ancestor > button' ).addClass( 'toggle-on' ); |
19 container.find( '.current-menu-ancestor > button' ).addClass( 'toggle-on' ); |
19 $( '.main-navigation .current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' ); |
20 container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' ); |
20 |
21 |
21 $( '.dropdown-toggle' ).click( function( e ) { |
22 container.find( '.dropdown-toggle' ).click( function( e ) { |
22 var _this = $( this ); |
23 var _this = $( this ); |
23 e.preventDefault(); |
24 e.preventDefault(); |
24 _this.toggleClass( 'toggle-on' ); |
25 _this.toggleClass( 'toggle-on' ); |
25 _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' ); |
26 _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' ); |
26 _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' ); |
27 _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' ); |
27 _this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand ); |
28 _this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand ); |
28 } ); |
29 } ); |
|
30 } |
|
31 initMainNavigation( $( '.main-navigation' ) ); |
|
32 |
|
33 // Re-initialize the main navigation when it is updated, persisting any existing submenu expanded states. |
|
34 $( document ).on( 'customize-preview-menu-refreshed', function( e, params ) { |
|
35 if ( 'primary' === params.wpNavMenuArgs.theme_location ) { |
|
36 initMainNavigation( params.newContainer ); |
|
37 |
|
38 // Re-sync expanded states from oldContainer. |
|
39 params.oldContainer.find( '.dropdown-toggle.toggle-on' ).each(function() { |
|
40 var containerId = $( this ).parent().prop( 'id' ); |
|
41 $( params.newContainer ).find( '#' + containerId + ' > .dropdown-toggle' ).triggerHandler( 'click' ); |
|
42 }); |
|
43 } |
|
44 }); |
29 |
45 |
30 secondary = $( '#secondary' ); |
46 secondary = $( '#secondary' ); |
31 button = $( '.site-branding' ).find( '.secondary-toggle' ); |
47 button = $( '.site-branding' ).find( '.secondary-toggle' ); |
32 |
48 |
33 // Enable menu toggle for small screens. |
49 // Enable menu toggle for small screens. |
34 ( function() { |
50 ( function() { |
35 var menu, widgets, social; |
51 var menu, widgets, social; |
36 if ( ! secondary || ! button ) { |
52 if ( ! secondary.length || ! button.length ) { |
37 return; |
53 return; |
38 } |
54 } |
39 |
55 |
40 // Hide button if there are no widgets and the menus are missing or empty. |
56 // Hide button if there are no widgets and the menus are missing or empty. |
41 menu = secondary.find( '.nav-menu' ); |
57 menu = secondary.find( '.nav-menu' ); |
42 widgets = secondary.find( '#widget-area' ); |
58 widgets = secondary.find( '#widget-area' ); |
43 social = secondary.find( '#social-navigation' ); |
59 social = secondary.find( '#social-navigation' ); |
44 if ( ! widgets.length && ! social.length && ( ! menu || ! menu.children().length ) ) { |
60 if ( ! widgets.length && ! social.length && ( ! menu.length || ! menu.children().length ) ) { |
45 button.hide(); |
61 button.hide(); |
46 return; |
62 return; |
47 } |
63 } |
48 |
64 |
49 button.on( 'click.twentyfifteen', function() { |
65 button.on( 'click.twentyfifteen', function() { |