first upload all files

2023-06-11 13:14:03 +01:00
parent f14dbc52b5
commit c08b36d1b6
1705 changed files with 106852 additions and 0 deletions
--- a/Modules/Media/Resources/assets/admin/js/ImagePicker.js
+++ b/Modules/Media/Resources/assets/admin/js/ImagePicker.js
@@ -0,0 +1,79 @@
+import MediaPicker from './MediaPicker';
+
+export default class {
+    constructor() {
+        $('.image-picker').on('click', (e) => {
+            this.pickImage(e);
+        });
+
+        this.sortable();
+        this.removeImageEventListener();
+    }
+
+    pickImage(e) {
+        let inputName = e.currentTarget.dataset.inputName;
+        let multiple = e.currentTarget.hasAttribute('data-multiple');
+
+        let picker = new MediaPicker({ type: 'image', multiple });
+
+        picker.on('select', (file) => {
+            this.addImage(inputName, file, multiple, e.currentTarget);
+        });
+    }
+
+    addImage(inputName, file, multiple, target) {
+        let html = this.getTemplate(inputName, file);
+
+        if (multiple) {
+            let multipleImagesWrapper = $(target).next('.multiple-images');
+
+            multipleImagesWrapper.find('.image-holder.placeholder').remove();
+            multipleImagesWrapper.find('.image-list').append(html);
+        } else {
+            $(target).siblings('.single-image').html(html);
+        }
+    }
+
+    getTemplate(inputName, file) {
+        return $(`
+            <div class="image-holder">
+                <img src="${file.path}">
+                <button type="button" class="btn remove-image"></button>
+                <input type="hidden" name="${inputName}" value="${file.id}">
+            </div>
+        `);
+    }
+
+    sortable() {
+        let imageList = $('.image-list');
+
+        if (imageList.length > 0) {
+            Sortable.create(imageList[0], { animation: 150 });
+        }
+    }
+
+    removeImageEventListener() {
+        $('.image-holder-wrapper').on('click', '.remove-image', (e) => {
+            e.preventDefault();
+
+            let imageHolderWrapper = $(e.currentTarget).closest('.image-holder-wrapper');
+
+            if (imageHolderWrapper.find('.image-holder').length === 1) {
+                imageHolderWrapper.html(
+                    this.getImagePlaceholder(e.currentTarget.dataset.inputName)
+                );
+            }
+
+            $(e.currentTarget).parent().remove();
+        });
+    }
+
+    getImagePlaceholder(inputName) {
+        return `
+            <div class="image-holder placeholder cursor-auto">
+                <i class="fa fa-picture-o"></i>
+                <input type="hidden" name="${inputName}">
+            </div>
+        `;
+    }
+}