Merge pull request #719 from dhenry437/fix/multi-tool-filename

Multi-tool bug with dropping files
This commit is contained in:
Eric 2024-01-22 14:28:07 -05:00 committed by GitHub
commit 46032b8ebb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 173 additions and 98 deletions

View File

@ -357,22 +357,29 @@
{
"moduleName": "org.apache.pdfbox:fontbox",
"moduleUrl": "https://pdfbox.apache.org",
"moduleVersion": "2.0.30",
"moduleLicense": "Apache License, Version 2.0",
"moduleVersion": "3.0.1",
"moduleLicense": "Apache-2.0",
"moduleLicenseUrl": "https://www.apache.org/licenses/LICENSE-2.0.txt"
},
{
"moduleName": "org.apache.pdfbox:pdfbox",
"moduleUrl": "https://pdfbox.apache.org",
"moduleVersion": "2.0.30",
"moduleLicense": "Apache License, Version 2.0",
"moduleVersion": "3.0.1",
"moduleLicense": "Apache-2.0",
"moduleLicenseUrl": "https://www.apache.org/licenses/LICENSE-2.0.txt"
},
{
"moduleName": "org.apache.pdfbox:pdfbox-io",
"moduleUrl": "https://pdfbox.apache.org",
"moduleVersion": "3.0.1",
"moduleLicense": "Apache-2.0",
"moduleLicenseUrl": "https://www.apache.org/licenses/LICENSE-2.0.txt"
},
{
"moduleName": "org.apache.pdfbox:xmpbox",
"moduleUrl": "https://pdfbox.apache.org",
"moduleVersion": "2.0.30",
"moduleLicense": "Apache License, Version 2.0",
"moduleVersion": "3.0.1",
"moduleLicense": "Apache-2.0",
"moduleLicenseUrl": "https://www.apache.org/licenses/LICENSE-2.0.txt"
},
{
@ -450,6 +457,12 @@
"moduleLicense": "BSD 2-Clause License",
"moduleLicenseUrl": "https://opensource.org/licenses/BSD-2-Clause"
},
{
"moduleName": "org.commonmark:commonmark-ext-gfm-tables",
"moduleVersion": "0.21.0",
"moduleLicense": "BSD 2-Clause License",
"moduleLicenseUrl": "https://opensource.org/licenses/BSD-2-Clause"
},
{
"moduleName": "org.eclipse.angus:angus-activation",
"moduleUrl": "https://www.eclipse.org",
@ -506,6 +519,52 @@
"moduleLicense": "Public Domain",
"moduleLicenseUrl": "http://repository.jboss.org/licenses/cc0-1.0.txt"
},
{
"moduleName": "org.junit.jupiter:junit-jupiter",
"moduleUrl": "https://junit.org/junit5/",
"moduleVersion": "5.10.1",
"moduleLicense": "Eclipse Public License v2.0",
"moduleLicenseUrl": "https://www.eclipse.org/legal/epl-v20.html"
},
{
"moduleName": "org.junit.jupiter:junit-jupiter-api",
"moduleUrl": "https://junit.org/junit5/",
"moduleVersion": "5.10.1",
"moduleLicense": "Eclipse Public License v2.0",
"moduleLicenseUrl": "https://www.eclipse.org/legal/epl-v20.html"
},
{
"moduleName": "org.junit.jupiter:junit-jupiter-engine",
"moduleUrl": "https://junit.org/junit5/",
"moduleVersion": "5.10.1",
"moduleLicense": "Eclipse Public License v2.0",
"moduleLicenseUrl": "https://www.eclipse.org/legal/epl-v20.html"
},
{
"moduleName": "org.junit.jupiter:junit-jupiter-params",
"moduleUrl": "https://junit.org/junit5/",
"moduleVersion": "5.10.1",
"moduleLicense": "Eclipse Public License v2.0",
"moduleLicenseUrl": "https://www.eclipse.org/legal/epl-v20.html"
},
{
"moduleName": "org.junit.platform:junit-platform-commons",
"moduleUrl": "https://junit.org/junit5/",
"moduleVersion": "1.10.1",
"moduleLicense": "Eclipse Public License v2.0",
"moduleLicenseUrl": "https://www.eclipse.org/legal/epl-v20.html"
},
{
"moduleName": "org.junit.platform:junit-platform-engine",
"moduleUrl": "https://junit.org/junit5/",
"moduleVersion": "1.10.1",
"moduleLicense": "Eclipse Public License v2.0",
"moduleLicenseUrl": "https://www.eclipse.org/legal/epl-v20.html"
},
{
"moduleName": "org.junit:junit-bom",
"moduleVersion": "5.10.1"
},
{
"moduleName": "org.latencyutils:LatencyUtils",
"moduleUrl": "http://latencyutils.github.io/LatencyUtils/",
@ -513,6 +572,13 @@
"moduleLicense": "Public Domain, per Creative Commons CC0",
"moduleLicenseUrl": "http://creativecommons.org/publicdomain/zero/1.0/"
},
{
"moduleName": "org.opentest4j:opentest4j",
"moduleUrl": "https://github.com/ota4j-team/opentest4j",
"moduleVersion": "1.3.0",
"moduleLicense": "The Apache License, Version 2.0",
"moduleLicenseUrl": "https://www.apache.org/licenses/LICENSE-2.0.txt"
},
{
"moduleName": "org.slf4j:jul-to-slf4j",
"moduleUrl": "http://www.slf4j.org",

View File

@ -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<this.pagesContainer.childNodes.length; i++) {
@ -215,13 +195,13 @@ class PdfContainer {
if (!img) continue;
const pages = await pdfDoc.copyPages(img.doc, [img.pageIdx])
const page = pages[0];
const rotation = img.style.rotate;
if (rotation) {
const rotationAngle = parseInt(rotation.replace(/[^\d-]/g, ''));
page.setRotation(PDFLib.degrees(page.getRotation().angle + rotationAngle))
}
pdfDoc.addPage(page);
}
const pdfBytes = await pdfDoc.save();
@ -242,12 +222,12 @@ class PdfContainer {
}
filenameInput.value = inputArr.join('');
this.filename = filenameInput.value;
this.fileName = filenameInput.value;
}
if (!filenameInput.value.includes('.pdf')) {
filenameInput.value = filenameInput.value + '.pdf';
this.filename = filenameInput.value;
this.fileName = filenameInput.value;
}
if (downloadOption === 'sameWindow') {
@ -263,7 +243,7 @@ class PdfContainer {
this.downloadLink.href = url;
// downloadLink.download = this.fileName ? this.fileName : 'managed.pdf';
// downloadLink.download = this.fileName;
this.downloadLink.setAttribute('download', this.filename ? this.fileName : 'managed.pdf');
this.downloadLink.setAttribute('download', this.fileName ? this.fileName : 'managed.pdf');
this.downloadLink.setAttribute('target', '_blank');
this.downloadLink.onclick = this.setDownloadAttribute;
this.downloadLink.click();
@ -271,20 +251,23 @@ class PdfContainer {
}
setDownloadAttribute() {
this.downloadLink.setAttribute("download", this.filename ? this.filename : 'managed.pdf');
this.downloadLink.setAttribute("download", this.fileName ? this.fileName : 'managed.pdf');
}
updateFilename() {
const filenameInput = document.getElementById('filename-input');
updateFilename(fileName = "") {
const filenameInput = document.getElementById('filename-input');
const pagesContainer = document.getElementById('pages-container');
const downloadBtn = document.getElementById('export-button');
if (filenameInput.value === "") {
downloadBtn.disabled = true;
return;
downloadBtn.disabled = pagesContainer.childElementCount === 0
if (!this.fileName) {
this.fileName = fileName;
}
downloadBtn.disabled = false;
this.filename = filenameInput.value;
if (!filenameInput.value) {
filenameInput.value = this.fileName;
}
}
preventIllegalChars(e) {

View File

@ -1,69 +1,94 @@
const addFileDragListener = (callback) => {
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 = '<p>Drop files anywhere to upload</p>';
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 = '<p>Drop files anywhere to upload</p>';
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;
export default FileDragManager;

View File

@ -49,7 +49,7 @@
<path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z" />
</svg>
</button>
<button class="btn btn-secondary enable-on-file" onclick="rotateAll(90)" disabled>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
@ -79,13 +79,14 @@
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';
import FileDragManager from './js/multitool/fileInput.js';
// enables drag and drop
const dragDropManager = new DragDropManager('drag-container', 'pages-container');
// enables image highlight on click
const imageHighlighter = new ImageHighlighter('image-highlighter');
// enables the default action buttons on each pdf
const pdfActionsManager = new PdfActionsManager('pages-container');
const fileDragManager = new FileDragManager();
// Scroll the wrapper horizontally
scrollDivHorizontally('pages-container-wrapper');
@ -98,11 +99,11 @@
dragDropManager,
imageHighlighter,
pdfActionsManager,
fileDragManager
]
)
addFileInputListener(async (files) => {
pdfContainer.addPdfsFromFiles(files);
});
fileDragManager.setCallback(async (files) => pdfContainer.addPdfsFromFiles(files));
</script>
<style>
@ -186,7 +187,7 @@
.page-container {
height:250px;
display: flex;
display: flex;
align-items: center;
flex-direction: column-reverse;
aspect-ratio: 1;