Merge pull request #4506 from owncloud/oc_avatars

OC Avatars

1 files changed, 112 insertions, 0 deletions

diff --git a/settings/js/personal.js b/settings/js/personal.js
index 77826c82de1..fab32b83b64 100644
--- a/settings/js/personal.js
+++ b/settings/js/personal.js
@@ -44,6 +44,78 @@ function changeDisplayName(){
     }
 }
 
+function updateAvatar () {
+	$headerdiv = $('#header .avatardiv');
+	$displaydiv = $('#displayavatar .avatardiv');
+
+	$headerdiv.css({'background-color': ''});
+	$headerdiv.avatar(OC.currentUser, 32, true);
+	$displaydiv.css({'background-color': ''});
+	$displaydiv.avatar(OC.currentUser, 128, true);
+}
+
+function showAvatarCropper() {
+	$cropper = $('#cropper');
+	$cropper.prepend("<img>");
+	$cropperImage = $('#cropper img');
+
+	$cropperImage.attr('src', OC.Router.generate('core_avatar_get_tmp')+'?requesttoken='+oc_requesttoken+'#'+Math.floor(Math.random()*1000));
+
+	// Looks weird, but on('load', ...) doesn't work in IE8
+	$cropperImage.ready(function(){
+		$('#displayavatar').hide();
+		$cropper.show();
+
+		$cropperImage.Jcrop({
+			onChange: saveCoords,
+			onSelect: saveCoords,
+			aspectRatio: 1,
+			boxHeight: 500,
+			boxWidth: 500,
+			setSelect: [0, 0, 300, 300]
+		});
+	});
+}
+
+function sendCropData() {
+	cleanCropper();
+
+	var cropperdata = $('#cropper').data();
+	var data = {
+		x: cropperdata.x,
+		y: cropperdata.y,
+		w: cropperdata.w,
+		h: cropperdata.h
+	};
+	$.post(OC.Router.generate('core_avatar_post_cropped'), {crop: data}, avatarResponseHandler);
+}
+
+function saveCoords(c) {
+	$('#cropper').data(c);
+}
+
+function cleanCropper() {
+	$cropper = $('#cropper');
+	$('#displayavatar').show();
+	$cropper.hide();
+	$('.jcrop-holder').remove();
+	$('#cropper img').removeData('Jcrop').removeAttr('style').removeAttr('src');
+	$('#cropper img').remove();
+}
+
+function avatarResponseHandler(data) {
+	$warning = $('#avatar .warning');
+	$warning.hide();
+	if (data.status === "success") {
+		updateAvatar();
+	} else if (data.data === "notsquare") {
+		showAvatarCropper();
+	} else {
+		$warning.show();
+		$warning.text(data.data.message);
+	}
+}
+
 $(document).ready(function(){
 	$("#passwordbutton").click( function(){
 		if ($('#pass1').val() !== '' && $('#pass2').val() !== '') {
@@ -128,6 +200,46 @@ $(document).ready(function(){
 		}
 	});
 	
+	var uploadparms = {
+		done: function(e, data) {
+			avatarResponseHandler(data.result);
+		}
+	};
+
+	$('#uploadavatarbutton').click(function(){
+		$('#uploadavatar').click();
+	});
+
+	$('#uploadavatar').fileupload(uploadparms);
+
+	$('#selectavatar').click(function(){
+		OC.dialogs.filepicker(
+			t('settings', "Select a profile picture"),
+			function(path){
+				$.post(OC.Router.generate('core_avatar_post'), {path: path}, avatarResponseHandler);
+			},
+			false,
+			["image/png", "image/jpeg"]
+		);
+	});
+
+	$('#removeavatar').click(function(){
+		$.ajax({
+			type:	'DELETE',
+			url:	OC.Router.generate('core_avatar_delete'),
+			success: function(msg) {
+				updateAvatar();
+			}
+		});
+	});
+
+	$('#abortcropperbutton').click(function(){
+		cleanCropper();
+	});
+
+	$('#sendcropperbutton').click(function(){
+		sendCropData();
+	});
 } );
 
 OC.Encryption = {