73 lines
2.4 KiB
Twig
73 lines
2.4 KiB
Twig
{% extends '@CadolesCore/base.html.twig' %}
|
|
|
|
{% block pagewrapper %}
|
|
<h3 class="page-header">ETAPE 2 - Découper votre image</h3>
|
|
|
|
{{ form_start(form) }}
|
|
{{ form_widget(form.submit) }} <a class="btn btn-default" onClick="closeModal();">Annuler</a>
|
|
|
|
<div id='preview' style='overflow:hidden; width:90px; height:90px; position: absolute; top: 0px; right: 10px;'>
|
|
<img src="/{{ alias }}/uploads/avatar/{{ app.session.get('uploadavatar') }}" style='position: relative;' alt='Thumbnail Preview' />
|
|
</div>
|
|
|
|
|
|
<div style="margin-top:10px;">
|
|
<img id="largeimg" src="/{{ alias }}/uploads/avatar/{{ app.session.get('uploadavatar') }}">
|
|
</div>
|
|
{{ form_end(form) }}
|
|
{% endblock %}
|
|
|
|
|
|
{% block localjavascript %}
|
|
function preview(img, selection) {
|
|
var scaleX = 90 / selection.width;
|
|
var scaleY = 90 / selection.height;
|
|
|
|
$('#preview img').css({
|
|
width: Math.round(scaleX * $('#largeimg').width()) + 'px',
|
|
height: Math.round(scaleY * $('#largeimg').height()) + 'px',
|
|
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
|
|
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
|
|
});
|
|
$('#form_x1').val(selection.x1);
|
|
$('#form_y1').val(selection.y1);
|
|
$('#form_x2').val(selection.x2);
|
|
$('#form_y2').val(selection.y2);
|
|
$('#form_w').val(selection.width);
|
|
$('#form_h').val(selection.height);
|
|
}
|
|
|
|
function reportThumb() {
|
|
window.parent.$("#user_avatar").val("thumb_{{ app.session.get('uploadavatar') }}");
|
|
window.parent.$("#user_avatar_img").attr("src","/{{ alias }}/uploads/avatar/thumb_{{ app.session.get('uploadavatar') }}");
|
|
closeModal();
|
|
}
|
|
|
|
function closeModal() {
|
|
window.parent.$("#mymodal").modal('hide');
|
|
}
|
|
|
|
$(window).load(function () {
|
|
$('#largeimg').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
|
|
|
|
|
|
var selection = new Object();
|
|
if($('#largeimg').height()<$('#largeimg').width()) {
|
|
selection.width = $('#largeimg').height();
|
|
selection.height = $('#largeimg').height();
|
|
}
|
|
else {
|
|
selection.width = $('#largeimg').width();
|
|
selection.height = $('#largeimg').width();
|
|
}
|
|
|
|
selection.x1=0;
|
|
selection.x2=0;
|
|
selection.y1=0;
|
|
selection.y2=0;
|
|
|
|
preview($('#largeimg'),selection);
|
|
|
|
});
|
|
{% endblock %}
|