mirror of
https://github.com/24eme/signaturepdf.git
synced 2023-08-25 09:33:08 +02:00
Plus and minus button to change the number of pages displayed per line
This commit is contained in:
parent
720c0ba34d
commit
75813eefaa
@ -81,8 +81,9 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
|
||||
stateCheckboxAll();
|
||||
});
|
||||
canvasContainer.querySelector('.btn-rotate').addEventListener('click', function(e) {
|
||||
console.log(document.querySelector('#input_rotate_'+pageIndex));
|
||||
pageRender(pageIndex, parseInt(document.querySelector('#input_rotate_'+pageIndex).value) + 90);
|
||||
let inputRotate = document.querySelector('#input_rotate_'+pageIndex);
|
||||
inputRotate.value = parseInt(inputRotate.value) + 90;
|
||||
pageRender(pageIndex);
|
||||
})
|
||||
|
||||
pageRender(pageIndex);
|
||||
@ -93,8 +94,15 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
|
||||
});
|
||||
};
|
||||
|
||||
var pageRender = function(pageIndex, rotation = 0) {
|
||||
var pageRenderAll = function() {
|
||||
for(pageIndex in pages) {
|
||||
pageRender(pageIndex);
|
||||
}
|
||||
}
|
||||
|
||||
var pageRender = function(pageIndex) {
|
||||
let page = pages[pageIndex];
|
||||
let rotation = parseInt(document.querySelector('#input_rotate_'+pageIndex).value);
|
||||
let viewport = page.getViewport({scale: 1, rotation: rotation});
|
||||
let size = (document.getElementById('container-pages').offsetWidth - (12*nbPagePerLine) - 12) / nbPagePerLine;
|
||||
let scaleWidth = size / viewport.width;
|
||||
@ -113,7 +121,6 @@ var pageRender = function(pageIndex, rotation = 0) {
|
||||
canvasContainer.style.width = (size + 4) + "px";
|
||||
let canvasPDF = canvasContainer.querySelector('.canvas-pdf');
|
||||
let context = canvasPDF.getContext('2d');
|
||||
document.querySelector('#input_rotate_'+pageIndex).value = rotation;
|
||||
canvasPDF.height = viewport.height;
|
||||
canvasPDF.width = viewport.width;
|
||||
|
||||
@ -177,6 +184,14 @@ var createEventsListener = function() {
|
||||
loadPDF(pdfBlob, filename, nbPDF);
|
||||
this.value = '';
|
||||
});
|
||||
document.getElementById('btn-zoom-decrease').addEventListener('click', function(event) {
|
||||
nbPagePerLine++;
|
||||
pageRenderAll();
|
||||
});
|
||||
document.getElementById('btn-zoom-increase').addEventListener('click', function(event) {
|
||||
nbPagePerLine--;
|
||||
pageRenderAll();
|
||||
});
|
||||
}
|
||||
|
||||
async function getPDFBlobFromCache(cacheUrl) {
|
||||
|
@ -35,7 +35,7 @@
|
||||
</footer>
|
||||
</div>
|
||||
<div id="page-organization" class="d-none">
|
||||
<div id="container-pages" class="col-12 pt-1 vh-100 d-flex flex-wrap" style="padding-bottom: 60px;">
|
||||
<div id="container-pages" class="col-12 pt-1 vh-100 d-flex align-content-start flex-wrap" style="padding-bottom: 60px;">
|
||||
</div>
|
||||
<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">
|
||||
@ -51,13 +51,10 @@
|
||||
<div class="col-2 d-none d-sm-none d-md-block">
|
||||
</div>
|
||||
<div class="col-1 d-none d-sm-none d-md-block">
|
||||
<select class="form-select">
|
||||
<option>3 pages</option>
|
||||
<option>4 pages</option>
|
||||
<option selected>5 pages</option>
|
||||
<option>8 pages</option>
|
||||
<option>10 pages</option>
|
||||
</select>
|
||||
<div class="btn-group">
|
||||
<button id="btn-zoom-decrease" type="button" class="btn btn-outline-dark"><i class="bi bi-dash"></i></button>
|
||||
<button id="btn-zoom-increase" type="button" class="btn btn-outline-dark"><i class="bi bi-plus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2 d-none d-sm-none d-md-block">
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user