kamp/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2024-11-04 15:00:14 +01:00
Code

use horizontal scroll for pages container

Browse Source 
By making small thumbnails and aligning everything horizontally the space on the screen is used better.
This commit is contained in:
jordy 2023-04-22 14:08:47 +02:00
parent 243e4889b9
commit 43107965a9
3 changed files with 139 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/main/resources/static/css/dark-mode.css
View File

@ -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;
}

7
src/main/resources/static/css/general.css
View File

@ -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;

166
src/main/resources/templates/multi-tool.html
View File

@ -11,9 +11,9 @@
<br> <br>
<div class="container">
<div class="row justify-content-center">
<h2 th:text="#{multiTool.header}"></h2>
<div class="col-md-12" style="text-align: center" id="pages-container"></div>
<div class="col-md-6" style="text-align: center">
<h2 th:text="#{multiTool.header}"></h2>
<div id="global-buttons-container">
<button class="btn btn-primary" onclick="addPdfs()">
@ -45,10 +45,8 @@
</button>
</div>
<div id="pages-container"></div>
</div>
</div>
</div>
</div>
@ -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 = `<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>`;
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 = '<i class="bi bi-arrow-up-short"></i>';
moveUp.classList.add("move-left-button","btn", "btn-secondary");
moveUp.innerHTML = '<i class="bi bi-arrow-left-short"></i>';
moveUp.onclick = moveUpButtonCallback;
buttonContainer.appendChild(moveUp);
const moveDown = document.createElement('button');
moveDown.classList.add("move-down-button","btn", "btn-secondary");
moveDown.innerHTML = '<i class="bi bi-arrow-down-short"></i>';
moveDown.classList.add("move-right-button","btn", "btn-secondary");
moveDown.innerHTML = '<i class="bi bi-arrow-right-short"></i>';
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 @@
</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","right", "align-center-right");
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);
@ -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;