mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2024-09-21 04:10:38 +02:00
214 lines
8.6 KiB
HTML
214 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">
|
|
|
|
<th:block th:insert="~{fragments/common :: head(title=#{multiTool.title})}"></th:block>
|
|
|
|
<body>
|
|
<div id="image-highlighter"></div>
|
|
<div id="page-container">
|
|
<div id="content-wrap">
|
|
<div th:insert="~{fragments/navbar.html :: navbar}"></div>
|
|
<br> <br>
|
|
<div class="multi-tool-container">
|
|
<div class="row justify-content-center">
|
|
<h2 th:text="#{multiTool.header}"></h2>
|
|
<div class="col-md-12" id="pages-container-wrapper">
|
|
<div id="pages-container"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6" style="text-align: center">
|
|
<div id="global-buttons-container" class="d-flex align-content-center justify-content-center">
|
|
<div class="form-group">
|
|
<label for="filename-input">Filename</label>
|
|
<input type="text" class="form-control" id="filename-input" placeholder="filename">
|
|
</div>
|
|
</div>
|
|
<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>
|
|
|
|
|
|
<button class="btn btn-secondary enable-on-file" onclick="rotateAll(-90)" disabled>
|
|
<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>
|
|
|
|
<button class="btn btn-secondary enable-on-file" onclick="rotateAll(90)" disabled>
|
|
<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>
|
|
|
|
<button id="export-button" class="btn btn-primary enable-on-file" onclick="exportPdf()" disabled>
|
|
<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>
|
|
<div id="drag-container"></div>
|
|
|
|
<script type="module">
|
|
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';
|
|
import addFileInputListener from './js/multitool/fileInput.js';
|
|
// enables drag and drop
|
|
const dragDropManager = new DragDropManager('drag-container', 'pages-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(
|
|
'pages-container',
|
|
'pages-container-wrapper',
|
|
[
|
|
dragDropManager,
|
|
imageHighlighter,
|
|
pdfActionsManager,
|
|
]
|
|
)
|
|
addFileInputListener(async (files) => {
|
|
pdfContainer.addPdfsFromFiles(files);
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.multi-tool-container {
|
|
max-width: 95vw;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#global-buttons-container {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: start;
|
|
|
|
background-color: 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;
|
|
}
|
|
|
|
#pages-container-wrapper {
|
|
--background-color: rgba(0, 0, 0, 0.025);
|
|
--scroll-bar-color: #f1f1f1;
|
|
--scroll-bar-thumb: #888;
|
|
--scroll-bar-thumb-hover: #555;
|
|
background-color: var(--background-color);
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 10px 25px;
|
|
border-radius: 10px;
|
|
overflow-y: hidden;
|
|
overflow-x: auto;
|
|
min-height: 275px;
|
|
margin: 0 0 30px 0;
|
|
}
|
|
|
|
#pages-container {
|
|
margin: auto;
|
|
gap: 0px;
|
|
display:flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* width */
|
|
#pages-container-wrapper::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
|
|
/* Track */
|
|
#pages-container-wrapper::-webkit-scrollbar-track {
|
|
background: var(--scroll-bar-color);
|
|
}
|
|
|
|
/* Handle */
|
|
#pages-container-wrapper::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background: var(--scroll-bar-thumb);
|
|
}
|
|
|
|
/* Handle on hover */
|
|
#pages-container-wrapper::-webkit-scrollbar-thumb:hover {
|
|
background: var(--scroll-bar-thumb-hover);
|
|
}
|
|
|
|
.page-container {
|
|
height:250px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column-reverse;
|
|
aspect-ratio: 1;
|
|
text-align: center;
|
|
position: relative;
|
|
user-select: none;
|
|
transition: width 1s linear;
|
|
|
|
}
|
|
|
|
.page-container img {
|
|
/* max-width: calc(100% - 15px); */
|
|
max-height: calc(100% - 15px);
|
|
max-width: 237px;
|
|
display: block;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
translate: -50% -50%;
|
|
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.384);
|
|
border-radius: 4px;
|
|
transition: rotate 0.3s;
|
|
}
|
|
|
|
#add-pdf-button {
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|
|
</body>
|
|
|
|
</html>
|