mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2024-12-21 19:08:24 +01:00
add fileInput widget to multiSelect
This commit is contained in:
parent
f98f089d63
commit
724fb4bf8f
@ -10,6 +10,7 @@ class PdfContainer {
|
||||
this.pagesContainerWrapper = document.getElementById(wrapperId);
|
||||
this.movePageTo = this.movePageTo.bind(this);
|
||||
this.addPdfs = this.addPdfs.bind(this);
|
||||
this.addPdfsFromFiles = this.addPdfsFromFiles.bind(this);
|
||||
this.rotateElement = this.rotateElement.bind(this);
|
||||
this.rotateAll = this.rotateAll.bind(this);
|
||||
this.exportPdf = this.exportPdf.bind(this);
|
||||
@ -57,22 +58,25 @@ class PdfContainer {
|
||||
input.type = 'file';
|
||||
input.multiple = true;
|
||||
input.setAttribute("accept", "application/pdf");
|
||||
|
||||
input.onchange = async(e) => {
|
||||
const files = e.target.files;
|
||||
this.fileName = files[0].name;
|
||||
for (var i=0; i < files.length; i++) {
|
||||
await this.addPdfFile(files[i], nextSiblingElement);
|
||||
}
|
||||
|
||||
document.querySelectorAll(".enable-on-file").forEach(element => {
|
||||
element.disabled = false;
|
||||
});
|
||||
this.addPdfsFromFiles(files, nextSiblingElement);
|
||||
}
|
||||
|
||||
input.click();
|
||||
}
|
||||
|
||||
async addPdfsFromFiles(files, nextSiblingElement) {
|
||||
this.fileName = files[0].name;
|
||||
for (var i=0; i < files.length; i++) {
|
||||
await this.addPdfFile(files[i], nextSiblingElement);
|
||||
}
|
||||
|
||||
document.querySelectorAll(".enable-on-file").forEach(element => {
|
||||
element.disabled = false;
|
||||
});
|
||||
}
|
||||
|
||||
rotateElement(element, deg) {
|
||||
var lastTransform = element.style.rotate;
|
||||
if (!lastTransform) {
|
||||
|
69
src/main/resources/static/js/multitool/fileInput.js
Normal file
69
src/main/resources/static/js/multitool/fileInput.js
Normal file
@ -0,0 +1,69 @@
|
||||
const addFileDragListener = (callback) => {
|
||||
let overlay;
|
||||
let dragCounter = 0;
|
||||
|
||||
const dragenterListener = function() {
|
||||
dragCounter++;
|
||||
if (!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 = '<p>Drop files anywhere to upload</p>';
|
||||
document.getElementById('content-wrap').appendChild(overlay);
|
||||
}
|
||||
};
|
||||
|
||||
const dragleaveListener = function() {
|
||||
dragCounter--;
|
||||
if (dragCounter === 0) {
|
||||
// Hide and remove the overlay
|
||||
if (overlay) {
|
||||
overlay.remove();
|
||||
overlay = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const dropListener = function(e) {
|
||||
|
||||
const dt = e.dataTransfer;
|
||||
const files = dt.files;
|
||||
callback(files).catch((err) => {
|
||||
console.error(err);
|
||||
//maybe
|
||||
}).finally(() => {
|
||||
if (overlay) {
|
||||
overlay.remove();
|
||||
overlay = null;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 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;
|
@ -65,7 +65,7 @@
|
||||
import scrollDivHorizontally from "./js/multitool/horizontalScroll.js";
|
||||
import ImageHighlighter from "./js/multitool/ImageHighlighter.js";
|
||||
import PdfActionsManager from './js/multitool/PdfActionsManager.js';
|
||||
|
||||
import addFileInputListener from './js/multitool/fileInput.js';
|
||||
// enables drag and drop
|
||||
const dragDropManager = new DragDropManager('drag-container', 'pages-container');
|
||||
// enables image highlight on click
|
||||
@ -86,6 +86,9 @@
|
||||
pdfActionsManager,
|
||||
]
|
||||
)
|
||||
addFileInputListener(async (files) => {
|
||||
pdfContainer.addPdfsFromFiles(files);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
Loading…
Reference in New Issue
Block a user