1fb78c3124
fix:Remove add image button as the button was non functional. Align download input file with same width as pdf file input
112 lines
6.5 KiB
HTML
112 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html th:lang="${#locale.language}" th:dir="#{language.direction}" th:data-language="${#locale.toString()}" xmlns:th="https://www.thymeleaf.org">
|
|
<head>
|
|
<th:block th:insert="~{fragments/common :: head(title=#{addImage.title}, header=#{addImage.header})}"></th:block>
|
|
<script th:src="@{'/js/thirdParty/interact.min.js'}"></script>
|
|
<link rel="stylesheet" th:href="@{'/css/add-image.css'}">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="page-container">
|
|
<div id="content-wrap">
|
|
<th:block th:insert="~{fragments/navbar.html :: navbar}"></th:block>
|
|
<br><br>
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6 bg-card">
|
|
<div class="tool-header">
|
|
<span class="material-symbols-rounded tool-header-icon other">add_photo_alternate</span>
|
|
<span class="tool-header-text" th:text="#{addImage.header}"></span>
|
|
</div>
|
|
|
|
<!-- pdf selector -->
|
|
<div th:replace="~{fragments/common :: fileSelector(name='pdf-upload', multipleInputsForSingleRequest=false, accept='application/pdf')}"></div>
|
|
<script>
|
|
let originalFileName = '';
|
|
document.querySelector('input[name=pdf-upload]').addEventListener('change', async (event) => {
|
|
const file = event.target.files[0];
|
|
if (file) {
|
|
originalFileName = file.name.replace(/\.[^/.]+$/, "");
|
|
const pdfData = await file.arrayBuffer();
|
|
pdfjsLib.GlobalWorkerOptions.workerSrc = './pdfjs-legacy/pdf.worker.mjs'
|
|
const pdfDoc = await pdfjsLib.getDocument({ data: pdfData }).promise;
|
|
await DraggableUtils.renderPage(pdfDoc, 0);
|
|
|
|
document.querySelectorAll(".show-on-file-selected").forEach(el => {
|
|
el.style.cssText = '';
|
|
});
|
|
}
|
|
});
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
document.querySelectorAll(".show-on-file-selected").forEach(el => {
|
|
el.style.cssText = "display:none !important";
|
|
})
|
|
});
|
|
</script>
|
|
|
|
<div class="tab-group show-on-file-selected">
|
|
<div th:replace="~{fragments/common :: fileSelector(name='image-upload', multipleInputsForSingleRequest=true, accept='image/*', inputText=#{imgPrompt})}"></div>
|
|
<script>
|
|
const imageUpload = document.querySelector('input[name=image-upload]');
|
|
imageUpload.addEventListener('change', e => {
|
|
if(!e.target.files) {
|
|
return;
|
|
}
|
|
for (const imageFile of e.target.files) {
|
|
var reader = new FileReader();
|
|
reader.readAsDataURL(imageFile);
|
|
reader.onloadend = function (e) {
|
|
DraggableUtils.createDraggableCanvasFromUrl(e.target.result);
|
|
};
|
|
}
|
|
});
|
|
</script>
|
|
</div>
|
|
|
|
<!-- draggables box -->
|
|
<div id="box-drag-container" class="show-on-file-selected">
|
|
<canvas id="pdf-canvas"></canvas>
|
|
<script th:src="@{'/js/draggable-utils.js'}"></script>
|
|
<div class="draggable-buttons-box ignore-rtl">
|
|
<button class="btn btn-outline-secondary" onclick="DraggableUtils.deleteDraggableCanvas(DraggableUtils.getLastInteracted())">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
|
|
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5Zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6Z"/>
|
|
<path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1ZM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118ZM2.5 3h11V2h-11v1Z"/>
|
|
</svg>
|
|
</button>
|
|
<button class="btn btn-outline-secondary" onclick="document.documentElement.getAttribute('dir')==='rtl' ? DraggableUtils.incrementPage() : DraggableUtils.decrementPage()" style="margin-left:auto">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
|
|
</svg>
|
|
</button>
|
|
<button class="btn btn-outline-secondary" onclick="document.documentElement.getAttribute('dir')==='rtl' ? DraggableUtils.decrementPage() : DraggableUtils.incrementPage()">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
|
|
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- download button -->
|
|
<div class="margin-auto-parent">
|
|
<button id="download-pdf" class="btn btn-primary mb-2 show-on-file-selected margin-center" th:text="#{downloadPdf}"></button>
|
|
</div>
|
|
<script>
|
|
document.getElementById("download-pdf").addEventListener('click', async() => {
|
|
const modifiedPdf = await DraggableUtils.getOverlayedPdfDocument();
|
|
const modifiedPdfBytes = await modifiedPdf.save();
|
|
const blob = new Blob([modifiedPdfBytes], { type: 'application/pdf' });
|
|
const link = document.createElement('a');
|
|
link.href = URL.createObjectURL(blob);
|
|
link.download = originalFileName + '_addedImage.pdf';
|
|
link.click();
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<th:block th:insert="~{fragments/footer.html :: footer}"></th:block>
|
|
</div>
|
|
</body>
|
|
</html> |