Added thumbnails to contact list. The contacts have a default thumbnail when the page is
first loaded. Once the page is loaded the thumbnails will be lazy-loaded to the contacts viewable.
This commit is contained in:
Thomas Tanghus
parent
dc641943d9
commit
a7b048dc05
3 changed files with 149 additions and 1 deletions
|
|
@ -1,3 +1,4 @@
|
|||
#contacts li { padding-left:25px;background:url('../img/person.svg') no-repeat; }
|
||||
#contacts_details_name { font-weight:bold;font-size:1.1em;margin-left:25%;}
|
||||
#contacts_details_photo { margin:.5em 0em .5em 25%; }
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,118 @@
|
|||
Contacts={
|
||||
UI:{
|
||||
showCardDAVUrl:function(username, bookname){
|
||||
$('#carddav_url').val(totalurl + '/' + username + '/' + bookname);
|
||||
$('#carddav_url').show();
|
||||
$('#carddav_url_close').show();
|
||||
},
|
||||
Addressbooks:{
|
||||
overview:function(){
|
||||
if($('#chooseaddressbook_dialog').dialog('isOpen') == true){
|
||||
$('#chooseaddressbook_dialog').dialog('moveToTop');
|
||||
}else{
|
||||
$('#dialog_holder').load(OC.filePath('contacts', 'ajax', 'chooseaddressbook.php'), function(){
|
||||
$('#chooseaddressbook_dialog').dialog({
|
||||
width : 600,
|
||||
close : function(event, ui) {
|
||||
$(this).dialog('destroy').remove();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
activation:function(checkbox, bookid)
|
||||
{
|
||||
$.post(OC.filePath('contacts', 'ajax', 'activation.php'), { bookid: bookid, active: checkbox.checked?1:0 },
|
||||
function(data) {
|
||||
/*
|
||||
* Arguments:
|
||||
* data.status
|
||||
* data.bookid
|
||||
* data.active
|
||||
*/
|
||||
if (data.status == 'success'){
|
||||
checkbox.checked = data.active == 1;
|
||||
Contacts.UI.Contacts.update();
|
||||
}
|
||||
});
|
||||
},
|
||||
newAddressbook:function(object){
|
||||
var tr = $(document.createElement('tr'))
|
||||
.load(OC.filePath('contacts', 'ajax', 'addbook.php'));
|
||||
$(object).closest('tr').after(tr).hide();
|
||||
/* TODO: Shouldn't there be some kinda error checking here? */
|
||||
},
|
||||
editAddressbook:function(object, bookid){
|
||||
var tr = $(document.createElement('tr'))
|
||||
.load(OC.filePath('contacts', 'ajax', 'editaddressbook.php') + "?bookid="+bookid);
|
||||
$(object).closest('tr').after(tr).hide();
|
||||
},
|
||||
deleteAddressbook:function(bookid){
|
||||
var check = confirm("Do you really want to delete this address book?");
|
||||
if(check == false){
|
||||
return false;
|
||||
}else{
|
||||
$.post(OC.filePath('contacts', 'ajax', 'deletebook.php'), { id: bookid},
|
||||
function(data) {
|
||||
if (data.status == 'success'){
|
||||
$('#chooseaddressbook_dialog').dialog('destroy').remove();
|
||||
Contacts.UI.Contacts.update();
|
||||
Contacts.UI.Addressbooks.overview();
|
||||
} else {
|
||||
alert('Error: ' + data.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
submit:function(button, bookid){
|
||||
var displayname = $("#displayname_"+bookid).val();
|
||||
var active = $("#edit_active_"+bookid+":checked").length;
|
||||
var description = $("#description_"+bookid).val();
|
||||
|
||||
var url;
|
||||
if (bookid == 'new'){
|
||||
url = OC.filePath('contacts', 'ajax', 'createaddressbook.php');
|
||||
}else{
|
||||
url = OC.filePath('contacts', 'ajax', 'updateaddressbook.php');
|
||||
}
|
||||
$.post(url, { id: bookid, name: displayname, active: active, description: description },
|
||||
function(data){
|
||||
if(data.status == 'success'){
|
||||
$(button).closest('tr').prev().html(data.page).show().next().remove();
|
||||
}
|
||||
});
|
||||
Contacts.UI.Contacts.update();
|
||||
},
|
||||
cancel:function(button, bookid){
|
||||
$(button).closest('tr').prev().show().next().remove();
|
||||
}
|
||||
},
|
||||
Contacts:{
|
||||
update:function(){
|
||||
$.getJSON('ajax/contacts.php',{},function(jsondata){
|
||||
if(jsondata.status == 'success'){
|
||||
$('#contacts').html(jsondata.data.page);
|
||||
}
|
||||
else{
|
||||
alert(jsondata.data.message);
|
||||
}
|
||||
});
|
||||
/*
|
||||
var contactlist = $('#contacts');
|
||||
var contacts = contactlist.children('li').get();
|
||||
//alert(contacts);
|
||||
contacts.sort(function(a, b) {
|
||||
var compA = $(a).text().toUpperCase();
|
||||
var compB = $(b).text().toUpperCase();
|
||||
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
|
||||
})
|
||||
$.each(contacts, function(idx, itm) { contactlist.append(itm); });
|
||||
*/
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(function(){
|
||||
/*-------------------------------------------------------------------------
|
||||
* Event handlers
|
||||
|
|
@ -79,6 +194,11 @@ $(document).ready(function(){
|
|||
return false;
|
||||
});
|
||||
|
||||
$('#chooseaddressbook').click(function(){
|
||||
Contacts.UI.Addressbooks.overview();
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#contacts_newcontact').click(function(){
|
||||
$.getJSON('ajax/showaddcard.php',{},function(jsondata){
|
||||
if(jsondata.status == 'success'){
|
||||
|
|
@ -159,4 +279,30 @@ $(document).ready(function(){
|
|||
});
|
||||
|
||||
$('#contacts_addcardform select').chosen();
|
||||
|
||||
$('#contacts li').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
|
||||
if (isInView) { //NOTE: I've kept all conditions for future reference ;-)
|
||||
// element is now visible in the viewport
|
||||
if (visiblePartY == 'top') {
|
||||
// top part of element is visible
|
||||
} else if (visiblePartY == 'bottom') {
|
||||
// bottom part of element is visible
|
||||
} else {
|
||||
// whole part of element is visible
|
||||
if (!$(this).attr('style')) {
|
||||
//alert($(this).data('id') + ' has background: ' + $(this).attr('style'));
|
||||
$(this).css('background','url(thumbnail.php?id='+$(this).data('id')+') no-repeat');
|
||||
}/* else {
|
||||
alert($(this).data('id') + ' has style ' + $(this).attr('style').match('url'));
|
||||
}*/
|
||||
}
|
||||
} else {
|
||||
// element has gone out of viewport
|
||||
}
|
||||
});
|
||||
/*
|
||||
$('#contacts li').each(function(index) {
|
||||
$(this).css('background','url(thumbnail.php?id='+$(this).data('id')+') no-repeat');
|
||||
});
|
||||
*/
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<?php // Include Style and Script
|
||||
OC_Util::addScript('contacts','interface');
|
||||
OC_Util::addScript('contacts','jquery.inview');
|
||||
OC_Util::addStyle('contacts','styles');
|
||||
OC_Util::addStyle('contacts','formtastic');
|
||||
?>
|
||||
|
|
@ -10,7 +11,7 @@ OC_Util::addStyle('contacts','formtastic');
|
|||
</form>
|
||||
</div>
|
||||
<div id="leftcontent" class="leftcontent">
|
||||
<ul>
|
||||
<ul id="contacts">
|
||||
<?php echo $this->inc("part.contacts"); ?>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue