DGNum/Stirling-PDF
14
0
Fork 0
Code Issues 4 Pull requests 1 Projects Releases Packages Wiki Activity
Stirling-PDF/src/main/resources/templates/multi-tool.html

373 lines
12 KiB
HTML
Raw Normal View History

Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
<!DOCTYPE html>
<html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
init icons
2023-04-21 14:13:35 +02:00
<th:block th:insert="~{fragments/common :: head(title=#{multiTool.title})}"></th:block>
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
<body>
add imagehighlighter Because the images are now much smaller with the image highlighter we can view images in more detail
2023-04-22 14:49:08 +02:00
<div id="image-highlighter"></div>
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
<div id="page-container">
<div id="content-wrap">
<div th:insert="~{fragments/navbar.html :: navbar}"></div>
<br> <br>
make pdf bar wider, hide buttons until hover
2023-04-23 13:56:39 +02:00
<div class="multi-tool-container">
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
<div class="row justify-content-center">
use horizontal scroll for pages container By making small thumbnails and aligning everything horizontally the space on the screen is used better.
2023-04-22 14:08:47 +02:00
<h2 th:text="#{multiTool.header}"></h2>
center pdfs To correctly center the pdfs inside of the scrollable div we need a wrapper, ideally the 'safe center' flex-direction would be used, but this is not yet supported by most browsers.
2023-04-22 19:26:42 +02:00
<div class="col-md-12" id="pages-container-wrapper">
<div id="pages-container"></div>
</div>
make pdf bar wider, hide buttons until hover
2023-04-23 13:56:39 +02:00
</div>
</div>
<div class="container">
<div class="row justify-content-center">
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
<div class="col-md-6" style="text-align: center">
<div id="global-buttons-container">
<button class="btn btn-primary" onclick="addPdfs()">
<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>
</button>
fixes
2023-04-21 14:17:35 +02:00
<button class="btn btn-secondary enable-on-file" onclick="rotateAll(-90)" disabled>
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
<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>
</button>
fixes
2023-04-21 14:17:35 +02:00
<button class="btn btn-secondary enable-on-file" onclick="rotateAll(90)" disabled>
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
<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>
</button>
fixes
2023-04-21 14:17:35 +02:00
<button id="export-button" class="btn btn-primary enable-on-file" onclick="exportPdf()" disabled>
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
<path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
<path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div th:insert="~{fragments/footer.html :: footer}"></div>
</div>
drag-drop PoC
2023-04-23 15:53:15 +02:00
<div id="drag-container"></div>
refactor JS Rather than having all the JS all in one big file, separate the code into modules.
2023-04-28 21:20:56 +02:00
<script type="module">
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.
2023-04-29 12:43:12 +02:00
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(
refactor JS Rather than having all the JS all in one big file, separate the code into modules.
2023-04-28 21:20:56 +02:00
'pages-container',
'pages-container-wrapper',
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.
2023-04-29 12:43:12 +02:00
[
dragDropManager,
imageHighlighter,
pdfActionsManager,
]
)
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
</script>
<style>
make pdf bar wider, hide buttons until hover
2023-04-23 13:56:39 +02:00
.multi-tool-container {
max-width: 95vw;
margin: 0 auto;
}
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
#global-buttons-container {
display: flex;
gap: 10px;
align-items: start;
background: rgba(13, 110, 253, 0.1);
border: 1px solid rgba(0, 0, 0, .25);
backdrop-filter: blur(2px);
top: 10px;
z-index: 10;
padding: 10px;
border-radius: 8px;
}
#global-buttons-container > * {
padding: 0.6rem 0.75rem;
}
#global-buttons-container svg {
width: 20px;
height: 20px;
}
#export-button {
margin-left: auto;
}
center pdfs To correctly center the pdfs inside of the scrollable div we need a wrapper, ideally the 'safe center' flex-direction would be used, but this is not yet supported by most browsers.
2023-04-22 19:26:42 +02:00
#pages-container-wrapper {
small css tweaks lighten background
2023-04-22 14:57:39 +02:00
--background-color: rgba(0, 0, 0, 0.025);
use horizontal scroll for pages container By making small thumbnails and aligning everything horizontally the space on the screen is used better.
2023-04-22 14:08:47 +02:00
--scroll-bar-color: #f1f1f1;
--scroll-bar-thumb: #888;
--scroll-bar-thumb-hover: #555;
center pdfs To correctly center the pdfs inside of the scrollable div we need a wrapper, ideally the 'safe center' flex-direction would be used, but this is not yet supported by most browsers.
2023-04-22 19:26:42 +02:00
background-color: var(--background-color);
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
width: 100%;
display: flex;
center pdfs To correctly center the pdfs inside of the scrollable div we need a wrapper, ideally the 'safe center' flex-direction would be used, but this is not yet supported by most browsers.
2023-04-22 19:26:42 +02:00
flex-direction: column;
use horizontal scroll for pages container By making small thumbnails and aligning everything horizontally the space on the screen is used better.
2023-04-22 14:08:47 +02:00
padding: 10px 25px;
center pdfs To correctly center the pdfs inside of the scrollable div we need a wrapper, ideally the 'safe center' flex-direction would be used, but this is not yet supported by most browsers.
2023-04-22 19:26:42 +02:00
border-radius: 10px;
use horizontal scroll for pages container By making small thumbnails and aligning everything horizontally the space on the screen is used better.
2023-04-22 14:08:47 +02:00
overflow-y: hidden;
overflow-x: auto;
min-height: 275px;
center pdfs To correctly center the pdfs inside of the scrollable div we need a wrapper, ideally the 'safe center' flex-direction would be used, but this is not yet supported by most browsers.
2023-04-22 19:26:42 +02:00
margin: 0 0 30px 0;
}
#pages-container {
margin: auto;
gap: 0px;
display:flex;
align-items: center;
justify-content: center;
use horizontal scroll for pages container By making small thumbnails and aligning everything horizontally the space on the screen is used better.
2023-04-22 14:08:47 +02:00
}
/* width */
center pdfs To correctly center the pdfs inside of the scrollable div we need a wrapper, ideally the 'safe center' flex-direction would be used, but this is not yet supported by most browsers.
2023-04-22 19:26:42 +02:00
#pages-container-wrapper::-webkit-scrollbar {
use horizontal scroll for pages container By making small thumbnails and aligning everything horizontally the space on the screen is used better.
2023-04-22 14:08:47 +02:00
width: 10px;
height: 10px;
}
/* Track */
center pdfs To correctly center the pdfs inside of the scrollable div we need a wrapper, ideally the 'safe center' flex-direction would be used, but this is not yet supported by most browsers.
2023-04-22 19:26:42 +02:00
#pages-container-wrapper::-webkit-scrollbar-track {
use horizontal scroll for pages container By making small thumbnails and aligning everything horizontally the space on the screen is used better.
2023-04-22 14:08:47 +02:00
background: var(--scroll-bar-color);
}
/* Handle */
center pdfs To correctly center the pdfs inside of the scrollable div we need a wrapper, ideally the 'safe center' flex-direction would be used, but this is not yet supported by most browsers.
2023-04-22 19:26:42 +02:00
#pages-container-wrapper::-webkit-scrollbar-thumb {
use horizontal scroll for pages container By making small thumbnails and aligning everything horizontally the space on the screen is used better.
2023-04-22 14:08:47 +02:00
border-radius: 10px;
background: var(--scroll-bar-thumb);
}
/* Handle on hover */
center pdfs To correctly center the pdfs inside of the scrollable div we need a wrapper, ideally the 'safe center' flex-direction would be used, but this is not yet supported by most browsers.
2023-04-22 19:26:42 +02:00
#pages-container-wrapper::-webkit-scrollbar-thumb:hover {
background: var(--scroll-bar-thumb-hover);
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
}
.page-container {
use horizontal scroll for pages container By making small thumbnails and aligning everything horizontally the space on the screen is used better.
2023-04-22 14:08:47 +02:00
height:250px;
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.
2023-04-29 12:43:12 +02:00
display: flex;
use horizontal scroll for pages container By making small thumbnails and aligning everything horizontally the space on the screen is used better.
2023-04-22 14:08:47 +02:00
align-items: center;
flex-direction: column-reverse;
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
aspect-ratio: 1;
text-align: center;
position: relative;
fixes
2023-04-21 14:17:35 +02:00
user-select: none;
drag-drop PoC
2023-04-23 15:53:15 +02:00
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;
}
use horizontal scroll for pages container By making small thumbnails and aligning everything horizontally the space on the screen is used better.
2023-04-22 14:08:47 +02:00
drag-drop PoC
2023-04-23 15:53:15 +02:00
.page-container.draghover .button-container {
visibility: hidden !important;
}
.page-container.draghover img {
left: calc(50% + 125px) !important;
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
}
.page-container img {
drag-drop PoC
2023-04-23 15:53:15 +02:00
/* max-width: calc(100% - 15px); */
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
max-height: calc(100% - 15px);
drag-drop PoC
2023-04-23 15:53:15 +02:00
max-width: 237px;
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
display: block;
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
small css tweaks lighten background
2023-04-22 14:57:39 +02:00
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.384);
border-radius: 4px;
fixes
2023-04-21 14:17:35 +02:00
transition: rotate 0.3s;
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
}
.page-container .button-container {
use horizontal scroll for pages container By making small thumbnails and aligning everything horizontally the space on the screen is used better.
2023-04-22 14:08:47 +02:00
z-index: 2;
display:flex;
make pdf bar wider, hide buttons until hover
2023-04-23 13:56:39 +02:00
opacity: 0;
transition: opacity 0.1s linear;
}
.page-container:hover .button-container {
opacity: 1;
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
}
make pdf bar wider, hide buttons until hover
2023-04-23 13:56:39 +02:00
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
.page-container .button-container > * {
padding: 0.25rem 0.5rem;
margin: 3px;
display: block;
}
.page-container svg {
width: 16px;
height: 16px;
}
use horizontal scroll for pages container By making small thumbnails and aligning everything horizontally the space on the screen is used better.
2023-04-22 14:08:47 +02:00
.page-container:nth-child(1) .move-left-button {
display: none;
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
}
use horizontal scroll for pages container By making small thumbnails and aligning everything horizontally the space on the screen is used better.
2023-04-22 14:08:47 +02:00
.page-container:last-child .move-right-button {
display: none;
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
}
add imagehighlighter Because the images are now much smaller with the image highlighter we can view images in more detail
2023-04-22 14:49:08 +02:00
.page-image {
cursor:pointer;
}
fixes
2023-04-21 14:17:35 +02:00
/* "insert pdf" buttons that appear on the right when hover */
.insert-file-button-container {
translate: 0 -50%;
use horizontal scroll for pages container By making small thumbnails and aligning everything horizontally the space on the screen is used better.
2023-04-22 14:08:47 +02:00
width: 80px;
height: 100%;
fixes
2023-04-21 14:17:35 +02:00
z-index: 1;
opacity: 0;
transition: opacity 0.2s;
}
use horizontal scroll for pages container By making small thumbnails and aligning everything horizontally the space on the screen is used better.
2023-04-22 14:08:47 +02:00
.insert-file-button-container.left {
left: -20px;
}
.insert-file-button-container.right {
right: -20px;
}
fix RTL language directions The positioning of the insert pdf buttons and the direction icon of the move page buttons are tied to the language direction, to fix this we retrieve the language direction from the document and use this to reverse some logic/elements for RTL languages.
2023-04-22 19:29:21 +02:00
html[lang-direction=ltr] .insert-file-button-container.right {
display:none;
}
html[lang-direction=rtl] .insert-file-button-container.left {
use horizontal scroll for pages container By making small thumbnails and aligning everything horizontally the space on the screen is used better.
2023-04-22 14:08:47 +02:00
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%;
}
fix RTL language directions The positioning of the insert pdf buttons and the direction icon of the move page buttons are tied to the language direction, to fix this we retrieve the language direction from the document and use this to reverse some logic/elements for RTL languages.
2023-04-22 19:29:21 +02:00
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 {
use horizontal scroll for pages container By making small thumbnails and aligning everything horizontally the space on the screen is used better.
2023-04-22 14:08:47 +02:00
display: block;
}
fixes
2023-04-21 14:17:35 +02:00
.insert-file-button-container:hover {
opacity: 1;
transition: opacity 0.05s;
}
.insert-file-button {
centre align, colour stuff and home icons
2023-04-22 00:32:39 +02:00
position: absolute;
top: 50%;
right: 50%;
translate: 50% -50%;
fixes
2023-04-21 14:17:35 +02:00
aspect-ratio: 1;
centre align, colour stuff and home icons
2023-04-22 00:32:39 +02:00
border-radius: 100px;
fixes
2023-04-21 14:17:35 +02:00
}
add imagehighlighter Because the images are now much smaller with the image highlighter we can view images in more detail
2023-04-22 14:49:08 +02:00
#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-drop PoC
2023-04-23 15:53:15 +02:00
#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);
}
Created a page for visually editing individual pages of a pdf
2023-04-18 04:08:38 +02:00
#add-pdf-button {
margin: 0 auto;
}
</style>
</body>
</html>
Reference in a new issue Copy permalink