Open closed widget areas when dragging onto them.

Allows dropping Widgets into the correct spot of a given sidebar, no matter
whether that sidebar is open or closed. Removes a step from the setup process
for closed sidebars.

Props polevaultweb.
Fixes #13524.



git-svn-id: https://develop.svn.wordpress.org/trunk@33014 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Konstantin Obenland 2015-07-01 00:57:03 +00:00
parent 58f914004d
commit 016ebf43ed
1 changed files with 60 additions and 0 deletions

View File

@ -4,6 +4,12 @@ var wpWidgets;
var $document = $( document );
wpWidgets = {
/**
* A closed Sidebar that gets a Widget dragged over it.
*
* @var element|null
*/
hoveredSidebar: null,
init : function() {
var rem, the_id,
@ -94,6 +100,7 @@ wpWidgets = {
helper: 'clone',
zIndex: 100,
containment: '#wpwrap',
refreshPositions: true,
start: function( event, ui ) {
var chooser = $(this).find('.widgets-chooser');
@ -117,6 +124,43 @@ wpWidgets = {
}
});
/**
* Opens and closes previously closed Sidebars when Widgets are dragged over/out of them.
*/
sidebars.droppable( {
tolerance: 'pointer',
/**
* Open Sidebar when a Widget gets dragged over it.
*
* @param event
*/
over: function( event ) {
var $wrap = $( event.target ).parent();
if ( wpWidgets.hoveredSidebar && ! $wrap.is( wpWidgets.hoveredSidebar ) ) {
// Close the previous Sidebar as the Widget has been dragged onto another Sidebar.
wpWidgets.closeSidebar( event );
}
if ( $wrap.hasClass( 'closed' ) ) {
wpWidgets.hoveredSidebar = $wrap;
$wrap.removeClass( 'closed' );
}
},
/**
* Close Sidebar when the Widget gets dragged out of it.
*
* @param event
*/
out: function( event ) {
if ( wpWidgets.hoveredSidebar ) {
wpWidgets.closeSidebar( event );
}
}
} );
sidebars.sortable({
placeholder: 'widget-placeholder',
items: '> .widget',
@ -148,6 +192,9 @@ wpWidgets = {
$widget = ui.item,
id = the_id;
// Reset the var to hold a previously closed sidebar.
wpWidgets.hoveredSidebar = null;
if ( $widget.hasClass('deleting') ) {
wpWidgets.save( $widget, 1, 0, 1 ); // delete widget
$widget.remove();
@ -491,6 +538,19 @@ wpWidgets = {
clearWidgetSelection: function() {
$( '#widgets-left' ).removeClass( 'chooser' );
$( '.widget-in-question' ).removeClass( 'widget-in-question' );
},
/**
* Closes a Sidebar that was previously closed, but opened by dragging a Widget over it.
*
* Used when a Widget gets dragged in/out of the Sidebar and never dropped.
*
* @param sidebar
*/
closeSidebar: function( sidebar ) {
this.hoveredSidebar.addClass( 'closed' );
$( sidebar.target ).css( 'min-height', '' );
this.hoveredSidebar = null;
}
};