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

All the blocks containing the pages have the same size and the pdf fits inside

Browse Source
This commit is contained in:
Vincent LAURENT 2022-04-06 23:17:27 +02:00
parent c7811b437b
commit 720c0ba34d
2 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/js/organization.js
View File

@ -33,7 +33,7 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
let pageIndex = pdfLetter + "_" + (page.pageNumber - 1); let pageIndex = pdfLetter + "_" + (page.pageNumber - 1);
pages[pageIndex] = page; pages[pageIndex] = page;
document.getElementById('container-pages').insertAdjacentHTML('beforeend', '<div class="position-relative mt-0 ms-1 me-1 mb-0 d-inline-block canvas-container" id="canvas-container-' + pageIndex +'" draggable="true"><canvas class="shadow-sm canvas-pdf" style="border: 2px solid transparent;"></canvas><div class="position-absolute top-50 start-50 translate-middle p-2 ps-3 pe-3 rounded-circle container-resize btn-drag"><i class="bi bi-arrows-move"></i></div><div class="position-absolute top-50 end-0 translate-middle-y p-2 ps-3 pe-3 rounded-circle container-rotate btn-rotate"><i class="bi bi-arrow-clockwise"></i></div><div class="position-absolute text-center w-100 pt-1 container-checkbox pb-4" style="background: rgb(255,255,255,0.8); bottom: 7px; cursor: pointer;"><div class="form-switch"><input form="form_pdf" class="form-check-input checkbox-page" role="switch" type="checkbox" checked="checked" style="cursor: pointer;" value="'+pdfLetter+page.pageNumber+'" /></div></div><p class="position-absolute text-center w-100 ps-2 pe-2 pb-0 mb-1 opacity-75" style="bottom: 7px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">Page '+page.pageNumber+' - '+filename+'</p><input type="hidden" value="0" id="input_rotate_'+pageIndex+'" /></div>'); document.getElementById('container-pages').insertAdjacentHTML('beforeend', '<div class="position-relative mt-0 ms-1 me-1 mb-2 canvas-container shadow-sm d-flex align-items-center justify-content-center bg-white" id="canvas-container-' + pageIndex +'" draggable="true"><canvas class="canvas-pdf" style="border: 2px solid transparent;"></canvas><div class="position-absolute top-50 start-50 translate-middle p-2 ps-3 pe-3 rounded-circle container-resize btn-drag"><i class="bi bi-arrows-move"></i></div><div class="position-absolute top-50 end-0 translate-middle-y p-2 ps-3 pe-3 rounded-circle container-rotate btn-rotate"><i class="bi bi-arrow-clockwise"></i></div><div class="position-absolute text-center w-100 pt-1 container-checkbox pb-4" style="background: rgb(255,255,255,0.8); bottom: 0; cursor: pointer;"><div class="form-switch"><input form="form_pdf" class="form-check-input checkbox-page" role="switch" type="checkbox" checked="checked" style="cursor: pointer;" value="'+pdfLetter+page.pageNumber+'" /></div></div><p class="position-absolute text-center w-100 ps-2 pe-2 pb-0 mb-1 opacity-75" style="bottom: 0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">Page '+page.pageNumber+' - '+filename+'</p><input type="hidden" value="0" id="input_rotate_'+pageIndex+'" /></div>');
let canvasContainer = document.getElementById('canvas-container-' + pageIndex); let canvasContainer = document.getElementById('canvas-container-' + pageIndex);
canvasContainer.addEventListener('dragstart', function(e) { canvasContainer.addEventListener('dragstart', function(e) {
@ -96,9 +96,21 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
var pageRender = function(pageIndex, rotation = 0) { var pageRender = function(pageIndex, rotation = 0) {
let page = pages[pageIndex]; let page = pages[pageIndex];
let viewport = page.getViewport({scale: 1, rotation: rotation}); let viewport = page.getViewport({scale: 1, rotation: rotation});
let scale = (document.getElementById('container-pages').clientWidth - (12*nbPagePerLine) - 12) / viewport.width / nbPagePerLine; let size = (document.getElementById('container-pages').offsetWidth - (12*nbPagePerLine) - 12) / nbPagePerLine;
viewport = page.getViewport({scale: scale, rotation: rotation}); let scaleWidth = size / viewport.width;
let scaleHeight = size / viewport.height;
let viewportWidth = page.getViewport({scale: scaleWidth, rotation: rotation});
let viewportHeight = page.getViewport({scale: scaleHeight, rotation: rotation});
if(viewportWidth.height > size) {
viewport = viewportHeight;
} else {
viewport = viewportWidth;
}
let canvasContainer = document.getElementById('canvas-container-' + pageIndex); let canvasContainer = document.getElementById('canvas-container-' + pageIndex);
canvasContainer.style.height = (size + 4) + "px";
canvasContainer.style.width = (size + 4) + "px";
let canvasPDF = canvasContainer.querySelector('.canvas-pdf'); let canvasPDF = canvasContainer.querySelector('.canvas-pdf');
let context = canvasPDF.getContext('2d'); let context = canvasPDF.getContext('2d');
document.querySelector('#input_rotate_'+pageIndex).value = rotation; document.querySelector('#input_rotate_'+pageIndex).value = rotation;
@ -108,7 +120,6 @@ var pageRender = function(pageIndex, rotation = 0) {
page.render({ page.render({
canvasContext: context, canvasContext: context,
viewport: viewport, viewport: viewport,
enhanceTextSelection: true
}); });
} }

2
templates/organization.html.php
View File

@ -35,7 +35,7 @@
</footer> </footer>
</div> </div>
<div id="page-organization" class="d-none"> <div id="page-organization" class="d-none">
<div id="container-pages" class="col-12 pt-1 vh-100" style="padding-bottom: 60px;"> <div id="container-pages" class="col-12 pt-1 vh-100 d-flex flex-wrap" style="padding-bottom: 60px;">
</div> </div>
<div id="container-bar" class="position-fixed bottom-0 start-0 bg-white w-100 p-2 shadow-lg"> <div id="container-bar" class="position-fixed bottom-0 start-0 bg-white w-100 p-2 shadow-lg">
<form id="form_pdf" action="/organize" method="post" enctype="multipart/form-data"> <form id="form_pdf" action="/organize" method="post" enctype="multipart/form-data">