svg

2024-12-24 17:29:37 +01:00
parent e0aa499940
commit 4c08435bd8
115 changed files with 3613 additions and 152 deletions
--- a/templates/upload/crop01.html.twig
+++ b/templates/upload/crop01.html.twig
@ -0,0 +1,48 @@
+{% extends 'base.html.twig' %}
+
+{% block localstyle %}
+    <style>
+        body {
+            background-color: transparent;
+        }
+    </style>
+{% endblock %}
+
+{% block body %}
+    <a class="btn btn-secondary" onClick="closeModal();">Annuler</a>
+    <form action="{{ oneup_uploader_endpoint(endpoint) }}" class="dropzone" id="myDropzone" style="margin-top:10px">
+    </form>
+{% endblock %}
+
+{% block localscript %}
+    <script>
+        Dropzone.options.myDropzone = {
+            maxFiles: 1,
+            acceptedMimeTypes: 'image/*',
+            success: function(file, response){
+                // Construction de l'url de retour                
+                url="{{ path('app_user_upload_crop02',{reportThumb: reportThumb, path:'xxx', file:'yyy'})|escape('js') }}";
+                url=url.replace("xxx",response["path"]);
+                url=url.replace("yyy",response["file"]);
+
+                // Navigation sur l'url de retour
+                $(location).attr('href',url);
+            },
+
+
+            dictDefaultMessage: "Déposez vos fichiers ici pour les téléverser",
+            dictFallbackMessage: "Votre navigateur ne supporte pas le téléversement de fichiers par glisser-déposer.",
+            dictFallbackText: "Veuillez utiliser le formulaire ci-dessous pour téléverser vos fichiers.",
+            dictFileTooBig: "Le fichier est trop volumineux .",
+            dictInvalidFileType: "Vous ne pouvez pas téléverser des fichiers de ce type.",
+            dictCancelUpload: "Annuler le téléversement",
+            dictCancelUploadConfirmation: "Êtes-vous sûr de vouloir annuler ce téléversement ?",
+            dictRemoveFile: "Supprimer le fichier",
+            dictMaxFilesExceeded: "Vous ne pouvez pas téléverser plus de fichiers."
+        }
+
+        function closeModal() {
+            window.parent.$("#mymodal").modal('hide');
+        }
+    </script>
+{% endblock %}
--- a/templates/upload/crop02.html.twig
+++ b/templates/upload/crop02.html.twig
@ -0,0 +1,83 @@
+{% 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 %}