WordPress.org

Make WordPress Core

Changeset 41679


Ignore:
Timestamp:
10/02/2017 06:54:22 PM (21 months 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/customize-controls.js

    r41670 r41679  
    13161316                content = meta.find( '.customize-section-description:first' );
    13171317                content.toggleClass( 'open' );
    1318                 content.slideToggle();
     1318                content.slideToggle( section.defaultExpandedArguments.duration, function() {
     1319                    content.trigger( 'toggled' );
     1320                } );
    13191321                $( this ).attr( 'aria-expanded', function( i, attr ) {
    13201322                    return 'true' === attr ? 'false' : 'true';
     
    25592561                if ( meta.hasClass( 'open' ) ) {
    25602562                    meta.toggleClass( 'open' );
    2561                     content.slideUp( panel.defaultExpandedArguments.duration );
     2563                    content.slideUp( panel.defaultExpandedArguments.duration, function() {
     2564                        content.trigger( 'toggled' );
     2565                    } );
    25622566                    $( this ).attr( 'aria-expanded', false );
    25632567                } else {
    2564                     content.slideDown( panel.defaultExpandedArguments.duration );
     2568                    content.slideDown( panel.defaultExpandedArguments.duration, function() {
     2569                        content.trigger( 'toggled' );
     2570                    } );
    25652571                    meta.toggleClass( 'open' );
    25662572                    $( this ).attr( 'aria-expanded', true );
     
    64126418            if ( section.hasClass( 'open' ) ) {
    64136419                section.toggleClass( 'open' );
    6414                 content.slideUp( api.Panel.prototype.defaultExpandedArguments.duration );
     6420                content.slideUp( api.Panel.prototype.defaultExpandedArguments.duration, function() {
     6421                    content.trigger( 'toggled' );
     6422                } );
    64156423                $( this ).attr( 'aria-expanded', false );
    64166424            } else {
    6417                 content.slideDown( api.Panel.prototype.defaultExpandedArguments.duration );
     6425                content.slideDown( api.Panel.prototype.defaultExpandedArguments.duration, function() {
     6426                    content.trigger( 'toggled' );
     6427                } );
    64186428                section.toggleClass( 'open' );
    64196429                $( this ).attr( 'aria-expanded', true );
     
    73667376        (function initStickyHeaders() {
    73677377            var parentContainer = $( '.wp-full-overlay-sidebar-content' ),
    7368                 changeContainer, getHeaderHeight, releaseStickyHeader, resetStickyHeader, positionStickyHeader,
     7378                changeContainer, updateHeaderHeight, releaseStickyHeader, resetStickyHeader, positionStickyHeader,
    73697379                activeHeader, lastScrollTop;
    73707380
     
    73847394                    headerElement;
    73857395
    7386                 // Release previously active header element.
    73877396                if ( activeHeader && activeHeader.element ) {
     7397                    // Release previously active header element.
    73887398                    releaseStickyHeader( activeHeader.element );
     7399
     7400                    // Remove event listener in the previous panel or section.
     7401                    activeHeader.element.find( '.description' ).off( 'toggled', updateHeaderHeight );
    73897402                }
    73907403
     
    74067419                        element:  headerElement,
    74077420                        parent:   headerElement.closest( '.customize-pane-child' ),
    7408                         height:   getHeaderHeight( headerElement )
     7421                        height:   headerElement.outerHeight()
    74097422                    };
     7423
     7424                    // Update header height whenever help text is expanded or collapsed.
     7425                    activeHeader.element.find( '.description' ).on( 'toggled', updateHeaderHeight );
     7426
    74107427                    if ( expandedSection ) {
    74117428                        resetStickyHeader( activeHeader.element, activeHeader.parent );
     
    74767493
    74777494            /**
    7478              * Get header height.
     7495             * Update active header height.
    74797496             *
    74807497             * @since 4.7.0
    74817498             * @access private
    74827499             *
    7483              * @param {jQuery} headerElement Header element.
    7484              * @returns {number} Height.
     7500             * @returns {void}
    74857501             */
    7486             getHeaderHeight = function( headerElement ) {
    7487                 var height = headerElement.data( 'height' );
    7488                 if ( ! height ) {
    7489                     height = headerElement.outerHeight();
    7490                     headerElement.data( 'height', height );
    7491                 }
    7492                 return height;
     7502            updateHeaderHeight = function() {
     7503                activeHeader.height = activeHeader.element.outerHeight();
    74937504            };
    74947505
     
    79467957                    section.container.find( '.section-meta .customize-section-description:first' )
    79477958                        .addClass( 'open' )
    7948                         .show();
     7959                        .show()
     7960                        .trigger( 'toggled' );
    79497961
    79507962                    section.container.find( '.customize-help-toggle' ).attr( 'aria-expanded', 'true' );
Note: See TracChangeset for help on using the changeset viewer.