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:
parent
dc641943d9
commit
a7b048dc05
|
@ -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_name { font-weight:bold;font-size:1.1em;margin-left:25%;}
|
||||||
#contacts_details_photo { margin:.5em 0em .5em 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(){
|
$(document).ready(function(){
|
||||||
/*-------------------------------------------------------------------------
|
/*-------------------------------------------------------------------------
|
||||||
* Event handlers
|
* Event handlers
|
||||||
|
@ -79,6 +194,11 @@ $(document).ready(function(){
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('#chooseaddressbook').click(function(){
|
||||||
|
Contacts.UI.Addressbooks.overview();
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
$('#contacts_newcontact').click(function(){
|
$('#contacts_newcontact').click(function(){
|
||||||
$.getJSON('ajax/showaddcard.php',{},function(jsondata){
|
$.getJSON('ajax/showaddcard.php',{},function(jsondata){
|
||||||
if(jsondata.status == 'success'){
|
if(jsondata.status == 'success'){
|
||||||
|
@ -159,4 +279,30 @@ $(document).ready(function(){
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#contacts_addcardform select').chosen();
|
$('#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
|
<?php // Include Style and Script
|
||||||
OC_Util::addScript('contacts','interface');
|
OC_Util::addScript('contacts','interface');
|
||||||
|
OC_Util::addScript('contacts','jquery.inview');
|
||||||
OC_Util::addStyle('contacts','styles');
|
OC_Util::addStyle('contacts','styles');
|
||||||
OC_Util::addStyle('contacts','formtastic');
|
OC_Util::addStyle('contacts','formtastic');
|
||||||
?>
|
?>
|
||||||
|
@ -10,7 +11,7 @@ OC_Util::addStyle('contacts','formtastic');
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div id="leftcontent" class="leftcontent">
|
<div id="leftcontent" class="leftcontent">
|
||||||
<ul>
|
<ul id="contacts">
|
||||||
<?php echo $this->inc("part.contacts"); ?>
|
<?php echo $this->inc("part.contacts"); ?>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue