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() {
|
||||
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');
|
||||
|
||||
$cropper.on('load', function() {
|
||||
$cropperbox.show();
|
||||
$cropperImage.attr('src', OC.Router.generate('core_avatar_get_tmp'));
|
||||
|
||||
$cropper.Jcrop({
|
||||
// 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,
|
||||
|
@ -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 = {
|
||||
|
|
|
@ -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; ?>
|
||||
|
|
Loading…
Reference in New Issue