119 lines
3.6 KiB
Twig
119 lines
3.6 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block localstyle %}
|
|
.crop-image { width:100% }
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
{{ form_start(form) }}
|
|
{{ form_widget(form.submit) }}
|
|
<button class="btn btn-secondary" onClick="closeModal();">Annuler</button>
|
|
|
|
{% if ratio=="1:1" %}
|
|
{% set class="width:90px; height:90px;" %}
|
|
{% elseif ratio=="16:9" %}
|
|
{% set class="width:160px; height:90px;" %}
|
|
{% elseif ratio=="16:2" %}
|
|
{% set class="width:160px; height:20px;" %}
|
|
{% endif %}
|
|
|
|
<div id='preview' style='overflow:hidden; {{class}} position: absolute; top: 0px; right: 10px;'>
|
|
<img src="/{{ appAlias }}/uploads/{{type}}/{{ file }}" style='position: relative;' alt='Thumbnail Preview' />
|
|
</div>
|
|
|
|
<div style="width:100%; margin:65px auto 0px auto;">
|
|
<div id="largeimg" style="width:800px;margin:auto;">
|
|
</div>
|
|
</div>
|
|
{{ form_end(form) }}
|
|
{% endblock %}
|
|
|
|
|
|
{% block localjavascript %}
|
|
function move(data) {
|
|
$('#form_x').val(data.x);
|
|
$('#form_y').val(data.y);
|
|
$('#form_xs').val(data.xScaledToImage);
|
|
$('#form_ys').val(data.yScaledToImage);
|
|
|
|
preview();
|
|
}
|
|
|
|
function resize(data) {
|
|
$('#form_w').val(data.width);
|
|
$('#form_h').val(data.height);
|
|
$('#form_ws').val(data.widthScaledToImage);
|
|
$('#form_hs').val(data.heightScaledToImage);
|
|
|
|
preview();
|
|
}
|
|
|
|
function preview(data) {
|
|
{% if ratio=="1:1" %}
|
|
console.log("ici");
|
|
var scaleX = 90 / $('#form_w').val();
|
|
var scaleY = 90 / $('#form_h').val();
|
|
{% elseif ratio=="16:9" %}
|
|
var scaleX = 160 / $('#form_w').val();
|
|
var scaleY = 160 / $('#form_h').val();
|
|
{% elseif ratio=="16:2" %}
|
|
var scaleX = 160 / $('#form_w').val();
|
|
var scaleY = 160 / $('#form_h').val();
|
|
{% endif %}
|
|
|
|
$('#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() {
|
|
{% if reportinput == "refresh" %}
|
|
window.parent.location.reload();
|
|
{% elseif reportinput != "none" %}
|
|
window.parent.$("#{{ reportinput }}").val("thumb_{{ file }}");
|
|
window.parent.$("#{{ reportinput }}_img").attr("src","/{{ appAlias }}/uploads/{{ type }}/thumb_{{ file }}");
|
|
{% endif %}
|
|
|
|
closeModal();
|
|
}
|
|
|
|
function closeModal() {
|
|
window.parent.$("#extraLargeModal").modal('hide');
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
window.parent.$(".modal-title").html("ETAPE 2 - Découper votre image");
|
|
|
|
realheight=$('#largeimg').height();
|
|
realwidth=$('#largeimg').width();
|
|
|
|
if(realheight>505) { $('#largeimg').height(505); $('#largeimg').width("auto") }
|
|
if($('#largeimg').width() > 868) { $('#largeimg').width(868); $('#largeimg').height("auto") }
|
|
|
|
resizeheight=$('#largeimg').height();
|
|
resizewidth=$('#largeimg').width();
|
|
|
|
$('#largeimg').CropSelectJs({
|
|
imageSrc: "/{{ appAlias }}/uploads/{{type}}/{{ file }}",
|
|
selectionResize: function(data) { resize(data); },
|
|
selectionMove: function(data) { move(data); },
|
|
});
|
|
|
|
{% if ratio=="1:1" %}
|
|
{% set nbratio=1 %}
|
|
{% elseif ratio=="16:9" %}
|
|
{% set nbratio=(16/9) %}
|
|
{% elseif nbratio=="16:2" %}
|
|
{% set class=(16/2) %}
|
|
{% endif %}
|
|
|
|
$('#largeimg').CropSelectJs('setSelectionAspectRatio',{{nbratio}});
|
|
|
|
|
|
});
|
|
{% endblock %}
|