Initial commit - Media.RCL

wwwroot/js/crop.js

@@ -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");
+}
+

wwwroot/js/mediaInterop.js

@@ -0,0 +1,79 @@
+class CropperInterop {
+    static initCropper(imgId, options, dotNetObject) {
+        const image = document.getElementById(imgId);
+        if (!image) return;
+
+        // Clean up existing instance if any
+        if (image.cropper) {
+            image.cropper.destroy();
+        }
+
+        new Cropper(image, {
+            ...options,
+            ready() {
+                // Optional: notify dotnet that it's ready
+            }
+        });
+    }
+
+    static getCroppedCanvasData(imgId) {
+        const image = document.getElementById(imgId);
+        if (!image || !image.cropper) return null;
+
+        return image.cropper.getCroppedCanvas().toDataURL();
+    }
+
+    static setAspectRatio(imgId, ratio) {
+        const image = document.getElementById(imgId);
+        if (!image || !image.cropper) return;
+
+        image.cropper.setAspectRatio(ratio);
+    }
+
+    static destroy(imgId) {
+        const image = document.getElementById(imgId);
+        if (image && image.cropper) {
+            image.cropper.destroy();
+        }
+    }
+
+    static setFullWidth(imgId) {
+        const image = document.getElementById(imgId);
+        if (!image || !image.cropper) return;
+        const data = image.cropper.getImageData();
+        // Use setData for natural dimensions
+        image.cropper.setData({ x: 0, width: data.naturalWidth });
+    }
+
+    static setFullHeight(imgId) {
+        const image = document.getElementById(imgId);
+        if (!image || !image.cropper) return;
+        const data = image.cropper.getImageData();
+        // Use setData for natural dimensions
+        image.cropper.setData({ y: 0, height: data.naturalHeight });
+    }
+}
+
+window.initCropper = (imgId, options, dotNetHelper) => {
+    CropperInterop.initCropper(imgId, options, dotNetHelper);
+};
+
+window.getCroppedImage = (imgId) => {
+    return CropperInterop.getCroppedCanvasData(imgId);
+};
+
+window.setCropperAspectRatio = (imgId, ratio) => {
+    CropperInterop.setAspectRatio(imgId, ratio);
+};
+
+window.destroyCropper = (imgId) => {
+    CropperInterop.destroy(imgId);
+};
+
+window.setCropperFullWidth = (imgId) => {
+    CropperInterop.setFullWidth(imgId);
+};
+
+window.setCropperFullHeight = (imgId) => {
+    CropperInterop.setFullHeight(imgId);
+};