From 43107965a93772f48e4b94f5964c062ffe90f21a Mon Sep 17 00:00:00 2001 From: jordy Date: Sat, 22 Apr 2023 14:08:47 +0200 Subject: [PATCH 01/12] use horizontal scroll for pages container By making small thumbnails and aligning everything horizontally the space on the screen is used better. --- src/main/resources/static/css/dark-mode.css | 7 +- src/main/resources/static/css/general.css | 7 + src/main/resources/templates/multi-tool.html | 166 ++++++++++++++----- 3 files changed, 139 insertions(+), 41 deletions(-) diff --git a/src/main/resources/static/css/dark-mode.css b/src/main/resources/static/css/dark-mode.css index 9223c798..73f06824 100644 --- a/src/main/resources/static/css/dark-mode.css +++ b/src/main/resources/static/css/dark-mode.css @@ -26,4 +26,9 @@ body { } - +#pages-container { + --background-color: rgba(255, 255, 255, 0.046) !important; + --scroll-bar-color: #4c4c4c !important; + --scroll-bar-thumb: #d3d3d3 !important; + --scroll-bar-thumb-hover: #ffffff !important; +} \ No newline at end of file diff --git a/src/main/resources/static/css/general.css b/src/main/resources/static/css/general.css index f6e4809e..3190465e 100644 --- a/src/main/resources/static/css/general.css +++ b/src/main/resources/static/css/general.css @@ -31,6 +31,13 @@ html[lang-direction=rtl] * { right: 0; top: 50%; } + +.align-center-left { + position: absolute; + left: 0; + top: 50%; +} + .align-bottom { position: absolute; bottom: 0; diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html index 63ede894..15879c54 100644 --- a/src/main/resources/templates/multi-tool.html +++ b/src/main/resources/templates/multi-tool.html @@ -11,9 +11,9 @@

+

+
-

-
- -
-
+
@@ -59,21 +57,36 @@ var fileName = null; const pagesContainer = document.getElementById("pages-container"); - // add the bottom "insert pdf" button that appears on the right when hovered over - const bottomInsertFileButtonContainer = document.createElement('div'); - bottomInsertFileButtonContainer.classList.add("insert-file-button-container", "align-bottom"); - bottomInsertFileButtonContainer.style.transform = "translate(0, 50%)"; - - const bottomInsertFileButton = document.createElement('button'); - bottomInsertFileButton.classList.add("btn", "btn-primary", "insert-file-button"); - bottomInsertFileButton.innerHTML = ` - - - `; - bottomInsertFileButton.onclick = e => addPdfs(); - bottomInsertFileButtonContainer.appendChild(bottomInsertFileButton); + var scrollDelta = 0; // variable to store the accumulated scroll delta + var isScrolling = false; // variable to track if scroll is already in progress - pagesContainer.appendChild(bottomInsertFileButtonContainer); + pagesContainer.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 + pagesContainer.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 + } + } function addPdfs(nextSiblingElement) { var input = document.createElement('input'); @@ -187,14 +200,14 @@ buttonContainer.classList.add("button-container"); const moveUp = document.createElement('button'); - moveUp.classList.add("move-up-button","btn", "btn-secondary"); - moveUp.innerHTML = ''; + moveUp.classList.add("move-left-button","btn", "btn-secondary"); + moveUp.innerHTML = ''; moveUp.onclick = moveUpButtonCallback; buttonContainer.appendChild(moveUp); const moveDown = document.createElement('button'); - moveDown.classList.add("move-down-button","btn", "btn-secondary"); - moveDown.innerHTML = ''; + moveDown.classList.add("move-right-button","btn", "btn-secondary"); + moveDown.innerHTML = ''; moveDown.onclick = moveDownButtonCallback; buttonContainer.appendChild(moveDown); @@ -228,7 +241,7 @@ div.appendChild(buttonContainer); const insertFileButtonContainer = document.createElement('div'); - insertFileButtonContainer.classList.add("insert-file-button-container", "align-top"); + insertFileButtonContainer.classList.add("insert-file-button-container","left", "align-center-left"); const insertFileButton = document.createElement('button'); insertFileButton.classList.add("btn", "btn-primary", "insert-file-button"); @@ -238,8 +251,23 @@ `; 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","right", "align-center-right"); + + const insertFileButtonRight = document.createElement('button'); + insertFileButtonRight.classList.add("btn", "btn-primary", "insert-file-button"); + insertFileButtonRight.innerHTML = ` + + + insertFileButtonRight`; + insertFileButtonRight.onclick = () => addPdfs(); + insertFileButtonRightContainer.appendChild(insertFileButtonRight); + + div.appendChild(insertFileButtonRightContainer); if (nextSiblingElement) { pagesContainer.insertBefore(div, nextSiblingElement); @@ -358,11 +386,9 @@ border: 1px solid rgba(0, 0, 0, .25); backdrop-filter: blur(2px); - position: sticky; top: 10px; z-index: 10; padding: 10px; - margin-top: 30px; border-radius: 8px; } #global-buttons-container > * { @@ -377,20 +403,55 @@ } #pages-container { + --background-color: rgba(0, 0, 0, 0.046); + --scroll-bar-color: #f1f1f1; + --scroll-bar-thumb: #888; + --scroll-bar-thumb-hover: #555; width: 100%; display: flex; + padding: 10px 25px; gap: 0px; - flex-direction: column; align-items: center; margin: 30px 0; + overflow-y: hidden; + overflow-x: auto; + min-height: 275px; + background-color: var(--background-color); + border-radius: 10px; + } + + /* width */ + #pages-container::-webkit-scrollbar { + width: 10px; + height: 10px; + } + + /* Track */ + #pages-container::-webkit-scrollbar-track { + background: var(--scroll-bar-color); + } + + /* Handle */ + #pages-container::-webkit-scrollbar-thumb { + border-radius: 10px; + background: var(--scroll-bar-thumb); + } + + /* Handle on hover */ + #pages-container::-webkit-scrollbar-thumb:hover { + background: var(--scroll-bar-thumb-hover); } .page-container { - width: 500px; + height:250px; + display: flex; + align-items: center; + flex-direction: column-reverse; aspect-ratio: 1; text-align: center; position: relative; user-select: none; + } .page-container img { @@ -406,10 +467,8 @@ } .page-container .button-container { - position: absolute; - top: 50%; - translate: 0 -50%; - right: 6px; + z-index: 2; + display:flex; } .page-container .button-container > * { padding: 0.25rem 0.5rem; @@ -420,23 +479,50 @@ width: 16px; height: 16px; } - .page-container:nth-child(2) .move-up-button { - visibility: hidden; + .page-container:nth-child(1) .move-left-button { + display: none; } - .page-container:last-child .move-down-button { - visibility: hidden; + .page-container:last-child .move-right-button { + display: none; } /* "insert pdf" buttons that appear on the right when hover */ .insert-file-button-container { translate: 0 -50%; - width: 100%; - height: 60px; - + 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; + } + + .insert-file-button-container.align-center-right { + 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%; + } + + .page-container:last-child > .insert-file-button-container.right { + display: block; + } + .insert-file-button-container:hover { opacity: 1; transition: opacity 0.05s; From fb24398b018100375ec0ae70bb8fb04430ac1007 Mon Sep 17 00:00:00 2001 From: jordy Date: Sat, 22 Apr 2023 14:09:03 +0200 Subject: [PATCH 02/12] remove console.logs from prod code --- src/main/resources/templates/multi-tool.html | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html index 15879c54..21ba18a4 100644 --- a/src/main/resources/templates/multi-tool.html +++ b/src/main/resources/templates/multi-tool.html @@ -117,9 +117,7 @@ while (!imgContainer.classList.contains("page-container")) { imgContainer = imgContainer.parentNode; } - console.log("imgContainer", imgContainer); const sibling = imgContainer.previousSibling; - console.log("sibling", sibling); if (sibling) { pagesContainer.removeChild(imgContainer); pagesContainer.insertBefore(imgContainer, sibling); @@ -134,17 +132,13 @@ while (!imgContainer.classList.contains("page-container")) { imgContainer = imgContainer.parentNode; } - console.log("imgContainer", imgContainer); const sibling = imgContainer.nextSibling; - console.log("sibling", sibling); if (sibling) { pagesContainer.removeChild(imgContainer); if (sibling.nextSibling) { pagesContainer.insertBefore(imgContainer, sibling.nextSibling); - console.log("insert sibling.nextSibling", sibling.nextSibling); } else { pagesContainer.appendChild(imgContainer) - console.log("append"); } imgContainer.scrollIntoView({ behavior: "instant", @@ -307,7 +301,6 @@ const rotation = img.style.rotate; if (rotation) { const rotationAngle = parseInt(rotation.replace(/[^\d-]/g, '')); - console.log(img.style.rotate, img.style.rotate.replace(/[^\d-]/g, '')) page.setRotation(PDFLib.degrees(page.getRotation().angle + rotationAngle)) } From 7c91a774421b0b6244321569a83050ccb7f31bf2 Mon Sep 17 00:00:00 2001 From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com> Date: Sat, 22 Apr 2023 13:13:02 +0100 Subject: [PATCH 03/12] Create CNAME --- CNAME | 1 + 1 file changed, 1 insertion(+) create mode 100644 CNAME diff --git a/CNAME b/CNAME new file mode 100644 index 00000000..e0be384c --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +pdf.stirlingtools.com \ No newline at end of file From e5f7d1077d6ac3f181f7c4ad0e792dee86ad829d Mon Sep 17 00:00:00 2001 From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com> Date: Sat, 22 Apr 2023 13:13:22 +0100 Subject: [PATCH 04/12] Delete CNAME --- CNAME | 1 - 1 file changed, 1 deletion(-) delete mode 100644 CNAME diff --git a/CNAME b/CNAME deleted file mode 100644 index e0be384c..00000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -pdf.stirlingtools.com \ No newline at end of file From 0bb61149e87311dd5da24455b7503050b1e38581 Mon Sep 17 00:00:00 2001 From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com> Date: Sat, 22 Apr 2023 13:19:12 +0100 Subject: [PATCH 05/12] Create CNAME --- CNAME | 1 + 1 file changed, 1 insertion(+) create mode 100644 CNAME diff --git a/CNAME b/CNAME new file mode 100644 index 00000000..e0be384c --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +pdf.stirlingtools.com \ No newline at end of file From f91953f67ac2b743859b31d63d2ef6a5b5d4aad5 Mon Sep 17 00:00:00 2001 From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com> Date: Sat, 22 Apr 2023 13:19:25 +0100 Subject: [PATCH 06/12] Delete CNAME --- CNAME | 1 - 1 file changed, 1 deletion(-) delete mode 100644 CNAME diff --git a/CNAME b/CNAME deleted file mode 100644 index e0be384c..00000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -pdf.stirlingtools.com \ No newline at end of file From 8e4e2469b08690659b743c2adea8e73c1e016dd0 Mon Sep 17 00:00:00 2001 From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com> Date: Sat, 22 Apr 2023 13:19:30 +0100 Subject: [PATCH 07/12] Create CNAME --- CNAME | 1 + 1 file changed, 1 insertion(+) create mode 100644 CNAME diff --git a/CNAME b/CNAME new file mode 100644 index 00000000..736e5893 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +stirlingtools.com \ No newline at end of file From 1edb669583558df952741d9c52c7c9c0ed7bab9c Mon Sep 17 00:00:00 2001 From: jordy Date: Sat, 22 Apr 2023 14:49:08 +0200 Subject: [PATCH 08/12] add imagehighlighter Because the images are now much smaller with the image highlighter we can view images in more detail --- src/main/resources/templates/multi-tool.html | 85 +++++++++++++++++++- 1 file changed, 84 insertions(+), 1 deletion(-) diff --git a/src/main/resources/templates/multi-tool.html b/src/main/resources/templates/multi-tool.html index 21ba18a4..3036f501 100644 --- a/src/main/resources/templates/multi-tool.html +++ b/src/main/resources/templates/multi-tool.html @@ -5,6 +5,7 @@ +
@@ -55,6 +56,12 @@