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,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%; }
 

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');
+	});
+	*/
 });

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>