72 lines
2.2 KiB
Twig
72 lines
2.2 KiB
Twig
|
{% extends 'base.html.twig' %}
|
||
|
|
|
||
|
|
{% block body %}
|
||
|
|
{{ form_start(form) }}
|
||
|
|
{{ form_widget(form.submit) }}
|
||
|
|
<button class="btn btn-secondary" onClick="closeModal();">Annuler</button>
|
||
|
|
|
||
|
|
<div id='preview' style='overflow:hidden; width:90px; height:90px; position: absolute; top: 0px; right: 10px;'>
|
||
|
|
<img src="/{{ appAlias }}/uploads/avatar/{{ app.session.get('uploadavatar') }}" style='position: relative;' alt='Thumbnail Preview' />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="width:800px; height:590px; overflow:hidden; margin:65px auto 0px auto;">
|
||
|
|
<div id="largeimg" class="crop-select-js" style="width:800px;">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{{ form_end(form) }}
|
||
|
|
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
|
||
|
|
{% block localjavascript %}
|
||
|
|
function move(data) {
|
||
|
|
$('#form_x').val(data.xScaledToImage);
|
||
|
|
$('#form_y').val(data.yScaledToImage);
|
||
|
|
|
||
|
|
preview();
|
||
|
|
}
|
||
|
|
|
||
|
|
function resize(data) {
|
||
|
|
$('#form_w').val(data.widthScaledToImage);
|
||
|
|
$('#form_h').val(data.heightScaledToImage);
|
||
|
|
|
||
|
|
preview();
|
||
|
|
}
|
||
|
|
|
||
|
|
function preview(data) {
|
||
|
|
var scaleX = 90 / $('#form_w').val();
|
||
|
|
var scaleY = 90 / $('#form_h').val();
|
||
|
|
|
||
|
|
$('#preview img').css({
|
||
|
|
width: Math.round(scaleX * $('#largeimg').width()) + 'px',
|
||
|
|
height: Math.round(scaleY * $('#largeimg').height()) + 'px',
|
||
|
|
marginLeft: '-' + Math.round(scaleX * $('#form_x').val()) + 'px',
|
||
|
|
marginTop: '-' + Math.round(scaleY * $('#form_y').val()) + 'px'
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function reportThumb() {
|
||
|
|
window.parent.$("#user_avatar").val("thumb_{{ app.session.get('uploadavatar') }}");
|
||
|
|
window.parent.$("#user_avatar_img").attr("src","/{{ appAlias }}/uploads/avatar/thumb_{{ app.session.get('uploadavatar') }}");
|
||
|
|
closeModal();
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeModal() {
|
||
|
|
window.parent.$("#extraLargeModal").modal('hide');
|
||
|
|
}
|
||
|
|
|
||
|
|
$(document).ready(function() {
|
||
|
|
window.parent.$(".modal-title").html("ETAPE 2 - Découper votre image");
|
||
|
|
|
||
|
|
$('#largeimg').CropSelectJs({
|
||
|
|
imageSrc: "/{{ appAlias }}/uploads/avatar/{{ app.session.get('uploadavatar') }}",
|
||
|
|
selectionResize: function(data) { resize(data); },
|
||
|
|
selectionMove: function(data) { move(data); },
|
||
|
|
});
|
||
|
|
$('#largeimg').CropSelectJs('setSelectionAspectRatio',1);
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
{% endblock %}
|