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
This commit is contained in:
azaozz 2009-05-24 15:46:09 +00:00
parent 552056c681
commit 13c7249671
13 changed files with 156 additions and 50 deletions

View File

@ -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 {
color: #636363;
.in-widget-title {
color: #606060;
}
.deleting .widget-title * {
color: #aaa;
}

View File

@ -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 {
color: #636363;
.in-widget-title {
color: #606060;
}
.deleting .widget-title * {
color: #aaa;
}

View File

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

View File

@ -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;
}

View File

@ -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>
';

View File

@ -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
}
}
/**

View File

@ -32,7 +32,30 @@ wpWidgets = {
this.addEvents();
$('.widget-error').parents('.widget').find('a.widget-action').click();
$('#widget-list .widget').draggable({
$('#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',
distance: 2,
@ -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,7 +134,8 @@ wpWidgets = {
},
saveOrder : function(sb) {
$('#' + sb).parents('.widgets-holder-wrap').find('.ajax-feedback').css('visibility', 'visible');
if ( sb )
$('#' + sb).parents('.widgets-holder-wrap').find('.ajax-feedback').css('visibility', 'visible');
var a = {
action: 'widgets-order',
@ -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;
$('.ajax-feedback').css('visibility', 'hidden');
if ( !t )
return;
widget = $(t).parents('.widget');
var id;
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();
});
}
} else {
$(t).parents('.widget-inside').slideUp('normal', function(){
if ( animate ) {
order = 0;
widget.slideUp('fast', function(){
$(this).remove();
wpWidgets.saveOrder();
});
} else {
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,7 +208,8 @@ wpWidgets = {
var title;
if ( this.id.indexOf('title') != -1 ) {
title = $(this).val().replace(/<[^<>]+>/g, '').replace(/</g, '&lt;').replace(/>/g, '&gt;');
$('.widget-title .in-widget-title', widget).html(': ' + title);
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();});

File diff suppressed because one or more lines are too long

View File

@ -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']) ) : ?>
<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']) ) : ?>
<?php elseif ( isset($_GET['activated']) ) :
if ( isset($wp_registered_sidebars) && count( (array) $wp_registered_sidebars ) ) { ?>
<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; ?>

View File

@ -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>

File diff suppressed because one or more lines are too long

View File

@ -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);

View File

@ -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' );