nineskeletor/templates/Crop/crop02.html.twig

126 lines
4.0 KiB
Twig
Raw Normal View History

2022-07-21 16:15:47 +02:00
{% extends 'base.html.twig' %}
{% block localstyle %}
<style>
img.crop-image{ width:100% }
</style>
{% endblock %}
{% block body %}
{% if not submited %}
{{ 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;'>
2022-08-31 11:20:22 +02:00
<img src="{{ path('app_minio_image',{file:type~"/"~file}) }}" style='position: relative;' alt='Thumbnail Preview' />
2022-07-21 16:15:47 +02:00
</div>
<div style="width:100%; margin:65px auto 0px auto;">
<div id="largeimg" style="width:800px;margin:auto;">
</div>
</div>
{{ form_end(form) }}
{% endif %}
{% endblock %}
{% block localscript %}
<script>
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" %}
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 }}");
2022-08-31 11:20:22 +02:00
window.parent.$("{{ reportinput }}_img").attr("src","{{ path("app_minio_image",{file:type~"/thumb_"~file}) }}");
2022-07-21 16:15:47 +02:00
{% endif %}
closeModal();
}
function closeModal() {
window.parent.$("#mymodallarge").modal('hide');
}
$(document).ready(function() {
{% if submited %}
reportThumb();
{% else %}
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({
2022-08-31 11:20:22 +02:00
imageSrc: "{{ path('app_minio_image',{file:type~"/"~file}) }}",
2022-07-21 16:15:47 +02:00
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 ratio=="16:2" %}
{% set nbratio=(16/2) %}
{% endif %}
$('#largeimg').CropSelectJs('setSelectionAspectRatio',{{nbratio}});
{% endif %}
});
</script>
{% endblock %}