- 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
Built from https://develop.svn.wordpress.org/trunk@26366


git-svn-id: http://core.svn.wordpress.org/trunk@26267 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2013-11-24 22:07:10 +00:00
parent 596bbe36a9
commit c944323a4f
7 changed files with 52 additions and 38 deletions

View File

@ -889,7 +889,7 @@ input[type="url"]:focus,
input[type="checkbox"]:focus, input[type="checkbox"]:focus,
input[type="radio"]:focus, input[type="radio"]:focus,
select:focus, select:focus,
#widgets-chooser ul, .widgets-chooser ul,
#widgets-left .widget-in-question .widget-top, #widgets-left .widget-in-question .widget-top,
#available-widgets .widget-top:hover, #available-widgets .widget-top:hover,
div#widgets-right .widget-top:hover { div#widgets-right .widget-top:hover {
@ -10392,22 +10392,22 @@ div#widgets-right .widgets-sortables {
pointer-events: auto; pointer-events: auto;
} }
#widgets-chooser ul.widgets-chooser-sidebars { .widgets-chooser ul.widgets-chooser-sidebars {
margin: 0; margin: 0;
list-style-type: none; list-style-type: none;
max-height: 300px; max-height: 300px;
overflow: auto; overflow: auto;
} }
#widgets-chooser { .widgets-chooser {
display: none; display: none;
} }
#widgets-chooser ul { .widgets-chooser ul {
border: 1px solid #ccc; border: 1px solid #ccc;
} }
#widgets-chooser li { .widgets-chooser li {
padding: 10px 35px 10px 15px; padding: 10px 35px 10px 15px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
background: #fff; background: #fff;
@ -10418,12 +10418,12 @@ div#widgets-right .widgets-sortables {
transition: background: 0.2s ease-in-out; transition: background: 0.2s ease-in-out;
} }
#widgets-chooser li:hover, .widgets-chooser li:hover,
#widgets-chooser li:focus { .widgets-chooser li:focus {
background: rgba(255,255,255,0.7); background: rgba(255,255,255,0.7);
} }
#widgets-chooser li:focus:before { .widgets-chooser li:focus:before {
content: '\f147'; content: '\f147';
display: block; display: block;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -10434,17 +10434,17 @@ div#widgets-right .widgets-sortables {
right: 5px; right: 5px;
} }
#widgets-chooser li:last-child { .widgets-chooser li:last-child {
border: none; border: none;
} }
#widgets-chooser li.widgets-chooser-selected { .widgets-chooser li.widgets-chooser-selected {
background: #2ea2cc; background: #2ea2cc;
color: #fff; color: #fff;
} }
#widgets-chooser li.widgets-chooser-selected:before, .widgets-chooser li.widgets-chooser-selected:before,
#widgets-chooser li.widgets-chooser-selected:focus:before { .widgets-chooser li.widgets-chooser-selected:focus:before {
content: '\f147'; content: '\f147';
display: block; display: block;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -10455,12 +10455,12 @@ div#widgets-right .widgets-sortables {
right: 5px; right: 5px;
} }
#widgets-chooser .widgets-chooser-actions { .widgets-chooser .widgets-chooser-actions {
padding: 10px 0 12px 0; padding: 10px 0 12px 0;
text-align: center; text-align: center;
} }
#widgets-chooser button { .widgets-chooser button {
margin-left: 5px; margin-left: 5px;
} }

File diff suppressed because one or more lines are too long

View File

@ -889,7 +889,7 @@ input[type="url"]:focus,
input[type="checkbox"]:focus, input[type="checkbox"]:focus,
input[type="radio"]:focus, input[type="radio"]:focus,
select:focus, select:focus,
#widgets-chooser ul, .widgets-chooser ul,
#widgets-left .widget-in-question .widget-top, #widgets-left .widget-in-question .widget-top,
#available-widgets .widget-top:hover, #available-widgets .widget-top:hover,
div#widgets-right .widget-top:hover { div#widgets-right .widget-top:hover {
@ -10392,22 +10392,22 @@ div#widgets-right .widgets-sortables {
pointer-events: auto; pointer-events: auto;
} }
#widgets-chooser ul.widgets-chooser-sidebars { .widgets-chooser ul.widgets-chooser-sidebars {
margin: 0; margin: 0;
list-style-type: none; list-style-type: none;
max-height: 300px; max-height: 300px;
overflow: auto; overflow: auto;
} }
#widgets-chooser { .widgets-chooser {
display: none; display: none;
} }
#widgets-chooser ul { .widgets-chooser ul {
border: 1px solid #ccc; border: 1px solid #ccc;
} }
#widgets-chooser li { .widgets-chooser li {
padding: 10px 15px 10px 35px; padding: 10px 15px 10px 35px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
background: #fff; background: #fff;
@ -10418,12 +10418,12 @@ div#widgets-right .widgets-sortables {
transition: background: 0.2s ease-in-out; transition: background: 0.2s ease-in-out;
} }
#widgets-chooser li:hover, .widgets-chooser li:hover,
#widgets-chooser li:focus { .widgets-chooser li:focus {
background: rgba(255,255,255,0.7); background: rgba(255,255,255,0.7);
} }
#widgets-chooser li:focus:before { .widgets-chooser li:focus:before {
content: '\f147'; content: '\f147';
display: block; display: block;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -10434,17 +10434,17 @@ div#widgets-right .widgets-sortables {
left: 5px; left: 5px;
} }
#widgets-chooser li:last-child { .widgets-chooser li:last-child {
border: none; border: none;
} }
#widgets-chooser li.widgets-chooser-selected { .widgets-chooser li.widgets-chooser-selected {
background: #2ea2cc; background: #2ea2cc;
color: #fff; color: #fff;
} }
#widgets-chooser li.widgets-chooser-selected:before, .widgets-chooser li.widgets-chooser-selected:before,
#widgets-chooser li.widgets-chooser-selected:focus:before { .widgets-chooser li.widgets-chooser-selected:focus:before {
content: '\f147'; content: '\f147';
display: block; display: block;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -10455,12 +10455,12 @@ div#widgets-right .widgets-sortables {
left: 5px; left: 5px;
} }
#widgets-chooser .widgets-chooser-actions { .widgets-chooser .widgets-chooser-actions {
padding: 10px 0 12px 0; padding: 10px 0 12px 0;
text-align: center; text-align: center;
} }
#widgets-chooser button { .widgets-chooser button {
margin-right: 5px; margin-right: 5px;
} }

File diff suppressed because one or more lines are too long

View File

@ -7,7 +7,7 @@ wpWidgets = {
init : function() { init : function() {
var rem, the_id, var rem, the_id,
self = this, self = this,
chooser = $('#widgets-chooser'), chooser = $('.widgets-chooser'),
selectSidebar = chooser.find('.widgets-chooser-sidebars'), selectSidebar = chooser.find('.widgets-chooser-sidebars'),
sidebars = $('div.widgets-sortables'), sidebars = $('div.widgets-sortables'),
isRTL = !! ( 'undefined' !== typeof isRtl && isRtl ); isRTL = !! ( 'undefined' !== typeof isRtl && isRtl );
@ -82,9 +82,19 @@ wpWidgets = {
helper: 'clone', helper: 'clone',
zIndex: 100, zIndex: 100,
containment: 'document', containment: 'document',
start: function(e,ui) { start: function( event, ui ) {
var chooser = $(this).find('.widgets-chooser');
ui.helper.find('div.widget-description').hide(); ui.helper.find('div.widget-description').hide();
the_id = this.id; 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() { stop: function() {
if ( rem ) { if ( rem ) {
@ -103,7 +113,12 @@ wpWidgets = {
distance: 2, distance: 2,
containment: 'document', containment: 'document',
start: function(e,ui) { 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) { stop: function(e,ui) {
if ( ui.item.hasClass('ui-draggable') && ui.item.data('draggable') ) { if ( ui.item.hasClass('ui-draggable') && ui.item.data('draggable') ) {
@ -203,7 +218,7 @@ wpWidgets = {
// Open the chooser // Open the chooser
self.clearWidgetSelection(); self.clearWidgetSelection();
$( '#widgets-left' ).addClass( 'chooser' ); $( '#widgets-left' ).addClass( 'chooser' );
widget.addClass( 'widget-in-question' ).draggable('disable'); widget.addClass( 'widget-in-question' );
widget.find( '.widget-description' ).after( chooser ); widget.find( '.widget-description' ).after( chooser );
chooser.slideDown( 300, function() { chooser.slideDown( 300, function() {
@ -386,9 +401,8 @@ wpWidgets = {
closeChooser: function() { closeChooser: function() {
var self = this; var self = this;
$( '#widgets-chooser' ).slideUp( 200, function() { $( '.widgets-chooser' ).slideUp( 200, function() {
$( '#wpbody-content' ).append( this ); $( '#wpbody-content' ).append( this );
$( '#widgets-left .widget-in-question' ).draggable('enable');
self.clearWidgetSelection(); self.clearWidgetSelection();
}); });
}, },

File diff suppressed because one or more lines are too long

View File

@ -428,7 +428,7 @@ foreach ( $theme_sidebars as $sidebar => $registered_sidebar ) {
<br class="clear" /> <br class="clear" />
</div> </div>
<div id="widgets-chooser"> <div class="widgets-chooser">
<ul class="widgets-chooser-sidebars"></ul> <ul class="widgets-chooser-sidebars"></ul>
<div class="widgets-chooser-actions"> <div class="widgets-chooser-actions">
<button class="button-secondary"><?php _e( 'Cancel' ); ?></button> <button class="button-secondary"><?php _e( 'Cancel' ); ?></button>