From 016ebf43edfd3cec8b62f2db18ae38881f416d1f Mon Sep 17 00:00:00 2001
From: Konstantin Obenland <obenland@git.wordpress.org>
Date: Wed, 1 Jul 2015 00:57:03 +0000
Subject: [PATCH] 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
---
 src/wp-admin/js/widgets.js | 60 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/src/wp-admin/js/widgets.js b/src/wp-admin/js/widgets.js
index c97ff69ccf..549b1d0b24 100644
--- a/src/wp-admin/js/widgets.js
+++ b/src/wp-admin/js/widgets.js
@@ -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;
 	}
 };