WordPress.org
Get WordPress

Make WordPress Core

Ticket #41850: 41850_2.patch

File 41850_2.patch, 4.7 KB (added by delawski, 9 years ago)

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

    From 21c7a3671e4720fef9beefb6bacdb3453c096b2a Mon Sep 17 00:00:00 2001
From: Piotr Delawski <piotr.delawski@xwp.co>
Date: Mon, 2 Oct 2017 19:39:29 +0200
Subject: [PATCH] Recalculate header height on container description toggle.

---
 src/wp-admin/js/customize-controls.js | 50 ++++++++++++++++++++++-------------
 1 file changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index 3b8cfdba34..dcef922739 100644
    a b  
    13151315                                }
    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';
    13211323                                });
    … …  
    25582560                                var content = meta.find( '.customize-panel-description:first' );
    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 );
    25672573                                }
    … …  
    64116417
    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 );
    64206430                        }
    … …  
    73657375                 */
    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
    73717381                        /**
    … …  
    73837393                                        expandedPanel = api.state( 'expandedPanel' ).get(),
    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
    73917404                                if ( ! newInstance ) {
    … …  
    74057418                                                instance: newInstance,
    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 );
    74127429                                        }
    … …  
    74757492                        };
    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
    74957506                        /**
    … …  
    79457956                                if ( control && ! control.setting.get() ) {
    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' );
    79517963                                }