nineskeletor/templates/Crop/crop02.html.twig

{% 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:4" %}
                {% set class="width:160px; height:40px;" %}
            {% elseif ratio=="16:2" %}
                {% set class="width:160px; height:20px;" %}
            {% elseif ratio=="4:6" %}
                {% set class="width:80px; height:120px;" %}            
            {% endif %}

            <div id='preview' style='overflow:hidden; {{class}} position: absolute; top: 0px; right: 10px;'>
                <img src="{{ path('app_minio_image',{file: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) }}
    {% 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:4" %}
            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();
        {% elseif ratio=="4:6" %}
            var scaleX = 80 / $('#form_w').val();
            var scaleY = 80 / $('#form_h').val();            
        {% elseif ratio=="none" %}
            var scaleX = $('#form_ws').val();
            var scaleY = $('#form_hs').val();            
        {% endif %}

        {% if ratio!="none" %}
            $('#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'
            });
        {% else %}
            $('#preview img').css({
                width: '0px',
                height: '0px',
                marginLeft: '-0px',
                marginTop: '-0px'
            });
        {% endif %}

	}

    function reportThumb() {
        {%if reportinput is defined %}
            {% if reportinput == "refresh" %}
                window.parent.location.reload();
            {% elseif reportinput != "none" %}
                window.parent.$("{{ reportinput }}").val("thumb_{{ file }}");
                window.parent.$("{{ reportinput }}_img").attr("src","{{ path("app_minio_image",{file:type~"/thumb_"~file}) }}");
            {% endif %}
        {% 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({
                imageSrc: "{{ path('app_minio_image',{file: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 ratio=="16:4" %}
                {% set nbratio=(16/4) %}                
            {% elseif ratio=="16:2" %}
                {% set nbratio=(16/2) %}
            {% elseif ratio=="4:6" %}
                {% set nbratio=0.7 %}
            {% elseif ratio=="none" %}
                {% set nbratio=null %}                
            {% endif %}

            $('#largeimg').CropSelectJs('setSelectionAspectRatio',{{nbratio}});
        {% endif %}
	});
    </script>
{% endblock %}