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

PDF download button different in selection mode and a new "Cancel selection" button

Browse Source
This commit is contained in:
Vincent LAURENT 2022-05-07 00:42:24 +02:00
parent 24437112b8
commit b1e7f02215
3 changed files with 28 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/css/app.css
View File

@ -49,3 +49,7 @@
.canvas-container:hover .btn-drag, .canvas-container:hover .btn-rotate, .canvas-container:hover .btn-delete, .canvas-container:hover .btn-select, .canvas-container:hover .btn-download { .canvas-container:hover .btn-drag, .canvas-container:hover .btn-rotate, .canvas-container:hover .btn-delete, .canvas-container:hover .btn-select, .canvas-container:hover .btn-download {
opacity: 1; opacity: 1;
} }
.border-transparent {
border-color: transparent !important;
}

31
public/js/organization.js
View File

@ -34,8 +34,8 @@ 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;
let pageHTML = '<div class="position-relative mt-0 ms-1 me-0 mb-1 canvas-container shadow-sm d-flex align-items-center justify-content-center bg-white" id="canvas-container-' + pageIndex +'" draggable="true">'; let pageHTML = '<div class="position-relative mt-0 ms-1 me-0 mb-1 canvas-container shadow-sm d-flex align-items-center justify-content-center bg-white bg-opacity-50 border border-2 border-transparent" id="canvas-container-' + pageIndex +'" draggable="true">';
pageHTML += '<canvas class="canvas-pdf" style="border: 2px solid transparent;"></canvas>'; pageHTML += '<canvas class="canvas-pdf"></canvas>';
pageHTML += '<div class="position-absolute top-0 start-50 translate-middle-x p-2 ps-3 pe-3 rounded-circle btn-select"><i class="bi bi-check-square"></i></div>'; pageHTML += '<div class="position-absolute top-0 start-50 translate-middle-x p-2 ps-3 pe-3 rounded-circle btn-select"><i class="bi bi-check-square"></i></div>';
pageHTML += '<div class="position-absolute top-50 start-0 translate-middle-y p-2 ps-3 pe-3 rounded-circle btn-delete"><i class="bi bi-trash"></i></div>'; pageHTML += '<div class="position-absolute top-50 start-0 translate-middle-y p-2 ps-3 pe-3 rounded-circle btn-delete"><i class="bi bi-trash"></i></div>';
pageHTML += '<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>'; pageHTML += '<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>';
@ -52,21 +52,17 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
let canvasContainer = document.getElementById('canvas-container-' + pageIndex); let canvasContainer = document.getElementById('canvas-container-' + pageIndex);
canvasContainer.addEventListener('dragstart', function(e) { canvasContainer.addEventListener('dragstart', function(e) {
this.querySelector('.container-checkbox').classList.add('d-none');
this.querySelector('.container-resize').classList.add('d-none'); this.querySelector('.container-resize').classList.add('d-none');
this.querySelector('.canvas-pdf').classList.add('shadow-lg'); this.querySelector('.canvas-pdf').classList.add('shadow-lg');
this.querySelector('.canvas-pdf').style.border = '2px dashed #777'; this.querySelector('.canvas-pdf').style.border = '2px dashed #777';
e.dataTransfer.setData('element', this.id); e.dataTransfer.setData('element', this.id);
this.style.opacity = 0.4; this.style.opacity = 0.4;
document.querySelector('#container-bar').classList.add('d-none');
}); });
canvasContainer.addEventListener('dragend', function(e) { canvasContainer.addEventListener('dragend', function(e) {
this.querySelector('.container-checkbox').classList.remove('d-none');
this.querySelector('.container-resize').classList.remove('d-none'); this.querySelector('.container-resize').classList.remove('d-none');
this.querySelector('.canvas-pdf').classList.remove('shadow-lg'); this.querySelector('.canvas-pdf').classList.remove('shadow-lg');
this.querySelector('.canvas-pdf').style.border = '2px solid transparent'; this.querySelector('.canvas-pdf').style.border = '2px solid transparent';
this.style.opacity = 1; this.style.opacity = 1;
document.querySelector('#container-bar').classList.remove('d-none');
stateCheckbox(this.querySelector('input[type=checkbox]')); stateCheckbox(this.querySelector('input[type=checkbox]'));
}); });
canvasContainer.addEventListener('dragover', function(e) { canvasContainer.addEventListener('dragover', function(e) {
@ -91,13 +87,18 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
checkbox.checked = !checkbox.checked; checkbox.checked = !checkbox.checked;
let container = this.parentNode; let container = this.parentNode;
if(checkbox.checked) { if(checkbox.checked) {
container.classList.add('border'); container.classList.add('border-primary', 'shadow', 'bg-primary');
container.classList.add('border-primary'); container.classList.remove('border-transparent', 'shadow-sm', 'bg-white');
container.classList.add('border-3');
} else { } else {
container.classList.remove('border'); container.classList.remove('border-primary', 'shadow', 'bg-primary');
container.classList.remove('border-primary'); container.classList.add('border-transparent', 'shadow-sm', 'bg-white');
container.classList.remove('border-3'); }
if(document.querySelectorAll('.canvas-container .input-select:checked').length > 0) {
document.querySelector('#container-btn-save-select').classList.remove('d-none');
document.querySelector('#container-btn-save').classList.add('d-none');
} else {
document.querySelector('#container-btn-save-select').classList.add('d-none');
document.querySelector('#container-btn-save').classList.remove('d-none');
} }
}); });
canvasContainer.querySelector('.btn-rotate').addEventListener('click', function(e) { canvasContainer.querySelector('.btn-rotate').addEventListener('click', function(e) {
@ -227,6 +228,12 @@ var createEventsListener = function() {
nbPagePerLine--; nbPagePerLine--;
pageRenderAll(); pageRenderAll();
}); });
document.getElementById('btn_cancel_select').addEventListener('click', function(event) {
document.querySelectorAll('.input-select:checked').forEach(function(input) {
input.parentNode.querySelector('.btn-select').click();
});
});
} }
async function getPDFBlobFromCache(cacheUrl) { async function getPDFBlobFromCache(cacheUrl) {

6
templates/organization.html.php
View File

@ -60,7 +60,11 @@
<form id="form_pdf" action="/organize" method="post" enctype="multipart/form-data"> <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_pdf" name="pdf[]" type="file" class="d-none" />
<input id="input_pages" type="hidden" value="" name="pages" /> <input id="input_pages" type="hidden" value="" name="pages" />
<div class="d-grid gap-2 mt-2"> <div id="container-btn-save-select" class="d-grid gap-2 mt-2 d-none">
<button id="btn_cancel_select" type="button" class="btn btn-link">Annuler la sélection</button>
<button class="btn btn-outline-primary" type="submit" id="save"><i class="bi bi-download"></i> Télécharger les pages séléctionnées</button>
</div>
<div id="container-btn-save" 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> Télécharger le PDF</button>
</div> </div>
</form> </form>