* MAIL/Compose: Make to/cc/bcc fields draggable and droppable.

- Ctrl+ dragging copy the email to target, otherwise it moves to target.
This commit is contained in:
Hadi Nategh 2014-08-14 14:44:16 +00:00
parent 2df89703ca
commit 67c939d0e1
3 changed files with 153 additions and 4 deletions

View File

@ -191,7 +191,7 @@ app.classes.mail = AppJS.extend(
var that = this;
this.mail_isMainWindow = false;
this.compose_fieldExpander_hide();
/* Control focus actions on subject to handle expanders properly.*/
jQuery("#mail-compose_subject").on({
focus:function(){
@ -203,6 +203,9 @@ app.classes.mail = AppJS.extend(
jQuery('#mail-compose').load ('load', function() {that.compose_resizeHandler();});
this.compose_fieldExpander();
//Call drag_n_drop initialization for emails on compose
this.init_dndCompose();
break;
}
},
@ -3649,6 +3652,150 @@ app.classes.mail = AppJS.extend(
vacation_change_account: function (_egw, _widget)
{
_widget.getInstanceManager().submit();
},
/**
* Set email items draggable
**/
set_dragging_dndCompose: function ()
{
var zIndex = 100;
var self = this;
jQuery('div.ms-sel-item:not(div.ui-draggable)').draggable({
appendTo:'body',
//Performance wise better to not add ui-draggable class to items since we are not using that class
containment:'document',
distance: 0,
cursor:'move',
cursorAt:{left:2},
//cancel dragging on close button to avoid conflict with close action
cancel:'.ms-close-btn',
/**
* function to act on draggable item on revert's event
* @returns {Boolean} return true
*/
revert: function (){
this.parent().find('.ms-sel-item').css('position','relative');
return true;
},
/**
* function to act as draggable starts dragging
*/
start:function(event, ui)
{
if (event.ctrlKey)
{
jQuery(this)
.addClass('mailCompose_copyEmail')
.css('cursor','copy');
}
jQuery(this).css ('z-index',zIndex++);
jQuery(this).css('position','absolute');
},
/**
*
* @param {type} event
* @param {type} ui
*/
create:function(event,ui)
{
jQuery(this).css('css','move');
}
});
},
/**
* Initialize dropping targets for draggable emails
* -
*/
init_dndCompose: function ()
{
var self = this;
//Call to make new items draggable
jQuery('#mail-compose_to,#mail-compose_cc,#mail-compose_bcc').hover(function(){
self.set_dragging_dndCompose();
});
//Make used email-tag list widgets in mail compose droppable
jQuery('#mail-compose_to,#mail-compose_cc,#mail-compose_bcc').droppable({
access:'.ms-sel-item',
/**
* Run after a draggable email item dropped over one of the email-taglists
* -Set the dropped item to the dropped current target widget
*
* @param {type} event
* @param {type} ui
*/
drop:function (event, ui)
{
var widget = self.et2.getWidgetById(this.getAttribute('name'));
var emails = [];
var fromWidget = {};
var draggedValue = ui.draggable.text();
if (typeof widget != 'undefined')
{
emails = widget.get_value();
if (emails) emails = emails.concat([draggedValue])
widget.set_value(emails);
var parentWidgetDOM = ui.draggable.parentsUntil('div[id^="mail-compoe_"]','.ui-droppable');
if (parentWidgetDOM != 'undefined' && parentWidgetDOM.length > 0)
{
fromWidget = self.et2.getWidgetById(parentWidgetDOM.attr('name'));
}
if (!jQuery.isEmptyObject(fromWidget)
&& !(ui.draggable.attr('class').search('mailCompose_copyEmail') > -1))
{
if (!_removeDragged(fromWidget, draggedValue))
{
//Not successful remove, returns the item to its origin
jQuery(ui.draggable).draggable('option','revert',true);
}
}
else
{
ui.draggable
.removeClass('mailCompose_copyEmail')
.css('cursor','move');
}
//Destroy draggables after dropping, we need to enable them again
jQuery('div.ms-sel-item').draggable('destroy');
}
},
});
/**
* Remove dragged item from the widget which the item was dragged
*
* @param {type} _widget
* @param {type} _value
* @return {boolean} true if successul | false unsuccessul
*/
var _removeDragged = function (_widget, _value)
{
if (_widget && _value)
{
var emails = _widget.get_value();
var itemIndex = emails.indexOf(_value);
if (itemIndex > -1)
{
emails.splice(itemIndex,1);
_widget.set_value(emails);
}
else
{
return false;
}
}
return true;
}
}
});

View File

@ -720,4 +720,6 @@ div.mailPreviewHeaders #mail-index_previewAttachmentArea.visible {
.et2_button {
display: none;
}
.mailCompose_emailCopy {
}
}

View File

@ -70,7 +70,7 @@
</row>
<row class="mailComposeHeaders" >
<description value="To"/>
<taglist-email id="to" width="100%" onclick="app.mail.address_click" include_lists="true" span="2"/>
<taglist-email id="to" width="100%" onclick="app.mail.address_click" include_lists="true" span="2" onchange="app.mail.set_dragging_dndCompose"/>
<hbox>
<description id="cc_expander" value="Cc" onclick="app.mail.compose_fieldExpander"/>
<description id="bcc_expander" value="Bcc" onclick="app.mail.compose_fieldExpander"/>
@ -78,12 +78,12 @@
</row>
<row class="mailComposeHeaders mailComposeJQueryCc">
<description value="Cc"/>
<taglist-email id="cc" width="100%" onclick="app.mail.address_click" include_lists="true" span="2"/>
<taglist-email id="cc" width="100%" onclick="app.mail.address_click" include_lists="true" span="2" onchange="app.mail.set_dragging_dndCompose"/>
<description/>
</row>
<row class="mailComposeHeaders mailComposeJQueryBcc">
<description value="Bcc"/>
<taglist-email id="bcc" width="100%" onclick="app.mail.address_click" include_lists="true" span="2"/>
<taglist-email id="bcc" width="100%" onclick="app.mail.address_click" include_lists="true" span="2" onchange="app.mail.set_dragging_dndCompose"/>
<description/>
</row>
<row class="mailComposeHeaders">