DGNum/Stirling-PDF
15
0
Fork 0
Code Issues 4 Pull requests 1 Projects Releases Packages Wiki Activity

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;