Delete widgets when dragged back to Available Widgets, add ui.droppable.js and ui.selectable.js, see #9511

git-svn-id: http://svn.automattic.com/wordpress/trunk@11445 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/colors-classic.css

@@ -1632,10 +1632,15 @@ div.widgets-sortables,
 	color: #fff;
 }
 
-.sidebar-name:hover {
+.sidebar-name:hover,
+#removing-widget {
 	color: #d54e21;
 }
 
+#removing-widget span {
+	color: black;
+}
+
 #widgets-left .sidebar-name-arrow {
 	background: transparent url(../images/menu-bits-vs.gif) no-repeat scroll left -109px;
 }
@@ -1644,6 +1649,10 @@ div.widgets-sortables,
 	background: transparent url(../images/fav-arrow-vs.gif) no-repeat scroll 0 -1px;
 }
 
-h4 .in-widget-title {
+.in-widget-title {
-	color: #636363;
+	color: #606060;
+}
+
+.deleting .widget-title * {
+	color: #aaa;
 }

wp-admin/css/colors-fresh.css

@@ -1621,10 +1621,15 @@ div.widgets-sortables,
 	color: #fff;
 }
 
-.sidebar-name:hover {
+.sidebar-name:hover,
+#removing-widget {
 	color: #d54e21;
 }
 
+#removing-widget span {
+	color: black;
+}
+
 #widgets-left .sidebar-name-arrow {
 	background: transparent url(../images/menu-bits.gif) no-repeat scroll left -109px;
 }
@@ -1633,6 +1638,10 @@ div.widgets-sortables,
 	background: transparent url(../images/fav-arrow.gif) no-repeat scroll 0 -1px;
 }
 
-h4 .in-widget-title {
+.in-widget-title {
-	color: #636363;
+	color: #606060;
+}
+
+.deleting .widget-title * {
+	color: #aaa;
 }

wp-admin/css/ie.css

@@ -376,6 +376,10 @@ table.ie-fixed {
 	width: 210px;
 }
 
+* html #removing-widget .in-widget-title {
+	display: none;
+}
+
 #available-widgets .widget-holder {
 	padding-bottom: 65px;
 }

wp-admin/css/widgets.css

@@ -44,6 +44,8 @@ div.sidebar-name h3 {
 	padding: 5px 12px;
 	font-size: 13px;
 	height: 19px;
+	overflow: hidden;
+	white-space: nowrap;
 }
 
 div.sidebar-name {
@@ -296,7 +298,15 @@ a.widget-control-edit {
 	width: 26px;
 }
 
-h4 .in-widget-title {
+.widget-title .in-widget-title {
 	font-size: 11px;
 	white-space: nowrap;
 }
+
+#removing-widget {
+	display: none;
+	font-weight: normal;
+	padding-left: 15px;
+	font-size: 12px;
+}
+

wp-admin/includes/template.php

@@ -3582,7 +3582,7 @@ function plugins_search_help() {
 function widgets_help() {
 	return '
 	<p>' . __('Widgets are added and arranged by simple drag &#8217;n&#8217; drop. If you hover your mouse over the titlebar of a widget, you&#8217;ll see a 4-arrow cursor which indicates that the widget is movable.  Click on the titlebar, hold down the mouse button and drag the widget to a sidebar. As you drag, you&#8217;ll see a dotted box that also moves. This box shows where the widget will go once you drop it.') . '</p>
-	<p>' . __('To remove a widget from a sidebar, click on the arrow on its titlebar to reveal its settings, and then click Remove.') . '</p>
+	<p>' . __('To remove a widget from a sidebar, drag it back to Available Widgets or click on the arrow on its titlebar to reveal its settings, and then click Remove.') . '</p>
 	<p>' . __('To remove a widget from a sidebar <em>and keep its configuration</em>, drag it to Inactive Widgets.') . '</p>
 	<p>' . __('The Inactive Widgets area stores widgets that are configured but not curently used. If you change themes and the new theme has fewer sidebars than the old, all extra widgets will be stored to Inactive Widgets automatically.') . '</p>
 ';

wp-admin/includes/widgets.php

@@ -21,12 +21,8 @@ function wp_list_widgets() {
 
 	$sort = $wp_registered_widgets;
 	usort( $sort, create_function( '$a, $b', 'return strnatcasecmp( $a["name"], $b["name"] );' ) );
-	$done = array(); ?>
+	$done = array();
 
-	<div class="widget-holder">
-	<p class="description"><?php _e('Drag widgets from here to a sidebar on the right to activate them.'); ?></p>
-	<div id="widget-list">
-<?php
 	foreach ( $sort as $widget ) {
 		if ( in_array( $widget['callback'], $done, true ) ) // We already showed this multi-widget
 			continue;
@@ -52,11 +48,7 @@ function wp_list_widgets() {
 
 		$args = wp_list_widget_controls_dynamic_sidebar( array( 0 => $args, 1 => $widget['params'][0] ) );
 		call_user_func_array( 'wp_widget_control', $args );
-	} ?>
+	}
-	</div>
-	<br class='clear' />
-	</div>
-<?php
 }
 
 /**

wp-admin/js/widgets.dev.js

@@ -32,6 +32,29 @@ wpWidgets = {
 		this.addEvents();
         $('.widget-error').parents('.widget').find('a.widget-action').click();
 
+		$('#available-widgets').droppable({
+			tolerance: 'pointer',
+			accept: function(o){
+				return $(o).parent().attr('id') != 'widget-list';
+			},
+			drop: function(e,ui) {
+				ui.draggable.addClass('deleting');
+				$('#removing-widget').hide().children('span').html('');
+			},
+			over: function(e,ui) {
+				ui.draggable.addClass('deleting');
+				$('.widget-placeholder').hide();
+
+				if ( ui.draggable.hasClass('ui-sortable-helper') )
+					$('#removing-widget').show().children('span').html( ui.draggable.find('.widget-title h4').html() );
+			},
+			out: function(e,ui) {
+				ui.draggable.removeClass('deleting');
+				$('.widget-placeholder').show();
+				$('#removing-widget').hide().children('span').html('');
+			}
+		});
+
 		$('#widget-list .widget').draggable({
 			connectToSortable: '.widgets-sortables',
 			handle: '.widget-title',
@@ -58,7 +81,6 @@ wpWidgets = {
 			handle: '.widget-title',
 			cursor: 'move',
 			distance: 2,
-			opacity: 0.65,
 			containment: 'document',
 			start: function(e,ui) {
 				wpWidgets.fixWebkit(1);
@@ -66,8 +88,19 @@ wpWidgets = {
 				ui.item.css({'marginLeft':'','width':''});
 			},
 			stop: function(e,ui) {
+				if ( ui.item.hasClass('ui-draggable') )
+					ui.item.draggable('destroy');
+
+				if ( ui.item.hasClass('deleting') ) {
+					wpWidgets.save( ui.item, 1, 0, 0, 1 ); // delete widget
+					ui.item.remove();
+					return;
+				}
+
 				var add = ui.item.find('input.add_new').val(), n = ui.item.find('input.multi_number').val(), id = ui.item.attr('id'), sb = $(this).attr('id');
+
 				ui.item.css({'marginLeft':'','width':''});
+				wpWidgets.fixWebkit();
 				if ( add ) {
 					if ( 'multi' == add ) {
 						ui.item.html( ui.item.html().replace(/<[^<>]+>/g, function(m){ return m.replace(/__i__|%i%/g, n); }) );
@@ -79,13 +112,12 @@ wpWidgets = {
 						rem = 'div#' + id;
 					}
 					wpWidgets.addEvents(ui.item);
-					wpWidgets.save( ui.item.find('form').serialize(), sb, 0, 0 );
+					wpWidgets.save( ui.item, 0, 0, 0, 1 );
 					ui.item.find('input.add_new').val('');
 					ui.item.find('a.widget-action').click();
+					return;
 				}
 				wpWidgets.saveOrder(sb);
-				wpWidgets.resize();
-				wpWidgets.fixWebkit();
 			},
 			receive: function(e,ui) {
 				if ( !$(this).is(':visible') )
@@ -102,6 +134,7 @@ wpWidgets = {
 	},
 
 	saveOrder : function(sb) {
+		if ( sb )
 			$('#' + sb).parents('.widgets-holder-wrap').find('.ajax-feedback').css('visibility', 'visible');
 
 		var a = {
@@ -117,12 +150,15 @@ wpWidgets = {
 		$.post( ajaxurl, a, function() {
 			$('.ajax-feedback').css('visibility', 'hidden');
 		});
+		this.resize();
 	},
 
-	save : function(data, sb, del, t) {
+	save : function(widget, del, close, animate, order) {
+		var sb = widget.parents('.widgets-sortables').attr('id'), data = widget.find('form').serialize(), a;
+		widget = $(widget);
 		$('#' + sb).parents('.widgets-holder-wrap').find('.ajax-feedback').css('visibility', 'visible');
 
-		var a = {
+		a = {
 			action: 'save-widget',
 			savewidgets: $('#_wpnonce_widgets').val(),
 			sidebar: sb
@@ -134,18 +170,9 @@ wpWidgets = {
 		data += '&' + $.param(a);
 
 		$.post( ajaxurl, data, function(r){
-			var id, widget;
+			var id;
-			$('.ajax-feedback').css('visibility', 'hidden');
-			if ( !t )
-				return;
-
-			widget = $(t).parents('.widget');
 
 			if ( del ) {
-				widget.slideUp('normal', function(){
-					$(this).remove();
-					wpWidgets.resize();
-				});
 				if ( !$('.widget_number', widget).val() ) {
 					id = $('.widget-id', widget).val();
 					$('#available-widgets .widget-id').each(function(){
@@ -153,12 +180,26 @@ wpWidgets = {
 							$(this).parents('.widget').show();
 					});
 				}
+
+				if ( animate ) {
+					order = 0;
+					widget.slideUp('fast', function(){
+						$(this).remove();
+						wpWidgets.saveOrder();
+					});
 				} else {
-				$(t).parents('.widget-inside').slideUp('normal', function(){
+					widget.remove();
+					wpWidgets.resize();
+				}
+			} else if ( close ) {
+				widget.find('.widget-inside').slideUp('fast', function(){
 					widget.css({'width':'','marginLeft':''});
 					wpWidgets.appendTitle(widget);
+					$('.ajax-feedback').css('visibility', 'hidden');
 				});
 			}
+			if ( order )
+				wpWidgets.saveOrder();
 		});
 	},
 
@@ -167,6 +208,7 @@ wpWidgets = {
 			var title;
 			if ( this.id.indexOf('title') != -1 ) {
 				title = $(this).val().replace(/<[^<>]+>/g, '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+				if ( title )
 					$('.widget-title .in-widget-title', widget).html(': ' + title);
 				return false;
 			}
@@ -200,22 +242,21 @@ wpWidgets = {
 						css['marginLeft'] = 235 - w + 'px';
 					inside.parents('.widget').css(css);
 				}
-				inside.slideDown('normal');
+				inside.slideDown('fast');
 			} else {
-				inside.slideUp('normal', function(){ inside.parents('.widget').css({'width':'','marginLeft':''}); });
+				inside.slideUp('fast', function(){ inside.parents('.widget').css({'width':'','marginLeft':''}); });
 			}
             return false;
         });
         $('.widget-control-save', sc).click(function(){
-			wpWidgets.save( $(this).parents('form').serialize(), $(this).parents('.widgets-sortables').attr('id'), 0, this );
+			wpWidgets.save( $(this).parents('.widget'), 0, 1, 1, 0 );
 			return false;
 		});
 		$('.widget-control-remove', sc).click(function(){
-			wpWidgets.save( $(this).parents('form').serialize(), $(this).parents('.widgets-sortables').attr('id'), 1, this );
+			wpWidgets.save( $(this).parents('.widget'), 1, 1, 1, 0 );
 			return false;
 		});
 	}
-
 };
 $(document).ready(function(){wpWidgets.init();});
 

wp-admin/themes.php

@@ -44,9 +44,13 @@ require_once('admin-header.php');
 
 <?php if ( ! validate_current_theme() ) : ?>
 <div id="message1" class="updated fade"><p><?php _e('The active theme is broken.  Reverting to the default theme.'); ?></p></div>
-<?php elseif ( isset($_GET['activated']) ) : ?>
+<?php elseif ( isset($_GET['activated']) ) :
-<div id="message2" class="updated fade"><p><?php printf(__('New theme activated. <a href="%s">Visit site</a>'), get_bloginfo('url') . '/'); ?></p></div>
+		if ( isset($wp_registered_sidebars) && count( (array) $wp_registered_sidebars ) ) { ?>
-<?php elseif ( isset($_GET['deleted']) ) : ?>
+<div id="message2" class="updated fade"><p><?php printf(__('New theme activated. This theme supports widgets, please visit the <a href="%s">widgets settings page</a> to configure them.'), admin_url('widgets.php') ); ?></p></div><?php
+		} else { ?>
+<div id="message2" class="updated fade"><p><?php printf(__('New theme activated. <a href="%s">Visit site</a>'), get_bloginfo('url') . '/'); ?></p></div><?php
+		}
+	elseif ( isset($_GET['deleted']) ) : ?>
 <div id="message3" class="updated fade"><p><?php _e('Theme deleted.') ?></p></div>
 <?php endif; ?>
 

wp-admin/widgets.php

@@ -327,8 +327,14 @@ require_once( 'admin-header.php' ); ?>
 	<div id="available-widgets" class="widgets-holder-wrap">
 		<div class="sidebar-name">
 		<div class="sidebar-name-arrow"><br /></div>
-		<h3><?php _e('Available Widgets'); ?></h3></div>
+		<h3><?php _e('Available Widgets'); ?> <span id="removing-widget"><?php _e('Deactivate'); ?> <span></span></span></h3></div>
+		<div class="widget-holder">
+		<p class="description"><?php _e('Drag widgets from here to a sidebar on the right to activate them. Drag widgets back here to deactivate them and delete their settings.'); ?></p>
+		<div id="widget-list">
 		<?php wp_list_widgets(); ?>
+		</div>
+		<br class='clear' />
+		</div>
 		<br class="clear" />
 	</div>
 

wp-includes/js/jquery/ui.selectable.js

@@ -0,0 +1,12 @@
+/*
+ * jQuery UI Selectable 1.7.1
+ *
+ * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * http://docs.jquery.com/UI/Selectables
+ *
+ * Depends:
+ *	ui.core.js
+ */
(function(a){a.widget("ui.selectable",a.extend({},a.ui.mouse,{_init:function(){var b=this;this.element.addClass("ui-selectable");this.dragged=false;var c;this.refresh=function(){c=a(b.options.filter,b.element[0]);c.each(function(){var d=a(this);var e=d.offset();a.data(this,"selectable-item",{element:this,$element:d,left:e.left,top:e.top,right:e.left+d.outerWidth(),bottom:e.top+d.outerHeight(),startselected:false,selected:d.hasClass("ui-selected"),selecting:d.hasClass("ui-selecting"),unselecting:d.hasClass("ui-unselecting")})})};this.refresh();this.selectees=c.addClass("ui-selectee");this._mouseInit();this.helper=a(document.createElement("div")).css({border:"1px dotted black"}).addClass("ui-selectable-helper")},destroy:function(){this.element.removeClass("ui-selectable ui-selectable-disabled").removeData("selectable").unbind(".selectable");this._mouseDestroy()},_mouseStart:function(d){var b=this;this.opos=[d.pageX,d.pageY];if(this.options.disabled){return}var c=this.options;this.selectees=a(c.filter,this.element[0]);this._trigger("start",d);a(c.appendTo).append(this.helper);this.helper.css({"z-index":100,position:"absolute",left:d.clientX,top:d.clientY,width:0,height:0});if(c.autoRefresh){this.refresh()}this.selectees.filter(".ui-selected").each(function(){var e=a.data(this,"selectable-item");e.startselected=true;if(!d.metaKey){e.$element.removeClass("ui-selected");e.selected=false;e.$element.addClass("ui-unselecting");e.unselecting=true;b._trigger("unselecting",d,{unselecting:e.element})}});a(d.target).parents().andSelf().each(function(){var e=a.data(this,"selectable-item");if(e){e.$element.removeClass("ui-unselecting").addClass("ui-selecting");e.unselecting=false;e.selecting=true;e.selected=true;b._trigger("selecting",d,{selecting:e.element});return false}})},_mouseDrag:function(i){var c=this;this.dragged=true;if(this.options.disabled){return}var e=this.options;var d=this.opos[0],h=this.opos[1],b=i.pageX,g=i.pageY;if(d>b){var f=b;b=d;d=f}if(h>g){var f=g;g=h;h=f}this.helper.css({left:d,top:h,width:b-d,height:g-h});this.selectees.each(function(){var j=a.data(this,"selectable-item");if(!j||j.element==c.element[0]){return}var k=false;if(e.tolerance=="touch"){k=(!(j.left>b||j.right<d||j.top>g||j.bottom<h))}else{if(e.tolerance=="fit"){k=(j.left>d&&j.right<b&&j.top>h&&j.bottom<g)}}if(k){if(j.selected){j.$element.removeClass("ui-selected");j.selected=false}if(j.unselecting){j.$element.removeClass("ui-unselecting");j.unselecting=false}if(!j.selecting){j.$element.addClass("ui-selecting");j.selecting=true;c._trigger("selecting",i,{selecting:j.element})}}else{if(j.selecting){if(i.metaKey&&j.startselected){j.$element.removeClass("ui-selecting");j.selecting=false;j.$element.addClass("ui-selected");j.selected=true}else{j.$element.removeClass("ui-selecting");j.selecting=false;if(j.startselected){j.$element.addClass("ui-unselecting");j.unselecting=true}c._trigger("unselecting",i,{unselecting:j.element})}}if(j.selected){if(!i.metaKey&&!j.startselected){j.$element.removeClass("ui-selected");j.selected=false;j.$element.addClass("ui-unselecting");j.unselecting=true;c._trigger("unselecting",i,{unselecting:j.element})}}}});return false},_mouseStop:function(d){var b=this;this.dragged=false;var c=this.options;a(".ui-unselecting",this.element[0]).each(function(){var e=a.data(this,"selectable-item");e.$element.removeClass("ui-unselecting");e.unselecting=false;e.startselected=false;b._trigger("unselected",d,{unselected:e.element})});a(".ui-selecting",this.element[0]).each(function(){var e=a.data(this,"selectable-item");e.$element.removeClass("ui-selecting").addClass("ui-selected");e.selecting=false;e.selected=true;e.startselected=true;b._trigger("selected",d,{selected:e.element})});this._trigger("stop",d);this.helper.remove();return false}}));a.extend(a.ui.selectable,{version:"1.7.1",defaults:{appendTo:"body",autoRefresh:true,cancel:":input,option",delay:0,distance:0,filter:"*",tolerance:"touch"}})})(jQuery);

wp-includes/script-loader.php

@@ -132,6 +132,12 @@ function wp_default_scripts( &$scripts ) {
 	$scripts->add( 'jquery-ui-draggable', '/wp-includes/js/jquery/ui.draggable.js', array('jquery-ui-core'), '1.7.1' );
 	$scripts->add_data( 'jquery-ui-draggable', 'group', 1 );
 
+	$scripts->add( 'jquery-ui-droppable', '/wp-includes/js/jquery/ui.droppable.js', array('jquery-ui-core'), '1.7.1' );
+	$scripts->add_data( 'jquery-ui-droppable', 'group', 1 );
+
+	$scripts->add( 'jquery-ui-selectable', '/wp-includes/js/jquery/ui.selectable.js', array('jquery-ui-core'), '1.7.1' );
+	$scripts->add_data( 'jquery-ui-selectable', 'group', 1 );
+
 	$scripts->add( 'jquery-ui-resizable', '/wp-includes/js/jquery/ui.resizable.js', array('jquery-ui-core'), '1.7.1' );
 	$scripts->add_data( 'jquery-ui-resizable', 'group', 1 );
 
@@ -326,7 +332,7 @@ function wp_default_scripts( &$scripts ) {
 		$scripts->add( 'media-upload', "/wp-admin/js/media-upload$suffix.js", array( 'thickbox' ), '20090114' );
 		$scripts->add_data( 'media-upload', 'group', 1 );
 
-		$scripts->add( 'admin-widgets', "/wp-admin/js/widgets$suffix.js", array( 'jquery-ui-sortable', 'jquery-ui-draggable' ), '20090522' );
+		$scripts->add( 'admin-widgets', "/wp-admin/js/widgets$suffix.js", array( 'jquery-ui-sortable', 'jquery-ui-draggable', 'jquery-ui-droppable' ), '20090524' );
 		$scripts->add_data( 'admin-widgets', 'group', 1 );
 
 		$scripts->add( 'word-count', "/wp-admin/js/word-count$suffix.js", array( 'jquery' ), '20090422' );