Partly fix cropper in IE8 and don't use a dialog for it
This commit is contained in:
parent
ce263df4c7
commit
4724d60ecd
|
@ -55,16 +55,17 @@ function updateAvatar () {
|
||||||
}
|
}
|
||||||
|
|
||||||
function showAvatarCropper() {
|
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');
|
$cropper = $('#cropper');
|
||||||
|
$cropperImage = $('#cropper img');
|
||||||
|
|
||||||
$cropper.on('load', function() {
|
$cropperImage.attr('src', OC.Router.generate('core_avatar_get_tmp'));
|
||||||
$cropperbox.show();
|
|
||||||
|
|
||||||
$cropper.Jcrop({
|
// Looks weird, but on('load', ...) doesn't work in IE8
|
||||||
|
$cropperImage.ready(function(){
|
||||||
|
$('#displayavatar').hide();
|
||||||
|
$cropper.show();
|
||||||
|
|
||||||
|
$cropperImage.Jcrop({
|
||||||
onChange: saveCoords,
|
onChange: saveCoords,
|
||||||
onSelect: saveCoords,
|
onSelect: saveCoords,
|
||||||
aspectRatio: 1,
|
aspectRatio: 1,
|
||||||
|
@ -72,21 +73,13 @@ function showAvatarCropper() {
|
||||||
boxWidth: 500,
|
boxWidth: 500,
|
||||||
setSelect: [0, 0, 300, 300]
|
setSelect: [0, 0, 300, 300]
|
||||||
});
|
});
|
||||||
|
|
||||||
$cropperbox.ocdialog({
|
|
||||||
buttons: [{
|
|
||||||
text: t('settings', 'Crop'),
|
|
||||||
click: sendCropData,
|
|
||||||
defaultButton: true
|
|
||||||
}],
|
|
||||||
close: function(){
|
|
||||||
$(this).remove();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function sendCropData() {
|
function sendCropData() {
|
||||||
|
$('#displayavatar').show();
|
||||||
|
$cropper.hide();
|
||||||
|
|
||||||
var cropperdata = $('#cropper').data();
|
var cropperdata = $('#cropper').data();
|
||||||
var data = {
|
var data = {
|
||||||
x: cropperdata.x,
|
x: cropperdata.x,
|
||||||
|
@ -224,6 +217,15 @@ $(document).ready(function(){
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$('#abortcropperbutton').click(function(){
|
||||||
|
$('#displayavatar').show();
|
||||||
|
$cropper.hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#sendcropperbutton').click(function(){
|
||||||
|
sendCropData();
|
||||||
|
});
|
||||||
} );
|
} );
|
||||||
|
|
||||||
OC.Encryption = {
|
OC.Encryption = {
|
||||||
|
|
|
@ -84,13 +84,20 @@ if($_['passwordChangeSupported']) {
|
||||||
<form id="avatar" method="post" action="<?php p(\OC_Helper::linkToRoute('core_avatar_post')); ?>">
|
<form id="avatar" method="post" action="<?php p(\OC_Helper::linkToRoute('core_avatar_post')); ?>">
|
||||||
<fieldset class="personalblock">
|
<fieldset class="personalblock">
|
||||||
<legend><strong><?php p($l->t('Profile picture')); ?></strong></legend>
|
<legend><strong><?php p($l->t('Profile picture')); ?></strong></legend>
|
||||||
<div class="avatardiv"></div><br>
|
<div id="displayavatar">
|
||||||
<div class="warning hidden"></div>
|
<div class="avatardiv"></div><br>
|
||||||
<div class="inlineblock button" id="uploadavatarbutton"><?php p($l->t('Upload new')); ?></div>
|
<div class="warning hidden"></div>
|
||||||
<input type="file" class="hidden" name="files[]" id="uploadavatar">
|
<div class="inlineblock button" id="uploadavatarbutton"><?php p($l->t('Upload new')); ?></div>
|
||||||
<div class="inlineblock button" id="selectavatar"><?php p($l->t('Select new from Files')); ?></div>
|
<input type="file" class="hidden" name="files[]" id="uploadavatar">
|
||||||
<div class="inlineblock button" id="removeavatar"><?php p($l->t('Remove image')); ?></div><br>
|
<div class="inlineblock button" id="selectavatar"><?php p($l->t('Select new from Files')); ?></div>
|
||||||
<?php p($l->t('Either png or jpg. Ideally square but you will be able to crop it.')); ?>
|
<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>
|
</fieldset>
|
||||||
</form>
|
</form>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
|
Loading…
Reference in New Issue