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

2 files changed, 34 insertions, 25 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 = {
diff --git a/settings/templates/personal.php b/settings/templates/personal.php
index fcef0f8a578..07a7ea0050c 100644
--- a/settings/templates/personal.php
+++ b/settings/templates/personal.php
@@ -84,13 +84,20 @@ if($_['passwordChangeSupported']) {
 <form id="avatar" method="post" action="<?php p(\OC_Helper::linkToRoute('core_avatar_post')); ?>">
 	<fieldset class="personalblock">
 		<legend><strong><?php p($l->t('Profile picture')); ?></strong></legend>
-		<div class="avatardiv"></div><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>
-		<div class="inlineblock button" id="removeavatar"><?php p($l->t('Remove image')); ?></div><br>
-		<?php p($l->t('Either png or jpg. Ideally square but you will be able to crop it.')); ?>
+		<div id="displayavatar">
+			<div class="avatardiv"></div><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>
+			<div class="inlineblock button" id="removeavatar"><?php p($l->t('Remove image')); ?></div><br>
+			<?php p($l->t('Either png or jpg. Ideally square but you will be able to crop it.')); ?>
+		</div>
+		<div id="cropper" class="hidden">
+			<img>
+			<div class="inlineblock button" id="abortcropperbutton"><?php p($l->t('Abort')); ?></div>
+			<div class="inlineblock button primary" id="sendcropperbutton"><?php p($l->t('Choose as profile image')); ?></div>
+		</div>
 	</fieldset>
 </form>
 <?php endif; ?>