Ticket #33177: 33177.diff

src/wp-content/themes/twentyfifteen/js/functions.js

@@ -11 +11 @@
             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 +28 @@
                         _this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
                 } );
         }
-        initMainNavigation();
-        $( document ).on( 'customize-preview-menu-refreshed', initMainNavigation );
+        initMainNavigation( $( '.main-navigation' ) );
+        $( 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' );

src/wp-includes/js/customize-preview-nav-menus.js

@@ -174 +174 @@
                  * @param {int} instanceNumber
                  */
                 refreshMenuInstance : function( instanceNumber ) {
-                        var data, menuId, customized, container, request, wpNavArgs, instance, containerInstanceClassName;
+                        var data, menuId, customized, container, request, wpNavMenuArgs, instance, containerInstanceClassName;
 
                         if ( ! settings.navMenuInstanceArgs[ instanceNumber ] ) {
                                 throw new Error( 'unknown_instance_number' );
@@ -227 +227 @@
                         data.customized = JSON.stringify( customized );
                         data[ settings.renderNoncePostKey ] = settings.renderNonceValue;
 
-                        wpNavArgs = $.extend( {}, instance );
-                        data.wp_nav_menu_args_hash = wpNavArgs.args_hash;
-                        delete wpNavArgs.args_hash;
-                        data.wp_nav_menu_args = JSON.stringify( wpNavArgs );
+                        wpNavMenuArgs = $.extend( {}, instance );
+                        data.wp_nav_menu_args_hash = wpNavMenuArgs.args_hash;
+                        delete wpNavMenuArgs.args_hash;
+                        data.wp_nav_menu_args = JSON.stringify( wpNavMenuArgs );
 
                         container.addClass( 'customize-partial-refreshing' );
 
@@ -252 +252 @@
                                 previousContainer.replaceWith( container );
                                 eventParam = {
                                         instanceNumber: instanceNumber,
-                                        wpNavArgs: wpNavArgs,
+                                        wpNavArgs: wpNavMenuArgs, // @deprecated
+                                        wpNavMenuArgs: wpNavMenuArgs,
                                         oldContainer: previousContainer,
                                         newContainer: container
                                 };