Changeset 33491

Timestamp:

07/29/2015 06:12:26 PM (10 years ago)

Author:

westonruter

Message:

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.

Location:

trunk/src

Files:

• wp-content/themes/twentyfifteen/js/functions.js (modified) (2 diffs)
• wp-includes/js/customize-preview-nav-menus.js (modified) (3 diffs)

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

@@ -12 +12 @@
         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();
@@ -30 +29 @@
         } );
     }
-    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' );

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

@@ -175 +175 @@
          */
         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 ] ) {
@@ -228 +228 @@
             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' );
@@ -253 +253 @@
                 eventParam = {
                     instanceNumber: instanceNumber,
-                    wpNavArgs: wpNavArgs,
+                    wpNavArgs: wpNavMenuArgs, // @deprecated
+                    wpNavMenuArgs: wpNavMenuArgs,
                     oldContainer: previousContainer,
                     newContainer: container