Changeset 33014

Timestamp:

07/01/2015 12:57:03 AM (9 years ago)

Author:

obenland

Message:

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.

File:

• trunk/src/wp-admin/js/widgets.js (modified) (5 diffs)

trunk/src/wp-admin/js/widgets.js

@@ -5 +5 @@
 
 wpWidgets = {
+    /**
+     * A closed Sidebar that gets a Widget dragged over it.
+     *
+     * @var element|null
+     */
+    hoveredSidebar: null,
 
     init : function() {
@@ -95 +101 @@
             zIndex: 100,
             containment: '#wpwrap',
+            refreshPositions: true,
             start: function( event, ui ) {
                 var chooser = $(this).find('.widgets-chooser');
@@ -117 +124 @@
             }
         });
+
+        /**
+         * 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({
@@ -149 +193 @@
                     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
@@ -492 +539 @@
         $( '#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;
     }
 };