Partly fix cropper in IE8 and don't use a dialog for it

1 files changed, 20 insertions, 18 deletions

diff --git a/settings/js/personal.js b/settings/js/personal.js
index d9b6836568e..f60ab72f8e6 100644
--- a/settings/js/personal.js
+++ b/settings/js/personal.js
@@ -55,16 +55,17 @@ function updateAvatar () {
 }
 
 function showAvatarCropper() {
-	var $dlg = $('<div class="hidden" id="cropperbox" title="'+t('settings', 'Crop')+'"><img id="cropper" src="'+OC.Router.generate('core_avatar_get_tmp')+'"></div>');
-	$('body').append($dlg);
-
-	$cropperbox = $('#cropperbox');
 	$cropper = $('#cropper');
+	$cropperImage = $('#cropper img');
+
+	$cropperImage.attr('src', OC.Router.generate('core_avatar_get_tmp'));
 
-	$cropper.on('load', function() {
-		$cropperbox.show();
+	// Looks weird, but on('load', ...) doesn't work in IE8
+	$cropperImage.ready(function(){
+		$('#displayavatar').hide();
+		$cropper.show();
 
-		$cropper.Jcrop({
+		$cropperImage.Jcrop({
 			onChange: saveCoords,
 			onSelect: saveCoords,
 			aspectRatio: 1,
@@ -72,21 +73,13 @@ function showAvatarCropper() {
 			boxWidth: 500,
 			setSelect: [0, 0, 300, 300]
 		});
-
-		$cropperbox.ocdialog({
-			buttons: [{
-				text: t('settings', 'Crop'),
-				click: sendCropData,
-				defaultButton: true
-			}],
-			close: function(){
-				$(this).remove();
-			}
-		});
 	});
 }
 
 function sendCropData() {
+	$('#displayavatar').show();
+	$cropper.hide();
+
 	var cropperdata = $('#cropper').data();
 	var data = {
 		x: cropperdata.x,
@@ -224,6 +217,15 @@ $(document).ready(function(){
 			}
 		});
 	});
+
+	$('#abortcropperbutton').click(function(){
+		$('#displayavatar').show();
+		$cropper.hide();
+	});
+
+	$('#sendcropperbutton').click(function(){
+		sendCropData();
+	});
 } );
 
 OC.Encryption = {