contacts app now lists contacts sorted by expandable/collapsable addressbooks
This commit is contained in:
parent
b064fc6968
commit
7f485d1b20
|
@ -2,9 +2,11 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}*/
|
}*/
|
||||||
#leftcontent { top: 3.5em !important; padding: 0; margin: 0; }
|
#leftcontent { top: 3.5em !important; padding: 0; margin: 0; }
|
||||||
|
#leftcontent a { padding: 0 0 0 25px; }
|
||||||
#rightcontent { top: 3.5em !important; padding-top: 5px; }
|
#rightcontent { top: 3.5em !important; padding-top: 5px; }
|
||||||
#contacts { background: #fff; width: 20em; left: 12.5em; top: 3.7em; bottom:3em; position: fixed; overflow: auto; padding: 0; margin: 0; }
|
#leftcontent h3 {background: #aaa; display: block; max-width: 100%; height: 2em; padding: 0.5em 0.8em;}
|
||||||
#contacts a { height: 23px; display: block; margin: 0 0 0 0; padding: 0 0 0 25px; }
|
.contacts { background: #fff; max-width: 100%; width: 20em; left: 12.5em; top: 3.7em; bottom:3em; overflow: auto; padding: 0; margin: 0; }
|
||||||
|
.contacts a { height: 23px; display: block; left: 12.5em; margin: 0 0 0 0; padding: 0 0 0 25px; }
|
||||||
#bottomcontrols { padding: 0; bottom:0px; height:2.8em; width: 20em; margin:0; background:#eee; border-top:1px solid #ccc; position:fixed; -moz-box-shadow: 0 -3px 3px -3px #000; -webkit-box-shadow: 0 -3px 3px -3px #000; box-shadow: 0 -3px 3px -3px #000;}
|
#bottomcontrols { padding: 0; bottom:0px; height:2.8em; width: 20em; margin:0; background:#eee; border-top:1px solid #ccc; position:fixed; -moz-box-shadow: 0 -3px 3px -3px #000; -webkit-box-shadow: 0 -3px 3px -3px #000; box-shadow: 0 -3px 3px -3px #000;}
|
||||||
#contacts_newcontact { float: left; margin: 0.2em 0 0 1em; }
|
#contacts_newcontact { float: left; margin: 0.2em 0 0 1em; }
|
||||||
#chooseaddressbook { float: right; margin: 0.2em 1em 0 0; }
|
#chooseaddressbook { float: right; margin: 0.2em 1em 0 0; }
|
||||||
|
|
|
@ -173,11 +173,11 @@ Contacts={
|
||||||
// Name has changed. Update it and reorder.
|
// Name has changed. Update it and reorder.
|
||||||
$('#fn').change(function(){
|
$('#fn').change(function(){
|
||||||
var name = $('#fn').val().strip_tags();
|
var name = $('#fn').val().strip_tags();
|
||||||
var item = $('#contacts [data-id="'+Contacts.UI.Card.id+'"]');
|
var item = $('.contacts [data-id="'+Contacts.UI.Card.id+'"]');
|
||||||
$(item).find('a').html(name);
|
$(item).find('a').html(name);
|
||||||
Contacts.UI.Card.fn = name;
|
Contacts.UI.Card.fn = name;
|
||||||
var added = false;
|
var added = false;
|
||||||
$('#contacts li').each(function(){
|
$('.contacts li').each(function(){
|
||||||
if ($(this).text().toLowerCase() > name.toLowerCase()) {
|
if ($(this).text().toLowerCase() > name.toLowerCase()) {
|
||||||
$(this).before(item).fadeIn('fast');
|
$(this).before(item).fadeIn('fast');
|
||||||
added = true;
|
added = true;
|
||||||
|
@ -248,12 +248,12 @@ Contacts={
|
||||||
update:function(id) {
|
update:function(id) {
|
||||||
var newid;
|
var newid;
|
||||||
if(!id) {
|
if(!id) {
|
||||||
newid = $('#contacts li:first-child').data('id');
|
newid = $('.contacts li:first-child').data('id');
|
||||||
} else {
|
} else {
|
||||||
newid = id;
|
newid = id;
|
||||||
}
|
}
|
||||||
var localLoadContact = function(id) {
|
var localLoadContact = function(id) {
|
||||||
if($('#contacts li').length > 0) {
|
if($('.contacts li').length > 0) {
|
||||||
$('#leftcontent li[data-id="'+newid+'"]').addClass('active');
|
$('#leftcontent li[data-id="'+newid+'"]').addClass('active');
|
||||||
$.getJSON(OC.filePath('contacts', 'ajax', 'contactdetails.php'),{'id':newid},function(jsondata){
|
$.getJSON(OC.filePath('contacts', 'ajax', 'contactdetails.php'),{'id':newid},function(jsondata){
|
||||||
if(jsondata.status == 'success'){
|
if(jsondata.status == 'success'){
|
||||||
|
@ -278,7 +278,7 @@ Contacts={
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
else if($('#contacts li').length == 0) {
|
else if($('.contacts li').length == 0) {
|
||||||
// load intro page
|
// load intro page
|
||||||
$.getJSON(OC.filePath('contacts', 'ajax', 'loadintro.php'),{},function(jsondata){
|
$.getJSON(OC.filePath('contacts', 'ajax', 'loadintro.php'),{},function(jsondata){
|
||||||
if(jsondata.status == 'success'){
|
if(jsondata.status == 'success'){
|
||||||
|
@ -384,7 +384,7 @@ Contacts={
|
||||||
this.id = this.fn = this.fullname = this.shortname = this.famname = this.givname = this.addname = this.honpre = this.honsuf = '';
|
this.id = this.fn = this.fullname = this.shortname = this.famname = this.givname = this.addname = this.honpre = this.honsuf = '';
|
||||||
this.data = undefined;
|
this.data = undefined;
|
||||||
|
|
||||||
if($('#contacts li').length > 0) { // Load first in list.
|
if($('.contacts li').length > 0) { // Load first in list.
|
||||||
Contacts.UI.Card.update(newid);
|
Contacts.UI.Card.update(newid);
|
||||||
} else {
|
} else {
|
||||||
// load intro page
|
// load intro page
|
||||||
|
@ -1498,7 +1498,7 @@ Contacts={
|
||||||
update:function(){
|
update:function(){
|
||||||
$.getJSON(OC.filePath('contacts', 'ajax', 'contacts.php'),{},function(jsondata){
|
$.getJSON(OC.filePath('contacts', 'ajax', 'contacts.php'),{},function(jsondata){
|
||||||
if(jsondata.status == 'success'){
|
if(jsondata.status == 'success'){
|
||||||
$('#contacts').html(jsondata.data.page);
|
$('#leftcontent').html(jsondata.data.page);
|
||||||
Contacts.UI.Card.update();
|
Contacts.UI.Card.update();
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
|
@ -1506,8 +1506,8 @@ Contacts={
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
$('#contacts li').unbind('inview');
|
$('.contacts li').unbind('inview');
|
||||||
$('#contacts li').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
|
$('.contacts li').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
|
||||||
if (isInView) {
|
if (isInView) {
|
||||||
if (!$(this).find('a').attr('style')) {
|
if (!$(this).find('a').attr('style')) {
|
||||||
$(this).find('a').css('background','url('+OC.filePath('contacts', '', 'thumbnail.php')+'?id='+$(this).data('id')+') no-repeat');
|
$(this).find('a').css('background','url('+OC.filePath('contacts', '', 'thumbnail.php')+'?id='+$(this).data('id')+') no-repeat');
|
||||||
|
@ -1518,19 +1518,19 @@ Contacts={
|
||||||
},
|
},
|
||||||
// Add thumbnails to the contact list as they become visible in the viewport.
|
// Add thumbnails to the contact list as they become visible in the viewport.
|
||||||
lazyupdate:function(){
|
lazyupdate:function(){
|
||||||
$('#contacts li').live('inview', function(){
|
$('.contacts li').live('inview', function(){
|
||||||
if (!$(this).find('a').attr('style')) {
|
if (!$(this).find('a').attr('style')) {
|
||||||
$(this).find('a').css('background','url('+OC.filePath('contacts', '', 'thumbnail.php')+'?id='+$(this).data('id')+') no-repeat');
|
$(this).find('a').css('background','url('+OC.filePath('contacts', '', 'thumbnail.php')+'?id='+$(this).data('id')+') no-repeat');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
refreshThumbnail:function(id){
|
refreshThumbnail:function(id){
|
||||||
var item = $('#contacts [data-id="'+id+'"]').find('a');
|
var item = $('.contacts [data-id="'+id+'"]').find('a');
|
||||||
item.html(Contacts.UI.Card.fn);
|
item.html(Contacts.UI.Card.fn);
|
||||||
item.css('background','url('+OC.filePath('contacts', '', 'thumbnail.php')+'?id='+id+'&refresh=1'+Math.random()+') no-repeat');
|
item.css('background','url('+OC.filePath('contacts', '', 'thumbnail.php')+'?id='+id+'&refresh=1'+Math.random()+') no-repeat');
|
||||||
},
|
},
|
||||||
scrollTo:function(id){
|
scrollTo:function(id){
|
||||||
$('#contacts').animate({
|
$('.contacts').animate({
|
||||||
scrollTop: $('#leftcontent li[data-id="'+id+'"]').offset().top-20}, 'slow','swing');
|
scrollTop: $('#leftcontent li[data-id="'+id+'"]').offset().top-20}, 'slow','swing');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1552,12 +1552,12 @@ $(document).ready(function(){
|
||||||
$('#contacts_newcontact').keydown(Contacts.UI.Card.editNew);
|
$('#contacts_newcontact').keydown(Contacts.UI.Card.editNew);
|
||||||
|
|
||||||
// Load a contact.
|
// Load a contact.
|
||||||
$('#contacts').keydown(function(event) {
|
$('.contacts').keydown(function(event) {
|
||||||
if(event.which == 13) {
|
if(event.which == 13) {
|
||||||
$('#contacts').click();
|
$('.contacts').click();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$('#contacts').click(function(event){
|
$('.contacts').click(function(event){
|
||||||
var $tgt = $(event.target);
|
var $tgt = $(event.target);
|
||||||
if ($tgt.is('li') || $tgt.is('a')) {
|
if ($tgt.is('li') || $tgt.is('a')) {
|
||||||
var item = $tgt.is('li')?$($tgt):($tgt).parent();
|
var item = $tgt.is('li')?$($tgt):($tgt).parent();
|
||||||
|
@ -1565,7 +1565,7 @@ $(document).ready(function(){
|
||||||
item.addClass('active');
|
item.addClass('active');
|
||||||
var oldid = $('#rightcontent').data('id');
|
var oldid = $('#rightcontent').data('id');
|
||||||
if(oldid != 0){
|
if(oldid != 0){
|
||||||
$('#contacts li[data-id="'+oldid+'"]').removeClass('active');
|
$('.contacts li[data-id="'+oldid+'"]').removeClass('active');
|
||||||
}
|
}
|
||||||
$.getJSON(OC.filePath('contacts', 'ajax', 'contactdetails.php'),{'id':id},function(jsondata){
|
$.getJSON(OC.filePath('contacts', 'ajax', 'contactdetails.php'),{'id':id},function(jsondata){
|
||||||
if(jsondata.status == 'success'){
|
if(jsondata.status == 'success'){
|
||||||
|
@ -1579,7 +1579,7 @@ $(document).ready(function(){
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
$('#contacts li').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
|
$('.contacts li').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
|
||||||
if (isInView) { //NOTE: I've kept all conditions for future reference ;-)
|
if (isInView) { //NOTE: I've kept all conditions for future reference ;-)
|
||||||
// element is now visible in the viewport
|
// element is now visible in the viewport
|
||||||
if (visiblePartY == 'top') {
|
if (visiblePartY == 'top') {
|
||||||
|
|
|
@ -3,10 +3,8 @@
|
||||||
var categories = <?php echo json_encode($_['categories']); ?>;
|
var categories = <?php echo json_encode($_['categories']); ?>;
|
||||||
var lang = '<?php echo OCP\Config::getUserValue(OCP\USER::getUser(), 'core', 'lang', 'en'); ?>';
|
var lang = '<?php echo OCP\Config::getUserValue(OCP\USER::getUser(), 'core', 'lang', 'en'); ?>';
|
||||||
</script>
|
</script>
|
||||||
<div id="leftcontent" class="leftcontent">
|
<div id="leftcontent">
|
||||||
<ul id="contacts">
|
|
||||||
<?php echo $this->inc("part.contacts"); ?>
|
<?php echo $this->inc("part.contacts"); ?>
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="bottomcontrols">
|
<div id="bottomcontrols">
|
||||||
<form>
|
<form>
|
||||||
|
|
|
@ -1,5 +1,26 @@
|
||||||
<?php foreach( $_['contacts'] as $contact ):
|
<?php
|
||||||
|
// get the names of the addressbooks
|
||||||
|
$addressbook_names = OC_Contacts_Addressbook::all(OCP\USER::getUser());
|
||||||
|
$contacts = array();
|
||||||
|
|
||||||
|
// sort the contacts by addressbookid
|
||||||
|
foreach( $_['contacts'] as $contact ):
|
||||||
|
if(is_null($contacts[$contact['addressbookid']])) {
|
||||||
|
$contacts[$contact['addressbookid']] = array();
|
||||||
|
}
|
||||||
|
$contacts[$contact['addressbookid']][] = $contact;
|
||||||
|
endforeach;
|
||||||
|
|
||||||
|
// print them out sorted by addressbook-name
|
||||||
|
for($i=0; $i<count($addressbook_names); $i++) {
|
||||||
|
// a little ugly doing it this way but dunno how to do it else :)
|
||||||
|
if(!(is_null($contacts[$addressbook_names[$i]['id']]))) { // look if we got contacts from this adressbook
|
||||||
|
echo '<h3 class="addressbookname">'.$addressbook_names[$i]['displayname'].'</h3>';
|
||||||
|
echo '<div>
|
||||||
|
<ul class="contacts">';
|
||||||
|
foreach($contacts[$addressbook_names[$i]['id']] as $contact):
|
||||||
$display = trim($contact['fullname']);
|
$display = trim($contact['fullname']);
|
||||||
|
|
||||||
if(!$display) {
|
if(!$display) {
|
||||||
$vcard = OC_Contacts_App::getContactVCard($contact['id']);
|
$vcard = OC_Contacts_App::getContactVCard($contact['id']);
|
||||||
if(!is_null($vcard)) {
|
if(!is_null($vcard)) {
|
||||||
|
@ -7,6 +28,18 @@
|
||||||
$display = isset($struct['EMAIL'][0])?$struct['EMAIL'][0]['value']:'[UNKNOWN]';
|
$display = isset($struct['EMAIL'][0])?$struct['EMAIL'][0]['value']:'[UNKNOWN]';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
echo '<li role="button" book-id="'.$contact['addressbookid'].'" data-id="'.$contact['id'].'"><a href="index.php?id='.$contact['id'].'">'.htmlspecialchars($display).'</a></li>';
|
||||||
|
|
||||||
|
endforeach;
|
||||||
|
echo '</ul></div>';
|
||||||
|
}
|
||||||
|
}
|
||||||
?>
|
?>
|
||||||
<li role="button" book-id="<?php echo $contact['addressbookid']; ?>" data-id="<?php echo $contact['id']; ?>"><a href="index.php?id=<?php echo $contact['id']; ?>"><?php echo htmlspecialchars($display); ?></a></li>
|
<script language="Javascript">
|
||||||
<?php endforeach; ?>
|
$(document).ready(function() {
|
||||||
|
$('#leftcontent .addressbookname').click(function(event) {
|
||||||
|
$(this).next().toggle('slow');
|
||||||
|
return false;
|
||||||
|
}).next().hide();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue