mirror of
https://github.com/24eme/signaturepdf.git
synced 2023-08-25 09:33:08 +02:00
The selection checkbox becomes a delete button.
2 other new buttons not yet developed : the selection and the download of a page
This commit is contained in:
parent
f48e78642b
commit
e6a5c45d92
@ -34,17 +34,18 @@
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.canvas-container .btn-drag, .canvas-container .btn-rotate {
|
||||
.canvas-container .btn-drag, .canvas-container .btn-rotate, .canvas-container .btn-delete, .canvas-container .btn-select, .canvas-container .btn-download {
|
||||
font-size: 30px;
|
||||
cursor: move;
|
||||
background: rgb(255,255,255,0.6);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.canvas-container .btn-rotate {
|
||||
.canvas-container .btn-rotate, .canvas-container .btn-delete, .canvas-container .btn-select, .canvas-container .btn-download {
|
||||
cursor: pointer;
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.canvas-container:hover .btn-drag, .canvas-container:hover .btn-rotate {
|
||||
.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;
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
|
||||
let pageIndex = pdfLetter + "_" + (page.pageNumber - 1);
|
||||
pages[pageIndex] = page;
|
||||
|
||||
document.getElementById('container-pages').insertAdjacentHTML('beforeend', '<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"><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" class="input-rotate" value="0" id="input_rotate_'+pageIndex+'" /></div>');
|
||||
document.getElementById('container-pages').insertAdjacentHTML('beforeend', '<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"><canvas class="canvas-pdf" style="border: 2px solid transparent;"></canvas><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><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><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 bottom-0 start-50 translate-middle-x p-2 ps-3 pe-3 rounded-circle btn-download"><i class="bi bi-download"></i></div><div class="position-absolute text-center w-100 pt-1 container-checkbox pb-4 d-none" style="background: rgb(255,255,255,0.8); bottom: 0; cursor: pointer;"><div class="form-switch d-none"><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" class="input-rotate" value="0" id="input_rotate_'+pageIndex+'" /></div>');
|
||||
|
||||
let canvasContainer = document.getElementById('canvas-container-' + pageIndex);
|
||||
canvasContainer.addEventListener('dragstart', function(e) {
|
||||
@ -67,19 +67,10 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
|
||||
|
||||
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.querySelector('.container-checkbox').addEventListener('click', function(e) {
|
||||
let checkbox = this.querySelector('input[type=checkbox]');
|
||||
canvasContainer.querySelector('.btn-delete').addEventListener('click', function(e) {
|
||||
let checkbox = this.parentNode.querySelector('input[type=checkbox]');
|
||||
checkbox.checked = !checkbox.checked;
|
||||
stateCheckbox(checkbox);
|
||||
stateCheckboxAll();
|
||||
});
|
||||
canvasContainer.querySelector('.btn-rotate').addEventListener('click', function(e) {
|
||||
let inputRotate = document.querySelector('#input_rotate_'+pageIndex);
|
||||
@ -135,24 +126,12 @@ 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-rotate').classList.remove('d-none');
|
||||
checkboxContainer.querySelector('.container-checkbox').style.background = 'rgb(255,255,255,0.8)';
|
||||
checkboxContainer.style.opacity = '1'
|
||||
} 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-rotate').classList.add('d-none');
|
||||
checkboxContainer.querySelector('.container-checkbox').style.background = 'transparent';
|
||||
checkboxContainer.style.opacity = '0.2';
|
||||
}
|
||||
};
|
||||
|
||||
var stateCheckboxAll = function() {
|
||||
document.querySelector('#checkbox_all_pages').checked = (document.querySelectorAll('.checkbox-page:checked').length == document.querySelectorAll('.checkbox-page').length);
|
||||
};
|
||||
|
||||
var updateListePDF = function() {
|
||||
document.querySelector('#list_pdf').innerHTML = "";
|
||||
for (var i = 0; i < document.querySelector('#input_pdf').files.length; i++) {
|
||||
@ -162,13 +141,6 @@ var updateListePDF = function() {
|
||||
}
|
||||
|
||||
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('.canvas-container').forEach(function(canvasContainer) {
|
||||
|
||||
@ -56,10 +56,6 @@
|
||||
<button type="button" class="btn btn-light" onclick="document.getElementById('input_pdf_upload_2').click();"><i class="bi bi-plus-circle"></i> Ajouter un PDF</button>
|
||||
<input id="input_pdf_upload_2" class="form-control d-none" type="file" accept=".pdf,application/pdf">
|
||||
</div>
|
||||
<div class="form-switch mt-3">
|
||||
<input class="form-check-input" checked="checked" type="checkbox" id="checkbox_all_pages">
|
||||
<label class="form-check-label" for="checkbox_all_pages">Séléctionner toutes les pages</label>
|
||||
</div>
|
||||
<div class="position-absolute bottom-0 pb-2 ps-0 pe-4 w-100">
|
||||
<form id="form_pdf" action="/organize" method="post" enctype="multipart/form-data">
|
||||
<input id="input_pdf" name="pdf[]" type="file" class="d-none" />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user