Ticket #33220: 33220.9.diff

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

@@ -68 +68 @@
                 params = params || {};
                 focus = function () {
                         var focusContainer;
-                        if ( construct.extended( api.Panel ) && construct.expanded() ) {
-                                focusContainer = construct.container.find( '.control-panel-content:first' );
+                        if ( construct.expanded && construct.expanded() ) {
+                                focusContainer = construct.container.find( 'ul:first' );
                         } else {
                                 focusContainer = construct.container;
                         }
@@ -581 +581 @@
                  * @param {Object}  args
                  */
                 onChangeExpanded: function ( expanded, args ) {
-                        var position, scroll, section = this,
+                        var section = this,
                                 container = section.container.closest( '.wp-full-overlay-sidebar-content' ),
                                 content = section.container.find( '.accordion-section-content' ),
                                 overlay = section.container.closest( '.wp-full-overlay' ),
                                 backBtn = section.container.find( '.customize-section-back' ),
                                 sectionTitle = section.container.find( '.accordion-section-title' ).first(),
-                                expand;
+                                headerActionsHeight = $( '#customize-header-actions' ).height(),
+                                resizeContentHeight, expand, position, scroll;
 
                         if ( expanded && ! section.container.hasClass( 'open' ) ) {
 
@@ -595 +596 @@
                                         expand = args.completeCallback;
                                 } else {
                                         container.scrollTop( 0 );
-                                        expand = function () {
+                                        resizeContentHeight = function() {
                                                 var matchMedia, offset;
                                                 matchMedia = window.matchMedia || window.msMatchMedia;
                                                 offset = 90; // 45px for customize header actions + 45px for footer actions.
@@ -604 +605 @@
                                                 if ( matchMedia && matchMedia( '(max-width: 640px)' ).matches ) {
                                                         offset = 45;
                                                 }
-
+                                                content.css( 'height', ( window.innerHeight - offset ) );
+                                        };
+                                        expand = function() {
                                                 section.container.addClass( 'open' );
                                                 overlay.addClass( 'section-open' );
                                                 position = content.offset().top;
                                                 scroll = container.scrollTop();
-                                                content.css( 'margin-top', ( 45 - position - scroll ) );
-                                                content.css( 'height', ( window.innerHeight - offset ) );
+                                                content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
+                                                resizeContentHeight();
                                                 sectionTitle.attr( 'tabindex', '-1' );
                                                 backBtn.attr( 'tabindex', '0' );
                                                 backBtn.focus();
                                                 if ( args.completeCallback ) {
                                                         args.completeCallback();
                                                 }
+
+                                                // Fix the height after browser resize.
+                                                $( window ).on( 'resize.customizer-section', _.debounce( resizeContentHeight, 100 ) );
+
+                                                // Fix the top margin after reflow.
+                                                api.bind( 'pane-contents-reflowed', _.debounce( function() {
+                                                        var offset = ( content.offset().top - headerActionsHeight );
+                                                        if ( 0 < offset ) {
+                                                                content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - offset ) );
+                                                        }
+                                                }, 100 ) );
                                         };
                                 }
 
@@ -640 +654 @@
                         } else if ( ! expanded && section.container.hasClass( 'open' ) ) {
                                 section.container.removeClass( 'open' );
                                 overlay.removeClass( 'section-open' );
-                                content.css( 'margin-top', 'inherit' );
+                                content.css( 'margin-top', '' );
                                 container.scrollTop( 0 );
                                 backBtn.attr( 'tabindex', '-1' );
                                 sectionTitle.attr( 'tabindex', '0' );
@@ -648 +662 @@
                                 if ( args.completeCallback ) {
                                         args.completeCallback();
                                 }
+                                $( window ).off( 'resize.customizer-section' );
                         } else {
                                 if ( args.completeCallback ) {
                                         args.completeCallback();
@@ -1235 +1250 @@
                                 topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
                                 backBtn = section.find( '.customize-panel-back' ),
                                 panelTitle = section.find( '.accordion-section-title' ).first(),
-                                content = section.find( '.control-panel-content' );
+                                content = section.find( '.control-panel-content' ),
+                                headerActionsHeight = $( '#customize-header-actions' ).height();
 
                         if ( expanded ) {
 
@@ -1255 +1271 @@
                                         content.parent().show();
                                         position = content.offset().top;
                                         scroll = container.scrollTop();
-                                        content.css( 'margin-top', ( $( '#customize-header-actions' ).height() - position - scroll ) );
+                                        content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
                                         section.addClass( 'current-panel' );
                                         overlay.addClass( 'in-sub-panel' );
                                         container.scrollTop( 0 );
@@ -1266 +1282 @@
                                 topPanel.attr( 'tabindex', '-1' );
                                 backBtn.attr( 'tabindex', '0' );
                                 backBtn.focus();
+
+                                // Fix the top margin after reflow.
+                                api.bind( 'pane-contents-reflowed', _.debounce( function() {
+                                        content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - ( content.offset().top - headerActionsHeight ) ) );
+                                }, 100 ) );
                         } else {
                                 siblings.removeClass( 'open' );
                                 section.removeClass( 'current-panel' );
@@ -2603 +2624 @@
                                 _( constructs ).each( function ( activeConstructs, type ) {
                                         api[ type ].each( function ( construct, id ) {
                                                 var active = !! ( activeConstructs && activeConstructs[ id ] );
-                                                construct.active( active );
+                                                if ( active ) {
+                                                        construct.activate();
+                                                } else {
+                                                        construct.deactivate();
+                                                }
                                         } );
                                 } );
                         } );