Changeset 33610

Timestamp:

08/11/2015 11:55:40 PM (9 years ago)

Author:

westonruter

Message:

Customize: Fix layout issues in panels and sections when resizing and autofocusing.

Also reverts [33157] which is no longer needed.

Props valendesigns, mattwiebe, westonruter, ocean90.
Fixes #33220.

Location:

trunk/src/wp-admin

Files:

• css/customize-nav-menus.css (modified) (1 diff)
• js/customize-controls.js (modified) (12 diffs)

trunk/src/wp-admin/css/customize-nav-menus.css

@@ -444 +444 @@
 .reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; }
 
-/* Forces top margin to be zero for new menu */
-.control-section-nav_menu.open .menu {
-    margin-top: 0 !important;
-}
-
 .control-section-nav_menu .menu .menu-item-edit-active {
     margin-left: 0;

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

@@ -69 +69 @@
         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;
@@ -582 +582 @@
          */
         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' ),
@@ -588 +588 @@
                 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' ) ) {
@@ -596 +597 @@
                 } else {
                     container.scrollTop( 0 );
-                    expand = function () {
+                    resizeContentHeight = function() {
                         var matchMedia, offset;
                         matchMedia = window.matchMedia || window.msMatchMedia;
@@ -605 +606 @@
                             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' );
@@ -618 +621 @@
                             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 ) );
                     };
                 }
@@ -641 +655 @@
                 section.container.removeClass( 'open' );
                 overlay.removeClass( 'section-open' );
-                content.css( 'margin-top', 'inherit' );
+                content.css( 'margin-top', '' );
                 container.scrollTop( 0 );
                 backBtn.attr( 'tabindex', '-1' );
@@ -649 +663 @@
                     args.completeCallback();
                 }
+                $( window ).off( 'resize.customizer-section' );
             } else {
                 if ( args.completeCallback ) {
@@ -1236 +1251 @@
                 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 ) {
@@ -1256 +1272 @@
                     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' );
@@ -1267 +1283 @@
                 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' );
@@ -2604 +2625 @@
                     api[ type ].each( function ( construct, id ) {
                         var active = !! ( activeConstructs && activeConstructs[ id ] );
-                        construct.active( active );
+                        if ( active ) {
+                            construct.activate();
+                        } else {
+                            construct.deactivate();
+                        }
                     } );
                 } );