dockerisation

templates/Crop/crop01.html.twig

@@ -0,0 +1,41 @@
+{% extends 'base.html.twig' %}
+
+{% block encorelinktags %}
+    {{ encore_entry_link_tags('dropzone') }}
+{% endblock encorelinktags %}
+
+
+{% block body %}
+    <h3 class="page-header"></h3>
+    <button class="btn btn-secondary" onClick="closeModal();">Annuler</button>
+
+    <form
+        action="{{ oneup_uploader_endpoint(type) }}"
+        class="dropzone"
+        id="mydropzone"
+        data-acceptedMimeTypes="image/*"
+        data-maxFiles=1
+        
+        style="margin-top:10px">
+    </form>
+
+    
+{% endblock %}
+
+{% block encorescripttags %}
+    {{ encore_entry_script_tags('dropzone') }}
+{% endblock %}
+
+{% block localjavascript %}
+    window.parent.$(".modal-title").html("ETAPE 1 - Téléchargez votre image");
+
+    function dropzoneinit( elt) {
+    }
+    function dropzonesuccess( file, response ) {
+        $(location).attr('href',"{{ path('app_crop02', {"type": type, "reportinput": reportinput }) }}?file="+response["file"]);
+    }
+
+    function closeModal() {
+        window.parent.$("#mymodallarge").modal('hide');
+    }
+{% endblock %}

templates/Crop/crop02.html.twig

@@ -0,0 +1,121 @@
+{% extends 'base.html.twig' %}
+
+{% block localstyle %}
+    img.crop-image{ width:100% }
+{% 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;'>
+                <img src="{{ asset("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) }}
+    {% endif %}
+{% 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" %}
+            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","{{ asset("uploads/"~type~"/thumb_"~file) }}");
+		{% 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: "/{{ 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}});
+        {% endif %}
+	});
+{% endblock %}