Changeset 41679

Timestamp:

10/02/2017 06:54:22 PM (7 years ago)

Author:

westonruter

Message:

Customize: Fix jumping behavior upon scrolling up when a sticky header has its description expanded.

Props delawski.
See #34343, #41879.
Fixes #41850.

File:

• trunk/src/wp-admin/js/customize-controls.js (modified) (8 diffs)

trunk/src/wp-admin/js/customize-controls.js

@@ -1316 +1316 @@
                 content = meta.find( '.customize-section-description:first' );
                 content.toggleClass( 'open' );
-                content.slideToggle();
+                content.slideToggle( section.defaultExpandedArguments.duration, function() {
+                    content.trigger( 'toggled' );
+                } );
                 $( this ).attr( 'aria-expanded', function( i, attr ) {
                     return 'true' === attr ? 'false' : 'true';
@@ -2559 +2561 @@
                 if ( meta.hasClass( 'open' ) ) {
                     meta.toggleClass( 'open' );
-                    content.slideUp( panel.defaultExpandedArguments.duration );
+                    content.slideUp( panel.defaultExpandedArguments.duration, function() {
+                        content.trigger( 'toggled' );
+                    } );
                     $( this ).attr( 'aria-expanded', false );
                 } else {
-                    content.slideDown( panel.defaultExpandedArguments.duration );
+                    content.slideDown( panel.defaultExpandedArguments.duration, function() {
+                        content.trigger( 'toggled' );
+                    } );
                     meta.toggleClass( 'open' );
                     $( this ).attr( 'aria-expanded', true );
@@ -6412 +6418 @@
             if ( section.hasClass( 'open' ) ) {
                 section.toggleClass( 'open' );
-                content.slideUp( api.Panel.prototype.defaultExpandedArguments.duration );
+                content.slideUp( api.Panel.prototype.defaultExpandedArguments.duration, function() {
+                    content.trigger( 'toggled' );
+                } );
                 $( this ).attr( 'aria-expanded', false );
             } else {
-                content.slideDown( api.Panel.prototype.defaultExpandedArguments.duration );
+                content.slideDown( api.Panel.prototype.defaultExpandedArguments.duration, function() {
+                    content.trigger( 'toggled' );
+                } );
                 section.toggleClass( 'open' );
                 $( this ).attr( 'aria-expanded', true );
@@ -7366 +7376 @@
         (function initStickyHeaders() {
             var parentContainer = $( '.wp-full-overlay-sidebar-content' ),
-                changeContainer, getHeaderHeight, releaseStickyHeader, resetStickyHeader, positionStickyHeader,
+                changeContainer, updateHeaderHeight, releaseStickyHeader, resetStickyHeader, positionStickyHeader,
                 activeHeader, lastScrollTop;
 
@@ -7384 +7394 @@
                     headerElement;
 
-                // Release previously active header element.
                 if ( activeHeader && activeHeader.element ) {
+                    // Release previously active header element.
                     releaseStickyHeader( activeHeader.element );
+
+                    // Remove event listener in the previous panel or section.
+                    activeHeader.element.find( '.description' ).off( 'toggled', updateHeaderHeight );
                 }
 
@@ -7406 +7419 @@
                         element:  headerElement,
                         parent:   headerElement.closest( '.customize-pane-child' ),
-                        height:   getHeaderHeight( headerElement )
+                        height:   headerElement.outerHeight()
                     };
+
+                    // Update header height whenever help text is expanded or collapsed.
+                    activeHeader.element.find( '.description' ).on( 'toggled', updateHeaderHeight );
+
                     if ( expandedSection ) {
                         resetStickyHeader( activeHeader.element, activeHeader.parent );
@@ -7476 +7493 @@
 
             /**
-             * Get header height.
+             * Update active header height.
              *
              * @since 4.7.0
              * @access private
              *
-             * @param {jQuery} headerElement Header element.
-             * @returns {number} Height.
+             * @returns {void}
              */
-            getHeaderHeight = function( headerElement ) {
-                var height = headerElement.data( 'height' );
-                if ( ! height ) {
-                    height = headerElement.outerHeight();
-                    headerElement.data( 'height', height );
-                }
-                return height;
+            updateHeaderHeight = function() {
+                activeHeader.height = activeHeader.element.outerHeight();
             };
 
@@ -7946 +7957 @@
                     section.container.find( '.section-meta .customize-section-description:first' )
                         .addClass( 'open' )
-                        .show();
+                        .show()
+                        .trigger( 'toggled' );
 
                     section.container.find( '.customize-help-toggle' ).attr( 'aria-expanded', 'true' );