Twenty Fifteen: Only re-initialize the main navigation in the Customizer when it is specifically updated.

* Fix a bug where updating the social menu links would cause the main navigation to get its toggle-expanded buttons duplicated.
* Persist any existing submenu expanded states on the updated menu. 
* Improve naming of `customize-preview-menu-refreshed` event param from `wpNavArgs` to `wpNavMenuArgs` (old name is retained and marked as deprecated).

Fixes #33177.


git-svn-id: https://develop.svn.wordpress.org/trunk@33491 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter
2015-07-29 18:12:26 +00:00
parent 00baf4adea
commit 27c7e27d8b
2 changed files with 26 additions and 14 deletions
@@ -11,16 +11,15 @@
topOffset = 0, bodyHeight, sidebarHeight, resizeTimer,
secondary, button;
function initMainNavigation() {
function initMainNavigation( container ) {
// Add dropdown toggle that display child menu items.
$( '.main-navigation .menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );
container.find( '.menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );
// Toggle buttons and submenu items with active children menu items.
$( '.main-navigation .current-menu-ancestor > button' ).addClass( 'toggle-on' );
$( '.main-navigation .current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );
container.find( '.current-menu-ancestor > button' ).addClass( 'toggle-on' );
container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );
$( '.dropdown-toggle' ).click( function( e ) {
container.find( '.dropdown-toggle' ).click( function( e ) {
var _this = $( this );
e.preventDefault();
_this.toggleClass( 'toggle-on' );
@@ -29,8 +28,20 @@
_this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
} );
}
initMainNavigation();
$( document ).on( 'customize-preview-menu-refreshed', initMainNavigation );
initMainNavigation( $( '.main-navigation' ) );
// Re-initialize the main navigation when it is updated, persisting any existing submenu expanded states.
$( document ).on( 'customize-preview-menu-refreshed', function( e, params ) {
if ( 'primary' === params.wpNavMenuArgs.theme_location ) {
initMainNavigation( params.newContainer );
// Re-sync expanded states from oldContainer.
params.oldContainer.find( '.dropdown-toggle.toggle-on' ).each(function() {
var containerId = $( this ).parent().prop( 'id' );
$( params.newContainer ).find( '#' + containerId + ' > .dropdown-toggle' ).triggerHandler( 'click' );
});
}
});
secondary = $( '#secondary' );
button = $( '.site-branding' ).find( '.secondary-toggle' );