84 lines
2.6 KiB
Twig
84 lines
2.6 KiB
Twig
|
{% extends 'base.html.twig' %}
|
||
|
|
|
||
|
|
{% block localstyle %}
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block body %}
|
||
|
|
{{ form_start(form) }}
|
||
|
|
{{ form_widget(form.submit) }} <a class="btn btn-secondary" onClick="closeModal();">Annuler</a>
|
||
|
|
|
||
|
|
<div id='preview' style='overflow:hidden; width:90px; height:90px; position: absolute; top: 0px; right: 10px;'>
|
||
|
|
<img src="{{ asset(image) }}" style='position: relative;' alt='Thumbnail Preview' />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top:50px;">
|
||
|
|
<img id="largeimg" src="{{ asset(image) }}">
|
||
|
|
</div>
|
||
|
|
{{ form_end(form) }}
|
||
|
|
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block localscript %}
|
||
|
|
<script>
|
||
|
|
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}}");
|
||
|
|
url="{{ asset(thumb) }}";
|
||
|
|
window.parent.$("#user_avatar_img").attr("src",url);
|
||
|
|
closeModal();
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeModal() {
|
||
|
|
window.parent.$("#mymodal").modal('hide');
|
||
|
|
}
|
||
|
|
|
||
|
|
$(window).on("load",function () {
|
||
|
|
{% if toReport %}
|
||
|
|
reportThumb();
|
||
|
|
{% endif %}
|
||
|
|
$('#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);
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|