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

Pages Drag an drop, page width adapt to window

Browse Source
This commit is contained in:
Vincent LAURENT 2022-03-30 02:00:25 +02:00
parent 7fe764d915
commit b5a1115cd4
4 changed files with 98 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app.php
View File

@ -155,15 +155,16 @@ $f3->route('POST /organize',
$filename = null;
$tmpfile = tempnam($f3->get('UPLOADS'), 'pdfsignature_organize');
unlink($tmpfile);
$pages = explode(',', $f3->get('POST.pages'));
$files = Web::instance()->receive(function($file,$formFieldName){
if($formFieldName == "pdf" && strpos(Web::instance()->mime($file['tmp_name'], true), 'application/pdf') !== 0) {
$f3->error(403);
}
return true;
}, false, function($fileBaseName, $formFieldName) use ($f3, $tmpfile, &$filename, &$svgFiles) {
}, false, function($fileBaseName, $formFieldName) use ($f3, $tmpfile, &$filename, $pages) {
if($formFieldName == "pdf") {
$filename = str_replace(".pdf", "_organise.pdf", $fileBaseName);
$filename = str_replace(".pdf", "_page_".implode("-", $pages).".pdf", $fileBaseName);
return basename($tmpfile).".pdf";
}
});
@ -172,9 +173,9 @@ $f3->route('POST /organize',
$f3->error(403);
}
shell_exec(sprintf("pdftk %s cat %s output %s", $tmpfile.".pdf", implode(" ", $f3->get('POST.pages')), $tmpfile.'_organise.pdf'));
shell_exec(sprintf("pdftk %s cat %s output %s", $tmpfile.".pdf", implode(" ", $pages), $tmpfile.'_organize.pdf'));
Web::instance()->send($tmpfile."_organise.pdf", null, 0, TRUE, $filename);
Web::instance()->send($tmpfile."_organize.pdf", null, 0, TRUE, $filename);
if($f3->get('DEBUG')) {
return;

13
public/css/app.css
View File

@ -32,4 +32,15 @@
#img-upload {
max-width: 460px;
max-height: 200px;
}
}
.canvas-container .btn-drag {
font-size: 30px;
cursor: move;
background: rgb(255,255,255,0.6);
opacity: 0;
}
.canvas-container:hover .btn-drag {
opacity: 1;
}

87
public/js/organization.js
View File

@ -1,8 +1,7 @@
var pdfRenderTasks = [];
var pdfPages = [];
var resizeTimeout;
var currentScale = 1.5;
var windowWidth = window.innerWidth;
var nbPagePerLine = 4;
var loadPDF = async function(pdfBlob, filename) {
var pdfjsLib = window['pdfjs-dist/build/pdf'];
@ -19,29 +18,49 @@ var loadPDF = async function(pdfBlob, filename) {
loadingTask.promise.then(function(pdf) {
for(var pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++ ) {
pdf.getPage(pageNumber).then(function(page) {
var scale = 0.5;
var viewport = page.getViewport({scale: scale});
if(viewport.width > document.getElementById('container-pages').clientWidth - 40) {
viewport = page.getViewport({scale: 1});
scale = (document.getElementById('container-pages').clientWidth - 40) / viewport.width;
viewport = page.getViewport({ scale: scale });
}
currentScale = scale;
let viewport = page.getViewport({scale: 1});
let scale = (document.getElementById('container-pages').clientWidth - (8*nbPagePerLine) - 10) / viewport.width / nbPagePerLine;
viewport = page.getViewport({scale: scale});
var pageIndex = page.pageNumber - 1;
document.getElementById('container-pages').insertAdjacentHTML('beforeend', '<div class="position-relative mt-1 ms-1 me-1 d-inline-block" id="canvas-container-' + pageIndex +'"><canvas id="canvas-pdf-'+pageIndex+'" class="shadow-sm canvas-pdf"></canvas><div class="position-absolute text-center" style="bottom: 7px; width: 100%; background: rgba(255,255,255,0.8);"><input form="form_pdf" class="form-check-input checkbox-page" type="checkbox" checked="checked" value="'+page.pageNumber+'" name="pages[]" /></div></div>');
document.getElementById('container-pages').insertAdjacentHTML('beforeend', '<div class="position-relative mt-1 ms-1 me-1 d-inline-block canvas-container" id="canvas-container-' + pageIndex +'" draggable="true"><canvas id="canvas-pdf-'+pageIndex+'" class="shadow-sm canvas-pdf" style="box-sizing: border-box;"></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 text-center w-100 pt-2 pb-0 container-checkbox" 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="'+page.pageNumber+'"" /></div><p class="mt-2 mb-0" style="font-size: 10px;">Page '+page.pageNumber+' - 202008.pdf</p></div></div>');
let canvasContainer = document.getElementById('canvas-container-' + pageIndex);
let canvasCheckbox = canvasContainer.querySelector('input[type=checkbox]');
canvasCheckbox.addEventListener('click', function(e) {
canvasContainer.addEventListener('dragstart', function(e) {
this.querySelector('.canvas-pdf').classList.add('shadow-lg');
e.dataTransfer.setData('element', this.id);
});
canvasContainer.addEventListener('dragend', function(e) {
this.querySelector('.canvas-pdf').classList.remove('shadow-lg');
});
canvasContainer.addEventListener('dragover', function(e) {
if (e.preventDefault) {
e.preventDefault();
}
if(e.layerX > e.target.clientWidth / 2) {
this.insertAdjacentElement('beforebegin', document.querySelector('#'+e.dataTransfer.getData('element')));
} else {
this.insertAdjacentElement('afterend', document.querySelector('#'+e.dataTransfer.getData('element')));
}
return false;
});
canvasContainer.querySelector('input[type=checkbox]').addEventListener('click', function(e) {
e.stopPropagation();
})
});
canvasContainer.querySelector('input[type=checkbox]').addEventListener('change', function(e) {
stateCheckbox(this);
stateCheckboxAll();
});
canvasContainer.addEventListener('click', function(e) {
this.querySelector('input[type=checkbox]').checked = !this.querySelector('input[type=checkbox]').checked;
document.querySelector('#checkbox_all_pages').checked = (document.querySelectorAll('.checkbox-page:checked').length == document.querySelectorAll('.checkbox-page').length);
})
let checkbox = this.querySelector('input[type=checkbox]');
checkbox.checked = !checkbox.checked;
stateCheckbox(checkbox);
stateCheckboxAll();
});
var canvasPDF = document.getElementById('canvas-pdf-' + pageIndex);
// Prepare canvas using PDF page dimensions
@ -68,13 +87,43 @@ var is_mobile = function() {
return !(window.getComputedStyle(document.getElementById('is_mobile')).display === "none");
};
var stateCheckbox = function(checkbox) {
let checkboxContainer = checkbox.parentNode.parentNode.parentNode;
if(checkbox.checked) {
checkboxContainer.querySelector('.canvas-pdf').style.opacity = '1';
checkboxContainer.querySelector('.canvas-pdf').style.cursor = 'inherit';
checkboxContainer.querySelector('.container-resize').classList.remove('d-none');
checkboxContainer.querySelector('.container-checkbox').style.background = 'rgb(255,255,255,0.8)';
} else {
checkboxContainer.querySelector('.canvas-pdf').style.opacity = '0.3';
checkboxContainer.querySelector('.canvas-pdf').style.cursor = 'pointer';
checkboxContainer.querySelector('.container-resize').classList.add('d-none');
checkboxContainer.querySelector('.container-checkbox').style.background = 'transparent';
}
};
var stateCheckboxAll = function() {
document.querySelector('#checkbox_all_pages').checked = (document.querySelectorAll('.checkbox-page:checked').length == document.querySelectorAll('.checkbox-page').length);
};
var createEventsListener = function() {
document.querySelector('#checkbox_all_pages').addEventListener('change', function() {
let checkboxAll = this;
document.querySelectorAll('.checkbox-page').forEach(function(checkbox) {
checkbox.checked = checkboxAll.checked;
stateCheckbox(checkbox);
});
})
});
document.getElementById('save').addEventListener('click', function(event) {
let order = [];
document.querySelectorAll('.checkbox-page').forEach(function(checkbox) {
if(checkbox.checked) {
order.push(checkbox.value);
}
});
document.querySelector('#input_pages').value = order.join(',');
});
}
async function getPDFBlobFromCache(cacheUrl) {

19
templates/organization.html.php
View File

@ -35,13 +35,23 @@
<div 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">
<input id="input_pdf" name="pdf" type="file" class="d-none" />
<input id="input_pages" type="hidden" value="" name="pages" />
<div class="row">
<div class="col-10">
<div class="form-check">
<div class="col-3">
<div class="form-switch mt-2 ms-2">
<input class="form-check-input" checked="checked" type="checkbox" id="checkbox_all_pages">
<label class="form-check-label" for="checkbox_all_pages">Sélectionner toutes les pages</label>
<label class="form-check-label" for="checkbox_all_pages">Séléctionner toutes les pages</label>
</div>
</div>
<div class="col-2">
</div>
<div class="col-1">
<select class="form-select">
<option selected>4 pages</option>
</select>
</div>
<div class="col-4">
</div>
<div class="col-2">
<div class="d-grid gap-2">
<button class="btn btn-primary" type="submit" id="save"><i class="bi bi-download"></i> Télécharger le PDF</button>
@ -54,9 +64,6 @@
<script src="/vendor/bootstrap.min.js?5.1.3"></script>
<script src="/vendor/pdf.js?legacy"></script>
<script src="/vendor/fabric.min.js?4.6.0"></script>
<script src="/vendor/signature_pad.umd.min.js?3.0.0-beta.3"></script>
<script src="/vendor/opentype.min.js?1.3.3"></script>
<script>
var maxSize = <?php echo $maxSize ?>;
</script>