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

202 lines
8 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
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.
2023-04-30 13:38:30 +02:00
const dragDropManager = new DragDropManager('drag-container', 'pages-container');
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
// 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;
}
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.
2023-04-30 13:38:30 +02:00
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;
}
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
}
#add-pdf-button {
margin: 0 auto;
}
</style>
</body>
</html>
Reference in a new issue Copy permalink