added image cropper

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Wladyslaw Dudko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,32 @@
+##Installation
+```composer require twin-elements/form-extensions```
+
+in `/config/packages/routes.yaml`
+```
+filemanager_image:
+    resource: "@TwinElementsFormExtensionsBundle/Controller/FileManagerImageController.php"
+    prefix: /admin
+    type: annotation
+    requirements:
+        _locale: '%app_locales%'
+    defaults:
+        _locale: '%locale%'
+        _admin_locale: '%admin_locale%'
+    options: { i18n: false }
+```
+in `assets/admin/cropper.js` add
+
+`import 'twin-elements/forms/resources/image-cropper-js';`
+
+
+in `webpack.config.js`
+
+add ```const twinElementsFormScripts = path.resolve(__dirname, 'vendor/twin-elements/form-extensions/src/Resources/private/')```
+
+add `.addEntry('cropper', './assets/admin/cropper.js')` to admin config in `webpack.config.js`
+
+add path aliases to admin config
+```
+adminConfig.resolve.alias['twin-elements/forms/resources'] = twinElementsFormScripts;
+adminConfig.resolve.alias['root-dir'] = rootDir;
+```

src/Controller/FileManagerImageController.php

@@ -0,0 +1,85 @@
+<?php
+
+namespace TwinElements\FormExtensions\Controller;
+
+use PHPUnit\Util\Exception;
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\Routing\Annotation\Route;
+use TwinElements\AdminBundle\Model\CrudControllerTrait;
+
+class FileManagerImageController extends AbstractController
+{
+    use CrudControllerTrait;
+
+    /**
+     * @Route("/edit-filemanager-image", name="edit_filemanager_image", methods={"GET"})
+     */
+    public function editImage(
+        Request $request
+    )
+    {
+        if (!$request->query->has('image') || !$request->query->has('form-id')) {
+            throw new \Exception('image or form id is not defined');
+        }
+
+        return $this->render('@TwinElementsFormExtensions/edit_filemanager_image.html.twig', [
+            'image' => $request->query->get('image'),
+            'form_id' => $request->query->get('form-id')
+        ]);
+    }
+
+    /**
+     * @Route("/crop-filemanager-image", name="crop_filemanager_image", methods={"GET", "POST"}, options={"i18n" = false, "expose"=true})
+     */
+    public function crop(
+        Request $request
+    )
+    {
+        try {
+            if (!$request->isXmlHttpRequest()) {
+                throw new Exception('only XmlHttpRequest');
+            }
+
+            if (!$request->files->get('croppedImage')) {
+                throw new Exception('no image');
+            }
+
+            if (!is_uploaded_file($request->files->get('croppedImage'))) {
+                throw new Exception('it is no uploaded file');
+            }
+
+            if (!$request->request->has('originalImagePath')) {
+                throw new \Exception('No original image path');
+            }
+
+            $originalImageInfo = pathinfo($request->request->get('originalImagePath'));
+            $originalImageDir = $originalImageInfo['dirname'] . '/';
+            $originalImageFullDir = $request->server->get('DOCUMENT_ROOT') . $originalImageDir;
+            $originalImageName = $originalImageInfo['filename'];
+
+            /**
+             * @var UploadedFile $file
+             */
+            $file = $request->files->get('croppedImage');
+
+
+            $extension = $file->guessExtension();
+            $croppedImageName = $originalImageName . '_mini.' . $extension;
+
+            $file->move($originalImageFullDir, $croppedImageName);
+
+            return new JsonResponse([
+                'croppedImagePath' => $originalImageDir . $croppedImageName
+            ]);
+
+        } catch (\Exception $exception) {
+            return new JsonResponse([
+                'error' => $exception->getMessage()
+            ]);
+        }
+
+    }
+}

src/Resources/config/services.xml

@@ -15,6 +15,10 @@
             <tag name="controller.service_arguments"/>
         </service>
 
+        <service id="TwinElements\FormExtensions\Controller\FileManagerImageController">
+            <tag name="controller.service_arguments"/>
+        </service>
+
         <service id="TwinElements\FormExtensions\Type\Extension\TECollectionTypeExtension">
             <tag name="form.type_extension"  />
         </service>

src/Resources/private/cropper-modal.js

@@ -0,0 +1,45 @@
+function createModal() {
+    let modalHtml = `
+        <div class="modal fade" id="cropperModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
+        <div class="modal-dialog modal-lg" role="document" style="height: 90%;">
+            <div class="modal-content" style="height: 100%;">
+                <div class="modal-header d-flex justify-content-between align-items-center">
+                <h4 class="modal-title" id="myModalLabel">Cropper</h4>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
+                                aria-hidden="true">&times;</span></button>
+                </div>
+                <div class="modal-body"></div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    `;
+    let modal = document.createElement('div');
+    modal.innerHTML = modalHtml;
+    document.body.appendChild(modal);
+}
+
+function setContentForCropperModal(src) {
+    let cropperIframe = document.createElement('iframe');
+    cropperIframe.src = src;
+    cropperIframe.style.cssText = 'width:100%;height:100%;border:0;';
+    document.querySelector('#cropperModal .modal-body').innerHTML = '';
+    document.querySelector('#cropperModal .modal-body').appendChild(cropperIframe);
+}
+
+window.onload = function () {
+    'use strict';
+
+    createModal();
+
+    let openCropperButtons = document.querySelectorAll('.cropper-open-modal');
+    openCropperButtons.forEach(button => {
+        button.addEventListener('click', button => {
+            setContentForCropperModal(button.target.getAttribute('data-src'))
+        })
+    });
+
+
+}

src/Resources/private/forms.js

@@ -0,0 +1,3 @@
+if(document.querySelector('.cropper-open-modal')){
+    import(/*webpackChunkName: "crop-module"*/'./cropper-modal');
+}