f3e8e7735d
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. git-svn-id: https://develop.svn.wordpress.org/trunk@38648 602fd350-edb4-49c9-b593-d223f7449a82
72 lines
2.6 KiB
JavaScript
72 lines
2.6 KiB
JavaScript
/* global wp */
|
|
jQuery( window ).load( function() {
|
|
|
|
var api = wp.customize, $ = jQuery;
|
|
|
|
module( 'Customize Widgets' );
|
|
|
|
test( 'fixtures should be present', function() {
|
|
var widgetControl;
|
|
ok( api.panel( 'widgets' ) );
|
|
ok( api.section( 'sidebar-widgets-sidebar-1' ) );
|
|
widgetControl = api.control( 'widget_search[2]' );
|
|
ok( widgetControl );
|
|
ok( api.control( 'sidebars_widgets[sidebar-1]' ) );
|
|
ok( api( 'widget_search[2]' ) );
|
|
ok( api( 'sidebars_widgets[sidebar-1]' ) );
|
|
ok( widgetControl.params.content );
|
|
ok( widgetControl.params.widget_control );
|
|
ok( widgetControl.params.widget_content );
|
|
ok( widgetControl.params.widget_id );
|
|
ok( widgetControl.params.widget_id_base );
|
|
});
|
|
|
|
test( 'widget contents should embed (with widget-added event) when section and control expand', function() {
|
|
var control, section, widgetAddedEvent = null, widgetControlRootElement = null;
|
|
control = api.control( 'widget_search[2]' );
|
|
section = api.section( 'sidebar-widgets-sidebar-1' );
|
|
|
|
$( document ).on( 'widget-added', function( event, widgetElement ) {
|
|
widgetAddedEvent = event;
|
|
widgetControlRootElement = widgetElement;
|
|
});
|
|
|
|
ok( ! section.expanded() );
|
|
ok( 0 === control.container.find( '> .widget' ).length );
|
|
|
|
// Preview sets the active state.
|
|
section.active.set( true );
|
|
control.active.set( true );
|
|
api.control( 'sidebars_widgets[sidebar-1]' ).active.set( true );
|
|
|
|
section.expand();
|
|
ok( ! widgetAddedEvent, 'expected widget added event not fired' );
|
|
ok( 1 === control.container.find( '> .widget' ).length, 'expected there to be one .widget element in the container' );
|
|
ok( 0 === control.container.find( '.widget-content' ).children().length );
|
|
|
|
control.expand();
|
|
ok( 1 === control.container.find( '.widget-content' ).children().length );
|
|
ok( widgetAddedEvent );
|
|
ok( widgetControlRootElement.is( control.container.find( '> .widget' ) ) );
|
|
ok( 1 === control.container.find( '.widget-content #widget-search-2-title' ).length );
|
|
|
|
$( document ).off( 'widget-added' );
|
|
});
|
|
|
|
test( 'widgets panel should have notice', function() {
|
|
var panel = api.panel( 'widgets' );
|
|
ok( panel.extended( api.Widgets.WidgetsPanel ) );
|
|
|
|
panel.deferred.embedded.done( function() {
|
|
ok( 1 === panel.contentContainer.find( '.no-widget-areas-rendered-notice' ).length );
|
|
ok( panel.contentContainer.find( '.no-widget-areas-rendered-notice' ).is( ':visible' ) );
|
|
api.section( 'sidebar-widgets-sidebar-1' ).active( true );
|
|
api.control( 'sidebars_widgets[sidebar-1]' ).active( true );
|
|
api.trigger( 'pane-contents-reflowed' );
|
|
ok( ! panel.contentContainer.find( '.no-widget-areas-rendered-notice' ).is( ':visible' ) );
|
|
} );
|
|
|
|
expect( 4 );
|
|
});
|
|
});
|