diff --git a/src/main/resources/static/js/multitool/PdfContainer.js b/src/main/resources/static/js/multitool/PdfContainer.js
index 4c7c8497..7ff2e945 100644
--- a/src/main/resources/static/js/multitool/PdfContainer.js
+++ b/src/main/resources/static/js/multitool/PdfContainer.js
@@ -26,6 +26,7 @@ class PdfContainer {
movePageTo: this.movePageTo,
addPdfs: this.addPdfs,
rotateElement: this.rotateElement,
+ updateFilename: this.updateFilename
})
})
@@ -38,7 +39,7 @@ class PdfContainer {
filenameInput.onkeyup = this.updateFilename;
filenameInput.onkeydown = this.preventIllegalChars;
- filenameInput.disabled = true;
+ filenameInput.disabled = false;
filenameInput.innerText = "";
downloadBtn.disabled = true;
}
@@ -59,7 +60,7 @@ class PdfContainer {
const vector = (endIndex !== -1 && startIndex > endIndex)
? 0-width
: width;
-
+
this.pagesContainerWrapper.scroll({
left: this.pagesContainerWrapper.scrollLeft + vector,
})
@@ -73,30 +74,9 @@ class PdfContainer {
input.setAttribute("accept", "application/pdf");
input.onchange = async(e) => {
const files = e.target.files;
- if (files.length > 0) {
- const filenameInput = document.getElementById('filename-input');
- const pagesContainer = document.getElementById('pages-container');
- const downloadBtn = document.getElementById('export-button');
-
- filenameInput.disabled = false;
-
- if (pagesContainer.childElementCount === 0) {
- filenameInput.value = "";
- this.filename = null;
- downloadBtn.disabled = true;
- } else {
- this.filename = filenameInput.value;
- }
-
- if (this.filename === null || this.filename === undefined) {
- filenameInput.value = files[0].name;
- } else {
- filenameInput.value = this.filename;
- }
-
- }
this.addPdfsFromFiles(files, nextSiblingElement);
+ this.updateFilename(files ? files[0].name : "");
}
input.click();
@@ -197,7 +177,7 @@ class PdfContainer {
return pdfDoc;
}
-
+
rotateAll(deg) {
for (var i=0; i
{
- let overlay;
- let dragCounter = 0;
+class FileDragManager {
+ overlay;
+ dragCounter;
+ updateFilename;
- const dragenterListener = function() {
- dragCounter++;
- if (!overlay) {
+ constructor(cb = null) {
+ this.dragCounter = 0;
+ this.setCallback(cb);
+
+ // Prevent default behavior for drag events
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+ document.body.addEventListener(eventName, preventDefaults, false);
+ });
+
+ function preventDefaults(e) {
+ e.preventDefault();
+ e.stopPropagation();
+ }
+
+ this.dragenterListener = this.dragenterListener.bind(this);
+ this.dragleaveListener = this.dragleaveListener.bind(this);
+ this.dropListener = this.dropListener.bind(this);
+
+ document.body.addEventListener('dragenter', this.dragenterListener);
+ document.body.addEventListener('dragleave', this.dragleaveListener);
+ // Add drop event listener
+ document.body.addEventListener('drop', this.dropListener);
+ }
+
+ setActions({ updateFilename }) {
+ this.updateFilename = updateFilename;
+ }
+
+ setCallback(cb) {
+ if (cb) {
+ this.callback = cb;
+ } else {
+ this.callback = (files) => console.warn("FileDragManager not set");
+ }
+ }
+
+ dragenterListener() {
+ this.dragCounter++;
+ if (!this.overlay) {
// Create and show the overlay
- overlay = document.createElement('div');
- overlay.style.position = 'fixed';
- overlay.style.top = 0;
- overlay.style.left = 0;
- overlay.style.width = '100%';
- overlay.style.height = '100%';
- overlay.style.background = 'rgba(0, 0, 0, 0.5)';
- overlay.style.color = '#fff';
- overlay.style.zIndex = '1000';
- overlay.style.display = 'flex';
- overlay.style.alignItems = 'center';
- overlay.style.justifyContent = 'center';
- overlay.style.pointerEvents = 'none';
- overlay.innerHTML = 'Drop files anywhere to upload
';
- document.getElementById('content-wrap').appendChild(overlay);
+ this.overlay = document.createElement('div');
+ this.overlay.style.position = 'fixed';
+ this.overlay.style.top = 0;
+ this.overlay.style.left = 0;
+ this.overlay.style.width = '100%';
+ this.overlay.style.height = '100%';
+ this.overlay.style.background = 'rgba(0, 0, 0, 0.5)';
+ this.overlay.style.color = '#fff';
+ this.overlay.style.zIndex = '1000';
+ this.overlay.style.display = 'flex';
+ this.overlay.style.alignItems = 'center';
+ this.overlay.style.justifyContent = 'center';
+ this.overlay.style.pointerEvents = 'none';
+ this.overlay.innerHTML = 'Drop files anywhere to upload
';
+ document.getElementById('content-wrap').appendChild(this.overlay);
}
};
- const dragleaveListener = function() {
- dragCounter--;
- if (dragCounter === 0) {
+ dragleaveListener() {
+ this.dragCounter--;
+ if (this.dragCounter === 0) {
// Hide and remove the overlay
- if (overlay) {
- overlay.remove();
- overlay = null;
+ if (this.overlay) {
+ this.overlay.remove();
+ this.overlay = null;
}
}
};
- const dropListener = function(e) {
+ dropListener(e) {
const dt = e.dataTransfer;
const files = dt.files;
- callback(files).catch((err) => {
+ this.callback(files).catch((err) => {
console.error(err);
//maybe
}).finally(() => {
- if (overlay) {
- overlay.remove();
- overlay = null;
+ // Hide and remove the overlay
+ if (this.overlay) {
+ this.overlay.remove();
+ this.overlay = null;
}
+
+ this.updateFilename(files ? files[0].name : "");
});
};
-
- // Prevent default behavior for drag events
- ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
- document.body.addEventListener(eventName, preventDefaults, false);
- });
-
- function preventDefaults(e) {
- e.preventDefault();
- e.stopPropagation();
- }
-
- document.body.addEventListener('dragenter', dragenterListener);
- document.body.addEventListener('dragleave', dragleaveListener);
- // Add drop event listener
- document.body.addEventListener('drop', dropListener);
}
-export default addFileDragListener;
\ No newline at end of file
+export default FileDragManager;
diff --git a/src/main/resources/templates/auto-split-pdf.html b/src/main/resources/templates/auto-split-pdf.html
index 4fd27772..bb984cc5 100644
--- a/src/main/resources/templates/auto-split-pdf.html
+++ b/src/main/resources/templates/auto-split-pdf.html
@@ -24,7 +24,7 @@