Use Jcrop, have inline errormsg, work on cropping, clean up, WIP

4 files changed, 54 insertions, 13 deletions

diff --git a/settings/css/settings.css b/settings/css/settings.css
index e6ced0e375a..a2c3eaf6263 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -21,6 +21,8 @@ input#openid, input#webdav { width:20em; }
 input#identity { width:20em; }
 #email { width: 17em; }
 
+#avatar .warning { width: 350px; }
+
 .msg.success{ color:#fff; background-color:#0f0; padding:3px; text-shadow:1px 1px #000; }
 .msg.error{ color:#fff; background-color:#f00; padding:3px; text-shadow:1px 1px #000; }
 
diff --git a/settings/js/personal.js b/settings/js/personal.js
index dd2d15052d1..eaf90636d35 100644
--- a/settings/js/personal.js
+++ b/settings/js/personal.js
@@ -45,17 +45,57 @@ function changeDisplayName(){
 }
 
 function selectAvatar (path) {
-	$.post(OC.filePath('', '', 'avatar.php'), {path: path}, function(data) {
-		if (data.status === "success") {
-			updateAvatar();
-		} else {
-			OC.dialogs.alert(data.data.message, t('core', "Error"));
-		}
-	});
+	$.post(OC.filePath('', '', 'avatar.php'), {path: path}, avatarResponseHandler);
 }
 
 function updateAvatar () {
-	$('#avatar img').attr('src', $('#avatar img').attr('src') + '#');
+	$avatarimg = $('#avatar img');
+	$avatarimg.attr('src', $avatarimg.attr('src') + '#');
+}
+
+function showAvatarCropper() {
+	OC.dialogs.message('', t('settings', 'Crop'), undefined, OCdialogs.OK_BUTTON, sendCropData);
+	var $dialog = $('#oc-dialog-'+(OC.dialogs.dialogs_counter-1)+'-content');
+	var cropper = new Image();
+	$(cropper).load(function() {
+		$(this).attr('id', 'cropper');
+		$('#oc-dialog-'+(OC.dialogs.dialogs_counter-1)+'-content').html(this);
+		$(this).Jcrop({
+			onChange: saveCoords,
+			onSelect: saveCoords,
+			aspectRatio: 1
+		});
+	}).attr('src', OC.filePath('', '', 'avatar.php')+"?user="+OC.currentUser+"&size=512&tmp="+$('#avatar').data('tmpname'));
+}
+
+function sendCropData() {
+	var tmp = $('#avatar').data('tmpname');
+	var cropperdata = $('#cropper').data();
+	var data = {
+		x: cropperdata.x,
+		y: cropperdata.y,
+		w: cropperdata.w,
+		h: cropperdata.h
+	};
+	$.post(OC.filePath('', '', 'avatar.php'), {tmp:tmp, crop: data}, avatarResponseHandler);
+}
+
+function saveCoords(c) {
+	$('#cropper').data(c);
+}
+
+function avatarResponseHandler(data) {
+	$warning = $('#avatar .warning');
+	$warning.hide();
+	if (data.status === "success") {
+		updateAvatar();
+	} else if (data.data.message === "notsquare") {
+		$('#avatar').data('tmpname', data.data.tmpname);
+		showAvatarCropper();
+	} else {
+		$warning.show();
+		$warning.text(data.data.message);
+	}
 }
 
 $(document).ready(function(){
@@ -149,11 +189,7 @@ $(document).ready(function(){
 
 	var uploadparms = {
 		done: function(e, data) {
-			if (data.result.status === "success") {
-				updateAvatar();
-			} else {
-				OC.dialogs.alert(data.result.data.message, t('core', "Error"));
-			}
+			avatarResponseHandler(data.result);
 		}
 	};
 
diff --git a/settings/personal.php b/settings/personal.php
index d109d33e4bd..33c78c0467f 100644
--- a/settings/personal.php
+++ b/settings/personal.php
@@ -16,6 +16,8 @@ OC_Util::addStyle( 'settings', 'settings' );
 OC_Util::addScript( '3rdparty', 'chosen/chosen.jquery.min' );
 OC_Util::addStyle( '3rdparty', 'chosen' );
 \OC_Util::addScript('files', 'jquery.fileupload');
+\OC_Util::addScript('3rdparty/Jcrop', 'jquery.Jcrop.min');
+\OC_Util::addStyle('3rdparty/Jcrop', 'jquery.Jcrop.min');
 OC_App::setActiveNavigationEntry( 'personal' );
 
 $storageInfo=OC_Helper::getStorageInfo();
diff --git a/settings/templates/personal.php b/settings/templates/personal.php
index 7cd5361a924..5db28779b55 100644
--- a/settings/templates/personal.php
+++ b/settings/templates/personal.php
@@ -88,6 +88,7 @@ if($_['passwordChangeSupported']) {
 		<legend><strong><?php p($l->t('Profile Image')); ?></strong></legend>
 		<img src="<?php print_unescaped(link_to('', 'avatar.php').'?user='.OC_User::getUser().'&size=128'); ?>"><br>
 		<em><?php p($l->t('Has to be square and either PNG or JPG')); ?></em><br>
+		<div class="warning hidden"></div>
 		<div class="inlineblock button" id="uploadavatarbutton"><?php p($l->t('Upload new')); ?></div>
 		<input type="file" class="hidden" name="files[]" id="uploadavatar">
 		<div class="inlineblock button" id="selectavatar"><?php p($l->t('Select new from files')); ?></div>