Added thumbnails to contact list. The contacts have a default thumbnail when the...

first loaded. Once the page is loaded the thumbnails will be lazy-loaded to the contacts
viewable.

diff --git a/apps/contacts/css/styles.css b/apps/contacts/css/styles.css
index f351589fe12e6e32c790d634e77a8491ce829f74..8678ca99244ff9591ec0da313a7c1260343d61db 100644 (file)
--- 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 eb81e87268285cf6b25c4add6823e56d88d2fda4..93fb13372b248df7f073f44a2c204c4e81c10d42 100644 (file)
--- 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 649c4807dd5f71587022f9b990b25bb18bfd7076..bada45ee0ece03603018b12e31a2517f4d0388b0 100644 (file)
--- a/apps/contacts/templates/index.php
+++ b/apps/contacts/templates/index.php
@@ -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>