mirror of
https://github.com/owncloudarchive/contacts.git
synced 2024-12-01 13:24:10 +01:00
Contacts: Much improved d'n'd.
This commit is contained in:
Thomas Tanghus
parent
2aa8f7fb81
commit
6bfc422d67
@ -233,7 +233,18 @@
|
||||
.control > * { background: none repeat scroll 0 0 #F8F8F8; color: #555 !important; font-size: 100%; margin: 0px; }
|
||||
|
||||
.ui-draggable { height: 3em; z-index: 1000; }
|
||||
.ui-draggable-dragging { width: 70%; cursor: move; }
|
||||
.ui-draggable { height: 3em; z-index: 1000; }
|
||||
.ui-draggable-dragging {
|
||||
cursor: move;
|
||||
background-repeat: no-repeat !important;
|
||||
background-color: #fff;
|
||||
z-index: 5;
|
||||
width: 200px; height: 30px;
|
||||
text-indent: 30px;
|
||||
font-weight: bold;
|
||||
border: thin solid silver; border-radius: 3px;
|
||||
padding: 3px;
|
||||
}
|
||||
.ui-state-hover { border: 1px solid dashed; z-index: 1; }
|
||||
|
||||
/* Properties */
|
||||
|
||||
@ -171,6 +171,7 @@ OC.Contacts = OC.Contacts || {
|
||||
this.contacts = new OC.Contacts.ContactList(
|
||||
this.$contactList,
|
||||
this.$contactListItemTemplate,
|
||||
this.$contactDragItemTemplate,
|
||||
this.$contactFullTemplate,
|
||||
this.detailTemplates
|
||||
);
|
||||
@ -218,6 +219,7 @@ OC.Contacts = OC.Contacts || {
|
||||
});
|
||||
this.$groupListItemTemplate = $('#groupListItemTemplate');
|
||||
this.$contactListItemTemplate = $('#contactListItemTemplate');
|
||||
this.$contactDragItemTemplate = $('#contactDragItemTemplate');
|
||||
this.$contactFullTemplate = $('#contactFullTemplate');
|
||||
this.$contactDetailsTemplate = $('#contactDetailsTemplate');
|
||||
this.$rightContent = $('#rightcontent');
|
||||
|
||||
@ -13,16 +13,16 @@ OC.Contacts = OC.Contacts || {};
|
||||
* @param fulltemplate the jquery object used to render the entire contact
|
||||
* @param detailtemplates A map of jquery objects used to render the contact parts e.g. EMAIL, TEL etc.
|
||||
*/
|
||||
var Contact = function(parent, id, access, data, listtemplate, fulltemplate, detailtemplates) {
|
||||
var Contact = function(parent, id, access, data, listtemplate, dragtemplate, fulltemplate, detailtemplates) {
|
||||
//console.log('contact:', id, access); //parent, id, data, listtemplate, fulltemplate);
|
||||
this.parent = parent,
|
||||
this.id = id,
|
||||
this.access = access,
|
||||
this.data = data,
|
||||
this.$dragTemplate = dragtemplate,
|
||||
this.$listTemplate = listtemplate,
|
||||
this.$fullTemplate = fulltemplate;
|
||||
this.detailTemplates = detailtemplates;
|
||||
|
||||
this.undoQueue = [];
|
||||
this.multi_properties = ['EMAIL', 'TEL', 'IMPP', 'ADR', 'URL'];
|
||||
};
|
||||
@ -658,6 +658,20 @@ OC.Contacts = OC.Contacts || {};
|
||||
return ptype ? ptype.toUpperCase() : null;
|
||||
};
|
||||
|
||||
/**
|
||||
* Render an element item to be shown during drag.
|
||||
* @return A jquery object
|
||||
*/
|
||||
Contact.prototype.renderDragItem = function() {
|
||||
if(typeof this.$dragelem === 'undefined') {
|
||||
this.$dragelem = this.$dragTemplate.octemplate({
|
||||
id: this.id,
|
||||
name: this.getPreferredValue('FN', '')
|
||||
});
|
||||
}
|
||||
return this.$dragelem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the list item
|
||||
* @return A jquery object to be inserted in the DOM
|
||||
@ -1353,13 +1367,20 @@ OC.Contacts = OC.Contacts || {};
|
||||
}
|
||||
};
|
||||
|
||||
var ContactList = function(contactlist, contactlistitemtemplate, contactfulltemplate, contactdetailtemplates) {
|
||||
var ContactList = function(
|
||||
contactlist,
|
||||
contactlistitemtemplate,
|
||||
contactdragitemtemplate,
|
||||
contactfulltemplate,
|
||||
contactdetailtemplates
|
||||
) {
|
||||
//console.log('ContactList', contactlist, contactlistitemtemplate, contactfulltemplate, contactdetailtemplates);
|
||||
var self = this;
|
||||
this.length = 0;
|
||||
this.contacts = {};
|
||||
this.deletionQueue = [];
|
||||
this.$contactList = contactlist;
|
||||
this.$contactDragItemTemplate = contactdragitemtemplate;
|
||||
this.$contactListItemTemplate = contactlistitemtemplate;
|
||||
this.$contactFullTemplate = contactfulltemplate;
|
||||
this.contactDetailTemplates = contactdetailtemplates;
|
||||
@ -1609,8 +1630,11 @@ OC.Contacts = OC.Contacts || {};
|
||||
distance: 10,
|
||||
revert: 'invalid',
|
||||
//containment: '#content',
|
||||
opacity: 0.8, helper: 'clone',
|
||||
zIndex: 1000
|
||||
helper: function (e,ui) {
|
||||
return $(this).clone().appendTo('body').css('zIndex', 5).show();
|
||||
},
|
||||
opacity: 0.8,
|
||||
scope: 'contacts'
|
||||
});
|
||||
var name = $contact.find('.nametext').text().toLowerCase();
|
||||
var added = false;
|
||||
@ -1639,6 +1663,7 @@ OC.Contacts = OC.Contacts || {};
|
||||
{owner:OC.currentUser, permissions: 31},
|
||||
null,
|
||||
this.$contactListItemTemplate,
|
||||
this.$contactDragItemTemplate,
|
||||
this.$contactFullTemplate,
|
||||
this.contactDetailTemplates
|
||||
);
|
||||
@ -1748,6 +1773,7 @@ OC.Contacts = OC.Contacts || {};
|
||||
self.addressbooks[parseInt(contact.aid)],
|
||||
contact.data,
|
||||
self.$contactListItemTemplate,
|
||||
self.$contactDragItemTemplate,
|
||||
self.$contactFullTemplate,
|
||||
self.contactDetailTemplates
|
||||
);
|
||||
@ -1755,11 +1781,14 @@ OC.Contacts = OC.Contacts || {};
|
||||
var $item = self.contacts[parseInt(contact.id)].renderListItem();
|
||||
items.push($item.get(0));
|
||||
$item.find('td.name').draggable({
|
||||
cursor: 'move',
|
||||
distance: 10,
|
||||
revert: 'invalid',
|
||||
//containment: '#content',
|
||||
opacity: 0.8, helper: 'clone',
|
||||
zIndex: 1000
|
||||
helper: function (e,ui) {
|
||||
return self.contacts[parseInt(contact.id)].renderDragItem().appendTo('body');
|
||||
},
|
||||
opacity: 1,
|
||||
scope: 'contacts'
|
||||
});
|
||||
if(items.length === 100) {
|
||||
self.$contactList.append(items);
|
||||
|
||||
19
js/groups.js
19
js/groups.js
@ -361,9 +361,9 @@ OC.Contacts = OC.Contacts || {};
|
||||
GroupList.prototype.contactDropped = function(event, ui) {
|
||||
var dragitem = ui.draggable, droptarget = $(this);
|
||||
console.log('dropped', dragitem);
|
||||
if(dragitem.is('td.name')) {
|
||||
if(dragitem.is('.name')) {
|
||||
var id = dragitem.parent().data('id');
|
||||
console.log('td dropped', id, 'on', $(this).data('id'));
|
||||
console.log('contact dropped', id, 'on', $(this).data('id'));
|
||||
if($(this).data('type') === 'fav') {
|
||||
$(this).data('obj').setAsFavorite(id, true);
|
||||
} else {
|
||||
@ -586,7 +586,7 @@ OC.Contacts = OC.Contacts || {};
|
||||
|
||||
GroupList.prototype.loadGroups = function(numcontacts, cb) {
|
||||
var self = this;
|
||||
var acceptdrop = 'td.name';
|
||||
var acceptdrop = '.dragContact';
|
||||
var $groupList = this.$groupList;
|
||||
var tmpl = this.$groupListItemTemplate;
|
||||
|
||||
@ -610,9 +610,12 @@ OC.Contacts = OC.Contacts || {};
|
||||
$elem.data('contacts', contacts).find('.numcontacts').before('<span class="starred action" />');
|
||||
$elem.droppable({
|
||||
drop: self.contactDropped,
|
||||
over: function( event, ui ) {
|
||||
console.log('over favorites', ui.draggable);
|
||||
},
|
||||
activeClass: 'ui-state-active',
|
||||
hoverClass: 'ui-state-hover',
|
||||
accept: acceptdrop
|
||||
scope: 'contacts'
|
||||
});
|
||||
if(contacts.length === 0) {
|
||||
$elem.hide();
|
||||
@ -634,8 +637,12 @@ OC.Contacts = OC.Contacts || {};
|
||||
$elem.data('id', category.id);
|
||||
$elem.droppable({
|
||||
drop: self.contactDropped,
|
||||
activeClass: 'ui-state-hover',
|
||||
accept: acceptdrop
|
||||
over: function( event, ui ) {
|
||||
console.log('over group', ui.draggable);
|
||||
},
|
||||
activeClass: 'ui-state-active',
|
||||
hoverClass: 'ui-state-hover',
|
||||
scope: 'contacts'
|
||||
});
|
||||
$elem.appendTo($groupList);
|
||||
});
|
||||
|
||||
@ -142,6 +142,13 @@
|
||||
</tr>
|
||||
</script>
|
||||
|
||||
<script id="contactDragItemTemplate" type="text/template">
|
||||
<div class="dragContact" data-id="{id}"
|
||||
style="background: url('<?php print_unescaped(OC_Helper::linkToRemoteBase('contactthumbnail')); ?>?id={id}')">
|
||||
{name}
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script id="groupListItemTemplate" type="text/template">
|
||||
<h3 class="group" data-type="{type}" data-id="{id}">
|
||||
{name}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user