// Set up our namespace...
var api = wp.customize,
- l10n, OldPreviewer;
+ l10n;
api.Widgets = api.Widgets || {};
} );
// Close the panel if the URL in the preview changes
- api.Widgets.Previewer.bind( 'url', this.close );
+ api.previewer.bind( 'url', this.close );
},
// Performs a search and handles selected widget
isEsc = ( event.which === 27 ),
isDown = ( event.which === 40 ),
isUp = ( event.which === 38 ),
+ isTab = ( event.which === 9 ),
+ isShift = ( event.shiftKey ),
selected = null,
firstVisible = this.$el.find( '> .widget-tpl:visible:first' ),
lastVisible = this.$el.find( '> .widget-tpl:visible:last' ),
- isSearchFocused = $( event.target ).is( this.$search );
+ isSearchFocused = $( event.target ).is( this.$search ),
+ isLastWidgetFocused = $( event.target ).is( '.widget-tpl:visible:last' );
if ( isDown || isUp ) {
if ( isDown ) {
} else if ( isEsc ) {
this.close( { returnFocus: true } );
}
+
+ if ( isTab && ( isShift && isSearchFocused || ! isShift && isLastWidgetFocused ) ) {
+ this.currentSidebarControl.container.find( '.add-new-widget' ).focus();
+ event.preventDefault();
+ }
}
});
* Handle clicks for up/down/move on the reorder nav
*/
$reorderNav = this.container.find( '.widget-reorder-nav' );
- $reorderNav.find( '.move-widget, .move-widget-down, .move-widget-up' ).on( 'click keypress', function( event ) {
+ $reorderNav.find( '.move-widget, .move-widget-down, .move-widget-up' ).each( function() {
+ $( this ).prepend( self.container.find( '.widget-title' ).text() + ': ' );
+ } ).on( 'click keypress', function( event ) {
if ( event.type === 'keypress' && ( event.which !== 13 && event.which !== 32 ) ) {
return;
}
self.container.removeClass( 'previewer-loading' );
} );
- api.Widgets.Previewer.bind( 'widget-updated', function( updatedWidgetId ) {
+ api.previewer.bind( 'widget-updated', function( updatedWidgetId ) {
if ( updatedWidgetId === self.params.widget_id ) {
self.container.removeClass( 'previewer-loading' );
}
} );
- // Update widget control to indicate whether it is currently rendered
- api.Widgets.Previewer.bind( 'rendered-widgets', function( renderedWidgets ) {
- var isRendered = !! renderedWidgets[self.params.widget_id];
-
- self.container.toggleClass( 'widget-rendered', isRendered );
- } );
-
formSyncHandler = api.Widgets.formSyncHandlers[ this.params.widget_id_base ];
if ( formSyncHandler ) {
$( document ).on( 'widget-synced', function( e, widget ) {
}
},
+ /**
+ * Update widget control to indicate whether it is currently rendered.
+ *
+ * Overrides api.Control.toggle()
+ *
+ * @param {Boolean} active
+ */
+ toggle: function ( active ) {
+ this.container.toggleClass( 'widget-rendered', active );
+ },
+
/**
* Set up event handlers for widget removal
*/
// Check if the user is logged out.
if ( '0' === r ) {
- api.Widgets.Previewer.preview.iframe.hide();
- api.Widgets.Previewer.login().done( function() {
+ api.previewer.preview.iframe.hide();
+ api.previewer.login().done( function() {
self.updateWidget( args );
- api.Widgets.Previewer.preview.iframe.show();
+ api.previewer.preview.iframe.show();
} );
return;
}
// Check for cheaters.
if ( '-1' === r ) {
- api.Widgets.Previewer.cheatin();
+ api.previewer.cheatin();
return;
}
} );
// Update the model with whether or not the sidebar is rendered
- api.Widgets.Previewer.bind( 'rendered-sidebars', function( renderedSidebars ) {
- var isRendered = !! renderedSidebars[self.params.sidebar_id];
-
- registeredSidebar.set( 'is_rendered', isRendered );
+ self.active.bind( function ( active ) {
+ registeredSidebar.set( 'is_rendered', active );
} );
+ },
- // Show the sidebar section when it becomes visible
- registeredSidebar.on( 'change:is_rendered', function( ) {
- var sectionSelector = '#accordion-section-sidebar-widgets-' + this.get( 'id' ), $section;
+ /**
+ * Show the sidebar section when it becomes visible.
+ *
+ * Overrides api.Control.toggle()
+ *
+ * @param {Boolean} active
+ */
+ toggle: function ( active ) {
+ var $section, sectionSelector;
- $section = $( sectionSelector );
- if ( this.get( 'is_rendered' ) ) {
- $section.stop().slideDown( function() {
- $( this ).css( 'height', 'auto' ); // so that the .accordion-section-content won't overflow
- } );
+ sectionSelector = '#accordion-section-sidebar-widgets-' + this.params.sidebar_id;
+ $section = $( sectionSelector );
- } else {
- // Make sure that hidden sections get closed first
- if ( $section.hasClass( 'open' ) ) {
- // it would be nice if accordionSwitch() in accordion.js was public
- $section.find( '.accordion-section-title' ).trigger( 'click' );
- }
+ if ( active ) {
+ $section.stop().slideDown( function() {
+ $( this ).css( 'height', 'auto' ); // so that the .accordion-section-content won't overflow
+ } );
- $section.stop().slideUp();
+ } else {
+ // Make sure that hidden sections get closed first
+ if ( $section.hasClass( 'open' ) ) {
+ // it would be nice if accordionSwitch() in accordion.js was public
+ $section.find( '.accordion-section-title' ).trigger( 'click' );
}
- } );
+
+ $section.stop().slideUp();
+ }
},
/**
_( this.getWidgetFormControls() ).each( function( formControl ) {
formControl.collapseForm();
} );
+
+ this.$sectionContent.find( '.first-widget .move-widget' ).focus();
+ this.$sectionContent.find( '.add-new-widget' ).prop( 'tabIndex', -1 );
+ } else {
+ this.$sectionContent.find( '.add-new-widget' ).prop( 'tabIndex', 0 );
}
},
sidebar_widgets: api.Widgets.SidebarControl
});
- /**
- * Capture the instance of the Previewer since it is private
- */
- OldPreviewer = api.Previewer;
- api.Previewer = OldPreviewer.extend({
- initialize: function( params, options ) {
- api.Widgets.Previewer = this;
- OldPreviewer.prototype.initialize.call( this, params, options );
- this.bind( 'refresh', this.refresh );
- }
- } );
-
/**
* Init Customizer for widgets.
*/
});
// Highlight widget control
- api.Widgets.Previewer.bind( 'highlight-widget-control', api.Widgets.highlightWidgetFormControl );
+ api.previewer.bind( 'highlight-widget-control', api.Widgets.highlightWidgetFormControl );
// Open and focus widget control
- api.Widgets.Previewer.bind( 'focus-widget-control', api.Widgets.focusWidgetFormControl );
+ api.previewer.bind( 'focus-widget-control', api.Widgets.focusWidgetFormControl );
} );
/**