From bf78db9b75a8c6af1e2b5459ee6aaac1e677e5b2 Mon Sep 17 00:00:00 2001
From: jordy <jordyvandertang@hotmail.com>
Date: Sun, 23 Apr 2023 15:53:15 +0200
Subject: [PATCH 1/6] drag-drop PoC

---
 src/main/resources/templates/multi-tool.html | 161 ++++++++++++++++---
 1 file changed, 141 insertions(+), 20 deletions(-)

diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index 5d911403..44f31007 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -59,7 +59,7 @@
         </div>
         <div th:insert="~{fragments/footer.html :: footer}"></div>
     </div>
-
+    <div id="drag-container"></div>
     <script>
         var fileName = null;
 
@@ -72,7 +72,7 @@
         const pagesContainerWrapper = document.getElementById("pages-container-wrapper")
 
         const pageDirection = document.documentElement.getAttribute("lang-direction");
-
+        var pageDragging = false;
         var scrollDelta = 0; // variable to store the accumulated scroll delta
         var isScrolling = false; // variable to track if scroll is already in progress
 
@@ -131,6 +131,56 @@
             imageHighlighter.appendChild(bigImg);
         }
 
+        
+        /**
+         * 
+         *  Manage visual aspect of dragging images
+         * 
+         */
+        const dragContainer = document.getElementById('drag-container');
+        var draggedEl;
+        var draggedImageEl;
+        var hoveredEl;
+
+        const startDraggingPage = (div, imageSrc) => {
+            pageDragging = true;
+            draggedEl = div;
+            div.classList.add('dragging');
+            const imgEl = document.createElement('img');
+            imgEl.classList.add('dragged-img');
+            imgEl.src = imageSrc;
+            draggedImageEl = imgEl;
+            draggedImageEl.style.left = screenX;
+            draggedImageEl.style.right = screenY;
+            dragContainer.appendChild(imgEl);
+            window.addEventListener('mouseup', (e) => {
+                stopDraggingPage();
+            })
+            window.addEventListener('mousemove', onDragEl)
+            
+        }
+
+        const onDragEl = (mouseEvent) => {
+            const { clientX, clientY } = mouseEvent;
+            if(draggedImageEl) {
+                draggedImageEl.style.left = `${clientX}px`;
+                draggedImageEl.style.top = `${clientY}px`;
+            }
+        }
+
+        const stopDraggingPage = () => {
+            window.removeEventListener('mousemove', onDragEl);
+            draggedImageEl = undefined;
+            pageDragging = false;
+            draggedEl.classList.remove('dragging');
+            hoveredEl.classList.remove('draghover');
+            dragContainer.childNodes.forEach((dragChild) => {
+                dragContainer.removeChild(dragChild);
+            })
+            movePageTo(draggedEl, hoveredEl);
+        }
+
+
         /**
          * 
          * Methods for managing PDFs
@@ -157,6 +207,30 @@
             input.click();
         }
 
+        
+        const movePageTo = (startElement, endElement, scrollTo = false) => {
+            const childArray = Array.from(pagesContainer.childNodes);
+            const startIndex = childArray.indexOf(startElement);
+            const endIndex = childArray.indexOf(endElement);
+            pagesContainer.removeChild(startElement);
+            if(!endElement) {
+                pagesContainer.append(startElement);
+            } else {
+                pagesContainer.insertBefore(startElement, endElement);
+            }
+
+            if(scrollTo) {
+                const { width } = startElement.getBoundingClientRect();
+                const vector = (endIndex !== -1 && startIndex > endIndex)
+                    ?  0-width
+                    : width;
+                
+                pagesContainerWrapper.scroll({
+                    left: pagesContainerWrapper.scrollLeft + vector,
+                })
+            }
+        }
+
         async function addPdfFile(file, nextSiblingElement) {
             const { renderer, pdfDocument } = await loadFile(file);
 
@@ -166,15 +240,10 @@
                 while (!imgContainer.classList.contains("page-container")) {
                     imgContainer = imgContainer.parentNode;
                 }
+                
                 const sibling = imgContainer.previousSibling;
                 if (sibling) {
-                    pagesContainer.removeChild(imgContainer);
-                    pagesContainer.insertBefore(imgContainer, sibling);
-
-                    const { width } = imgContainer.getBoundingClientRect();
-                    pagesContainerWrapper.scroll({
-                        left: pagesContainerWrapper.scrollLeft - width,
-                    })
+                    movePageTo(imgContainer, sibling, true);
                 }
             };
             const moveDownButtonCallback = e => {
@@ -184,16 +253,7 @@
                 }
                 const sibling = imgContainer.nextSibling;
                 if (sibling) {
-                    pagesContainer.removeChild(imgContainer);
-                    if (sibling.nextSibling) {
-                        pagesContainer.insertBefore(imgContainer, sibling.nextSibling);
-                    } else {
-                        pagesContainer.appendChild(imgContainer)
-                    }
-                    const { width } = imgContainer.getBoundingClientRect();
-                    pagesContainerWrapper.scroll({
-                        left: pagesContainerWrapper.scrollLeft + width,
-                    })
+                    movePageTo(imgContainer, sibling.nextSibling, true);
                 }
             };
             const rotateCCWButtonCallback = e => {
@@ -231,6 +291,23 @@
 
             for (var i=0; i < renderer.pageCount; i++) {
                 const div = document.createElement('div');
+
+                div.addEventListener('dragstart', (e) => {
+                    startDraggingPage(div, imageSrc);
+                });
+
+                div.addEventListener('mouseenter', () => {
+                    if (pageDragging) {
+                        hoveredEl = div;
+                        div.classList.add('draghover');
+                    }
+                })
+
+                div.addEventListener('mouseleave', () => {
+                    hoveredEl = undefined;
+                    div.classList.remove('draghover');
+                })
+
                 div.classList.add("page-container");
 
                     var img = document.createElement('img');
@@ -525,12 +602,35 @@
             text-align: center;
             position: relative;
             user-select: none;
+            transition: width 1s linear;
 
         }
 
+        .page-container.dragging {
+            width: 0px;
+            visibility: hidden;
+        }
+
+        .page-container.draghover {
+            width: 500px !important;
+        }
+
+        .page-container.draghover .insert-file-button-container {
+            display: none !important;
+        }
+
+        .page-container.draghover .button-container {
+            visibility: hidden !important;
+        }
+
+        .page-container.draghover img {
+            left: calc(50% + 125px) !important;
+        }
+
         .page-container img {
-            max-width: calc(100% - 15px);
+            /* max-width: calc(100% - 15px); */
             max-height: calc(100% - 15px);
+            max-width: 237px;
             display: block;
             position: absolute;
             left: 50%;
@@ -671,6 +771,27 @@
             }
         }
 
+        #drag-container {
+            position: fixed;
+            display:flex;
+            inset: 0;
+            pointer-events: none;
+            z-index: 10000;
+            visibility: hidden;
+        }
+
+        #drag-container:not(:empty) {
+            visibility: visible;
+        }
+
+        #drag-container .dragged-img {
+            position: fixed;
+            max-width: 200px;
+            max-height: 200px;
+            transform: translate(-50%, -50%);
+            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.58);
+        }
+
         #add-pdf-button {
             margin: 0 auto;
         }

From e8a91d263180770a4289a70a3534bee158d4034b Mon Sep 17 00:00:00 2001
From: jordy <jordyvandertang@hotmail.com>
Date: Fri, 28 Apr 2023 21:20:56 +0200
Subject: [PATCH 2/6] refactor JS

Rather than having all the JS all in one big file, separate the code into modules.
---
 .../resources/static/js/multitool/dragDrop.js |  88 ++++
 .../static/js/multitool/horizontalScroll.js   |  37 ++
 .../static/js/multitool/imageHighlighter.js   |  27 +
 .../static/js/multitool/pdfActions.js         | 156 ++++++
 .../static/js/multitool/pdfContainer.js       | 217 ++++++++
 src/main/resources/templates/multi-tool.html  | 471 +-----------------
 6 files changed, 541 insertions(+), 455 deletions(-)
 create mode 100644 src/main/resources/static/js/multitool/dragDrop.js
 create mode 100644 src/main/resources/static/js/multitool/horizontalScroll.js
 create mode 100644 src/main/resources/static/js/multitool/imageHighlighter.js
 create mode 100644 src/main/resources/static/js/multitool/pdfActions.js
 create mode 100644 src/main/resources/static/js/multitool/pdfContainer.js

diff --git a/src/main/resources/static/js/multitool/dragDrop.js b/src/main/resources/static/js/multitool/dragDrop.js
new file mode 100644
index 00000000..7a1066fd
--- /dev/null
+++ b/src/main/resources/static/js/multitool/dragDrop.js
@@ -0,0 +1,88 @@
+
+
+class DragDropManager {
+    dragContainer;
+    movePageTo;
+    pageDragging;
+    draggelEl;
+    draggedImageEl;
+    hoveredEl;
+
+    constructor(id, movePageTo) {
+        this.dragContainer = document.getElementById(id);
+        this.movePageTo = movePageTo;
+        this.pageDragging = false;
+        this.hoveredEl = undefined;
+        this.draggelEl = undefined
+        this.draggedImageEl = undefined;
+
+        this.startDraggingPage = this.startDraggingPage.bind(this);
+        this.onDragEl = this.onDragEl.bind(this);
+        this.stopDraggingPage = this.stopDraggingPage.bind(this);
+        this.attachDragDropCallbacks = this.attachDragDropCallbacks.bind(this);
+
+    }
+
+    startDraggingPage(div, imageSrc) {
+        this.pageDragging = true;
+        this.draggedEl = div;
+        div.classList.add('dragging');
+        const imgEl = document.createElement('img');
+        imgEl.classList.add('dragged-img');
+        imgEl.src = imageSrc;
+        this.draggedImageEl = imgEl;
+        this.draggedImageEl.style.left = screenX;
+        this.draggedImageEl.style.right = screenY;
+        this.dragContainer.appendChild(imgEl);
+        window.addEventListener('mouseup', (e) => {
+            this.stopDraggingPage();
+        })
+        window.addEventListener('mousemove', this.onDragEl)
+    }
+
+    onDragEl(mouseEvent) {
+        const { clientX, clientY } = mouseEvent;
+        if(this.draggedImageEl) {
+            this.draggedImageEl.style.left = `${clientX}px`;
+            this.draggedImageEl.style.top = `${clientY}px`;
+        }
+    }
+
+    
+    stopDraggingPage() {
+        window.removeEventListener('mousemove', this.onDragEl);
+        this.draggedImageEl = undefined;
+        this.pageDragging = false;
+        this.draggedEl.classList.remove('dragging');
+        this.hoveredEl.classList.remove('draghover');
+        this.dragContainer.childNodes.forEach((dragChild) => {
+            this.dragContainer.removeChild(dragChild);
+        })
+        this.movePageTo(this.draggedEl, this.hoveredEl);
+    }
+
+
+    attachDragDropCallbacks(div, imageSrc) {
+        const onDragStart = () => {
+            this.startDraggingPage(div, imageSrc);
+        }
+        
+        const onMouseEnter = () => {
+            if (this.pageDragging) {
+                this.hoveredEl = div;
+                div.classList.add('draghover');
+            }
+        }
+
+        const onMouseLeave = () => {
+            this.hoveredEl = undefined
+            div.classList.remove('draghover');
+        }
+
+        div.addEventListener('dragstart', onDragStart);
+        div.addEventListener('mouseenter', onMouseEnter);
+        div.addEventListener('mouseleave', onMouseLeave);
+    }
+}
+
+export default DragDropManager;
\ No newline at end of file
diff --git a/src/main/resources/static/js/multitool/horizontalScroll.js b/src/main/resources/static/js/multitool/horizontalScroll.js
new file mode 100644
index 00000000..c1c5ca87
--- /dev/null
+++ b/src/main/resources/static/js/multitool/horizontalScroll.js
@@ -0,0 +1,37 @@
+
+
+const scrollDivHorizontally = (id) => {
+    var scrollDelta = 0; // variable to store the accumulated scroll delta
+    var isScrolling = false; // variable to track if scroll is already in progress
+    const pagesContainerWrapper = document.getElementById(id);
+    function scrollLoop() {
+        // Scroll the div horizontally by a fraction of the accumulated scroll delta
+        pagesContainerWrapper.scrollLeft += scrollDelta * 0.1;
+
+        // Reduce the accumulated scroll delta by a fraction
+        scrollDelta *= 0.9;
+
+        // If scroll delta is still significant, continue the scroll loop
+        if (Math.abs(scrollDelta) > 0.1) {
+            requestAnimationFrame(scrollLoop);
+        } else {
+            isScrolling = false; // Reset scroll in progress flag
+        }
+    }
+
+    const divToScrollHorizontally = document.getElementById(id)
+    divToScrollHorizontally.addEventListener("wheel", function(e) {
+        e.preventDefault(); // prevent default mousewheel behavior
+
+        // Accumulate the horizontal scroll delta
+        scrollDelta -= e.deltaX || e.wheelDeltaX || -e.deltaY || -e.wheelDeltaY;
+
+        // If scroll is not already in progress, start the scroll loop
+        if (!isScrolling) {
+            isScrolling = true;
+            requestAnimationFrame(scrollLoop);
+        }
+    });
+}
+
+export default scrollDivHorizontally;
diff --git a/src/main/resources/static/js/multitool/imageHighlighter.js b/src/main/resources/static/js/multitool/imageHighlighter.js
new file mode 100644
index 00000000..15f54c98
--- /dev/null
+++ b/src/main/resources/static/js/multitool/imageHighlighter.js
@@ -0,0 +1,27 @@
+const getImageHighlighterCallback = (id) => {
+    const imageHighlighter = document.getElementById(id);
+    imageHighlighter.onclick = () => {
+        imageHighlighter.childNodes.forEach((child) => {
+            child.classList.add('remove');
+            setTimeout(() => {
+                imageHighlighter.removeChild(child);
+            }, 100)
+        })
+    }
+
+    const imageHighlightCallback = (highlightEvent) => {
+        var bigImg = document.createElement('img');
+        bigImg.onclick = (imageClickEvent) => {
+            // This prevents the highlighter's onClick from closing the image when clicking on the image
+            // instead of next to it.
+            imageClickEvent.preventDefault();
+            imageClickEvent.stopPropagation();
+        };
+        bigImg.src = highlightEvent.target.src;
+        imageHighlighter.appendChild(bigImg);
+    };
+
+    return imageHighlightCallback
+}
+
+export default getImageHighlighterCallback;
\ No newline at end of file
diff --git a/src/main/resources/static/js/multitool/pdfActions.js b/src/main/resources/static/js/multitool/pdfActions.js
new file mode 100644
index 00000000..14bfc349
--- /dev/null
+++ b/src/main/resources/static/js/multitool/pdfActions.js
@@ -0,0 +1,156 @@
+class PdfActionsManager {
+    callbacks;
+    pageDirection;
+    constructor(id, { movePageTo, addPdfs, rotateElement }) {
+        this.pageDirection = document.documentElement.getAttribute("lang-direction");
+        const moveUpButtonCallback = e => {
+            var imgContainer = e.target;
+            while (!imgContainer.classList.contains(id)) {
+                imgContainer = imgContainer.parentNode;
+            }
+            
+            const sibling = imgContainer.previousSibling;
+            if (sibling) {
+                movePageTo(imgContainer, sibling, true);
+            }
+        };
+        const moveDownButtonCallback = e => {
+            var imgContainer = e.target;
+            while (!imgContainer.classList.contains(id)) {
+                imgContainer = imgContainer.parentNode;
+            }
+            const sibling = imgContainer.nextSibling;
+            if (sibling) {
+                movePageTo(imgContainer, sibling.nextSibling, true);
+            }
+        };
+        const rotateCCWButtonCallback = e => {
+            var imgContainer = e.target;
+            while (!imgContainer.classList.contains(id)) {
+                imgContainer = imgContainer.parentNode;
+            }
+            const img = imgContainer.querySelector("img");
+            
+            rotateElement(img, -90)
+        };
+        const rotateCWButtonCallback = e => {
+            var imgContainer = e.target;
+            while (!imgContainer.classList.contains(id)) {
+                imgContainer = imgContainer.parentNode;
+            }
+            const img = imgContainer.querySelector("img");
+            
+            rotateElement(img, 90)
+        };
+        const deletePageButtonCallback = e => {
+            var imgContainer = e.target;
+            while (!imgContainer.classList.contains(id)) {
+                imgContainer = imgContainer.parentNode;
+            }
+            pagesContainer.removeChild(imgContainer);
+        };
+        const insertFileButtonCallback = e => {
+            var imgContainer = e.target;
+            while (!imgContainer.classList.contains(id)) {
+                imgContainer = imgContainer.parentNode;
+            }
+            addPdfs(imgContainer)
+        };
+
+        this.callbacks = {
+            moveUpButtonCallback,
+            moveDownButtonCallback,
+            rotateCCWButtonCallback,
+            rotateCWButtonCallback,
+            deletePageButtonCallback,
+            insertFileButtonCallback
+        }
+    }
+
+    attachPDFActions(div) {
+        const leftDirection = this.pageDirection === 'rtl' ? 'right' : 'left'
+        const rightDirection = this.pageDirection === 'rtl' ? 'left' : 'right'
+        const buttonContainer = document.createElement('div');
+
+        buttonContainer.classList.add("button-container");
+                    
+        const moveUp = document.createElement('button');
+        moveUp.classList.add("move-left-button","btn", "btn-secondary");
+        moveUp.innerHTML = `<i class="bi bi-arrow-${leftDirection}-short"></i>`;
+        moveUp.onclick = this.callbacks.moveUpButtonCallback;
+        buttonContainer.appendChild(moveUp);
+
+        const moveDown = document.createElement('button');
+        moveDown.classList.add("move-right-button","btn", "btn-secondary");
+        moveDown.innerHTML = `<i class="bi bi-arrow-${rightDirection}-short"></i>`;
+        moveDown.onclick = this.callbacks.moveDownButtonCallback;
+        buttonContainer.appendChild(moveDown);
+        
+        const rotateCCW = document.createElement('button');
+        rotateCCW.classList.add("btn", "btn-secondary");
+        rotateCCW.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
+                            <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>`;
+        rotateCCW.onclick = this.callbacks.rotateCCWButtonCallback;
+        buttonContainer.appendChild(rotateCCW);
+
+        const rotateCW = document.createElement('button');
+        rotateCW.classList.add("btn", "btn-secondary");
+        rotateCW.innerHTML = `<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" />
+                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
+                        </svg>`;
+        rotateCW.onclick = this.callbacks.rotateCWButtonCallback;
+        buttonContainer.appendChild(rotateCW);
+
+        const deletePage = document.createElement('button');
+        deletePage.classList.add("btn", "btn-danger");
+        deletePage.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
+                            <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
+                        </svg>`;
+        deletePage.onclick = this.callbacks.deletePageButtonCallback;
+        buttonContainer.appendChild(deletePage);
+
+        div.appendChild(buttonContainer);
+
+        const insertFileButtonContainer = document.createElement('div');
+                
+        insertFileButtonContainer.classList.add(
+            "insert-file-button-container",
+            leftDirection,
+            `align-center-${leftDirection}`);
+        
+        const insertFileButton = document.createElement('button');
+        insertFileButton.classList.add("btn", "btn-primary", "insert-file-button");
+        insertFileButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
+                                <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
+                                <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
+                            </svg>`;
+        insertFileButton.onclick = this.callbacks.insertFileButtonCallback;
+        insertFileButtonContainer.appendChild(insertFileButton);
+        
+        div.appendChild(insertFileButtonContainer);
+        
+        // add this button to every element, but only show it on the last one :D
+        const insertFileButtonRightContainer = document.createElement('div');
+        insertFileButtonRightContainer.classList.add(
+            "insert-file-button-container",
+            rightDirection,
+            `align-center-${rightDirection}`);
+        
+        const insertFileButtonRight = document.createElement('button');
+        insertFileButtonRight.classList.add("btn", "btn-primary", "insert-file-button");
+        insertFileButtonRight.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
+                                <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
+                                <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
+                                insertFileButtonRight</svg>`;
+        insertFileButtonRight.onclick = () => addPdfs();
+        insertFileButtonRightContainer.appendChild(insertFileButtonRight);
+
+        div.appendChild(insertFileButtonRightContainer);
+    }
+}
+
+export default PdfActionsManager;
\ No newline at end of file
diff --git a/src/main/resources/static/js/multitool/pdfContainer.js b/src/main/resources/static/js/multitool/pdfContainer.js
new file mode 100644
index 00000000..64c5efa4
--- /dev/null
+++ b/src/main/resources/static/js/multitool/pdfContainer.js
@@ -0,0 +1,217 @@
+import DragDropManager from "./dragDrop.js";
+import scrollDivHorizontally from "./horizontalScroll.js";
+import getImageHighlighterCallback from "./imageHighlighter.js";
+import PdfActionsManager from './pdfActions.js';
+
+const createPdfContainer = (id, wrapperId, highlighterId, dragElId) => {
+    var fileName = null;
+    const pagesContainer = document.getElementById(id);
+    const pagesContainerWrapper = document.getElementById(wrapperId);
+
+
+    const movePageTo = (startElement, endElement, scrollTo = false) => {
+        const childArray = Array.from(pagesContainer.childNodes);
+        const startIndex = childArray.indexOf(startElement);
+        const endIndex = childArray.indexOf(endElement);
+        pagesContainer.removeChild(startElement);
+        if(!endElement) {
+            pagesContainer.append(startElement);
+        } else {
+            pagesContainer.insertBefore(startElement, endElement);
+        }
+
+        if(scrollTo) {
+            const { width } = startElement.getBoundingClientRect();
+            const vector = (endIndex !== -1 && startIndex > endIndex)
+                ?  0-width
+                : width;
+            
+            pagesContainerWrapper.scroll({
+                left: pagesContainerWrapper.scrollLeft + vector,
+            })
+        }
+    }
+
+    function addPdfs(nextSiblingElement) {
+        var input = document.createElement('input');
+        input.type = 'file';
+        input.multiple = true;
+        input.setAttribute("accept", "application/pdf");
+
+        input.onchange = async(e) => {
+            const files = e.target.files;
+            fileName = files[0].name;
+            for (var i=0; i < files.length; i++) {
+                addPdfFile(files[i], nextSiblingElement);
+            }
+
+            document.querySelectorAll(".enable-on-file").forEach(element => {
+                element.disabled = false;
+            });
+        }
+
+        input.click();
+    }
+
+    function rotateElement(element, deg) {
+        var lastTransform = element.style.rotate;
+        if (!lastTransform) {
+            lastTransform = "0";
+        }
+        const lastAngle = parseInt(lastTransform.replace(/[^\d-]/g, ''));
+        const newAngle = lastAngle + deg;
+
+        element.style.rotate = newAngle + "deg";
+    }
+    
+    scrollDivHorizontally(wrapperId);
+
+    var imageHighlighterCallback;
+    if (highlighterId) {
+        imageHighlighterCallback = getImageHighlighterCallback(highlighterId);
+    }
+    var dragDropManager;
+    if(dragElId) {
+        dragDropManager = new DragDropManager('drag-container', movePageTo);
+    }
+
+    var pdfActionManager = new PdfActionsManager('page-container', { movePageTo, addPdfs, rotateElement });
+
+    async function addPdfFile(file, nextSiblingElement) {
+        const { renderer, pdfDocument } = await loadFile(file);
+
+        for (var i=0; i < renderer.pageCount; i++) {
+            const div = document.createElement('div');
+
+            div.classList.add("page-container");
+
+            var img = document.createElement('img');
+            img.classList.add('page-image')
+            const imageSrc = await renderer.renderPage(i)
+            img.src = imageSrc;
+            img.pageIdx = i;
+            img.rend = renderer;
+            img.doc = pdfDocument;
+            div.appendChild(img);
+
+            
+            if(dragDropManager) {
+                dragDropManager.attachDragDropCallbacks(div, imageSrc);
+            }
+
+            /**
+             *  Making pages larger when clicking on them
+             */
+            if(imageHighlighterCallback) {
+                img.addEventListener('click', imageHighlighterCallback)
+            }
+
+            /**
+             *  Rendering the various buttons to manipulate and move pdf pages
+             */
+            pdfActionManager.attachPDFActions(div);
+
+            if (nextSiblingElement) {
+                pagesContainer.insertBefore(div, nextSiblingElement);
+            } else {
+                pagesContainer.appendChild(div);
+            }
+        }
+    }
+
+    async function toRenderer(objectUrl) {
+        const pdf = await pdfjsLib.getDocument(objectUrl).promise;
+        return {
+            document: pdf,
+            pageCount: pdf.numPages,
+            renderPage: async function(pageIdx) {
+                const page = await this.document.getPage(pageIdx+1);
+
+                const canvas = document.createElement("canvas");
+
+                // set the canvas size to the size of the page
+                if (page.rotate == 90 || page.rotate == 270) {
+                    canvas.width = page.view[3];
+                    canvas.height = page.view[2];
+                } else {
+                    canvas.width = page.view[2];
+                    canvas.height = page.view[3];
+                }
+
+                // render the page onto the canvas
+                var renderContext = {
+                    canvasContext: canvas.getContext("2d"),
+                    viewport: page.getViewport({ scale: 1 })
+                };
+
+                await page.render(renderContext).promise;
+                return canvas.toDataURL();
+            }
+        };
+    }
+
+    async function toPdfLib(objectUrl) {
+        const existingPdfBytes = await fetch(objectUrl).then(res => res.arrayBuffer());
+        const pdfDoc = await PDFLib.PDFDocument.load(existingPdfBytes);
+        return pdfDoc;
+    }
+
+    async function loadFile(file) {
+        var objectUrl = URL.createObjectURL(file);
+        var pdfDocument = await toPdfLib(objectUrl);
+        var renderer = await toRenderer(objectUrl);
+        return { renderer, pdfDocument };
+    }
+
+    function rotateAll(deg) {
+        for (var i=0; i<pagesContainer.childNodes.length; i++) {
+            const img = pagesContainer.childNodes[i].querySelector("img");
+            if (!img) continue;
+            rotateElement(img, deg)
+        }
+    }
+
+    async function exportPdf() {
+        const pdfDoc = await PDFLib.PDFDocument.create();
+        for (var i=0; i<pagesContainer.childNodes.length; i++) {
+            const img = pagesContainer.childNodes[i].querySelector("img");
+            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();
+        const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });
+        const url = URL.createObjectURL(pdfBlob);
+        const downloadOption = localStorage.getItem('downloadOption');
+
+        if (downloadOption === 'sameWindow') {
+            // Open the file in the same window
+            window.location.href = url;
+        } else if (downloadOption === 'newWindow') {
+            // Open the file in a new window
+            window.open(url, '_blank');
+        } else {
+            // Download the file
+            const downloadLink = document.createElement('a');
+            downloadLink.href = url;
+            downloadLink.download = fileName ? fileName : 'managed.pdf';
+            downloadLink.click();
+        }
+    }
+
+    return {
+        addPdfs,
+        rotateAll,
+        exportPdf,
+    }
+}
+
+export default createPdfContainer;
diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index 44f31007..ef8900c3 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -3,7 +3,6 @@
 
 <th:block th:insert="~{fragments/common :: head(title=#{multiTool.title})}"></th:block>
 
-
 <body>
     <div id="image-highlighter"></div>
     <div id="page-container">
@@ -60,460 +59,22 @@
         <div th:insert="~{fragments/footer.html :: footer}"></div>
     </div>
     <div id="drag-container"></div>
-    <script>
-        var fileName = null;
-
-        /**
-         * 
-         *  Manage Page container scroll
-         * 
-         */
-        const pagesContainer = document.getElementById("pages-container");
-        const pagesContainerWrapper = document.getElementById("pages-container-wrapper")
-
-        const pageDirection = document.documentElement.getAttribute("lang-direction");
-        var pageDragging = false;
-        var scrollDelta = 0; // variable to store the accumulated scroll delta
-        var isScrolling = false; // variable to track if scroll is already in progress
-
-        pagesContainerWrapper.addEventListener("wheel", function(e) {
-            e.preventDefault(); // prevent default mousewheel behavior
-
-            // Accumulate the horizontal scroll delta
-            scrollDelta -= e.deltaX || e.wheelDeltaX || -e.deltaY || -e.wheelDeltaY;
-
-            // If scroll is not already in progress, start the scroll loop
-            if (!isScrolling) {
-                isScrolling = true;
-                requestAnimationFrame(scrollLoop);
-            }
-        });
-
-        function scrollLoop() {
-            // Scroll the div horizontally by a fraction of the accumulated scroll delta
-            pagesContainerWrapper.scrollLeft += scrollDelta * 0.1;
-
-            // Reduce the accumulated scroll delta by a fraction
-            scrollDelta *= 0.9;
-
-            // If scroll delta is still significant, continue the scroll loop
-            if (Math.abs(scrollDelta) > 0.1) {
-                requestAnimationFrame(scrollLoop);
-            } else {
-                isScrolling = false; // Reset scroll in progress flag
-            }
-        }
-
-        /**
-         * 
-         *  Manage image highlighter clearing
-         * 
-         */
-        const imageHighlighter = document.getElementById('image-highlighter');
-        imageHighlighter.onclick = () => {
-            imageHighlighter.childNodes.forEach((child) => {
-                child.classList.add('remove');
-                setTimeout(() => {
-                    imageHighlighter.removeChild(child);
-                }, 100)
-            })
-        }
-
-        const imageHighlightCallback = (highlightEvent) => {
-            var bigImg = document.createElement('img');
-            bigImg.onclick = (imageClickEvent) => {
-                // This prevents the highlighter's onClick from closing the image when clicking on the image
-                // instead of next to it.
-                imageClickEvent.preventDefault();
-                imageClickEvent.stopPropagation();
-            };
-            bigImg.src = highlightEvent.target.src;
-            imageHighlighter.appendChild(bigImg);
-        }
-
-        
-        /**
-         * 
-         *  Manage visual aspect of dragging images
-         * 
-         */
-        const dragContainer = document.getElementById('drag-container');
-        var draggedEl;
-        var draggedImageEl;
-        var hoveredEl;
-
-        const startDraggingPage = (div, imageSrc) => {
-            pageDragging = true;
-            draggedEl = div;
-            div.classList.add('dragging');
-            const imgEl = document.createElement('img');
-            imgEl.classList.add('dragged-img');
-            imgEl.src = imageSrc;
-            draggedImageEl = imgEl;
-            draggedImageEl.style.left = screenX;
-            draggedImageEl.style.right = screenY;
-            dragContainer.appendChild(imgEl);
-            window.addEventListener('mouseup', (e) => {
-                stopDraggingPage();
-            })
-            window.addEventListener('mousemove', onDragEl)
-            
-        }
-
-        const onDragEl = (mouseEvent) => {
-            const { clientX, clientY } = mouseEvent;
-            if(draggedImageEl) {
-                draggedImageEl.style.left = `${clientX}px`;
-                draggedImageEl.style.top = `${clientY}px`;
-            }
-        }
-
-        const stopDraggingPage = () => {
-            window.removeEventListener('mousemove', onDragEl);
-            draggedImageEl = undefined;
-            pageDragging = false;
-            draggedEl.classList.remove('dragging');
-            hoveredEl.classList.remove('draghover');
-            dragContainer.childNodes.forEach((dragChild) => {
-                dragContainer.removeChild(dragChild);
-            })
-            movePageTo(draggedEl, hoveredEl);
-        }
-
-
-        /**
-         * 
-         * Methods for managing PDFs
-         * 
-         */
-        function addPdfs(nextSiblingElement) {
-            var input = document.createElement('input');
-            input.type = 'file';
-            input.multiple = true;
-            input.setAttribute("accept", "application/pdf");
-
-            input.onchange = async(e) => {
-                const files = e.target.files;
-                fileName = files[0].name;
-                for (var i=0; i < files.length; i++) {
-                    addPdfFile(files[i], nextSiblingElement);
-                }
-
-                document.querySelectorAll(".enable-on-file").forEach(element => {
-                    element.disabled = false;
-                });
-            }
-
-            input.click();
-        }
-
-        
-        const movePageTo = (startElement, endElement, scrollTo = false) => {
-            const childArray = Array.from(pagesContainer.childNodes);
-            const startIndex = childArray.indexOf(startElement);
-            const endIndex = childArray.indexOf(endElement);
-            pagesContainer.removeChild(startElement);
-            if(!endElement) {
-                pagesContainer.append(startElement);
-            } else {
-                pagesContainer.insertBefore(startElement, endElement);
-            }
-
-            if(scrollTo) {
-                const { width } = startElement.getBoundingClientRect();
-                const vector = (endIndex !== -1 && startIndex > endIndex)
-                    ?  0-width
-                    : width;
-                
-                pagesContainerWrapper.scroll({
-                    left: pagesContainerWrapper.scrollLeft + vector,
-                })
-            }
-        }
-
-        async function addPdfFile(file, nextSiblingElement) {
-            const { renderer, pdfDocument } = await loadFile(file);
-
-            const moveUpButtonCallback = e => {
-                var imgContainer = e.target;
-                const startingPosition = imgContainer.getBoundingClientRect();
-                while (!imgContainer.classList.contains("page-container")) {
-                    imgContainer = imgContainer.parentNode;
-                }
-                
-                const sibling = imgContainer.previousSibling;
-                if (sibling) {
-                    movePageTo(imgContainer, sibling, true);
-                }
-            };
-            const moveDownButtonCallback = e => {
-                var imgContainer = e.target;
-                while (!imgContainer.classList.contains("page-container")) {
-                    imgContainer = imgContainer.parentNode;
-                }
-                const sibling = imgContainer.nextSibling;
-                if (sibling) {
-                    movePageTo(imgContainer, sibling.nextSibling, true);
-                }
-            };
-            const rotateCCWButtonCallback = e => {
-                var imgContainer = e.target;
-                while (!imgContainer.classList.contains("page-container")) {
-                    imgContainer = imgContainer.parentNode;
-                }
-                const img = imgContainer.querySelector("img");
-                
-                rotateElement(img, -90)
-            };
-            const rotateCWButtonCallback = e => {
-                var imgContainer = e.target;
-                while (!imgContainer.classList.contains("page-container")) {
-                    imgContainer = imgContainer.parentNode;
-                }
-                const img = imgContainer.querySelector("img");
-                
-                rotateElement(img, 90)
-            };
-            const deletePageButtonCallback = e => {
-                var imgContainer = e.target;
-                while (!imgContainer.classList.contains("page-container")) {
-                    imgContainer = imgContainer.parentNode;
-                }
-                pagesContainer.removeChild(imgContainer);
-            };
-            const insertFileButtonCallback = e => {
-                var imgContainer = e.target;
-                while (!imgContainer.classList.contains("page-container")) {
-                    imgContainer = imgContainer.parentNode;
-                }
-                addPdfs(imgContainer)
-            };
-
-            for (var i=0; i < renderer.pageCount; i++) {
-                const div = document.createElement('div');
-
-                div.addEventListener('dragstart', (e) => {
-                    startDraggingPage(div, imageSrc);
-                });
-
-                div.addEventListener('mouseenter', () => {
-                    if (pageDragging) {
-                        hoveredEl = div;
-                        div.classList.add('draghover');
-                    }
-                })
-
-                div.addEventListener('mouseleave', () => {
-                    hoveredEl = undefined;
-                    div.classList.remove('draghover');
-                })
-
-                div.classList.add("page-container");
-
-                    var img = document.createElement('img');
-                    img.classList.add('page-image')
-                    const imageSrc = await renderer.renderPage(i)
-                    img.src = imageSrc;
-                    img.pageIdx = i;
-                    img.rend = renderer;
-                    img.doc = pdfDocument;
-                    div.appendChild(img);
-
-                    /**
-                     *  Making pages larger when clicking on them
-                     */
-                    img.addEventListener('click',imageHighlightCallback)
-                    
-                    /**
-                     *  Rendering the various buttons to manipulate and move pdf pages
-                     */
-
-                    const leftDirection = pageDirection === 'rtl' ? 'right' : 'left'
-                    const rightDirection = pageDirection === 'rtl' ? 'left' : 'right'
-                    const buttonContainer = document.createElement('div');
-                    buttonContainer.classList.add("button-container");
-                        
-                        const moveUp = document.createElement('button');
-                        moveUp.classList.add("move-left-button","btn", "btn-secondary");
-                        moveUp.innerHTML = `<i class="bi bi-arrow-${leftDirection}-short"></i>`;
-                        moveUp.onclick = moveUpButtonCallback;
-                        buttonContainer.appendChild(moveUp);
-
-                        const moveDown = document.createElement('button');
-                        moveDown.classList.add("move-right-button","btn", "btn-secondary");
-                        moveDown.innerHTML = `<i class="bi bi-arrow-${rightDirection}-short"></i>`;
-                        moveDown.onclick = moveDownButtonCallback;
-                        buttonContainer.appendChild(moveDown);
-                        
-                        const rotateCCW = document.createElement('button');
-                        rotateCCW.classList.add("btn", "btn-secondary");
-                        rotateCCW.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
-                                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
-                                            <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>`;
-                        rotateCCW.onclick = rotateCCWButtonCallback;
-                        buttonContainer.appendChild(rotateCCW);
-
-                        const rotateCW = document.createElement('button');
-                        rotateCW.classList.add("btn", "btn-secondary");
-                        rotateCW.innerHTML = `<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" />
-                                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
-                                        </svg>`;
-                        rotateCW.onclick = rotateCWButtonCallback;
-                        buttonContainer.appendChild(rotateCW);
-
-                        const deletePage = document.createElement('button');
-                        deletePage.classList.add("btn", "btn-danger");
-                        deletePage.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
-                                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
-                                            <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
-                                        </svg>`;
-                        deletePage.onclick = deletePageButtonCallback;
-                        buttonContainer.appendChild(deletePage);
-
-                    div.appendChild(buttonContainer);
-
-                    const insertFileButtonContainer = document.createElement('div');
-                    
-                    insertFileButtonContainer.classList.add(
-                        "insert-file-button-container",
-                        leftDirection,
-                        `align-center-${leftDirection}`);
-                    
-                        const insertFileButton = document.createElement('button');
-                        insertFileButton.classList.add("btn", "btn-primary", "insert-file-button");
-                        insertFileButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
-                                                <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
-                                                <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
-                                            </svg>`;
-                        insertFileButton.onclick = insertFileButtonCallback;
-                        insertFileButtonContainer.appendChild(insertFileButton);
-                    
-                    div.appendChild(insertFileButtonContainer);
-                    
-                    // add this button to every element, but only show it on the last one :D
-                    const insertFileButtonRightContainer = document.createElement('div');
-                    insertFileButtonRightContainer.classList.add(
-                        "insert-file-button-container",
-                        rightDirection,
-                        `align-center-${rightDirection}`);
-                    
-                        const insertFileButtonRight = document.createElement('button');
-                        insertFileButtonRight.classList.add("btn", "btn-primary", "insert-file-button");
-                        insertFileButtonRight.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
-                                                <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
-                                                <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
-                                                insertFileButtonRight</svg>`;
-                        insertFileButtonRight.onclick = () => addPdfs();
-                        insertFileButtonRightContainer.appendChild(insertFileButtonRight);
-
-                    div.appendChild(insertFileButtonRightContainer);
-
-                if (nextSiblingElement) {
-                    pagesContainer.insertBefore(div, nextSiblingElement);
-                } else {
-                    pagesContainer.appendChild(div);
-                }
-            }
-        }
-
-        function rotateElement(element, deg) {
-            var lastTransform = element.style.rotate;
-            if (!lastTransform) {
-                lastTransform = "0";
-            }
-            const lastAngle = parseInt(lastTransform.replace(/[^\d-]/g, ''));
-            const newAngle = lastAngle + deg;
-
-            element.style.rotate = newAngle + "deg";
-        }
-
-        function rotateAll(deg) {
-            for (var i=0; i<pagesContainer.childNodes.length; i++) {
-                const img = pagesContainer.childNodes[i].querySelector("img");
-                if (!img) continue;
-                rotateElement(img, deg)
-            }
-        }
-
-        async function exportPdf() {
-            const pdfDoc = await PDFLib.PDFDocument.create();
-            for (var i=0; i<pagesContainer.childNodes.length; i++) {
-                const img = pagesContainer.childNodes[i].querySelector("img");
-                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();
-            const pdfBlob = new Blob([pdfBytes], { type: 'application/pdf' });
-            const url = URL.createObjectURL(pdfBlob);
-            const downloadOption = localStorage.getItem('downloadOption');
-
-            if (downloadOption === 'sameWindow') {
-                // Open the file in the same window
-                window.location.href = url;
-            } else if (downloadOption === 'newWindow') {
-                // Open the file in a new window
-                window.open(url, '_blank');
-            } else {
-                // Download the file
-                const downloadLink = document.createElement('a');
-                downloadLink.href = url;
-                downloadLink.download = fileName ? fileName : 'managed.pdf';
-                downloadLink.click();
-            }
-        }
-
-        async function loadFile(file) {
-            var objectUrl = URL.createObjectURL(file);
-            var pdfDocument = await toPdfLib(objectUrl);
-            var renderer = await toRenderer(objectUrl);
-            return { renderer, pdfDocument };
-        }
-        async function toPdfLib(objectUrl) {
-            const existingPdfBytes = await fetch(objectUrl).then(res => res.arrayBuffer());
-            const pdfDoc = await PDFLib.PDFDocument.load(existingPdfBytes);
-            return pdfDoc;
-        }
-        async function toRenderer(objectUrl) {
-            const pdf = await pdfjsLib.getDocument(objectUrl).promise;
-            return {
-                document: pdf,
-                pageCount: pdf.numPages,
-                renderPage: async function(pageIdx) {
-                    const page = await this.document.getPage(pageIdx+1);
-
-                    const canvas = document.createElement("canvas");
-
-                    // set the canvas size to the size of the page
-                    if (page.rotate == 90 || page.rotate == 270) {
-                        canvas.width = page.view[3];
-                        canvas.height = page.view[2];
-                    } else {
-                        canvas.width = page.view[2];
-                        canvas.height = page.view[3];
-                    }
-
-                    // render the page onto the canvas
-                    var renderContext = {
-                        canvasContext: canvas.getContext("2d"),
-                        viewport: page.getViewport({ scale: 1 })
-                    };
-
-                    await page.render(renderContext).promise;
-                    return canvas.toDataURL();
-                }
-            };
-        }
+    
+    <script type="module">
+        import createPdfContainer from '/js/multitool/pdfContainer.js';
+        const {
+            addPdfs,
+            exportPdf,
+            rotateAll,
+        } = createPdfContainer(
+            'pages-container',
+            'pages-container-wrapper',
+            'image-highlighter',
+            'drag-container'
+        );
+        window.addPdfs = addPdfs;
+        window.exportPdf = exportPdf;
+        window.rotateAll = rotateAll;
     </script>
 
     <style>

From 9a1510a4f12fcf224498c3b764b39cd264fb43bb Mon Sep 17 00:00:00 2001
From: jordy <jordyvandertang@hotmail.com>
Date: Sat, 29 Apr 2023 12:43:12 +0200
Subject: [PATCH 3/6] further refactor js

Turn the div adapters into injectable files so that each PdfContainer can be customized. And the adapters can be used in different PdfContainers as well.
---
 .../{dragDrop.js => DragDropManager.js}       |  20 +--
 .../{pdfActions.js => PdfActionsManager.js}   | 146 +++++++++---------
 .../static/js/multitool/horizontalScroll.js   |   8 +-
 .../static/js/multitool/imageHighlighter.js   |  42 +++--
 .../static/js/multitool/pdfContainer.js       | 141 ++++++++---------
 src/main/resources/templates/multi-tool.html  |  39 +++--
 6 files changed, 206 insertions(+), 190 deletions(-)
 rename src/main/resources/static/js/multitool/{dragDrop.js => DragDropManager.js} (88%)
 rename src/main/resources/static/js/multitool/{pdfActions.js => PdfActionsManager.js} (66%)

diff --git a/src/main/resources/static/js/multitool/dragDrop.js b/src/main/resources/static/js/multitool/DragDropManager.js
similarity index 88%
rename from src/main/resources/static/js/multitool/dragDrop.js
rename to src/main/resources/static/js/multitool/DragDropManager.js
index 7a1066fd..90354551 100644
--- a/src/main/resources/static/js/multitool/dragDrop.js
+++ b/src/main/resources/static/js/multitool/DragDropManager.js
@@ -8,9 +8,8 @@ class DragDropManager {
     draggedImageEl;
     hoveredEl;
 
-    constructor(id, movePageTo) {
+    constructor(id) {
         this.dragContainer = document.getElementById(id);
-        this.movePageTo = movePageTo;
         this.pageDragging = false;
         this.hoveredEl = undefined;
         this.draggelEl = undefined
@@ -19,8 +18,6 @@ class DragDropManager {
         this.startDraggingPage = this.startDraggingPage.bind(this);
         this.onDragEl = this.onDragEl.bind(this);
         this.stopDraggingPage = this.stopDraggingPage.bind(this);
-        this.attachDragDropCallbacks = this.attachDragDropCallbacks.bind(this);
-
     }
 
     startDraggingPage(div, imageSrc) {
@@ -34,9 +31,7 @@ class DragDropManager {
         this.draggedImageEl.style.left = screenX;
         this.draggedImageEl.style.right = screenY;
         this.dragContainer.appendChild(imgEl);
-        window.addEventListener('mouseup', (e) => {
-            this.stopDraggingPage();
-        })
+        window.addEventListener('mouseup', this.stopDraggingPage)
         window.addEventListener('mousemove', this.onDragEl)
     }
 
@@ -51,6 +46,7 @@ class DragDropManager {
     
     stopDraggingPage() {
         window.removeEventListener('mousemove', this.onDragEl);
+        window.removeEventListener('mouseup', this.stopDraggingPage)
         this.draggedImageEl = undefined;
         this.pageDragging = false;
         this.draggedEl.classList.remove('dragging');
@@ -61,10 +57,14 @@ class DragDropManager {
         this.movePageTo(this.draggedEl, this.hoveredEl);
     }
 
+    setActions({ movePageTo }) {
+        this.movePageTo = movePageTo;
+    }
 
-    attachDragDropCallbacks(div, imageSrc) {
+
+    adapt(div) {
         const onDragStart = () => {
-            this.startDraggingPage(div, imageSrc);
+            this.startDraggingPage(div, div.querySelector('img').src);
         }
         
         const onMouseEnter = () => {
@@ -82,6 +82,8 @@ class DragDropManager {
         div.addEventListener('dragstart', onDragStart);
         div.addEventListener('mouseenter', onMouseEnter);
         div.addEventListener('mouseleave', onMouseLeave);
+
+        return div;
     }
 }
 
diff --git a/src/main/resources/static/js/multitool/pdfActions.js b/src/main/resources/static/js/multitool/PdfActionsManager.js
similarity index 66%
rename from src/main/resources/static/js/multitool/pdfActions.js
rename to src/main/resources/static/js/multitool/PdfActionsManager.js
index 14bfc349..b716f1d1 100644
--- a/src/main/resources/static/js/multitool/pdfActions.js
+++ b/src/main/resources/static/js/multitool/PdfActionsManager.js
@@ -1,73 +1,75 @@
 class PdfActionsManager {
-    callbacks;
-    pageDirection;
-    constructor(id, { movePageTo, addPdfs, rotateElement }) {
-        this.pageDirection = document.documentElement.getAttribute("lang-direction");
-        const moveUpButtonCallback = e => {
-            var imgContainer = e.target;
-            while (!imgContainer.classList.contains(id)) {
-                imgContainer = imgContainer.parentNode;
-            }
-            
-            const sibling = imgContainer.previousSibling;
-            if (sibling) {
-                movePageTo(imgContainer, sibling, true);
-            }
-        };
-        const moveDownButtonCallback = e => {
-            var imgContainer = e.target;
-            while (!imgContainer.classList.contains(id)) {
-                imgContainer = imgContainer.parentNode;
-            }
-            const sibling = imgContainer.nextSibling;
-            if (sibling) {
-                movePageTo(imgContainer, sibling.nextSibling, true);
-            }
-        };
-        const rotateCCWButtonCallback = e => {
-            var imgContainer = e.target;
-            while (!imgContainer.classList.contains(id)) {
-                imgContainer = imgContainer.parentNode;
-            }
-            const img = imgContainer.querySelector("img");
-            
-            rotateElement(img, -90)
-        };
-        const rotateCWButtonCallback = e => {
-            var imgContainer = e.target;
-            while (!imgContainer.classList.contains(id)) {
-                imgContainer = imgContainer.parentNode;
-            }
-            const img = imgContainer.querySelector("img");
-            
-            rotateElement(img, 90)
-        };
-        const deletePageButtonCallback = e => {
-            var imgContainer = e.target;
-            while (!imgContainer.classList.contains(id)) {
-                imgContainer = imgContainer.parentNode;
-            }
-            pagesContainer.removeChild(imgContainer);
-        };
-        const insertFileButtonCallback = e => {
-            var imgContainer = e.target;
-            while (!imgContainer.classList.contains(id)) {
-                imgContainer = imgContainer.parentNode;
-            }
-            addPdfs(imgContainer)
-        };
+    pageDirection; 
+    pagesContainer;
 
-        this.callbacks = {
-            moveUpButtonCallback,
-            moveDownButtonCallback,
-            rotateCCWButtonCallback,
-            rotateCWButtonCallback,
-            deletePageButtonCallback,
-            insertFileButtonCallback
+    constructor(id) {
+        this.pagesContainer = document.getElementById(id);
+        this.pageDirection = document.documentElement.getAttribute("lang-direction");
+    }
+
+    getPageContainer(element) {
+        var container = element
+        while (!container.classList.contains('page-container')) {
+            container = container.parentNode;
+        }
+        return container;
+    }
+
+    moveUpButtonCallback(e) {
+        var imgContainer = this.getPageContainer(e.target);
+        
+        const sibling = imgContainer.previousSibling;
+        if (sibling) {
+            this.movePageTo(imgContainer, sibling, true);
         }
     }
 
-    attachPDFActions(div) {
+    moveDownButtonCallback(e) {
+        var imgContainer = this.getPageContainer(e.target);
+        const sibling = imgContainer.nextSibling;
+        if (sibling) {
+            this.movePageTo(imgContainer, sibling.nextSibling, true);
+        }
+    };
+
+    rotateCCWButtonCallback(e) {
+        var imgContainer = this.getPageContainer(e.target);
+        const img = imgContainer.querySelector("img");
+        
+        this.rotateElement(img, -90)
+    };
+
+    rotateCWButtonCallback(e) {
+        var imgContainer = this.getPageContainer(e.target);
+        const img = imgContainer.querySelector("img");
+        
+        this.rotateElement(img, 90)
+    };
+
+    deletePageButtonCallback(e) {
+        var imgContainer = this.getPageContainer(e.target);
+        this.pagesContainer.removeChild(imgContainer);
+    };
+
+    insertFileButtonCallback(e) {
+        var imgContainer = this.getPageContainer(e.target);
+        this.addPdfs(imgContainer)
+    };
+
+    setActions({ movePageTo, addPdfs, rotateElement }) {
+        this.movePageTo = movePageTo;
+        this.addPdfs = addPdfs;
+        this.rotateElement = rotateElement;
+
+        this.moveUpButtonCallback = this.moveUpButtonCallback.bind(this);
+        this.moveDownButtonCallback = this.moveDownButtonCallback.bind(this);
+        this.rotateCCWButtonCallback = this.rotateCCWButtonCallback.bind(this);
+        this.rotateCWButtonCallback = this.rotateCWButtonCallback.bind(this);
+        this.deletePageButtonCallback = this.deletePageButtonCallback.bind(this);
+        this.insertFileButtonCallback = this.insertFileButtonCallback.bind(this);
+    }
+
+    adapt(div) {
         const leftDirection = this.pageDirection === 'rtl' ? 'right' : 'left'
         const rightDirection = this.pageDirection === 'rtl' ? 'left' : 'right'
         const buttonContainer = document.createElement('div');
@@ -77,13 +79,13 @@ class PdfActionsManager {
         const moveUp = document.createElement('button');
         moveUp.classList.add("move-left-button","btn", "btn-secondary");
         moveUp.innerHTML = `<i class="bi bi-arrow-${leftDirection}-short"></i>`;
-        moveUp.onclick = this.callbacks.moveUpButtonCallback;
+        moveUp.onclick = this.moveUpButtonCallback;
         buttonContainer.appendChild(moveUp);
 
         const moveDown = document.createElement('button');
         moveDown.classList.add("move-right-button","btn", "btn-secondary");
         moveDown.innerHTML = `<i class="bi bi-arrow-${rightDirection}-short"></i>`;
-        moveDown.onclick = this.callbacks.moveDownButtonCallback;
+        moveDown.onclick = this.moveDownButtonCallback;
         buttonContainer.appendChild(moveDown);
         
         const rotateCCW = document.createElement('button');
@@ -92,7 +94,7 @@ class PdfActionsManager {
                             <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z" />
                             <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>`;
-        rotateCCW.onclick = this.callbacks.rotateCCWButtonCallback;
+        rotateCCW.onclick = this.rotateCCWButtonCallback;
         buttonContainer.appendChild(rotateCCW);
 
         const rotateCW = document.createElement('button');
@@ -101,7 +103,7 @@ class PdfActionsManager {
                             <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" />
                             <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
                         </svg>`;
-        rotateCW.onclick = this.callbacks.rotateCWButtonCallback;
+        rotateCW.onclick = this.rotateCWButtonCallback;
         buttonContainer.appendChild(rotateCW);
 
         const deletePage = document.createElement('button');
@@ -110,7 +112,7 @@ class PdfActionsManager {
                             <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
                             <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
                         </svg>`;
-        deletePage.onclick = this.callbacks.deletePageButtonCallback;
+        deletePage.onclick = this.deletePageButtonCallback;
         buttonContainer.appendChild(deletePage);
 
         div.appendChild(buttonContainer);
@@ -128,7 +130,7 @@ class PdfActionsManager {
                                 <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
                                 <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
                             </svg>`;
-        insertFileButton.onclick = this.callbacks.insertFileButtonCallback;
+        insertFileButton.onclick = this.insertFileButtonCallback;
         insertFileButtonContainer.appendChild(insertFileButton);
         
         div.appendChild(insertFileButtonContainer);
@@ -150,6 +152,8 @@ class PdfActionsManager {
         insertFileButtonRightContainer.appendChild(insertFileButtonRight);
 
         div.appendChild(insertFileButtonRightContainer);
+
+        return div;
     }
 }
 
diff --git a/src/main/resources/static/js/multitool/horizontalScroll.js b/src/main/resources/static/js/multitool/horizontalScroll.js
index c1c5ca87..2d20ee79 100644
--- a/src/main/resources/static/js/multitool/horizontalScroll.js
+++ b/src/main/resources/static/js/multitool/horizontalScroll.js
@@ -1,12 +1,10 @@
-
-
 const scrollDivHorizontally = (id) => {
     var scrollDelta = 0; // variable to store the accumulated scroll delta
     var isScrolling = false; // variable to track if scroll is already in progress
-    const pagesContainerWrapper = document.getElementById(id);
+    const divToScrollHorizontally = document.getElementById(id)
     function scrollLoop() {
         // Scroll the div horizontally by a fraction of the accumulated scroll delta
-        pagesContainerWrapper.scrollLeft += scrollDelta * 0.1;
+        divToScrollHorizontally.scrollLeft += scrollDelta * 0.1;
 
         // Reduce the accumulated scroll delta by a fraction
         scrollDelta *= 0.9;
@@ -19,7 +17,7 @@ const scrollDivHorizontally = (id) => {
         }
     }
 
-    const divToScrollHorizontally = document.getElementById(id)
+    
     divToScrollHorizontally.addEventListener("wheel", function(e) {
         e.preventDefault(); // prevent default mousewheel behavior
 
diff --git a/src/main/resources/static/js/multitool/imageHighlighter.js b/src/main/resources/static/js/multitool/imageHighlighter.js
index 15f54c98..d20510d3 100644
--- a/src/main/resources/static/js/multitool/imageHighlighter.js
+++ b/src/main/resources/static/js/multitool/imageHighlighter.js
@@ -1,27 +1,39 @@
-const getImageHighlighterCallback = (id) => {
-    const imageHighlighter = document.getElementById(id);
-    imageHighlighter.onclick = () => {
-        imageHighlighter.childNodes.forEach((child) => {
-            child.classList.add('remove');
-            setTimeout(() => {
-                imageHighlighter.removeChild(child);
-            }, 100)
-        })
+class ImageHiglighter {
+    imageHighlighter;
+    constructor(id) {
+        this.imageHighlighter = document.getElementById(id);
+        this.imageHighlightCallback = this.imageHighlightCallback.bind(this);
+        this.imageHighlighter.onclick = () => {
+            this.imageHighlighter.childNodes.forEach((child) => {
+                child.classList.add('remove');
+                setTimeout(() => {
+                    this.imageHighlighter.removeChild(child);
+                }, 100)
+            })
+        }
     }
 
-    const imageHighlightCallback = (highlightEvent) => {
+    imageHighlightCallback(highlightEvent) {
         var bigImg = document.createElement('img');
         bigImg.onclick = (imageClickEvent) => {
-            // This prevents the highlighter's onClick from closing the image when clicking on the image
-            // instead of next to it.
+            // This prevents the highlighter's onClick from closing the image when clicking
+            // on the image instead of next to it.
             imageClickEvent.preventDefault();
             imageClickEvent.stopPropagation();
         };
         bigImg.src = highlightEvent.target.src;
-        imageHighlighter.appendChild(bigImg);
+        this.imageHighlighter.appendChild(bigImg);
     };
 
-    return imageHighlightCallback
+    setActions() {
+        // not needed in this case
+    }
+
+    adapt(div) {
+        const img = div.querySelector('.page-image');
+        img.addEventListener('click', this.imageHighlightCallback)
+        return div;
+    }
 }
 
-export default getImageHighlighterCallback;
\ No newline at end of file
+export default ImageHiglighter;
\ No newline at end of file
diff --git a/src/main/resources/static/js/multitool/pdfContainer.js b/src/main/resources/static/js/multitool/pdfContainer.js
index 64c5efa4..f1cc1061 100644
--- a/src/main/resources/static/js/multitool/pdfContainer.js
+++ b/src/main/resources/static/js/multitool/pdfContainer.js
@@ -1,23 +1,43 @@
-import DragDropManager from "./dragDrop.js";
-import scrollDivHorizontally from "./horizontalScroll.js";
-import getImageHighlighterCallback from "./imageHighlighter.js";
-import PdfActionsManager from './pdfActions.js';
+class PdfContainer {
+    fileName;
+    pagesContainer;
+    pagesContainerWrapper;
+    pdfAdapters;
 
-const createPdfContainer = (id, wrapperId, highlighterId, dragElId) => {
-    var fileName = null;
-    const pagesContainer = document.getElementById(id);
-    const pagesContainerWrapper = document.getElementById(wrapperId);
+    constructor(id, wrapperId, pdfAdapters) {
+        this.fileName = null;
+        this.pagesContainer = document.getElementById(id)
+        this.pagesContainerWrapper = document.getElementById(wrapperId);
+        this.movePageTo = this.movePageTo.bind(this);
+        this.addPdfs = this.addPdfs.bind(this);
+        this.rotateElement = this.rotateElement.bind(this);
+        this.rotateAll = this.rotateAll.bind(this);
+        this.exportPdf = this.exportPdf.bind(this);
 
+        this.pdfAdapters = pdfAdapters;
 
-    const movePageTo = (startElement, endElement, scrollTo = false) => {
-        const childArray = Array.from(pagesContainer.childNodes);
+        this.pdfAdapters.forEach(adapter => {
+            adapter.setActions({
+                movePageTo: this.movePageTo,
+                addPdfs: this.addPdfs,
+                rotateElement: this.rotateElement,
+            })
+        })
+
+        window.addPdfs = this.addPdfs;
+        window.exportPdf = this.exportPdf;
+        window.rotateAll = this.rotateAll;
+    }
+
+    movePageTo(startElement, endElement, scrollTo = false) {
+        const childArray = Array.from(this.pagesContainer.childNodes);
         const startIndex = childArray.indexOf(startElement);
         const endIndex = childArray.indexOf(endElement);
-        pagesContainer.removeChild(startElement);
+        this.pagesContainer.removeChild(startElement);
         if(!endElement) {
-            pagesContainer.append(startElement);
+            this.pagesContainer.append(startElement);
         } else {
-            pagesContainer.insertBefore(startElement, endElement);
+            this.pagesContainer.insertBefore(startElement, endElement);
         }
 
         if(scrollTo) {
@@ -26,13 +46,13 @@ const createPdfContainer = (id, wrapperId, highlighterId, dragElId) => {
                 ?  0-width
                 : width;
             
-            pagesContainerWrapper.scroll({
-                left: pagesContainerWrapper.scrollLeft + vector,
+            this.pagesContainerWrapper.scroll({
+                left: this.pagesContainerWrapper.scrollLeft + vector,
             })
         }
     }
 
-    function addPdfs(nextSiblingElement) {
+    addPdfs(nextSiblingElement) {
         var input = document.createElement('input');
         input.type = 'file';
         input.multiple = true;
@@ -40,9 +60,9 @@ const createPdfContainer = (id, wrapperId, highlighterId, dragElId) => {
 
         input.onchange = async(e) => {
             const files = e.target.files;
-            fileName = files[0].name;
+            this.fileName = files[0].name;
             for (var i=0; i < files.length; i++) {
-                addPdfFile(files[i], nextSiblingElement);
+                this.addPdfFile(files[i], nextSiblingElement);
             }
 
             document.querySelectorAll(".enable-on-file").forEach(element => {
@@ -53,7 +73,7 @@ const createPdfContainer = (id, wrapperId, highlighterId, dragElId) => {
         input.click();
     }
 
-    function rotateElement(element, deg) {
+    rotateElement(element, deg) {
         var lastTransform = element.style.rotate;
         if (!lastTransform) {
             lastTransform = "0";
@@ -63,22 +83,9 @@ const createPdfContainer = (id, wrapperId, highlighterId, dragElId) => {
 
         element.style.rotate = newAngle + "deg";
     }
-    
-    scrollDivHorizontally(wrapperId);
 
-    var imageHighlighterCallback;
-    if (highlighterId) {
-        imageHighlighterCallback = getImageHighlighterCallback(highlighterId);
-    }
-    var dragDropManager;
-    if(dragElId) {
-        dragDropManager = new DragDropManager('drag-container', movePageTo);
-    }
-
-    var pdfActionManager = new PdfActionsManager('page-container', { movePageTo, addPdfs, rotateElement });
-
-    async function addPdfFile(file, nextSiblingElement) {
-        const { renderer, pdfDocument } = await loadFile(file);
+    async addPdfFile(file, nextSiblingElement) {
+        const { renderer, pdfDocument } = await this.loadFile(file);
 
         for (var i=0; i < renderer.pageCount; i++) {
             const div = document.createElement('div');
@@ -94,32 +101,25 @@ const createPdfContainer = (id, wrapperId, highlighterId, dragElId) => {
             img.doc = pdfDocument;
             div.appendChild(img);
 
-            
-            if(dragDropManager) {
-                dragDropManager.attachDragDropCallbacks(div, imageSrc);
-            }
-
-            /**
-             *  Making pages larger when clicking on them
-             */
-            if(imageHighlighterCallback) {
-                img.addEventListener('click', imageHighlighterCallback)
-            }
-
-            /**
-             *  Rendering the various buttons to manipulate and move pdf pages
-             */
-            pdfActionManager.attachPDFActions(div);
-
+            this.pdfAdapters.forEach((adapter) => {
+                adapter.adapt?.(div)
+            })
             if (nextSiblingElement) {
-                pagesContainer.insertBefore(div, nextSiblingElement);
+                this.pagesContainer.insertBefore(div, nextSiblingElement);
             } else {
-                pagesContainer.appendChild(div);
+                this.pagesContainer.appendChild(div);
             }
         }
     }
 
-    async function toRenderer(objectUrl) {
+    async loadFile(file) {
+        var objectUrl = URL.createObjectURL(file);
+        var pdfDocument = await this.toPdfLib(objectUrl);
+        var renderer = await this.toRenderer(objectUrl);
+        return { renderer, pdfDocument };
+    }
+
+    async toRenderer(objectUrl) {
         const pdf = await pdfjsLib.getDocument(objectUrl).promise;
         return {
             document: pdf,
@@ -150,31 +150,26 @@ const createPdfContainer = (id, wrapperId, highlighterId, dragElId) => {
         };
     }
 
-    async function toPdfLib(objectUrl) {
+    async toPdfLib(objectUrl) {
         const existingPdfBytes = await fetch(objectUrl).then(res => res.arrayBuffer());
         const pdfDoc = await PDFLib.PDFDocument.load(existingPdfBytes);
         return pdfDoc;
     }
 
-    async function loadFile(file) {
-        var objectUrl = URL.createObjectURL(file);
-        var pdfDocument = await toPdfLib(objectUrl);
-        var renderer = await toRenderer(objectUrl);
-        return { renderer, pdfDocument };
-    }
+    
 
-    function rotateAll(deg) {
-        for (var i=0; i<pagesContainer.childNodes.length; i++) {
-            const img = pagesContainer.childNodes[i].querySelector("img");
+    rotateAll(deg) {
+        for (var i=0; i<this.pagesContainer.childNodes.length; i++) {
+            const img = this.pagesContainer.childNodes[i].querySelector("img");
             if (!img) continue;
-            rotateElement(img, deg)
+            this.rotateElement(img, deg)
         }
     }
 
-    async function exportPdf() {
+    async exportPdf() {
         const pdfDoc = await PDFLib.PDFDocument.create();
-        for (var i=0; i<pagesContainer.childNodes.length; i++) {
-            const img = pagesContainer.childNodes[i].querySelector("img");
+        for (var i=0; i<this.pagesContainer.childNodes.length; i++) {
+            const img = this.pagesContainer.childNodes[i].querySelector("img");
             if (!img) continue;
             const pages = await pdfDoc.copyPages(img.doc, [img.pageIdx])
             const page = pages[0];
@@ -202,16 +197,10 @@ const createPdfContainer = (id, wrapperId, highlighterId, dragElId) => {
             // Download the file
             const downloadLink = document.createElement('a');
             downloadLink.href = url;
-            downloadLink.download = fileName ? fileName : 'managed.pdf';
+            downloadLink.download = this.fileName ? this.fileName : 'managed.pdf';
             downloadLink.click();
         }
     }
-
-    return {
-        addPdfs,
-        rotateAll,
-        exportPdf,
-    }
 }
 
-export default createPdfContainer;
+export default PdfContainer;
diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index ef8900c3..6f3ea682 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -52,7 +52,6 @@
 
                         </div>
                     </div>
-
                 </div>
             </div>
         </div>
@@ -61,20 +60,32 @@
     <div id="drag-container"></div>
     
     <script type="module">
-        import createPdfContainer from '/js/multitool/pdfContainer.js';
-        const {
-            addPdfs,
-            exportPdf,
-            rotateAll,
-        } = createPdfContainer(
+        import PdfContainer from '/js/multitool/PdfContainer.js';
+        import DragDropManager from "/js/multitool/DragDropManager.js";
+        import scrollDivHorizontally from "/js/multitool/horizontalScroll.js";
+        import ImageHighlighter from "/js/multitool/ImageHighlighter.js";
+        import PdfActionsManager from '/js/multitool/PdfActionsManager.js';
+
+        // enables drag and drop
+        const dragDropManager = new DragDropManager('drag-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');
+
+        // Scroll the wrapper horizontally
+        scrollDivHorizontally('pages-container-wrapper');
+
+        // Automatically exposes rotateAll, addPdfs and exportPdf to the window for the global buttons.
+        const pdfContainer = new PdfContainer(
             'pages-container',
             'pages-container-wrapper',
-            'image-highlighter',
-            'drag-container'
-        );
-        window.addPdfs = addPdfs;
-        window.exportPdf = exportPdf;
-        window.rotateAll = rotateAll;
+            [
+                dragDropManager,
+                imageHighlighter,
+                pdfActionsManager,
+            ]
+        )
     </script>
 
     <style>
@@ -156,7 +167,7 @@
 
         .page-container {
             height:250px;
-            display: flex;
+            display: flex; 
             align-items: center;
             flex-direction: column-reverse;
             aspect-ratio: 1;

From b470cdf60c5a1c2cf428aad385a1c83b77fb6e59 Mon Sep 17 00:00:00 2001
From: jordy <jordyvandertang@hotmail.com>
Date: Sun, 30 Apr 2023 13:38:30 +0200
Subject: [PATCH 4/6] fix bugs in drag/drop, move styling for functions to
 separate sheets

To clean up the multi tool page and make the pdf adapters more re-usable the style for them was moved to separate pages that are inserted into head when the adapter is created.
---
 src/main/resources/static/css/dragdrop.css    |  78 ++++++++
 .../resources/static/css/imageHighlighter.css |  40 ++++
 src/main/resources/static/css/pdfActions.css  |  87 +++++++++
 .../static/js/multitool/DragDropManager.js    |  59 ++++--
 .../static/js/multitool/PdfActionsManager.js  |  21 ++-
 .../static/js/multitool/imageHighlighter.js   |   7 +
 src/main/resources/templates/multi-tool.html  | 175 +-----------------
 7 files changed, 276 insertions(+), 191 deletions(-)
 create mode 100644 src/main/resources/static/css/dragdrop.css
 create mode 100644 src/main/resources/static/css/imageHighlighter.css
 create mode 100644 src/main/resources/static/css/pdfActions.css

diff --git a/src/main/resources/static/css/dragdrop.css b/src/main/resources/static/css/dragdrop.css
new file mode 100644
index 00000000..e05cb32e
--- /dev/null
+++ b/src/main/resources/static/css/dragdrop.css
@@ -0,0 +1,78 @@
+#drag-container {
+    position: fixed;
+    display:flex;
+    inset: 0;
+    pointer-events: none;
+    z-index: 10000;
+    visibility: hidden;
+}
+
+#drag-container:not(:empty) {
+    visibility: visible;
+}
+
+#drag-container .dragged-img {
+    position: fixed;
+    max-width: 200px;
+    max-height: 200px;
+    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.58);
+    transform-origin: top left;
+}
+
+.drag-manager_dragging {
+    width: 0px;
+    visibility: hidden;
+}
+
+.drag-manager_draghover {
+    width: 375px !important;
+}
+
+.drag-manager_draghover .insert-file-button-container {
+    display: none !important;
+}
+
+.drag-manager_draghover .button-container {
+    visibility: hidden !important;
+}
+
+html[lang-direction=ltr] .drag-manager_draghover img {
+    left: calc(50% + 62.5px) !important;
+}
+
+html[lang-direction=rtl] .drag-manager_draghover img {
+    left: unset;
+}
+
+.drag-manager_dragging-container .hide-on-drag {
+    display: none !important;
+}
+
+.drag-manager_endpoint {
+    width: 80px;
+    height: 100%;
+    background-color: #FFFFFF10;
+    transition: width 0.1s;
+    animation: end-drop-expand .3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.drag-manager_endpoint svg {
+    width: 50px;
+    height: 50px;
+}
+
+.drag-manager_endpoint.drag-manager_draghover {
+    width: 150px !important;
+}
+
+@keyframes end-drop-expand {
+    from {
+        width: 0;
+    }
+    to {
+        width: 80px;
+    }
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/imageHighlighter.css b/src/main/resources/static/css/imageHighlighter.css
new file mode 100644
index 00000000..231895d6
--- /dev/null
+++ b/src/main/resources/static/css/imageHighlighter.css
@@ -0,0 +1,40 @@
+
+#image-highlighter {
+    position: fixed;
+    display:flex;
+    inset: 0;
+    z-index: 10000;
+    background-color: rgba(0, 0, 0, 0);
+    visibility: hidden;
+    align-items: center;
+    justify-content: center;
+    transition: visbility 0.1s linear, background-color 0.1s linear;
+}
+
+#image-highlighter > * {
+    max-width: 80vw;
+    max-height: 80vh;
+    animation: image-highlight .1s linear;
+    transition: transform .1s linear, opacity .1s linear;
+}
+
+#image-highlighter > *.remove {
+    transform: scale(0.8) !important;
+    opacity: 0 !important;
+}
+
+#image-highlighter:not(:empty) {
+    background-color: rgba(0, 0, 0, 0.37);
+    visibility: visible;
+}
+
+@keyframes image-highlight {
+    from {
+        transform: scale(0.8);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/pdfActions.css b/src/main/resources/static/css/pdfActions.css
new file mode 100644
index 00000000..152e3ebc
--- /dev/null
+++ b/src/main/resources/static/css/pdfActions.css
@@ -0,0 +1,87 @@
+
+.pdf-actions_button-container {
+    z-index: 2;
+    display:flex;
+    opacity: 0;
+    transition: opacity 0.1s linear;
+}
+
+.pdf-actions_container:hover .pdf-actions_button-container {
+    opacity: 1;
+}
+
+.pdf-actions_button-container > * {
+    padding: 0.25rem 0.5rem;
+    margin: 3px;
+    display: block;
+}
+
+.pdf-actions_container svg {
+    width: 16px;
+    height: 16px;
+}
+.pdf-actions_container:nth-child(1) .pdf-actions_move-left-button {
+    display: none;
+}
+.pdf-actions_container:last-child .pdf-actions_move-right-button {
+    display: none;
+}
+
+/* "insert pdf" buttons that appear on the right when hover */
+.pdf-actions_insert-file-button-container {
+    translate: 0 -50%;
+    width: 80px;
+    height: 100%;
+    
+    z-index: 1;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.pdf-actions_insert-file-button-container.left {
+    left: -20px;
+}
+
+.pdf-actions_insert-file-button-container.right {
+    right: -20px;
+}
+
+html[lang-direction=ltr] .pdf-actions_insert-file-button-container.right {
+    display:none;
+}
+
+html[lang-direction=rtl] .pdf-actions_insert-file-button-container.left {
+    display:none;
+}
+
+.pdf-actions_insert-file-button-container.left .pdf-actions_insert-file-button {
+    left: 0;
+    translate: 0 -50%;
+}
+
+.pdf-actions_insert-file-button-container.right .pdf-actions_insert-file-button {
+    right: 0;
+    translate: 0 -50%;
+}
+
+html[lang-direction=ltr] .pdf-actions_container:last-child > .pdf-actions_insert-file-button-container.right {
+    display: block;
+}
+
+
+html[lang-direction=rtl] .pdf-actions_container:last-child > .pdf-actions_insert-file-button-container.left {
+    display: block;
+}
+
+.pdf-actions_insert-file-button-container:hover {
+    opacity: 1;
+    transition: opacity 0.05s;
+}
+.pdf-actions_insert-file-button {
+    position: absolute;
+    top: 50%;
+    right: 50%;
+    translate: 50% -50%;
+    aspect-ratio: 1;
+    border-radius: 100px;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/js/multitool/DragDropManager.js b/src/main/resources/static/js/multitool/DragDropManager.js
index 90354551..93fbbdf1 100644
--- a/src/main/resources/static/js/multitool/DragDropManager.js
+++ b/src/main/resources/static/js/multitool/DragDropManager.js
@@ -2,58 +2,95 @@
 
 class DragDropManager {
     dragContainer;
+    wrapper;
+    pageDirection;
     movePageTo;
     pageDragging;
     draggelEl;
     draggedImageEl;
     hoveredEl;
+    endInsertionElement;
 
-    constructor(id) {
+    constructor(id, wrapperId) {
         this.dragContainer = document.getElementById(id);
+        this.pageDirection = document.documentElement.getAttribute("lang-direction");
+        this.wrapper = document.getElementById(wrapperId);
         this.pageDragging = false;
         this.hoveredEl = undefined;
         this.draggelEl = undefined
         this.draggedImageEl = undefined;
 
+        var styleElement = document.createElement('link');
+        styleElement.rel = 'stylesheet';
+        styleElement.href = 'css/dragdrop.css'
+
+        document.head.appendChild(styleElement);
+
+        const div = document.createElement('div');
+        div.classList.add('drag-manager_endpoint');
+        div.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-arrow-down" viewBox="0 0 16 16">
+            <path d="M8.5 6.5a.5.5 0 0 0-1 0v3.793L6.354 9.146a.5.5 0 1 0-.708.708l2 2a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 10.293V6.5z"/>
+            <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
+        </svg>`
+        this.endInsertionElement = div;
+
         this.startDraggingPage = this.startDraggingPage.bind(this);
         this.onDragEl = this.onDragEl.bind(this);
         this.stopDraggingPage = this.stopDraggingPage.bind(this);
+
+        this.adapt(div);
     }
 
-    startDraggingPage(div, imageSrc) {
+    startDraggingPage(div,) {
         this.pageDragging = true;
         this.draggedEl = div;
-        div.classList.add('dragging');
+        const img = div.querySelector('img');
+        div.classList.add('drag-manager_dragging');
+        const imageSrc = img.src;
+    
         const imgEl = document.createElement('img');
         imgEl.classList.add('dragged-img');
         imgEl.src = imageSrc;
         this.draggedImageEl = imgEl;
-        this.draggedImageEl.style.left = screenX;
-        this.draggedImageEl.style.right = screenY;
+        imgEl.style.left = screenX;
+        imgEl.style.right = screenY;
+        imgEl.style.transform = `rotate(${img.style.rotate === '' ? '0deg' : img.style.rotate}) translate(-50%, -50%)`;
         this.dragContainer.appendChild(imgEl);
+    
         window.addEventListener('mouseup', this.stopDraggingPage)
         window.addEventListener('mousemove', this.onDragEl)
+        this.wrapper.classList.add('drag-manager_dragging-container');
+        this.wrapper.appendChild(this.endInsertionElement);
     }
 
     onDragEl(mouseEvent) {
         const { clientX, clientY } = mouseEvent;
         if(this.draggedImageEl) {
             this.draggedImageEl.style.left = `${clientX}px`;
-            this.draggedImageEl.style.top = `${clientY}px`;
+            this.draggedImageEl.style.top = `${clientY}px`;           
         }
     }
 
     
     stopDraggingPage() {
         window.removeEventListener('mousemove', this.onDragEl);
+        this.wrapper.classList.remove('drag-manager_dragging-container');
+        this.wrapper.removeChild(this.endInsertionElement); 
         window.removeEventListener('mouseup', this.stopDraggingPage)
         this.draggedImageEl = undefined;
         this.pageDragging = false;
-        this.draggedEl.classList.remove('dragging');
-        this.hoveredEl.classList.remove('draghover');
+        this.draggedEl.classList.remove('drag-manager_dragging');
+        this.hoveredEl?.classList.remove('drag-manager_draghover');
         this.dragContainer.childNodes.forEach((dragChild) => {
             this.dragContainer.removeChild(dragChild);
         })
+        if(!this.hoveredEl) {
+            return;
+        }
+        if(this.hoveredEl === this.endInsertionElement) {
+            this.movePageTo(this.draggedEl);
+            return;
+        }
         this.movePageTo(this.draggedEl, this.hoveredEl);
     }
 
@@ -64,19 +101,19 @@ class DragDropManager {
 
     adapt(div) {
         const onDragStart = () => {
-            this.startDraggingPage(div, div.querySelector('img').src);
+            this.startDraggingPage(div);
         }
         
         const onMouseEnter = () => {
             if (this.pageDragging) {
                 this.hoveredEl = div;
-                div.classList.add('draghover');
+                div.classList.add('drag-manager_draghover');
             }
         }
 
         const onMouseLeave = () => {
             this.hoveredEl = undefined
-            div.classList.remove('draghover');
+            div.classList.remove('drag-manager_draghover');
         }
 
         div.addEventListener('dragstart', onDragStart);
diff --git a/src/main/resources/static/js/multitool/PdfActionsManager.js b/src/main/resources/static/js/multitool/PdfActionsManager.js
index b716f1d1..4bff39e3 100644
--- a/src/main/resources/static/js/multitool/PdfActionsManager.js
+++ b/src/main/resources/static/js/multitool/PdfActionsManager.js
@@ -5,6 +5,12 @@ class PdfActionsManager {
     constructor(id) {
         this.pagesContainer = document.getElementById(id);
         this.pageDirection = document.documentElement.getAttribute("lang-direction");
+
+        var styleElement = document.createElement('link');
+        styleElement.rel = 'stylesheet';
+        styleElement.href = 'css/pdfActions.css'
+
+        document.head.appendChild(styleElement);
     }
 
     getPageContainer(element) {
@@ -70,20 +76,21 @@ class PdfActionsManager {
     }
 
     adapt(div) {
+        div.classList.add('pdf-actions_container');
         const leftDirection = this.pageDirection === 'rtl' ? 'right' : 'left'
         const rightDirection = this.pageDirection === 'rtl' ? 'left' : 'right'
         const buttonContainer = document.createElement('div');
 
-        buttonContainer.classList.add("button-container");
+        buttonContainer.classList.add("pdf-actions_button-container", "hide-on-drag");
                     
         const moveUp = document.createElement('button');
-        moveUp.classList.add("move-left-button","btn", "btn-secondary");
+        moveUp.classList.add("pdf-actions_move-left-button","btn", "btn-secondary");
         moveUp.innerHTML = `<i class="bi bi-arrow-${leftDirection}-short"></i>`;
         moveUp.onclick = this.moveUpButtonCallback;
         buttonContainer.appendChild(moveUp);
 
         const moveDown = document.createElement('button');
-        moveDown.classList.add("move-right-button","btn", "btn-secondary");
+        moveDown.classList.add("pdf-actions_move-right-button","btn", "btn-secondary");
         moveDown.innerHTML = `<i class="bi bi-arrow-${rightDirection}-short"></i>`;
         moveDown.onclick = this.moveDownButtonCallback;
         buttonContainer.appendChild(moveDown);
@@ -120,12 +127,12 @@ class PdfActionsManager {
         const insertFileButtonContainer = document.createElement('div');
                 
         insertFileButtonContainer.classList.add(
-            "insert-file-button-container",
+            "pdf-actions_insert-file-button-container",
             leftDirection,
             `align-center-${leftDirection}`);
         
         const insertFileButton = document.createElement('button');
-        insertFileButton.classList.add("btn", "btn-primary", "insert-file-button");
+        insertFileButton.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button");
         insertFileButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
                                 <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
                                 <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
@@ -138,12 +145,12 @@ class PdfActionsManager {
         // add this button to every element, but only show it on the last one :D
         const insertFileButtonRightContainer = document.createElement('div');
         insertFileButtonRightContainer.classList.add(
-            "insert-file-button-container",
+            "pdf-actions_insert-file-button-container",
             rightDirection,
             `align-center-${rightDirection}`);
         
         const insertFileButtonRight = document.createElement('button');
-        insertFileButtonRight.classList.add("btn", "btn-primary", "insert-file-button");
+        insertFileButtonRight.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button");
         insertFileButtonRight.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-plus" viewBox="0 0 16 16">
                                 <path d="M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5z"/>
                                 <path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
diff --git a/src/main/resources/static/js/multitool/imageHighlighter.js b/src/main/resources/static/js/multitool/imageHighlighter.js
index d20510d3..6f7cd22e 100644
--- a/src/main/resources/static/js/multitool/imageHighlighter.js
+++ b/src/main/resources/static/js/multitool/imageHighlighter.js
@@ -3,6 +3,13 @@ class ImageHiglighter {
     constructor(id) {
         this.imageHighlighter = document.getElementById(id);
         this.imageHighlightCallback = this.imageHighlightCallback.bind(this);
+
+        var styleElement = document.createElement('link');
+        styleElement.rel = 'stylesheet';
+        styleElement.href = 'css/imageHighlighter.css'
+
+        document.head.appendChild(styleElement);
+
         this.imageHighlighter.onclick = () => {
             this.imageHighlighter.childNodes.forEach((child) => {
                 child.classList.add('remove');
diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html
index 6f3ea682..2c6944b0 100644
--- a/src/main/resources/templates/multi-tool.html
+++ b/src/main/resources/templates/multi-tool.html
@@ -67,7 +67,7 @@
         import PdfActionsManager from '/js/multitool/PdfActionsManager.js';
 
         // enables drag and drop
-        const dragDropManager = new DragDropManager('drag-container');
+        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
@@ -93,6 +93,7 @@
             max-width: 95vw;
             margin: 0 auto;
         }
+
         #global-buttons-container {
             display: flex;
             gap: 10px;
@@ -178,27 +179,6 @@
 
         }
 
-        .page-container.dragging {
-            width: 0px;
-            visibility: hidden;
-        }
-
-        .page-container.draghover {
-            width: 500px !important;
-        }
-
-        .page-container.draghover .insert-file-button-container {
-            display: none !important;
-        }
-
-        .page-container.draghover .button-container {
-            visibility: hidden !important;
-        }
-
-        .page-container.draghover img {
-            left: calc(50% + 125px) !important;
-        }
-
         .page-container img {
             /* max-width: calc(100% - 15px); */
             max-height: calc(100% - 15px);
@@ -213,157 +193,6 @@
             transition: rotate 0.3s;
         }
 
-        .page-container .button-container {
-            z-index: 2;
-            display:flex;
-            opacity: 0;
-            transition: opacity 0.1s linear;
-        }
-
-        .page-container:hover .button-container {
-            opacity: 1;
-        }
-
-        .page-container .button-container > * {
-            padding: 0.25rem 0.5rem;
-            margin: 3px;
-            display: block;
-        }
-        .page-container svg {
-            width: 16px;
-            height: 16px;
-        }
-        .page-container:nth-child(1) .move-left-button {
-            display: none;
-        }
-        .page-container:last-child .move-right-button {
-            display: none;
-        }
-
-        .page-image {
-            cursor:pointer;
-        }
-
-        /* "insert pdf" buttons that appear on the right when hover */
-        .insert-file-button-container {
-            translate: 0 -50%;
-            width: 80px;
-            height: 100%;
-            
-            z-index: 1;
-            opacity: 0;
-            transition: opacity 0.2s;
-        }
-
-        .insert-file-button-container.left {
-            left: -20px;
-        }
-
-        .insert-file-button-container.right {
-            right: -20px;
-        }
-
-        html[lang-direction=ltr] .insert-file-button-container.right {
-            display:none;
-        }
-
-        html[lang-direction=rtl] .insert-file-button-container.left {
-            display:none;
-        }
-
-        .insert-file-button-container.left .insert-file-button {
-            left: 0;
-            translate: 0 -50%;
-        }
-
-        .insert-file-button-container.right .insert-file-button {
-            right: 0;
-            translate: 0 -50%;
-        }
-
-        html[lang-direction=ltr] .page-container:last-child > .insert-file-button-container.right {
-            display: block;
-        }
-
-        
-        html[lang-direction=rtl] .page-container:last-child > .insert-file-button-container.left {
-            display: block;
-        }
-
-        .insert-file-button-container:hover {
-            opacity: 1;
-            transition: opacity 0.05s;
-        }
-        .insert-file-button {
-            position: absolute;
-            top: 50%;
-            right: 50%;
-            translate: 50% -50%;
-            aspect-ratio: 1;
-            border-radius: 100px;
-        }
-
-        #image-highlighter {
-            position: fixed;
-            display:flex;
-            inset: 0;
-            z-index: 10000;
-            background-color: rgba(0, 0, 0, 0);
-            visibility: hidden;
-            align-items: center;
-            justify-content: center;
-            transition: visbility 0.1s linear, background-color 0.1s linear;
-        }
-
-        #image-highlighter > * {
-            max-width: 80vw;
-            max-height: 80vh;
-            animation: image-highlight .1s linear;
-            transition: transform .1s linear, opacity .1s linear;
-        }
-        
-        #image-highlighter > *.remove {
-            transform: scale(0.8) !important;
-            opacity: 0 !important;
-        }
-
-        #image-highlighter:not(:empty) {
-            background-color: rgba(0, 0, 0, 0.37);
-            visibility: visible;
-        }
-
-        @keyframes image-highlight {
-            from {
-                transform: scale(0.8);
-                opacity: 0;
-            }
-            to {
-                transform: scale(1);
-                opacity: 1;
-            }
-        }
-
-        #drag-container {
-            position: fixed;
-            display:flex;
-            inset: 0;
-            pointer-events: none;
-            z-index: 10000;
-            visibility: hidden;
-        }
-
-        #drag-container:not(:empty) {
-            visibility: visible;
-        }
-
-        #drag-container .dragged-img {
-            position: fixed;
-            max-width: 200px;
-            max-height: 200px;
-            transform: translate(-50%, -50%);
-            box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.58);
-        }
-
         #add-pdf-button {
             margin: 0 auto;
         }

From 2b93407e6437984b750457c0ad8937414ea5dc24 Mon Sep 17 00:00:00 2001
From: jordy <jordyvandertang@hotmail.com>
Date: Mon, 1 May 2023 09:46:14 +0200
Subject: [PATCH 5/6] fix file capitalization

---
 .../js/multitool/{imageHighlighter.js => ImageHighlighter.js}     | 0
 .../static/js/multitool/{pdfContainer.js => PdfContainer.js}      | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename src/main/resources/static/js/multitool/{imageHighlighter.js => ImageHighlighter.js} (100%)
 rename src/main/resources/static/js/multitool/{pdfContainer.js => PdfContainer.js} (100%)

diff --git a/src/main/resources/static/js/multitool/imageHighlighter.js b/src/main/resources/static/js/multitool/ImageHighlighter.js
similarity index 100%
rename from src/main/resources/static/js/multitool/imageHighlighter.js
rename to src/main/resources/static/js/multitool/ImageHighlighter.js
diff --git a/src/main/resources/static/js/multitool/pdfContainer.js b/src/main/resources/static/js/multitool/PdfContainer.js
similarity index 100%
rename from src/main/resources/static/js/multitool/pdfContainer.js
rename to src/main/resources/static/js/multitool/PdfContainer.js

From 60d1d336d60ae6fb6c642767d9f9b01762497bf8 Mon Sep 17 00:00:00 2001
From: jordy <jordyvandertang@hotmail.com>
Date: Mon, 1 May 2023 10:01:28 +0200
Subject: [PATCH 6/6] fix RTL drag offset

---
 src/main/resources/static/css/dragdrop.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main/resources/static/css/dragdrop.css b/src/main/resources/static/css/dragdrop.css
index e05cb32e..e75a0d06 100644
--- a/src/main/resources/static/css/dragdrop.css
+++ b/src/main/resources/static/css/dragdrop.css
@@ -41,7 +41,7 @@ html[lang-direction=ltr] .drag-manager_draghover img {
 }
 
 html[lang-direction=rtl] .drag-manager_draghover img {
-    left: unset;
+    left: 125px
 }
 
 .drag-manager_dragging-container .hide-on-drag {