Ticket #25952: 25952.3.diff

src/wp-admin/css/wp-admin.css

@@ -10314 +10314 @@
         margin: 10px 0 0 0;
 }
 
+/* Dropping a widget over a closed sidebar */
+div#widgets-right .widgets-holder-wrap.was-closed {
+        box-shadow: 0 0 3px 2px rgba(16, 117, 160, 0.9);
+}
+div#widgets-right .widgets-holder-wrap.ui-sidebar-droppable .sidebar-description,
+div#widgets-right .widgets-holder-wrap.ui-sidebar-droppable .widgets-sortables {
+        opacity: 0.3;
+}
+
 div#widgets-right .widget {
         margin: 0 auto;
         border: 1px solid #dedede !important; /* ln 991 in colors-fresh.css */
@@ -12804 +12813 @@
         #wpadminbar #wp-admin-bar-wp-logo {
                 display: none;
         }
-}
- No newline at end of file
+}

src/wp-admin/js/widgets.js

@@ -85 +85 @@
                         zIndex: 100,
                         containment: 'document',
                         start: function(e,ui) {
+                                // Mark the widget that is dragged. Needed as a workaround for dropping on a closed sidebar.
+                                $(this).addClass('widget-in-question');
+
                                 ui.helper.find('div.widget-description').hide();
                                 the_id = this.id;
                         },
                         stop: function() {
+                                $(this).removeClass('widget-in-question');
+
                                 if ( rem )
                                         $(rem).hide();
 
@@ -178 +183 @@
                         }
                 });
 
+                // Open the sidebar (the sortable container) when dragging a widget over its title
+                $('#widgets-right .widgets-holder-wrap').droppable({
+                        accept: '.widget',
+                        tolerance: 'pointer',
+                        over: function( event, ui ) {
+                                var sidebarWrap = $(this);
+
+                                if ( sidebarWrap.hasClass( 'closed' ) ) {
+                                        sidebarWrap.addClass( 'was-closed' );
+
+                                        // Spring-loaded sidebars
+                                        //window.sidebar_spring = setTimeout( function() {
+                                        //      sidebarWrap.removeClass( 'closed' );
+                                        //}, 1200 );
+                                }
+                        },
+                        out: function() {
+                                var sidebarWrap = $(this);
+                                //clearTimeout( window.sidebar_spring );
+                                if ( sidebarWrap.hasClass( 'was-closed' ) ) {
+                                        sidebarWrap.addClass( 'closed' ).removeClass( 'was-closed' );
+                                }
+                        },
+                        drop: function( event, ui ) {
+                                var sidebarWrap = $(this);
+
+                                if ( sidebarWrap.hasClass( 'was-closed' ) ) {
+                                        sidebarWrap.removeClass( 'was-closed' );
+
+                                        // Prepend the widget and save position
+                                        self.addWidget( sidebarWrap.children('.widgets-sortables').attr('id') );
+                                        self.clearWidgetSelection();
+                                }
+                        }
+                });
+
                 // Area Chooser
                 $( '#widgets-right .widgets-holder-wrap' ).each( function( index, element ) {
                         var $element = $( element ),
@@ -216 +257 @@
                         var $target = $( event.target );
 
                         if ( $target.hasClass('button-primary') ) {
-                                self.addWidget( chooser );
+                                self.addWidget( chooser.find( '.widgets-chooser-selected' ).data('sidebarId') );
                                 self.closeChooser();
                         } else if ( $target.hasClass('button-secondary') ) {
                                 self.closeChooser();
@@ -336 +377 @@
                 });
         },
 
-        addWidget: function( chooser ) {
-                var widget = $('#available-widgets').find('.widget-in-question').clone(),
+        addWidget: function( sidebarId ) {
+                var top,
+                        widget = $('#available-widgets').find('.widget-in-question').clone(),
                         widgetId = widget.attr('id'),
                         add = widget.find( 'input.add_new' ).val(),
                         n = widget.find( 'input.multi_number' ).val(),
-                        sidebarId = chooser.find( '.widgets-chooser-selected' ).data('sidebarId'),
                         sidebar = $( '#' + sidebarId );
 
                 if ( 'multi' === add ) {
@@ -369 +410 @@
                 // No longer "new" widget
                 widget.find( 'input.add_new' ).val('');
 
-                $( 'html, body' ).animate({
-                        scrollTop: sidebar.offset().top - 130
-                }, 200 );
+                top = sidebar.offset().top;
 
+                if ( top && top - 130 > 0 ) {
+                        $( 'html, body' ).animate({
+                                scrollTop: ( top - 130 )
+                        }, 200 );
+                }
+
                 window.setTimeout( function() {
-                        // Cannot use a callback in the animation above as it fires twice,
-                        // have to queue this "by hand".
                         widget.find( '.widget-title' ).trigger('click');
                 }, 250 );
         },
@@ -391 +434 @@
 
         clearWidgetSelection: function() {
                 $( '#widgets-left' ).removeClass( 'chooser' );
-                $( '#available-widgets' ).find( '.widget-in-question' ).removeClass( 'widget-in-question' );
+                $( '.widget-in-question' ).removeClass( 'widget-in-question' );
         }
 };