From a5165b04cd48d70ee161203a62daf2b933e7f17d Mon Sep 17 00:00:00 2001 From: sbplat <71648843+sbplat@users.noreply.github.com> Date: Thu, 18 Jan 2024 01:08:31 -0500 Subject: [PATCH] fix(multi-tool): refactor fileInput.js into a class, fix filename variable typos, and update updateFilename logic for dropping files --- .../security/UserAuthenticationFilter.java | 2 +- .../api/SplitPdfBySectionsController.java | 4 +- .../static/js/multitool/PdfContainer.js | 60 +++------ .../static/js/multitool/fileInput.js | 121 ++++++++++-------- src/main/resources/templates/multi-tool.html | 13 +- 5 files changed, 100 insertions(+), 100 deletions(-) diff --git a/src/main/java/stirling/software/SPDF/config/security/UserAuthenticationFilter.java b/src/main/java/stirling/software/SPDF/config/security/UserAuthenticationFilter.java index 61b209de..47423eb6 100644 --- a/src/main/java/stirling/software/SPDF/config/security/UserAuthenticationFilter.java +++ b/src/main/java/stirling/software/SPDF/config/security/UserAuthenticationFilter.java @@ -115,4 +115,4 @@ public class UserAuthenticationFilter extends OncePerRequestFilter { return false; } -} \ No newline at end of file +} diff --git a/src/main/java/stirling/software/SPDF/controller/api/SplitPdfBySectionsController.java b/src/main/java/stirling/software/SPDF/controller/api/SplitPdfBySectionsController.java index de3e5a4b..90418169 100644 --- a/src/main/java/stirling/software/SPDF/controller/api/SplitPdfBySectionsController.java +++ b/src/main/java/stirling/software/SPDF/controller/api/SplitPdfBySectionsController.java @@ -121,8 +121,8 @@ public class SplitPdfBySectionsController { subDoc, subPage, AppendMode.APPEND, true, true)) { // Set clipping area and position float translateX = -subPageWidth * i; - - //float translateY = height - subPageHeight * (verticalDivisions - j); + + // float translateY = height - subPageHeight * (verticalDivisions - j); float translateY = -subPageHeight * (verticalDivisions - 1 - j); contentStream.saveGraphicsState(); diff --git a/src/main/resources/static/js/multitool/PdfContainer.js b/src/main/resources/static/js/multitool/PdfContainer.js index 4ae7f434..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,38 +74,14 @@ class PdfContainer { input.setAttribute("accept", "application/pdf"); input.onchange = async(e) => { const files = e.target.files; - if (files.length > 0) { - updateFilenameInput() - } this.addPdfsFromFiles(files, nextSiblingElement); + this.updateFilename(files ? files[0].name : ""); } input.click(); } - updateFilenameInput() { - 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; - } - } - async addPdfsFromFiles(files, nextSiblingElement) { this.fileName = files[0].name; for (var i=0; i < files.length; i++) { @@ -200,7 +177,7 @@ class PdfContainer { return pdfDoc; } - + rotateAll(deg) { for (var i=0; i { - let overlay; - let dragCounter = 0; + constructor(cb = null) { + this.dragCounter = 0; + this.setCallback(cb); - const dragenterListener = function() { - dragCounter++; - if (!overlay) { + // 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(() => { // Hide and remove the overlay - if (overlay) { - overlay.remove(); - overlay = null; + if (this.overlay) { + this.overlay.remove(); + this.overlay = null; } - // Enable/disable filename input - PdfContainer.updateFilenameInput() + 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/multi-tool.html b/src/main/resources/templates/multi-tool.html index d602cbe9..d49b7f83 100644 --- a/src/main/resources/templates/multi-tool.html +++ b/src/main/resources/templates/multi-tool.html @@ -49,7 +49,7 @@ - +