24eme/signaturepdf
24eme/signaturepdf
1
0
Fork 0
mirror of https://github.com/24eme/signaturepdf.git synced 2023-08-25 09:33:08 +02:00
Code Issues Releases Wiki Activity

metadata: render pdf in right column

Browse Source
This commit is contained in:
Vincent LAURENT 2023-04-19 17:26:55 +02:00
parent f0eb416ced
commit 9bdd28c7df
2 changed files with 53 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
public/js/metadata.js
View File

@ -42,6 +42,14 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
addMetadata(metaKey, metadata.info.Custom[metaKey]);
}
for(let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++ ) {
pdf.getPage(pageNumber).then(function(page) {
let pageIndex = (page.pageNumber - 1);
pages[pageIndex] = page;
pageRender(pageIndex);
});
}
});
}, function (reason) {
console.error(reason);
@ -50,6 +58,33 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
return loadingTask;
}
var pageRender = async function(pageIndex) {
let page = pages[pageIndex];
let viewport = page.getViewport({scale: 1});
let sizeWidth = document.getElementById('container-pages').offsetWidth;
let scaleWidth = sizeWidth / viewport.width;
let viewportWidth = page.getViewport({scale: scaleWidth });
viewport = viewportWidth;
let canvasPDF = document.createElement('canvas');
canvasPDF.classList.add('shadow-sm');
document.getElementById('container-pages').appendChild(canvasPDF);
let context = canvasPDF.getContext('2d');
canvasPDF.height = viewport.height;
canvasPDF.width = viewport.width;
if(pdfRenderTasks[pageIndex]) {
pdfRenderTasks[pageIndex].cancel();
}
pdfRenderTasks[pageIndex] = await page.render({
canvasContext: context,
viewport: viewport,
});
}
var addMetadata = function(key, value) {
let div = document.createElement('div');
div.classList.add('form-floating');

24
templates/metadata.html.php
View File

@ -48,11 +48,11 @@
<small>Logiciel libre <span class="d-none d-md-inline">sous license AGPL-3.0 </span>: <a href="https://github.com/24eme/signaturepdf">voir le code source</a></small>
</footer>
</div>
<div id="page-metadata" style="padding-right: 350px;" class="d-none">
<div id="page-metadata" class="d-none">
<div id="div-margin-top" style="height: 88px;" class="d-md-none"></div>
<div id="container-main">
<div id="form-metadata" class="w-50 mx-auto pt-3 pb-3">
<h3>Métadonnées</h3>
<div style="width: 60%; overflow: auto;" class="vh-100" id="container-main">
<div id="form-metadata" class="mx-auto w-75 pt-3 pb-5">
<h3>Liste des métadonnées du PDF</h3>
<div id="form-metadata-container">
</div>
<form id="form_metadata_add">
@ -64,25 +64,27 @@
</div>
</div>
<div id="div-margin-bottom" style="height: 55px;" class="d-md-none"></div>
<div class="offcanvas offcanvas-end show d-none d-md-block shadow-sm" data-bs-backdrop="false" data-bs-scroll="true" data-bs-keyboard="false" tabindex="-1" id="sidebarTools" aria-labelledby="sidebarToolsLabel">
<div style="width: 40%;" class="offcanvas offcanvas-end show d-none d-md-block shadow-sm" data-bs-backdrop="false" data-bs-scroll="true" data-bs-keyboard="false" tabindex="-1" id="sidebarTools" aria-labelledby="sidebarToolsLabel">
<a class="btn btn-close btn-sm position-absolute opacity-25 d-none d-sm-none d-md-block" title="Fermer ce PDF et retourner à l'accueil" style="position: absolute; top: 2px; right: 2px; font-size: 10px;" href="/metadata"></a>
<div class="offcanvas-header mb-0 pb-0">
<div class="offcanvas-header d-block mb-0 pb-0 border-bottom">
<h5 class="mb-1 d-block w-100" id="sidebarToolsLabel">Édition de métadonnées<span class="float-end me-2" title="Ce PDF est stocké sur votre ordinateur pour être signé par vous uniquement"><i class="bi-ui-checks-grid"></i></span></h5>
<button type="button" class="btn-close text-reset d-md-none" data-bs-dismiss="offcanvas" aria-label="Close"></button>
<p id="text_document_name" class="text-muted mb-2" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;" title=""><i class="bi bi-files"></i> <span></span></p>
</div>
<div class="offcanvas-body pt-0" style="padding-bottom: 60px;">
<p id="text_document_name" class="text-muted" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;" title=""><i class="bi bi-files"></i> <span></span></p>
<div class="position-absolute bottom-0 pb-2 ps-0 pe-4 w-100">
<div class="offcanvas-body bg-light" style="padding-bottom: 60px;">
<div id="container-pages">
</div>
</div>
<div class="position-absolute bg-white bottom-0 pb-2 ps-2 pe-2 w-100 border-top shadow-lg">
<form id="form_pdf" action="/organize" method="post" enctype="multipart/form-data">
<input id="input_pdf" name="pdf[]" type="file" class="d-none" />
<input id="input_pages" type="hidden" value="" name="pages" />
<div id="btn_container" class="d-grid gap-2 mt-2">
<button class="btn btn-primary" type="submit" id="save"><i class="bi bi-download"></i> Télécharger le PDF</button>
<button class="btn btn-primary" type="submit" id="save"><i class="bi bi-download"></i> Enregistrer et télécharger le PDF</button>
</div>
</form>
</div>
</div>
</div>
<div id="bottom_bar" class="position-fixed bottom-0 start-0 bg-white w-100 p-2 shadow-sm d-md-none">
<div id="bottom_bar_action" class="d-grid gap-2">
<button class="btn btn-primary" type="submit" id="save_mobile"><i class="bi bi-download"></i> Télécharger le PDF</button>