WordPress.org
Get WordPress

Make WordPress Core

Changeset 38648


Ignore:
Timestamp:
09/23/2016 10:22:09 PM (8 years ago)
Author:
westonruter
Message:

Customize: Re-architect and harden panel/section UI logic.

Removes contents for sections and panels from being logically nested (in the DOM) in order to eliminate many issues related to using margin-top hacks. The element containing the link to expand the content element for panels and sections is now a sibling element to its content element: the content is removed from being nested at initialization. The content element is now available in a contentContainer property whereas the head element (containing the link to open the construct) is in a headContainer property. The existing container property is now a jQuery collection that contains both of these elements. Since the head element is no longer in an ancestor element to the content element, the aria-owns property is now used to maintain the relationship between the headContainer and the contentContainer. These changes are also accompanied by an improvement to the animation performance for the sliding panes.

Props delawski, celloexpressions.
Fixes #34391.
Fixes #34344.
Fixes #35947.

Location:
trunk
Files:
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/common.css

    r38640 r38648  
    33683368}
    33693369
    3370 .control-section .accordion-section-title {
     3370.control-section .accordion-section-title,
     3371.customize-pane-child .accordion-section-title {
    33713372    border-left: none;
    33723373    border-right: none;
    … …  
    33763377}
    33773378
    3378 .control-section .accordion-section-title:after {
     3379.control-section .accordion-section-title:after,
     3380.customize-pane-child .accordion-section-title:after {
    33793381    top: 11px;
    33803382}

  • trunk/src/wp-admin/css/customize-controls.css

    r38602 r38648  
    7878}
    7979
    80 #customize-controls .control-section .customize-section-title h3,
    81 #customize-controls .control-section h3.customize-section-title,
     80#customize-controls .customize-pane-child .customize-section-title h3,
     81#customize-controls .customize-pane-child h3.customize-section-title,
    8282#customize-controls .customize-info .panel-title {
    8383    font-size: 20px;
    … …  
    230230}
    231231
     232#customize-info,
     233#customize-theme-controls .customize-pane-parent,
     234#customize-theme-controls .customize-pane-child {
     235    overflow: visible;
     236    width: 100%;
     237    margin: 0;
     238    padding: 0;
     239    -webkit-box-sizing: border-box;
     240    -moz-box-sizing: border-box;
     241    box-sizing: border-box;
     242    -webkit-transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
     243    transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
     244    transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1);
     245    transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1), 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
     246}
     247
     248#customize-info,
     249#customize-theme-controls .customize-pane-parent {
     250    position: relative;
     251    visibility: visible;
     252    height: auto;
     253    max-height: none;
     254    overflow: auto;
     255    -webkit-transform: none;
     256    -ms-transform: none;
     257    transform: none;
     258}
     259
     260#customize-theme-controls .customize-pane-child {
     261    position: absolute;
     262    top: 0;
     263    left: 0;
     264    visibility: hidden;
     265    height: 0;
     266    max-height: none;
     267    overflow: hidden;
     268    -webkit-transform: translateX(100%);
     269    -ms-transform: translateX(100%);
     270    transform: translateX(100%);
     271}
     272
     273#customize-theme-controls .customize-pane-child.open,
     274#customize-theme-controls .customize-pane-child.current-panel,
     275#customize-theme-controls .customize-themes-panel.customize-pane-child.current-panel {
     276    -webkit-transform: none;
     277    -ms-transform: none;
     278    transform: none;
     279}
     280
     281#customize-theme-controls .customize-themes-panel.customize-pane-child,
     282.section-open #customize-theme-controls .customize-pane-parent,
     283.in-sub-panel #customize-theme-controls .customize-pane-parent,
     284.section-open #customize-info,
     285.in-sub-panel #customize-info,
     286.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel,
     287.in-themes-panel #customize-theme-controls .customize-pane-parent,
     288.in-themes-panel #customize-info {
     289    visibility: hidden;
     290    height: 0;
     291    overflow: hidden;
     292    -webkit-transform: translateX(-100%);
     293    -ms-transform: translateX(-100%);
     294    transform: translateX(-100%);
     295}
     296
     297.section-open #customize-theme-controls .customize-pane-parent.busy,
     298.in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
     299.in-themes-panel #customize-theme-controls .customize-pane-parent.busy,
     300.section-open #customize-info.busy,
     301.in-sub-panel #customize-info.busy,
     302.in-themes-panel #customize-info.busy,
     303.busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
     304#customize-theme-controls .customize-pane-child.open,
     305#customize-theme-controls .customize-pane-child.current-panel,
     306#customize-theme-controls .customize-pane-child.busy {
     307    visibility: visible;
     308    height: auto;
     309    overflow: auto;
     310}
     311
     312.in-themes-panel #customize-theme-controls .customize-pane-parent,
     313.in-themes-panel #customize-info {
     314    -webkit-transform: translateX(100%);
     315    -ms-transform: translateX(100%);
     316    transform: translateX(100%);
     317}
     318
     319#customize-theme-controls .customize-pane-child.accordion-section-content,
     320#customize-theme-controls .customize-pane-child.accordion-sub-container {
     321    display: block;
     322    overflow-x: hidden;
     323}
     324
     325#customize-theme-controls .customize-pane-child.accordion-section-content {
     326    padding: 12px;
     327}
     328
    232329.customize-section-description-container {
    233330    margin-bottom: 15px;
    … …  
    269366}
    270367
    271 #customize-theme-controls {
    272     position: relative;
    273     left: 0;
    274     -webkit-transition: .18s left ease-in-out;
    275     transition: .18s left ease-in-out;
    276 }
    277 
    278 .ios #customize-theme-controls {
    279     -webkit-transition: left 0s;
    280     transition: left 0s;
    281 }
    282 
    283 .section-open #customize-info,
    284 .section-open #customize-theme-controls {
    285     left: -100%;
    286 }
    287 
    288368.accordion-sub-container.control-panel-content {
    289369    display: none;
    290370    position: absolute;
    291     left: 100%;
    292371    top: 0;
    293372    width: 100%;
    294     -webkit-transition: left ease-in-out .18s;
    295     transition: left ease-in-out .18s;
    296 }
    297 
    298 .ios .accordion-sub-container.control-panel-content {
    299     -webkit-transition: left 0s;
    300     transition: left 0s;
    301 }
    302 
    303 .accordion-sub-container.control-panel-content.animating {
     373}
     374
     375.accordion-sub-container.control-panel-content.busy {
    304376    display: block;
    305377}
    … …  
    344416    box-shadow: none;
    345417    cursor: pointer;
    346     -webkit-transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
    347     transition: left .18s ease-in-out, color .1s ease-in-out, background .1s ease-in-out;
     418    -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
     419    transition: color .1s ease-in-out, background .1s ease-in-out;
    348420}
    349421
    350422.customize-section-back {
    351423    height: 74px;
    352 }
    353 
    354 .ios .customize-panel-back,
    355 .ios .customize-section-back {
    356     -webkit-transition: left 0s;
    357     transition: left 0s;
    358424}
    359425
    … …  
    422488.in-sub-panel .wp-full-overlay-sidebar .wp-full-overlay-header {
    423489    padding-left: 62px;
    424 }
    425 
    426 #customize-info,
    427 #customize-theme-controls > ul > .accordion-section {
    428     position: relative;
    429     left: 0;
    430     -webkit-transition: left ease-in-out .18s;
    431     transition: left ease-in-out .18s;
    432 }
    433 
    434 .ios #customize-info,
    435 .ios #customize-theme-controls > ul > .accordion-section {
    436     -webkit-transition: left 0s;
    437     transition: left 0s;
    438 }
    439 
    440 .in-sub-panel #customize-info,
    441 .in-sub-panel #customize-theme-controls > ul > .accordion-section {
    442     left: -100%;
    443     width: 100%;
    444 }
    445 
    446 .in-sub-panel #customize-theme-controls .accordion-section.current-panel {
    447     width: 100%;
    448 }
    449 
    450 #customize-theme-controls .control-section.current-panel {
    451     padding: 0;
    452 }
    453 
    454 #customize-theme-controls .control-section > h3.accordion-section-title {
    455     position: relative;
    456     left: 0;
    457 }
    458 
    459 #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
    460     left: -354px;
    461     -webkit-transition: left ease-in-out .18s;
    462     transition: left ease-in-out .18s;
    463 }
    464 
    465 .ios #customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
    466     -webkit-transition: left 0s;
    467     transition: left 0s;
    468 }
    469 
    470 .wp-full-overlay.section-open #customize-controls .wp-full-overlay-sidebar-content {
    471     visibility: hidden;
    472     overflow-y: hidden;
    473 }
    474 
    475 .wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open {
    476     visibility: visible;
    477 }
    478 
    479 .wp-full-overlay.section-open .wp-full-overlay-sidebar-content .accordion-section.open .accordion-section-content {
    480     overflow-y: auto;
    481490}
    482491
    … …  
    10061015#customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
    10071016#customize-theme-controls .control-section-themes > .accordion-section-title {
    1008     margin: 15px 0;
    1009 }
    1010 
    1011 .customize-themes-panel .accordion-section-title {
     1017    margin: 0 0 15px;
     1018}
     1019
     1020#customize-controls .customize-themes-panel .accordion-section-title {
    10121021    margin: 15px -8px;
    10131022}
    10141023
    1015 .control-section-themes .accordion-section-title {
     1024#customize-controls .control-section-themes .accordion-section-title,
     1025#customize-controls .customize-themes-panel .accordion-section-title {
    10161026    padding-right: 100px; /* Space for the button */
    10171027}
    10181028
    1019 .control-section-themes .accordion-section-title span.customize-action,
     1029#customize-controls .control-section-themes .accordion-section-title span.customize-action,
    10201030#customize-controls .customize-section-title span.customize-action {
    10211031    font-size: 13px;
    … …  
    10241034}
    10251035
    1026 .control-section-themes .accordion-section-title .change-theme,
    1027 .control-section-themes .accordion-section-title .customize-theme {
     1036#customize-controls .control-section-themes .accordion-section-title .change-theme,
     1037#customize-controls .customize-themes-panel .accordion-section-title .customize-theme {
    10281038    position: absolute;
    10291039    right: 10px;
    … …  
    10331043}
    10341044
    1035 .control-section-themes .accordion-section-title:before {
     1045#customize-controls .control-section-themes .accordion-section-title:before {
    10361046    display: none;
    10371047}
    10381048
    1039 .customize-themes-panel {
    1040     display: none;
     1049#customize-controls .customize-themes-panel {
    10411050    padding: 0 8px;
    10421051    background: #f1f1f1;
    … …  
    10461055}
    10471056
    1048 .customize-themes-panel .accordion-section-title:first-child {
     1057#customize-controls .customize-themes-panel .accordion-section-title:first-child {
    10491058    margin-top: 0;
    10501059}
    … …  
    10551064}
    10561065
    1057 .customize-themes-panel > h2 {
     1066#customize-controls .customize-themes-panel > h2 {
    10581067    padding: 15px 8px 0 8px;
    1059 }
    1060 
    1061 .control-section.open .customize-themes-panel {
    1062     display: block;
    10631068}
    10641069
    … …  
    11081113}
    11091114
    1110 #accordion-section-themes .accordion-section-title:after {
     1115.control-section-themes .accordion-section-title:after,
     1116.customize-themes-panel .accordion-section-title:after {
    11111117    display: none;
    11121118}
    11131119
    1114 #customize-theme-controls .control-section-themes.current-panel > h3.accordion-section-title {
    1115     left: 0;
    1116 }
    1117 
    11181120.customize-themes-panel.control-panel-content {
    1119     position: absolute;
    1120     left: -100%;
    1121     top: 0;
    1122     width: 100%;
    11231121    border-top: 1px solid #ddd;
    1124 }
    1125 
    1126 .in-themes-panel #customize-info,
    1127 .in-themes-panel #customize-theme-controls > ul > .accordion-section {
    1128     left: 100%;
    11291122}
    11301123
    … …  
    11601153.wp-customizer .theme-overlay .theme-actions {
    11611154    text-align: right; /* Because there's only one action, match the pattern of media modals and right-align the action. */
    1162 }
    1163 
    1164 .modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
    1165     overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
    11661155}
    11671156

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

    r38642 r38648  
    382382.reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; }
    383383
    384 .control-section-nav_menu .menu .menu-item-edit-active {
     384.control-section-nav_menu.menu .menu-item-edit-active {
    385385    margin-left: 0;
    386386}
    387387
    388 .control-section-nav_menu .menu .menu-item-edit-active .menu-item-bar {
     388.control-section-nav_menu.menu .menu-item-edit-active .menu-item-bar {
    389389    margin-right: 0;
    390390}
    391391
    392 .control-section-nav_menu .menu .sortable-placeholder {
     392.control-section-nav_menu.menu .sortable-placeholder {
    393393    margin-top: 0;
    394394    margin-bottom: 1px;
    … …  
    404404}
    405405
    406 .control-section-nav_menu .menu ul.menu-item-transport .menu-item-bar {
     406.control-section-nav_menu.menu ul.menu-item-transport .menu-item-bar {
    407407    margin-top: 0;
    408408}

  • trunk/src/wp-admin/customize.php

    r37914 r38648  
    143143
    144144            <div id="customize-theme-controls">
    145                 <ul><?php // Panels and sections are managed here via JavaScript ?></ul>
     145                <ul class="customize-pane-parent"><?php // Panels and sections are managed here via JavaScript ?></ul>
    146146            </div>
    147147        </div>

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

    r38520 r38648  
    11/* global _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n, MediaElementPlayer */
    22(function( exports, $ ){
    3     var Container, focus, api = wp.customize;
     3    var Container, focus, normalizedTransitionendEventName, api = wp.customize;
    44
    55    /**
    … …  
    102102        focus = function () {
    103103            var focusContainer;
    104             if ( construct.extended( api.Panel ) && construct.expanded && construct.expanded() ) {
    105                 focusContainer = construct.container.find( 'ul.control-panel-content' );
    106             } else if ( construct.extended( api.Section ) && construct.expanded && construct.expanded() ) {
    107                 focusContainer = construct.container.find( 'ul.accordion-section-content' );
     104            if ( ( construct.extended( api.Panel ) || construct.extended( api.Section ) ) && construct.expanded && construct.expanded() ) {
     105                focusContainer = construct.contentContainer;
    108106            } else {
    109107                focusContainer = construct.container;
    … …  
    187185        return equal;
    188186    };
     187
     188    /**
     189     * Return browser supported `transitionend` event name.
     190     *
     191     * @since 4.7.0
     192     *
     193     * @returns {string|null} Normalized `transitionend` event name or null if CSS transitions are not supported.
     194     */
     195    normalizedTransitionendEventName = (function () {
     196        var el, transitions, prop;
     197        el = document.createElement( 'div' );
     198        transitions = {
     199            'transition'      : 'transitionend',
     200            'OTransition'     : 'oTransitionEnd',
     201            'MozTransition'   : 'transitionend',
     202            'WebkitTransition': 'webkitTransitionEnd'
     203        };
     204        prop = _.find( _.keys( transitions ), function( prop ) {
     205            return ! _.isUndefined( el.style[ prop ] );
     206        } );
     207        if ( prop ) {
     208            return transitions[ prop ];
     209        } else {
     210            return null;
     211        }
     212    })();
    189213
    190214    /**
    … …  
    239263                container.container = $( container.getContainer() );
    240264            }
     265            container.headContainer = container.container;
     266            container.contentContainer = container.getContent();
     267            container.container = container.container.add( container.contentContainer );
    241268
    242269            container.deferred = {
    … …  
    326353         */
    327354        onChangeActive: function( active, args ) {
    328             var duration, construct = this, expandedOtherPanel;
     355            var construct = this,
     356                headContainer = construct.headContainer,
     357                duration, expandedOtherPanel;
     358
    329359            if ( args.unchanged ) {
    330360                if ( args.completeCallback ) {
    … …  
    353383            }
    354384
    355             if ( ! $.contains( document, construct.container[0] ) ) {
     385            if ( ! $.contains( document, headContainer ) ) {
    356386                // jQuery.fn.slideUp is not hiding an element if it is not in the DOM
    357                 construct.container.toggle( active );
     387                headContainer.toggle( active );
    358388                if ( args.completeCallback ) {
    359389                    args.completeCallback();
    360390                }
    361391            } else if ( active ) {
    362                 construct.container.stop( true, true ).slideDown( duration, args.completeCallback );
     392                headContainer.stop( true, true ).slideDown( duration, args.completeCallback );
    363393            } else {
    364394                if ( construct.expanded() ) {
    … …  
    366396                        duration: duration,
    367397                        completeCallback: function() {
    368                             construct.container.stop( true, true ).slideUp( duration, args.completeCallback );
     398                            headContainer.stop( true, true ).slideUp( duration, args.completeCallback );
    369399                        }
    370400                    });
    371401                } else {
    372                     construct.container.stop( true, true ).slideUp( duration, args.completeCallback );
    373                 }
    374             }
    375 
    376             // Recalculate the margin-top immediately, not waiting for debounced reflow, to prevent momentary (100ms) vertical jiggle.
    377             if ( expandedOtherPanel ) {
    378                 expandedOtherPanel._recalculateTopMargin();
     402                    headContainer.stop( true, true ).slideUp( duration, args.completeCallback );
     403                }
    379404            }
    380405        },
    … …  
    484509
    485510        /**
     511         * Animate container state change if transitions are supported by the browser.
     512         *
     513         * @since 4.7.0
     514         *
     515         * @param {function} completeCallback Function to be called after transition is completed.
     516         * @returns {void}
     517         * @private
     518         */
     519        _animateChangeExpanded: function( completeCallback ) {
     520            // Return if CSS transitions are not supported.
     521            if ( ! normalizedTransitionendEventName ) {
     522                if ( completeCallback ) {
     523                    completeCallback();
     524                }
     525                return;
     526            }
     527
     528            var construct = this,
     529                content = construct.contentContainer,
     530                overlay = content.closest( '.wp-full-overlay' ),
     531                elements, transitionEndCallback;
     532
     533            // Determine set of elements that are affected by the animation.
     534            elements = overlay.add( content );
     535            if ( _.isUndefined( construct.panel ) || '' === construct.panel() ) {
     536                elements = elements.add( '#customize-info, .customize-pane-parent' );
     537            }
     538
     539            // Handle `transitionEnd` event.
     540            transitionEndCallback = function( e ) {
     541                if ( 2 !== e.eventPhase || ! $( e.target ).is( content ) ) {
     542                    return;
     543                }
     544                content.off( normalizedTransitionendEventName, transitionEndCallback );
     545                elements.removeClass( 'busy' );
     546                if ( completeCallback ) {
     547                    completeCallback();
     548                }
     549            };
     550            content.on( normalizedTransitionendEventName, transitionEndCallback );
     551            elements.addClass( 'busy' );
     552
     553            // Prevent screen flicker when pane has been scrolled before expanding.
     554            _.defer( function() {
     555                var container = content.closest( '.wp-full-overlay-sidebar-content' ),
     556                    currentScrollTop = container.scrollTop(),
     557                    previousScrollTop = content.data( 'previous-scrollTop' ) || 0,
     558                    expanded = construct.expanded();
     559
     560                if ( expanded && 0 < currentScrollTop ) {
     561                    content.css( 'top', currentScrollTop + 'px' );
     562                    content.data( 'previous-scrollTop', currentScrollTop );
     563                } else if ( ! expanded && 0 < currentScrollTop + previousScrollTop ) {
     564                    content.css( 'top', previousScrollTop - currentScrollTop + 'px' );
     565                    container.scrollTop( previousScrollTop );
     566                }
     567            } );
     568        },
     569
     570        /**
    486571         * Bring the container into view and then expand this and bring it into view
    487572         * @param {Object} [params]
    … …  
    508593
    509594            return '<li></li>';
     595        },
     596
     597        /**
     598         * Find content element which is displayed when the section is expanded.
     599         *
     600         * After a construct is initialized, the return value will be available via the `contentContainer` property.
     601         * By default the element will be related it to the parent container with `aria-owns` and detached.
     602         * Custom panels and sections (such as the `NewMenuSection`) that do not have a sliding pane should
     603         * just return the content element without needing to add the `aria-owns` element or detach it from
     604         * the container. Such non-sliding pane custom sections also need to override the `onChangeExpanded`
     605         * method to handle animating the panel/section into and out of view.
     606         *
     607         * @since 4.7.0
     608         *
     609         * @returns {jQuery} Detached content element.
     610         */
     611        getContent: function() {
     612            var construct = this,
     613                container = construct.container,
     614                content = container.find( '.accordion-section-content, .control-panel-content' ).first(),
     615                contentId = 'sub-' + container.attr( 'id' ),
     616                ownedElements = contentId,
     617                alreadyOwnedElements = container.attr( 'aria-owns' );
     618
     619            if ( alreadyOwnedElements ) {
     620                ownedElements = ownedElements + ' ' + alreadyOwnedElements;
     621            }
     622            container.attr( 'aria-owns', ownedElements );
     623
     624            return content.detach().attr( {
     625                'id': contentId,
     626                'class': 'customize-pane-child ' + content.attr( 'class' ) + ' ' + container.attr( 'class' )
     627            } );
    510628        }
    511629    });
    … …  
    553671            section.panel = new api.Value();
    554672            section.panel.bind( function ( id ) {
    555                 $( section.container ).toggleClass( 'control-subsection', !! id );
     673                $( section.headContainer ).toggleClass( 'control-subsection', !! id );
    556674            });
    557675            section.panel.set( section.params.panel || '' );
    … …  
    570688         */
    571689        embed: function () {
    572             var section = this, inject;
     690            var inject,
     691                section = this,
     692                container = $( '#customize-theme-controls' );
    573693
    574694            // Watch for changes to the panel state
    … …  
    580700                        // The panel has been registered, wait for it to become ready/initialized
    581701                        panel.deferred.embedded.done( function () {
    582                             parentContainer = panel.container.find( 'ul:first' );
    583                             if ( ! section.container.parent().is( parentContainer ) ) {
    584                                 parentContainer.append( section.container );
     702                            parentContainer = panel.contentContainer;
     703                            if ( ! section.headContainer.parent().is( parentContainer ) ) {
     704                                parentContainer.append( section.headContainer );
     705                            }
     706                            if ( ! section.contentContainer.parent().is( section.headContainer ) ) {
     707                                container.append( section.contentContainer );
    585708                            }
    586709                            section.deferred.embedded.resolve();
    … …  
    589712                } else {
    590713                    // There is no panel, so embed the section in the root of the customizer
    591                     parentContainer = $( '#customize-theme-controls' ).children( 'ul' ); // @todo This should be defined elsewhere, and to be configurable
    592                     if ( ! section.container.parent().is( parentContainer ) ) {
    593                         parentContainer.append( section.container );
     714                    parentContainer = $( '.customize-pane-parent' ); // @todo This should be defined elsewhere, and to be configurable
     715                    if ( ! section.headContainer.parent().is( parentContainer ) ) {
     716                        parentContainer.append( section.headContainer );
     717                    }
     718                    if ( ! section.contentContainer.parent().is( section.headContainer ) ) {
     719                        container.append( section.contentContainer );
    594720                    }
    595721                    section.deferred.embedded.resolve();
    … …  
    598724            section.panel.bind( inject );
    599725            inject( section.panel.get() ); // Since a section may never get a panel, assume that it won't ever get one
    600 
    601             section.deferred.embedded.done(function() {
    602                 // Fix the top margin after reflow.
    603                 api.bind( 'pane-contents-reflowed', _.debounce( function() {
    604                     section._recalculateTopMargin();
    605                 }, 100 ) );
    606             });
    607726        },
    608727
    … …  
    670789        onChangeExpanded: function ( expanded, args ) {
    671790            var section = this,
    672                 container = section.container.closest( '.wp-full-overlay-sidebar-content' ),
    673                 content = section.container.find( '.accordion-section-content' ),
    674                 overlay = section.container.closest( '.wp-full-overlay' ),
    675                 backBtn = section.container.find( '.customize-section-back' ),
    676                 sectionTitle = section.container.find( '.accordion-section-title' ).first(),
    677                 headerActionsHeight = $( '#customize-header-actions' ).height(),
    678                 resizeContentHeight, expand, position, scroll;
    679 
    680             if ( expanded && ! section.container.hasClass( 'open' ) ) {
     791                container = section.headContainer.closest( '.wp-full-overlay-sidebar-content' ),
     792                content = section.contentContainer,
     793                overlay = section.headContainer.closest( '.wp-full-overlay' ),
     794                backBtn = content.find( '.customize-section-back' ),
     795                sectionTitle = section.headContainer.find( '.accordion-section-title' ).first(),
     796                expand;
     797
     798            if ( expanded && ! content.hasClass( 'open' ) ) {
    681799
    682800                if ( args.unchanged ) {
    683801                    expand = args.completeCallback;
    684802                } else {
    685                     container.scrollTop( 0 );
    686                     resizeContentHeight = function() {
    687                         var matchMedia, offset;
    688                         matchMedia = window.matchMedia || window.msMatchMedia;
    689                         offset = 90; // 45px for customize header actions + 45px for footer actions.
    690 
    691                         // No footer on small screens.
    692                         if ( matchMedia && matchMedia( '(max-width: 640px)' ).matches ) {
    693                             offset = 45;
    694                         }
    695                         content.css( 'height', ( window.innerHeight - offset ) );
    696                     };
    697                     expand = function() {
    698                         section.container.addClass( 'open' );
     803                    expand = $.proxy( function() {
     804                        section._animateChangeExpanded( function() {
     805                            sectionTitle.attr( 'tabindex', '-1' );
     806                            backBtn.attr( 'tabindex', '0' );
     807
     808                            backBtn.focus();
     809                            content.css( 'top', '' );
     810                            container.scrollTop( 0 );
     811
     812                            if ( args.completeCallback ) {
     813                                args.completeCallback();
     814                            }
     815                        } );
     816
     817                        content.addClass( 'open' );
    699818                        overlay.addClass( 'section-open' );
    700                         position = content.offset().top;
    701                         scroll = container.scrollTop();
    702                         content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
    703                         resizeContentHeight();
    704                         sectionTitle.attr( 'tabindex', '-1' );
    705                         backBtn.attr( 'tabindex', '0' );
    706                         backBtn.focus();
    707                         if ( args.completeCallback ) {
    708                             args.completeCallback();
    709                         }
    710 
    711                         // Fix the height after browser resize.
    712                         $( window ).on( 'resize.customizer-section', _.debounce( resizeContentHeight, 100 ) );
    713 
    714                         setTimeout( _.bind( section._recalculateTopMargin, section ), 0 );
    715                     };
     819                    }, this );
    716820                }
    717821
    … …  
    736840                }
    737841
    738             } else if ( ! expanded && section.container.hasClass( 'open' ) ) {
    739                 section.container.removeClass( 'open' );
     842            } else if ( ! expanded && content.hasClass( 'open' ) ) {
     843                section._animateChangeExpanded( function() {
     844                    backBtn.attr( 'tabindex', '-1' );
     845                    sectionTitle.attr( 'tabindex', '0' );
     846
     847                    sectionTitle.focus();
     848                    content.css( 'top', '' );
     849
     850                    if ( args.completeCallback ) {
     851                        args.completeCallback();
     852                    }
     853                } );
     854
     855                content.removeClass( 'open' );
    740856                overlay.removeClass( 'section-open' );
    741                 content.css( 'margin-top', '' );
    742                 container.scrollTop( 0 );
    743                 backBtn.attr( 'tabindex', '-1' );
    744                 sectionTitle.attr( 'tabindex', '0' );
    745                 sectionTitle.focus();
    746                 if ( args.completeCallback ) {
    747                     args.completeCallback();
    748                 }
    749                 $( window ).off( 'resize.customizer-section' );
     857
    750858            } else {
    751859                if ( args.completeCallback ) {
    752860                    args.completeCallback();
    753861                }
    754             }
    755         },
    756 
    757         /**
    758          * Recalculate the top margin.
    759          *
    760          * @since 4.4.0
    761          * @private
    762          */
    763         _recalculateTopMargin: function() {
    764             var section = this, content, offset, headerActionsHeight;
    765             content = section.container.find( '.accordion-section-content' );
    766             if ( 0 === content.length ) {
    767                 return;
    768             }
    769             headerActionsHeight = $( '#customize-header-actions' ).height();
    770             offset = ( content.offset().top - headerActionsHeight );
    771             if ( 0 < offset ) {
    772                 content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - offset ) );
    773862            }
    774863        }
    … …  
    9491038
    9501039            // Note: there is a second argument 'args' passed
    951             var position, scroll,
    952                 panel = this,
    953                 section = panel.container.closest( '.accordion-section' ),
     1040            var panel = this,
     1041                section = panel.contentContainer,
    9541042                overlay = section.closest( '.wp-full-overlay' ),
    9551043                container = section.closest( '.wp-full-overlay-sidebar-content' ),
    956                 siblings = container.find( '.open' ),
    9571044                customizeBtn = section.find( '.customize-theme' ),
    958                 changeBtn = section.find( '.change-theme' ),
    959                 content = section.find( '.control-panel-content' );
    960 
    961             if ( expanded ) {
    962 
     1045                changeBtn = panel.headContainer.find( '.change-theme' );
     1046
     1047            if ( expanded && ! section.hasClass( 'current-panel' ) ) {
    9631048                // Collapse any sibling sections/panels
    9641049                api.section.each( function ( otherSection ) {
    … …  
    9711056                });
    9721057
    973                 content.show( 0, function() {
    974                     position = content.offset().top;
    975                     scroll = container.scrollTop();
    976                     content.css( 'margin-top', ( $( '#customize-header-actions' ).height() - position - scroll ) );
    977                     section.addClass( 'current-panel' );
    978                     overlay.addClass( 'in-themes-panel' );
     1058                panel._animateChangeExpanded( function() {
     1059                    changeBtn.attr( 'tabindex', '-1' );
     1060                    customizeBtn.attr( 'tabindex', '0' );
     1061
     1062                    customizeBtn.focus();
     1063                    section.css( 'top', '' );
    9791064                    container.scrollTop( 0 );
    980                     _.delay( panel.renderScreenshots, 10 ); // Wait for the controls
    981                     panel.$customizeSidebar.on( 'scroll.customize-themes-section', _.throttle( panel.renderScreenshots, 300 ) );
     1065
    9821066                    if ( args.completeCallback ) {
    9831067                        args.completeCallback();
    9841068                    }
    9851069                } );
    986                 customizeBtn.focus();
    987             } else {
    988                 siblings.removeClass( 'open' );
    989                 section.removeClass( 'current-panel' );
    990                 overlay.removeClass( 'in-themes-panel' );
    991                 panel.$customizeSidebar.off( 'scroll.customize-themes-section' );
    992                 content.delay( 180 ).hide( 0, function() {
    993                     content.css( 'margin-top', 'inherit' ); // Reset
     1070
     1071                overlay.addClass( 'in-themes-panel' );
     1072                section.addClass( 'current-panel' );
     1073
     1074            } else if ( ! expanded && section.hasClass( 'current-panel' ) ) {
     1075                panel._animateChangeExpanded( function() {
     1076                    changeBtn.attr( 'tabindex', '0' );
     1077                    customizeBtn.attr( 'tabindex', '-1' );
     1078
     1079                    changeBtn.focus();
     1080                    section.css( 'top', '' );
     1081
    9941082                    if ( args.completeCallback ) {
    9951083                        args.completeCallback();
    9961084                    }
    9971085                } );
    998                 customizeBtn.attr( 'tabindex', '0' );
    999                 changeBtn.focus();
    1000                 container.scrollTop( 0 );
    1001             }
    1002         },
    1003 
    1004         /**
    1005          * Recalculate the top margin.
    1006          *
    1007          * @since 4.4.0
    1008          * @private
    1009          */
    1010         _recalculateTopMargin: function() {
    1011             api.Panel.prototype._recalculateTopMargin.call( this );
     1086
     1087                overlay.removeClass( 'in-themes-panel' );
     1088                section.removeClass( 'current-panel' );
     1089            }
    10121090        },
    10131091
    … …  
    12381316        embed: function () {
    12391317            var panel = this,
    1240                 parentContainer = $( '#customize-theme-controls > ul' ); // @todo This should be defined elsewhere, and to be configurable
    1241 
    1242             if ( ! panel.container.parent().is( parentContainer ) ) {
    1243                 parentContainer.append( panel.container );
     1318                container = $( '#customize-theme-controls' ),
     1319                parentContainer = $( '.customize-pane-parent' ); // @todo This should be defined elsewhere, and to be configurable
     1320
     1321            if ( ! panel.headContainer.parent().is( parentContainer ) ) {
     1322                parentContainer.append( panel.headContainer );
     1323            }
     1324            if ( ! panel.contentContainer.parent().is( panel.headContainer ) ) {
     1325                container.append( panel.contentContainer );
    12441326                panel.renderContent();
    12451327            }
    1246 
    1247             api.bind( 'pane-contents-reflowed', _.debounce( function() {
    1248                 panel._recalculateTopMargin();
    1249             }, 100 ) );
    12501328
    12511329            panel.deferred.embedded.resolve();
    … …  
    12591337
    12601338            // Expand/Collapse accordion sections on click.
    1261             panel.container.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
     1339            panel.headContainer.find( '.accordion-section-title' ).on( 'click keydown', function( event ) {
    12621340                if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
    12631341                    return;
    … …  
    12901368                event.preventDefault(); // Keep this AFTER the key filter above
    12911369
    1292                 meta = panel.container.find( '.panel-meta' );
    12931370                if ( meta.hasClass( 'cannot-expand' ) ) {
    12941371                    return;
    … …  
    13601437
    13611438            // Note: there is a second argument 'args' passed
    1362             var position, scroll,
    1363                 panel = this,
    1364                 accordionSection = panel.container.closest( '.accordion-section' ),
     1439            var panel = this,
     1440                accordionSection = panel.contentContainer,
    13651441                overlay = accordionSection.closest( '.wp-full-overlay' ),
    13661442                container = accordionSection.closest( '.wp-full-overlay-sidebar-content' ),
    1367                 siblings = container.find( '.open' ),
    1368                 topPanel = overlay.find( '#customize-theme-controls > ul > .accordion-section > .accordion-section-title' ),
    1369                 backBtn = accordionSection.find( '.customize-panel-back' ),
    1370                 panelTitle = accordionSection.find( '.accordion-section-title' ).first(),
    1371                 content = accordionSection.find( '.control-panel-content' ),
    1372                 headerActionsHeight = $( '#customize-header-actions' ).height();
    1373 
    1374             if ( expanded ) {
    1375 
     1443                topPanel = panel.headContainer.find( '.accordion-section-title' ),
     1444                backBtn = accordionSection.find( '.customize-panel-back' );
     1445
     1446            if ( expanded && ! accordionSection.hasClass( 'current-panel' ) ) {
    13761447                // Collapse any sibling sections/panels
    13771448                api.section.each( function ( section ) {
    … …  
    13861457                });
    13871458
    1388                 content.show( 0, function() {
    1389                     content.parent().show();
    1390                     position = content.offset().top;
    1391                     scroll = container.scrollTop();
    1392                     content.css( 'margin-top', ( headerActionsHeight - position - scroll ) );
    1393                     accordionSection.addClass( 'current-panel' );
    1394                     overlay.addClass( 'in-sub-panel' );
     1459                panel._animateChangeExpanded( function() {
     1460                    topPanel.attr( 'tabindex', '-1' );
     1461                    backBtn.attr( 'tabindex', '0' );
     1462
     1463                    backBtn.focus();
     1464                    accordionSection.css( 'top', '' );
    13951465                    container.scrollTop( 0 );
     1466
    13961467                    if ( args.completeCallback ) {
    13971468                        args.completeCallback();
    13981469                    }
    13991470                } );
    1400                 topPanel.attr( 'tabindex', '-1' );
    1401                 backBtn.attr( 'tabindex', '0' );
    1402                 backBtn.focus();
    1403                 panel._recalculateTopMargin();
    1404             } else {
    1405                 siblings.removeClass( 'open' );
    1406                 accordionSection.removeClass( 'current-panel' );
    1407                 overlay.removeClass( 'in-sub-panel' );
    1408                 content.delay( 180 ).hide( 0, function() {
    1409                     content.css( 'margin-top', 'inherit' ); // Reset
     1471
     1472                overlay.addClass( 'in-sub-panel' );
     1473                accordionSection.addClass( 'current-panel' );
     1474
     1475            } else if ( ! expanded && accordionSection.hasClass( 'current-panel' ) ) {
     1476                panel._animateChangeExpanded( function() {
     1477                    topPanel.attr( 'tabindex', '0' );
     1478                    backBtn.attr( 'tabindex', '-1' );
     1479
     1480                    topPanel.focus();
     1481                    accordionSection.css( 'top', '' );
     1482
    14101483                    if ( args.completeCallback ) {
    14111484                        args.completeCallback();
    14121485                    }
    14131486                } );
    1414                 topPanel.attr( 'tabindex', '0' );
    1415                 backBtn.attr( 'tabindex', '-1' );
    1416                 panelTitle.focus();
    1417                 container.scrollTop( 0 );
    1418             }
    1419         },
    1420 
    1421         /**
    1422          * Recalculate the top margin.
    1423          *
    1424          * @since 4.4.0
    1425          * @private
    1426          */
    1427         _recalculateTopMargin: function() {
    1428             var panel = this, headerActionsHeight, content, accordionSection;
    1429             headerActionsHeight = $( '#customize-header-actions' ).height();
    1430             accordionSection = panel.container.closest( '.accordion-section' );
    1431             content = accordionSection.find( '.control-panel-content' );
    1432             content.css( 'margin-top', ( parseInt( content.css( 'margin-top' ), 10 ) - ( content.offset().top - headerActionsHeight ) ) );
     1487
     1488                overlay.removeClass( 'in-sub-panel' );
     1489                accordionSection.removeClass( 'current-panel' );
     1490            }
    14331491        },
    14341492
    … …  
    14501508                template = wp.template( 'customize-panel-default-content' );
    14511509            }
    1452             if ( template && panel.container ) {
    1453                 panel.container.find( '.accordion-sub-container' ).html( template( panel.params ) );
     1510            if ( template && panel.headContainer ) {
     1511                panel.contentContainer.html( template( panel.params ) );
    14541512            }
    14551513        }
    … …  
    16271685                    // Wait for the section to be ready/initialized
    16281686                    section.deferred.embedded.done( function () {
    1629                         parentContainer = section.container.find( 'ul:first' );
     1687                        parentContainer = ( section.contentContainer.is( 'ul' ) ) ? section.contentContainer : section.contentContainer.find( 'ul:first' );
    16301688                        if ( ! control.container.parent().is( parentContainer ) ) {
    16311689                            parentContainer.append( control.container );
    … …  
    35433601    api.reflowPaneContents = _.bind( function () {
    35443602
    3545         var appendContainer, activeElement, rootContainers, rootNodes = [], wasReflowed = false;
     3603        var appendContainer, activeElement, rootHeadContainers, rootNodes = [], wasReflowed = false;
    35463604
    35473605        if ( document.activeElement ) {
    … …  
    35523610        api.panel.each( function ( panel ) {
    35533611            var sections = panel.sections(),
    3554                 sectionContainers = _.pluck( sections, 'container' );
     3612                sectionHeadContainers = _.pluck( sections, 'headContainer' );
    35553613            rootNodes.push( panel );
    3556             appendContainer = panel.container.find( 'ul:first' );
    3557             if ( ! api.utils.areElementListsEqual( sectionContainers, appendContainer.children( '[id]' ) ) ) {
     3614            appendContainer = ( panel.contentContainer.is( 'ul' ) ) ? panel.contentContainer : panel.contentContainer.find( 'ul:first' );
     3615            if ( ! api.utils.areElementListsEqual( sectionHeadContainers, appendContainer.children( '[id]' ) ) ) {
    35583616                _( sections ).each( function ( section ) {
    3559                     appendContainer.append( section.container );
     3617                    appendContainer.append( section.headContainer );
    35603618                } );
    35613619                wasReflowed = true;
    … …  
    35703628                rootNodes.push( section );
    35713629            }
    3572             appendContainer = section.container.find( 'ul:first' );
     3630            appendContainer = ( section.contentContainer.is( 'ul' ) ) ? section.contentContainer : section.contentContainer.find( 'ul:first' );
    35733631            if ( ! api.utils.areElementListsEqual( controlContainers, appendContainer.children( '[id]' ) ) ) {
    35743632                _( controls ).each( function ( control ) {
    … …  
    35813639        // Sort the root panels and sections
    35823640        rootNodes.sort( api.utils.prioritySort );
    3583         rootContainers = _.pluck( rootNodes, 'container' );
    3584         appendContainer = $( '#customize-theme-controls' ).children( 'ul' ); // @todo This should be defined elsewhere, and to be configurable
    3585         if ( ! api.utils.areElementListsEqual( rootContainers, appendContainer.children() ) ) {
     3641        rootHeadContainers = _.pluck( rootNodes, 'headContainer' );
     3642        appendContainer = $( '#customize-theme-controls .customize-pane-parent' ); // @todo This should be defined elsewhere, and to be configurable
     3643        if ( ! api.utils.areElementListsEqual( rootHeadContainers, appendContainer.children() ) ) {
    35863644            _( rootNodes ).each( function ( rootNode ) {
    3587                 appendContainer.append( rootNode.container );
     3645                appendContainer.append( rootNode.headContainer );
    35883646            } );
    35893647            wasReflowed = true;

  • trunk/src/wp-admin/js/customize-nav-menus.js

    r38624 r38648  
    852852            api.bind( 'pane-contents-reflowed', function() {
    853853                // Skip menus that have been removed.
    854                 if ( ! section.container.parent().length ) {
     854                if ( ! section.contentContainer.parent().length ) {
    855855                    return;
    856856                }
    … …  
    970970
    971971            if ( expanded ) {
    972                 wpNavMenu.menuList = section.container.find( '.accordion-section-content:first' );
     972                wpNavMenu.menuList = section.contentContainer;
    973973                wpNavMenu.targetList = wpNavMenu.menuList;
    974974
    … …  
    10321032            var section = this,
    10331033                button = section.container.find( '.add-menu-toggle' ),
    1034                 content = section.container.find( '.new-menu-section-content' ),
    1035                 customizer = section.container.closest( '.wp-full-overlay-sidebar-content' );
     1034                content = section.contentContainer,
     1035                customizer = section.headContainer.closest( '.wp-full-overlay-sidebar-content' );
    10361036            if ( expanded ) {
    10371037                button.addClass( 'open' );
    … …  
    10461046                content.find( '.menu-name-field' ).removeClass( 'invalid' );
    10471047            }
     1048        },
     1049
     1050        /**
     1051         * Find the content element.
     1052         *
     1053         * @since 4.7.0
     1054         *
     1055         * @returns {jQuery} Content UL element.
     1056         */
     1057        getContent: function() {
     1058            return this.container.find( 'ul:first' );
    10481059        }
    10491060    });
    … …  
    20022013        ready: function() {
    20032014            var control = this,
     2015                section = api.section( control.section() ),
    20042016                menuId = control.params.menu_id,
    20052017                menu = control.setting(),
    … …  
    20182030             */
    20192031            control.active.validate = function() {
    2020                 var value, section = api.section( control.section() );
     2032                var value;
    20212033                if ( section ) {
    20222034                    value = section.active();
    … …  
    20272039            };
    20282040
    2029             control.$controlSection = control.container.closest( '.control-section' );
     2041            control.$controlSection = section.headContainer;
    20302042            control.$sectionContent = control.container.closest( '.accordion-section-content' );
    20312043
    … …  
    23012313                }
    23022314
    2303                 var section = control.container.closest( '.accordion-section' ),
     2315                var section = api.section( control.section() ),
    23042316                    menuId = control.params.menu_id,
    2305                     controlTitle = section.find( '.accordion-section-title' ),
    2306                     sectionTitle = section.find( '.customize-section-title h3' ),
    2307                     location = section.find( '.menu-in-location' ),
     2317                    controlTitle = section.headContainer.find( '.accordion-section-title' ),
     2318                    sectionTitle = section.contentContainer.find( '.customize-section-title h3' ),
     2319                    location = section.headContainer.find( '.menu-in-location' ),
    23082320                    action = sectionTitle.find( '.customize-action' ),
    23092321                    name = displayNavMenuName( menu.name );
    … …  
    23292341
    23302342                // Update the nav menu name in all location checkboxes.
    2331                 section.find( '.customize-control-checkbox input' ).each( function() {
     2343                section.contentContainer.find( '.customize-control-checkbox input' ).each( function() {
    23322344                    if ( $( this ).prop( 'checked' ) ) {
    23332345                        $( '.current-menu-location-name-' + $( this ).data( 'location-id' ) ).text( name );
    … …  
    26432655            // Focus on the new menu section.
    26442656            api.section( customizeId ).focus(); // @todo should we focus on the new menu's control and open the add-items panel? Thinking user flow...
    2645 
    2646             // Fix an issue with extra space at top immediately after creating new menu.
    2647             $( '#menu-to-edit' ).css( 'margin-top', 0 );
    26482657        }
    26492658    });

  • trunk/tests/qunit/wp-admin/js/customize-controls.js

    r37700 r38648  
    212212        ok( ! section.params.content );
    213213        ok( !! section.container );
    214         ok( section.container.is( '.control-section.control-section-default' ) );
    215         ok( 1 === section.container.find( '> .accordion-section-title' ).length );
    216         ok( 1 === section.container.find( '> .accordion-section-content' ).length );
     214        ok( !! section.headContainer );
     215        ok( !! section.contentContainer );
     216        ok( section.container.has( section.headContainer ) );
     217        ok( section.container.has( section.contentContainer ) );
     218        ok( section.headContainer.is( '.control-section.control-section-default' ) );
     219        ok( 1 === section.headContainer.find( '> .accordion-section-title' ).length );
     220        ok( section.contentContainer.is( '.accordion-section-content' ) );
     221        equal( section.headContainer.attr( 'aria-owns' ), section.contentContainer.attr( 'id' ) );
    217222    } );
    218223
    … …  
    226231        ok( ! section.params.content );
    227232        ok( !! section.container );
     233        ok( !! section.headContainer );
     234        ok( !! section.contentContainer );
     235        ok( section.container.has( section.headContainer ) );
     236        ok( section.container.has( section.contentContainer ) );
    228237        ok( section.container.is( '.control-section.control-section-titleless' ) );
    229         ok( 0 === section.container.find( '> .accordion-section-title' ).length );
    230         ok( 1 === section.container.find( '> .accordion-section-content' ).length );
     238        ok( 0 === section.headContainer.find( '> .accordion-section-title' ).length );
     239        ok( section.contentContainer.is( '.accordion-section-content' ) );
     240        equal( section.headContainer.attr( 'aria-owns' ), section.contentContainer.attr( 'id' ) );
    231241    } );
    232242    module( 'Customizer Custom Type Section Lacking Specific Template' );
    … …  
    236246        ok( ! section.params.content );
    237247        ok( !! section.container );
    238         ok( section.container.is( '.control-section.control-section-' + section.params.type ) );
    239         ok( 1 === section.container.find( '> .accordion-section-title' ).length );
    240         ok( 1 === section.container.find( '> .accordion-section-content' ).length );
     248        ok( !! section.headContainer );
     249        ok( !! section.contentContainer );
     250        ok( section.container.has( section.headContainer ) );
     251        ok( section.container.has( section.contentContainer ) );
     252        ok( section.headContainer.is( '.control-section.control-section-' + section.params.type ) );
     253        ok( 1 === section.headContainer.find( '> .accordion-section-title' ).length );
     254        ok( section.contentContainer.is( '.accordion-section-content' ) );
     255        equal( section.headContainer.attr( 'aria-owns' ), section.contentContainer.attr( 'id' ) );
    241256    } );
    242257    module( 'Customizer Section lacking any params' );
    … …  
    271286        ok( !! panel.params.content );
    272287        ok( !! panel.container );
     288        ok( !! panel.headContainer );
     289        ok( !! panel.contentContainer );
     290        ok( panel.container.has( panel.headContainer ) );
     291        ok( panel.container.has( panel.contentContainer ) );
    273292    } );
    274293    test( 'Fixture panel has section among its sections()', function () {
    … …  
    305324        ok( ! panel.params.content );
    306325        ok( !! panel.container );
    307         ok( panel.container.is( '.control-panel.control-panel-default' ) );
    308         ok( 1 === panel.container.find( '> .accordion-section-title' ).length );
    309         ok( 1 === panel.container.find( '> .control-panel-content' ).length );
     326        ok( !! panel.headContainer );
     327        ok( !! panel.contentContainer );
     328        ok( panel.container.has( panel.headContainer ) );
     329        ok( panel.container.has( panel.contentContainer ) );
     330        ok( panel.headContainer.is( '.control-panel.control-panel-default' ) );
     331        ok( 1 === panel.headContainer.find( '> .accordion-section-title' ).length );
     332        ok( panel.contentContainer.is( '.control-panel-content' ) );
     333        equal( panel.headContainer.attr( 'aria-owns' ), panel.contentContainer.attr( 'id' ) );
    310334    } );
    311335
    … …  
    319343        ok( ! panel.params.content );
    320344        ok( !! panel.container );
    321         ok( panel.container.is( '.control-panel.control-panel-titleless' ) );
    322         ok( 0 === panel.container.find( '> .accordion-section-title' ).length );
    323         ok( 1 === panel.container.find( '> .control-panel-content' ).length );
     345        ok( !! panel.headContainer );
     346        ok( !! panel.contentContainer );
     347        ok( panel.container.has( panel.headContainer ) );
     348        ok( panel.container.has( panel.contentContainer ) );
     349        ok( panel.headContainer.is( '.control-panel.control-panel-titleless' ) );
     350        ok( 0 === panel.headContainer.find( '> .accordion-section-title' ).length );
     351        ok( panel.contentContainer.is( '.control-panel-content' ) );
     352        equal( panel.headContainer.attr( 'aria-owns' ), panel.contentContainer.attr( 'id' ) );
    324353    } );
    325354
    … …  
    330359        ok( ! panel.params.content );
    331360        ok( !! panel.container );
    332         ok( panel.container.is( '.control-panel.control-panel-' + panel.params.type ) );
    333         ok( 1 === panel.container.find( '> .accordion-section-title' ).length );
    334         ok( 1 === panel.container.find( '> .control-panel-content' ).length );
     361        ok( !! panel.headContainer );
     362        ok( !! panel.contentContainer );
     363        ok( panel.container.has( panel.headContainer ) );
     364        ok( panel.container.has( panel.contentContainer ) );
     365        ok( panel.headContainer.is( '.control-panel.control-panel-' + panel.params.type ) );
     366        ok( 1 === panel.headContainer.find( '> .accordion-section-title' ).length );
     367        ok( panel.contentContainer.is( '.control-panel-content' ) );
     368        equal( panel.headContainer.attr( 'aria-owns' ), panel.contentContainer.attr( 'id' ) );
    335369    } );
    336370    module( 'Customizer Panel lacking any params' );

  • trunk/tests/qunit/wp-admin/js/customize-widgets.js

    r35231 r38648  
    5959
    6060        panel.deferred.embedded.done( function() {
    61             ok( 1 === panel.container.find( '.no-widget-areas-rendered-notice' ).length );
    62             ok( panel.container.find( '.no-widget-areas-rendered-notice' ).is( ':visible' ) );
     61            ok( 1 === panel.contentContainer.find( '.no-widget-areas-rendered-notice' ).length );
     62            ok( panel.contentContainer.find( '.no-widget-areas-rendered-notice' ).is( ':visible' ) );
    6363            api.section( 'sidebar-widgets-sidebar-1' ).active( true );
    6464            api.control( 'sidebars_widgets[sidebar-1]' ).active( true );
    6565            api.trigger( 'pane-contents-reflowed' );
    66             ok( ! panel.container.find( '.no-widget-areas-rendered-notice' ).is( ':visible' ) );
     66            ok( ! panel.contentContainer.find( '.no-widget-areas-rendered-notice' ).is( ':visible' ) );
    6767        } );
    6868
Note: See TracChangeset for help on using the changeset viewer.