deblan-mirror/24eme-signaturepdf
1
0
Fork 0
mirror of https://github.com/24eme/signaturepdf synced 2026-03-14 13:55:44 +01:00
Code Activity

format: change page format

Browse source
This commit is contained in:
Vincent LAURENT 2025-07-09 16:30:36 +02:00
commit fe97568f69
4 changed files with 125 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

8
public/css/app.css
View file

@ -206,3 +206,11 @@ html.rtl .file-list-checkbox {
.fullpage {
min-height: calc(100dvh - 95px);
}
.clamp-2-lines {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}

96
public/js/organization.js
View file

@ -49,8 +49,8 @@ async function loadPDF(pdfBlob, filename, pdfIndex) {
let pageIndex = pdfLetter + "_" + (page.pageNumber - 1);
pages[pageIndex] = page;
const viewportFormat = page.getViewport({ scale: 1 });
const widthFormat = Math.round(viewportFormat.width * 25.4 / 72);
const heightFormat = Math.round(viewportFormat.height * 25.4 / 72);
const widthFormat = points2mm(viewportFormat.width);
const heightFormat = points2mm(viewportFormat.height);
const format = [widthFormat,heightFormat].sort().join('x')
if(!formats[format]) {
@ -313,19 +313,26 @@ function updateListePDF() {
}
function updateFormats() {
document.querySelector('#list_formats').innerHTML = "";
for (let format in formats) {
document.querySelector('#list_formats').insertAdjacentHTML('beforeend', '<li id="format_' + format + '" class="list-group-item ps-2 pe-5"><span class="ms-2">'+format+' mm : '+formats[format].length+' pages</span> <input class="form-check-input float-end position-absolute file-list-checkbox" type="checkbox" value="'+format+'" /></li>');
document.querySelector('#format_' + format+ ' input[type=checkbox]').addEventListener('change', function(e) {
for(numPage of formats[this.value]) {
let page = document.getElementById('canvas-container-' + numPage);
if(!isPageDeleted(page)) {
selectPage(page, e.target.checked);
}
}
updateGlobalState();
});
const selectFormat = document.querySelector('#select_paper_format');
const selectFormatOptionCurrent = document.querySelector('#select_paper_format_current');
let formatsLabel = [];
for(format in formats) {
if(document.querySelector('#select_paper_format option[value="'+format+'"]')) {
formatsLabel.push(document.querySelector('#select_paper_format option[value="'+format+'"]').innerText);
} else {
formatsLabel.push(format.replace('x', ' x ') + ' mm');
}
}
selectFormatOptionCurrent.innerText = formatsLabel.join(', ');
document.querySelector('#printable_infos').innerText = selectFormat.selectedOptions[0].text;
document.querySelector('#printable_infos').classList.add('text-muted');
document.querySelector('#printable_infos').classList.remove('fw-bold');
if(selectFormat.value) {
document.querySelector('#printable_infos').classList.remove('text-muted');
document.querySelector('#printable_infos').classList.add('fw-bold');
}
document.querySelector('#printable_infos').title = document.querySelector('#printable_infos').innerText;
}
function getPagesSelected() {
@ -497,26 +504,6 @@ function updateFilesState() {
document.querySelector('#file_'+fileIndex+' span').classList.add('text-primary');
}
}
document.querySelectorAll('#list_formats input[type=checkbox]').forEach(function(checkbox) {
let format = checkbox.value;
let numPages = formats[format];
checkbox.checked = false;
checkbox.indeterminate = false;
document.querySelector('#format_'+format).classList.remove('text-primary');
for(numPage of numPages) {
let page = document.getElementById('canvas-container-' + numPage);
if(isPageSelected(page)) {
checkbox.checked = true;
} else if(!isPageDeleted(page) && checkbox.checked) {
checkbox.checked = false;
checkbox.indeterminate = true;
}
}
if(checkbox.checked || checkbox.indeterminate) {
document.querySelector('#format_'+format).classList.add('text-primary');
}
});
}
function updateGlobalState() {
@ -647,9 +634,13 @@ async function save(order) {
const pageOrganize = pagesOrganize[i].split('-')[0];
const rotation = pagesOrganize[i].split('-')[1];
const pdfPage = pages[pageOrganize];
const format = document.querySelector('#select_paper_format').value;
if(rotation) {
pdfPage.setRotation(window['PDFLib'].degrees(parseInt(rotation)));
}
if(format) {
resizePage(pdfPage, mm2points(parseInt(format.split("x")[0])), mm2points(parseInt(format.split("x")[1])));
}
pdf.addPage(pdfPage);
}
@ -659,6 +650,39 @@ async function save(order) {
await download(newPDF, filename+".pdf");
}
function mm2points(mm) {
return mm * 72 / 25.4;
}
function points2mm(points) {
return Math.round(points * 25.4 / 72);
}
function resizePage(page, newWidth, newHeight) {
const oldWidth = page.getSize().width;
const oldHeight = page.getSize().height;
// Calcul des facteurs d’échelle
const scaleX = newWidth / oldWidth;
const scaleY = newHeight / oldHeight;
// Utiliser le facteur le plus petit pour garder les proportions
const scale = Math.min(scaleX, scaleY);
// Définir la nouvelle taille
page.setSize(newWidth, newHeight);
// Calculer le décalage pour centrer le contenu
const offsetX = (newWidth - (oldWidth * scale)) / 2;
const offsetY = (newHeight - (oldHeight * scale)) / 2;
// Appliquer la transformation au contenu
page.scaleContent(scale, scale);
page.translateContent(offsetX, offsetY);
}
function cleanPDF(pdf) {
let pagesRef = [];
for(page of pdf.getPages()) {
@ -831,7 +855,9 @@ function createEventsListener() {
}
document.getElementById('btn_cancel_select').click();
});
document.querySelector('#select_paper_format').addEventListener('change', function(event) {
updateFormats();
});
}
async function uploadFromUrl(url) {

2
templates/index.html.php
View file

@ -42,8 +42,8 @@
<a href="<?php echo $REVERSE_PROXY_URL; ?>/organization" class="list-group-item list-group-item-action"><i class="bi bi-download"></i> <?php echo _("Extract pages") ?></a>
<a href="<?php echo $REVERSE_PROXY_URL; ?>/organization" class="list-group-item list-group-item-action"><i class="bi bi-arrow-clockwise"></i> <?php echo _("Rotate pages") ?></a>
<a href="<?php echo $REVERSE_PROXY_URL; ?>/organization" class="list-group-item list-group-item-action"><i class="bi bi-trash"></i> <?php echo _("Delete pages") ?></a>
<a href="<?php echo $REVERSE_PROXY_URL; ?>/organization" class="list-group-item list-group-item-action"><i class="bi bi-rulers"></i> <?php echo _("Change or standardize the page format") ?></a>
<a href="<?php echo $REVERSE_PROXY_URL; ?>/organization" class="list-group-item list-group-item-action"><i class="bi bi-images"></i> <?php echo _("Convert images to PDF") ?></a>
</div>
</div>
<div class="card mt-4">

64
templates/organization.html.php
View file

@ -57,14 +57,6 @@
<input id="input_pdf_upload_2" class="form-control d-none" type="file" accept=".pdf,application/pdf,image/png,image/jpeg" multiple="true">
</div>
<hr />
<div id="list_format_container">
<div class="card">
<div class="card-header small">Formats des pages</div>
<ul id="list_formats" class="list-group list-group-flush small" style="max-height: 130px; overflow: auto;">
</ul>
</div>
</div>
<hr />
<div id="container_btn_select" class="opacity-50 card">
<div class="card-header small text-center p-1"><?php echo sprintf(_("%s page(s) selected"), '<span>0</span>'); ?> <button id="btn_cancel_select" type="button" class="btn-close btn-close-white float-end" aria-label="Close"></button></div>
<div class="card-body d-grid gap-2 p-2">
@ -81,6 +73,12 @@
<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 type="button" class="btn btn-light btn text-start border position-relative mb-2" data-bs-toggle="modal" data-bs-target="#modalPrintable">
<i class="bi bi-gear position-absolute top-50 end-0 translate-middle-y pe-3 "></i>
<small><?php echo _("Printing options") ?></small>
<div id="printable_infos" class="text-muted small clamp-2-lines"></div>
</button>
<button class="btn btn-primary" type="submit" id="save"><?php echo sprintf(_("%s Download the full PDF"), '<i class="bi bi-download"></i>'); ?></button>
</div>
</form>
@ -119,13 +117,61 @@
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel"><?php echo _("PDF documents"); ?></h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="<?php echo _("Close") ?>"></button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalPrintable" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel"><?php echo _("Printing options"); ?></h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="<?php echo _("Close") ?>"></button>
</div>
<div class="modal-body">
<div class="form-floating">
<select class="form-select" id="select_paper_format">
<optgroup label="<?php echo _("Original format") ?>">
<option id="select_paper_format_current" value="" selected></option>
</optgroup>
<optgroup label="<?php echo _("Most common formats") ?>">
<option value="210x297">A4 (210 × 297 mm)</option>
<option value="216x279">Letter (8.5 × 11 pouces / 216 × 279 mm)</option>
</optgroup>
<optgroup label="<?php echo _("Other formats") ?>">
<option value="841x1189">A0 (841 × 1189 mm)</option>
<option value="594x841">A1 (594 × 841 mm)</option>
<option value="420x594">A2 (420 × 594 mm)</option>
<option value="297x420">A3 (297 × 420 mm)</option>
<option value="210x297">A4 (210 × 297 mm)</option>
<option value="148x210">A5 (148 × 210 mm)</option>
<option value="105x148">A6 (105 × 148 mm)</option>
<option value="250x353">B4 (250 × 353 mm)</option>
<option value="176x250">B5 (176 × 250 mm)</option>
<option value="216x356">Legal (8.5 × 14 pouces / 216 × 356 mm)</option>
<option value="279x432">Tabloid (11 × 17 pouces / 279 × 432 mm)</option>
<!--<option value="custom">Other Custom ...</option>-->
</optgroup>
</select>
<label for="select-format"><?php echo _("Pages format") ?></label>
</div>
<!--<div class="form-floating mt-3">
<select class="form-select" readonly="readonly" id="select-format">
<option selected>Normal</option>
<option>Booklet</option>
</select>
<label for="select-format">PDF Formatting</label>
</div>-->
</div>
<div class="modal-footer">
<button id="btn_printable_validate" type="button" class="btn btn-primary" data-bs-dismiss="modal"><?php echo _("Close") ?></button>
</div>
</div>
</div>
</div>
<?php $loadJs = ['pdf-lib.js' => true, 'pdf.js' => true]; include('components/common.html.php'); ?>
<script src="<?php echo $REVERSE_PROXY_URL; ?>/js/organization.js?<?php echo ($COMMIT) ? $COMMIT : filemtime($ROOT."/public/js/organization.js") ?>"></script>
</body>