Initial commit - Media.RCL

2026-08-05 21:16:09 +03:00
commit 685015a3a4
166 changed files with 7590 additions and 0 deletions
@@ -0,0 +1,112 @@
+
+var modal;
+var cropper;
+var myDropzone;
+var dropzone;
+var cropped;
+var croppedImage;
+
+function startCropper() {
+    console.log("startcropper")
+    dropzone = document.getElementById('dropzone')
+    cropped = document.getElementById('cropped')
+    croppedImage = document.getElementById('cropped-image')
+    initTingle();
+
+    Dropzone.autoDiscover = false
+    myDropzone = new Dropzone("div#dropzone", {
+        url: "test",
+        maxFiles: 1,
+        autoProcessQueue: false,
+        addedfile: file => {
+            myDropzone.removeAllFiles();
+            modal.open();
+            openCropper(file)
+        },
+        maxfilesexceeded: () => {
+            console.log("max File Exceeded")
+        }
+    });
+}
+
+
+function openCropper(file) {
+
+    var pic = new FileReader();
+    pic.readAsDataURL(file)
+    console.log(file)
+    if (cropper !== undefined) {
+        cropper.destroy();
+    }
+
+    pic.onload = function () {
+        image.src = pic.result
+        cropper = new Cropper(image, {
+            aspectRatio: 16 / 9,
+            crop(event) {
+
+            },
+        });
+    }
+}
+
+
+function initTingle() {
+    modal = new tingle.modal({
+        footer: true,
+        stickyFooter: false,
+        closeMethods: ['button', 'escape'],
+        closeLabel: "Close",
+        cssClass: ['custom-class-1', 'custom-class-2'],
+        onOpen: function () {
+        },
+        onClose: function () {
+
+        },
+        beforeClose: function () {
+            // here's goes some logic
+            // e.g. save content before closing the modal
+
+            return true; // close the modal
+            return false; // nothing happens
+        },
+
+    });
+
+    // set content
+    modal.setContent(`<div><img id="image" class="w-full block " /></div>`);
+
+    // add a button
+    modal.addFooterBtn('Button label', 'tingle-btn tingle-btn--primary', function () {
+        crop();
+
+        modal.close();
+    });
+
+    // add another button
+    modal.addFooterBtn('Dangerous action !', 'tingle-btn tingle-btn--danger', function () {
+        // here goes some logic
+        modal.close();
+
+    });
+
+    // open modal
+
+}
+
+function crop() {
+    croppedImage.src = cropper.getCroppedCanvas().toDataURL('image/jpeg')
+
+    dropzone.classList.toggle("hidden");
+    cropped.classList.toggle("hidden");
+
+    return croppedImage.src;
+}
+
+function removeCropped() {
+    croppedImage.removeAttribute('src')
+
+    dropzone.classList.toggle("hidden");
+    cropped.classList.toggle("hidden");
+}
+