113 lines
2.4 KiB
JavaScript
113 lines
2.4 KiB
JavaScript
|
|
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");
|
|
}
|
|
|