From a7b048dc05b4fd5d81cf769e1662e1381b305682 Mon Sep 17 00:00:00 2001 From: Thomas Tanghus Date: Sat, 17 Dec 2011 20:05:54 +0100 Subject: [PATCH] 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. --- apps/contacts/css/styles.css | 1 + apps/contacts/js/interface.js | 146 ++++++++++++++++++++++++++++++ apps/contacts/templates/index.php | 3 +- 3 files changed, 149 insertions(+), 1 deletion(-) diff --git a/apps/contacts/css/styles.css b/apps/contacts/css/styles.css index f351589fe1..8678ca9924 100644 --- a/apps/contacts/css/styles.css +++ b/apps/contacts/css/styles.css @@ -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%; } diff --git a/apps/contacts/js/interface.js b/apps/contacts/js/interface.js index eb81e87268..93fb13372b 100644 --- a/apps/contacts/js/interface.js +++ b/apps/contacts/js/interface.js @@ -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'); + }); + */ }); diff --git a/apps/contacts/templates/index.php b/apps/contacts/templates/index.php index 649c4807dd..bada45ee0e 100644 --- a/apps/contacts/templates/index.php +++ b/apps/contacts/templates/index.php @@ -1,5 +1,6 @@ @@ -10,7 +11,7 @@ OC_Util::addStyle('contacts','formtastic');
-