rooty/OwncloudContactsOfficial
1
0
Fork 0
mirror of https://github.com/owncloudarchive/contacts.git synced 2025-01-18 07:52:21 +01:00
Code Issues Releases Activity

Smoother profile picture loading - hopefully.

Browse Source
This commit is contained in:
Thomas Tanghus 2012-06-28 01:45:59 +02:00
parent 7c8d44dff0
commit b02c25fba2
5 changed files with 56 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ajax/loadphoto.php
View File

@ -42,11 +42,5 @@ foreach($vcard->children as $property){
} }
} }
$tmpl = new OCP\Template("contacts", "part.contactphoto"); OCP\JSON::success(array('data' => array('checksum'=>$checksum)));
$tmpl->assign('id', $id);
if($refresh) {
$tmpl->assign('refresh', 1);
}
$page = $tmpl->fetchPage();
OCP\JSON::success(array('data' => array('page'=>$page, 'checksum'=>$checksum)));
?>

6
css/contacts.css
View File

@ -73,10 +73,10 @@ label:hover, dt:hover { color: #333; }
.contactsection { position: relative; float: left; /*max-width: 40em;*/ padding: 0.5em; height: auto: border: thin solid lightgray;/* -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; border-radius: 0.5em; background-color: #f8f8f8;*/ } .contactsection { position: relative; float: left; /*max-width: 40em;*/ padding: 0.5em; height: auto: border: thin solid lightgray;/* -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; border-radius: 0.5em; background-color: #f8f8f8;*/ }
#cropbox { margin: auto; } #cropbox { margin: auto; }
#contacts_details_photo_wrapper { min-width: 120px; } #contacts_details_photo_wrapper { width: 200px; }
#contacts_details_photo_wrapper.wait { opacity: 0.6; filter:alpha(opacity=0.6); z-index:1000; background: url('%webroot%/core/img/loading.gif') no-repeat center center; cursor: wait; } #contacts_details_photo_wrapper.wait { opacity: 0.6; filter:alpha(opacity=0.6); z-index:1000; background: url('%webroot%/core/img/loading.gif') no-repeat center center; cursor: wait; }
#contacts_details_photo { border-radius: 0.5em; border: thin solid #bbb; margin: 0.3em; background: url('%webroot%/core/img/loading.gif') no-repeat center center; -moz-box-shadow: 0 1px 3px #777; -webkit-box-shadow: 0 1px 3px #777; box-shadow: 0 1px 3px #777; } .contacts_details_photo { border-radius: 0.5em; border: thin solid #bbb; margin: 0.3em; background: url('%webroot%/core/img/loading.gif') no-repeat center center; -moz-box-shadow: 0 1px 3px #777; -webkit-box-shadow: 0 1px 3px #777; box-shadow: 0 1px 3px #777; opacity: 1; }
#contacts_details_photo:hover { background: #fff; cursor: default; } .contacts_details_photo:hover { background: #fff; cursor: default; }
#phototools { position:absolute; margin: 5px 0 0 10px; width:auto; height:22px; padding:0px; background-color:#fff; list-style-type:none; border-radius: 0.5em; -moz-box-shadow: 0 1px 3px #777; -webkit-box-shadow: 0 1px 3px #777; box-shadow: 0 1px 3px #777; } #phototools { position:absolute; margin: 5px 0 0 10px; width:auto; height:22px; padding:0px; background-color:#fff; list-style-type:none; border-radius: 0.5em; -moz-box-shadow: 0 1px 3px #777; -webkit-box-shadow: 0 1px 3px #777; box-shadow: 0 1px 3px #777; }
#phototools li { display: inline; } #phototools li { display: inline; }
#phototools li a { float:left; cursor:pointer; width:22px; height:22px; opacity: 0.6; } #phototools li a { float:left; cursor:pointer; width:22px; height:22px; opacity: 0.6; }

75
js/contacts.js
View File

@ -144,6 +144,31 @@ Contacts={
$('#edit_name').click(function(){Contacts.UI.Card.editName()}); $('#edit_name').click(function(){Contacts.UI.Card.editName()});
$('#edit_name').keydown(function(){Contacts.UI.Card.editName()}); $('#edit_name').keydown(function(){Contacts.UI.Card.editName()});
$('#phototools li a').click(function() {
$(this).tipsy('hide');
});
$('#contacts_details_photo_wrapper').hover(
function () {
$('#phototools').slideDown(200);
},
function () {
$('#phototools').slideUp(200);
}
);
$('#phototools').hover(
function () {
$(this).removeClass('transparent');
},
function () {
$(this).addClass('transparent');
}
);
$('#phototools .upload').click(function() {
$('#file_upload_start').trigger('click');
});
$('#phototools .cloud').click(function() {
OC.dialogs.filepicker(t('contacts', 'Select photo'), Contacts.UI.Card.cloudPhotoSelected, false, 'image', true);
});
/* Initialize the photo edit dialog */ /* Initialize the photo edit dialog */
$('#edit_photo_dialog').dialog({ $('#edit_photo_dialog').dialog({
autoOpen: false, modal: true, height: 'auto', width: 'auto' autoOpen: false, modal: true, height: 'auto', width: 'auto'
@ -1109,25 +1134,6 @@ Contacts={
loadPhotoHandlers:function(){ loadPhotoHandlers:function(){
$('#phototools li a').tipsy('hide'); $('#phototools li a').tipsy('hide');
$('#phototools li a').tipsy(); $('#phototools li a').tipsy();
$('#phototools li a').click(function() {
$(this).tipsy('hide');
});
$('#contacts_details_photo_wrapper').hover(
function () {
$('#phototools').slideDown(200);
},
function () {
$('#phototools').slideUp(200);
}
);
$('#phototools').hover(
function () {
$(this).removeClass('transparent');
},
function () {
$(this).addClass('transparent');
}
);
if(this.data.PHOTO) { if(this.data.PHOTO) {
$('#phototools .delete').click(function() { $('#phototools .delete').click(function() {
$(this).tipsy('hide'); $(this).tipsy('hide');
@ -1138,16 +1144,12 @@ Contacts={
$(this).tipsy('hide'); $(this).tipsy('hide');
Contacts.UI.Card.editCurrentPhoto(); Contacts.UI.Card.editCurrentPhoto();
}); });
$('#phototools .delete').show();
$('#phototools .edit').show();
} else { } else {
$('#phototools .delete').hide(); $('#phototools .delete').hide();
$('#phototools .edit').hide(); $('#phototools .edit').hide();
} }
$('#phototools .upload').click(function() {
$('#file_upload_start').trigger('click');
});
$('#phototools .cloud').click(function() {
OC.dialogs.filepicker(t('contacts', 'Select photo'), Contacts.UI.Card.cloudPhotoSelected, false, 'image', true);
});
}, },
cloudPhotoSelected:function(path){ cloudPhotoSelected:function(path){
$.getJSON(OC.filePath('contacts', 'ajax', 'oc_photo.php'),{'path':path,'id':Contacts.UI.Card.id},function(jsondata){ $.getJSON(OC.filePath('contacts', 'ajax', 'oc_photo.php'),{'path':path,'id':Contacts.UI.Card.id},function(jsondata){
@ -1162,22 +1164,33 @@ Contacts={
}); });
}, },
loadPhoto:function(refresh){ loadPhoto:function(refresh){
var self = this;
var refreshstr = (refresh?'&refresh=1'+Math.random():'')
$('#phototools li a').tipsy('hide'); $('#phototools li a').tipsy('hide');
var wrapper = $('#contacts_details_photo_wrapper'); var wrapper = $('#contacts_details_photo_wrapper');
wrapper.addClass('wait'); wrapper.addClass('loading').addClass('wait');
var img = new Image();
$(img).load(function () {
$('img.contacts_details_photo').remove()
$(this).addClass('contacts_details_photo').hide();
wrapper.removeClass('loading').removeClass('wait');
$(this).insertAfter($('#phototools')).fadeIn();
}).error(function () {
// notify the user that the image could not be loaded
$(t('contacts','something went wrong.')).insertAfter($('#phototools'));
}).attr('src', OC.linkTo('contacts', 'photo.php')+'?id='+self.id+refreshstr);
$.getJSON(OC.filePath('contacts', 'ajax', 'loadphoto.php'),{'id':this.id, 'refresh': refresh},function(jsondata){ $.getJSON(OC.filePath('contacts', 'ajax', 'loadphoto.php'),{'id':this.id, 'refresh': refresh},function(jsondata){
if(jsondata.status == 'success'){ if(jsondata.status == 'success'){
$('#contacts_details_photo_wrapper').data('checksum', jsondata.data.checksum); $('#contacts_details_photo_wrapper').data('checksum', jsondata.data.checksum);
wrapper.html(jsondata.data.page).ready(function(){ wrapper.removeClass('wait').tipsy() });
Contacts.UI.Card.loadPhotoHandlers(); Contacts.UI.Card.loadPhotoHandlers();
} }
else{ else{
wrapper.removeClass('wait');
OC.dialogs.alert(jsondata.data.message, t('contacts', 'Error')); OC.dialogs.alert(jsondata.data.message, t('contacts', 'Error'));
} }
}); });
$('#file_upload_form').show(); $('#file_upload_form').show();
$('#contacts_propertymenu_dropdown a[data-type="PHOTO"]').parent().hide();
}, },
editCurrentPhoto:function(){ editCurrentPhoto:function(){
$.getJSON(OC.filePath('contacts', 'ajax', 'currentphoto.php'),{'id':this.id},function(jsondata){ $.getJSON(OC.filePath('contacts', 'ajax', 'currentphoto.php'),{'id':this.id},function(jsondata){
@ -1213,15 +1226,15 @@ Contacts={
var target = $('#crop_target'); var target = $('#crop_target');
var form = $('#cropform'); var form = $('#cropform');
var wrapper = $('#contacts_details_photo_wrapper'); var wrapper = $('#contacts_details_photo_wrapper');
var self = this;
wrapper.addClass('wait'); wrapper.addClass('wait');
form.submit(); form.submit();
target.load(function(){ target.load(function(){
var response=jQuery.parseJSON(target.contents().text()); var response=jQuery.parseJSON(target.contents().text());
if(response != undefined && response.status == 'success'){ if(response != undefined && response.status == 'success'){
// load cropped photo. // load cropped photo.
wrapper.html(response.data.page).ready(function(){ wrapper.removeClass('wait') }); self.loadPhoto(true);
Contacts.UI.Card.data.PHOTO = true; Contacts.UI.Card.data.PHOTO = true;
Contacts.UI.Card.loadPhotoHandlers();
}else{ }else{
OC.dialogs.alert(response.data.message, t('contacts', 'Error')); OC.dialogs.alert(response.data.message, t('contacts', 'Error'));
wrapper.removeClass('wait'); wrapper.removeClass('wait');

8
templates/part.contact.php
View File

@ -18,7 +18,14 @@ $id = isset($_['id']) ? $_['id'] : '';
<iframe name="file_upload_target" id='file_upload_target' src=""></iframe> <iframe name="file_upload_target" id='file_upload_target' src=""></iframe>
<div class="tip propertycontainer" id="contacts_details_photo_wrapper" title="<?php echo $l->t('Drop photo to upload'); ?> (max <?php echo $_['uploadMaxHumanFilesize']; ?>)" data-element="PHOTO"> <div class="tip propertycontainer" id="contacts_details_photo_wrapper" title="<?php echo $l->t('Drop photo to upload'); ?> (max <?php echo $_['uploadMaxHumanFilesize']; ?>)" data-element="PHOTO">
<ul id="phototools" class="transparent hidden">
<li><a class="svg delete" title="<?php echo $l->t('Delete current photo'); ?>"></a></li>
<li><a class="svg edit" title="<?php echo $l->t('Edit current photo'); ?>"></a></li>
<li><a class="svg upload" title="<?php echo $l->t('Upload new photo'); ?>"></a></li>
<li><a class="svg cloud" title="<?php echo $l->t('Select photo from ownCloud'); ?>"></a></li>
</ul>
</div> </div>
<img />
</div> <!-- contact_photo --> </div> <!-- contact_photo -->
<div id="contact_identity" class="contactsection"> <div id="contact_identity" class="contactsection">
@ -104,7 +111,6 @@ $id = isset($_['id']) ? $_['id'] : '';
<div id="contacts_propertymenu"> <div id="contacts_propertymenu">
<button class="button" id="contacts_propertymenu_button"><?php echo $l->t('Add field'); ?></button> <button class="button" id="contacts_propertymenu_button"><?php echo $l->t('Add field'); ?></button>
<ul id="contacts_propertymenu_dropdown" role="menu" class="hidden"> <ul id="contacts_propertymenu_dropdown" role="menu" class="hidden">
<li><a role="menuitem" data-type="PHOTO"><?php echo $l->t('Profile picture'); ?></a></li>
<li><a role="menuitem" data-type="ORG"><?php echo $l->t('Organization'); ?></a></li> <li><a role="menuitem" data-type="ORG"><?php echo $l->t('Organization'); ?></a></li>
<li><a role="menuitem" data-type="NICKNAME"><?php echo $l->t('Nickname'); ?></a></li> <li><a role="menuitem" data-type="NICKNAME"><?php echo $l->t('Nickname'); ?></a></li>
<li><a role="menuitem" data-type="BDAY"><?php echo $l->t('Birthday'); ?></a></li> <li><a role="menuitem" data-type="BDAY"><?php echo $l->t('Birthday'); ?></a></li>

16
templates/part.contactphoto.php
View File

@ -1,16 +0,0 @@
<?php
$id = $_['id'];
$wattr = isset($_['width'])?'width="'.$_['width'].'"':'';
$hattr = isset($_['height'])?'height="'.$_['height'].'"':'';
$rand = isset($_['refresh'])?'&refresh='.rand():'';
?>
<ul id="phototools" class="transparent hidden">
<li><a class="svg delete" title="<?php echo $l->t('Delete current photo'); ?>"></a></li>
<li><a class="svg edit" title="<?php echo $l->t('Edit current photo'); ?>"></a></li>
<li><a class="svg upload" title="<?php echo $l->t('Upload new photo'); ?>"></a></li>
<li><a class="svg cloud" title="<?php echo $l->t('Select photo from ownCloud'); ?>"></a></li>
</ul>
<img class="loading" id="contacts_details_photo" <?php echo $wattr; ?> <?php echo $hattr; ?> src="<?php echo OCP\Util::linkToAbsolute('contacts', 'photo.php'); ?>?id=<?php echo $id.$rand; ?>" />
<progress id="contacts_details_photo_progress" style="display:none;" value="0" max="100">0 %</progress>