Changeset 26366

Timestamp:

11/24/2013 10:06:13 PM (11 years ago)

Author:

azaozz

Message:

Widgets:

• Don't deactivate "draggable" on the widget when the chooser is open. Makes it possible to still drag the "widget-in-question".
• Change the chooser's HTML id to a class to avoid collisions when cloning.
• Refresh the "sortable" positions when an open widget is dragged. Fixes problems moving the widget up or down in the same sidebar.

See #25821

Location:

trunk/src/wp-admin

Files:

• css/wp-admin.css (modified) (6 diffs)
• js/widgets.js (modified) (5 diffs)
• widgets.php (modified) (1 diff)

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

@@ -890 +890 @@
 input[type="radio"]:focus,
 select:focus,
-#widgets-chooser ul,
+.widgets-chooser ul,
 #widgets-left .widget-in-question .widget-top,
 #available-widgets .widget-top:hover,
@@ -10393 +10393 @@
 }
 
-#widgets-chooser ul.widgets-chooser-sidebars {
+.widgets-chooser ul.widgets-chooser-sidebars {
     margin: 0;
     list-style-type: none;
@@ -10400 +10400 @@
 }
 
-#widgets-chooser {
+.widgets-chooser {
     display: none;
 }
 
-#widgets-chooser ul {
+.widgets-chooser ul {
     border: 1px solid #ccc;
 }
 
-#widgets-chooser li {
+.widgets-chooser li {
     padding: 10px 15px 10px 35px;
     border-bottom: 1px solid #ccc;
@@ -10419 +10419 @@
 }
 
-#widgets-chooser li:hover,
-#widgets-chooser li:focus {
+.widgets-chooser li:hover,
+.widgets-chooser li:focus {
     background: rgba(255,255,255,0.7);
 }
 
-#widgets-chooser li:focus:before {
+.widgets-chooser li:focus:before {
     content: '\f147';
     display: block;
@@ -10435 +10435 @@
 }
 
-#widgets-chooser li:last-child {
+.widgets-chooser li:last-child {
     border: none;
 }
 
-#widgets-chooser li.widgets-chooser-selected {
+.widgets-chooser li.widgets-chooser-selected {
     background: #2ea2cc;
     color: #fff;
 }
 
-#widgets-chooser li.widgets-chooser-selected:before,
-#widgets-chooser li.widgets-chooser-selected:focus:before {
+.widgets-chooser li.widgets-chooser-selected:before,
+.widgets-chooser li.widgets-chooser-selected:focus:before {
     content: '\f147';
     display: block;
@@ -10456 +10456 @@
 }
 
-#widgets-chooser .widgets-chooser-actions {
+.widgets-chooser .widgets-chooser-actions {
     padding: 10px 0 12px 0;
     text-align: center;
 }
 
-#widgets-chooser button {
+.widgets-chooser button {
     margin-right: 5px;
 }

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

@@ -8 +8 @@
         var rem, the_id,
             self = this,
-            chooser = $('#widgets-chooser'),
+            chooser = $('.widgets-chooser'),
             selectSidebar = chooser.find('.widgets-chooser-sidebars'),
             sidebars = $('div.widgets-sortables'),
@@ -83 +83 @@
             zIndex: 100,
             containment: 'document',
-            start: function(e,ui) {
+            start: function( event, ui ) {
+                var chooser = $(this).find('.widgets-chooser');
+
                 ui.helper.find('div.widget-description').hide();
                 the_id = this.id;
+
+                if ( chooser.length ) {
+                    // Hide the chooser and move it out of the widget
+                    $( '#wpbody-content' ).append( chooser.hide() );
+                    // Delete the cloned chooser from the drag helper
+                    ui.helper.find('.widgets-chooser').remove();
+                    self.clearWidgetSelection();
+                }
             },
             stop: function() {
@@ -104 +114 @@
             containment: 'document',
             start: function(e,ui) {
-                ui.item.children('.widget-inside').hide();
+                var inside = ui.item.children('.widget-inside');
+
+                if ( inside.css('display') === 'block' ) {
+                    inside.hide();
+                    $(this).sortable('refreshPositions');
+                }
             },
             stop: function(e,ui) {
@@ -204 +219 @@
                 self.clearWidgetSelection();
                 $( '#widgets-left' ).addClass( 'chooser' );
-                widget.addClass( 'widget-in-question' ).draggable('disable');
+                widget.addClass( 'widget-in-question' );
 
                 widget.find( '.widget-description' ).after( chooser );
@@ -387 +402 @@
         var self = this;
 
-        $( '#widgets-chooser' ).slideUp( 200, function() {
+        $( '.widgets-chooser' ).slideUp( 200, function() {
             $( '#wpbody-content' ).append( this );
-            $( '#widgets-left .widget-in-question' ).draggable('enable');
             self.clearWidgetSelection();
         });

trunk/src/wp-admin/widgets.php

@@ -429 +429 @@
 </div>
 
-<div id="widgets-chooser">
+<div class="widgets-chooser">
     <ul class="widgets-chooser-sidebars"></ul>
     <div class="widgets-chooser-actions">