24eme/signaturepdf
24eme
/
signaturepdf
mirror of https://github.com/24eme/signaturepdf.git
1
0
Fork 0
Code Issues Releases Wiki Activity

[Organization] drag and drop multiple

This commit is contained in:
Vincent LAURENT 2022-10-08 01:07:49 +02:00
parent 2e0044eb64
commit e45aaa4eb3
3 changed files with 28 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/css/app.css
View File

@ -34,13 +34,13 @@
max-height: 200px;
}
.canvas-container .btn-drag, .canvas-container .btn-rotate, .canvas-container .btn-delete, .canvas-container .btn-select, .canvas-container .btn-download, .canvas-container .btn-restore, .canvas-container .btn-drag-here, .canvas-container .btn-cancel {
.canvas-container .btn-drag, .canvas-container .btn-rotate, .canvas-container .btn-delete, .canvas-container .btn-select, .canvas-container .btn-download, .canvas-container .btn-restore, .canvas-container .btn-drag-here, .canvas-container .btn-drag-here_mobile, .canvas-container .btn-cancel {
font-size: 30px;
cursor: move;
background: rgb(255,255,255,0.6);
}
.canvas-container .btn-drag-here, .canvas-container .btn-cancel {
.canvas-container .btn-drag-here, .canvas-container .btn-drag-here_mobile, .canvas-container .btn-cancel {
cursor: pointer;
z-index: 9999;
}

24
public/js/organization.js
View File

@ -70,7 +70,8 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
pageHTML += '<div title="Supprimer cette page" class="position-absolute top-50 start-0 translate-middle-y p-2 ps-3 pe-3 ms-2 rounded-circle btn-delete d-none"><i class="bi bi-trash"></i></div>';
pageHTML += '<div title="Restaurer cette page" class="position-absolute top-50 start-50 translate-middle p-2 ps-3 pe-3 rounded-circle container-resize btn-restore d-none"><i class="bi bi-recycle"></i></div>';
pageHTML += '<div title="Déplacer cette page" class="position-absolute top-50 start-50 translate-middle p-2 ps-3 pe-3 rounded-circle container-resize btn-drag d-none"><i class="bi bi-arrows-move"></i></div>';
pageHTML += '<div title="Déplacer ici" class="position-absolute top-100 start-50 translate-middle p-2 ps-3 pe-3 rounded-circle container-resize btn-drag-here bg-white shadow d-none"><i class="bi bi-arrows-collapse"></i></div>';
pageHTML += '<div title="Déplacer ici" class="position-absolute start-0 top-50 translate-middle p-2 ps-3 pe-3 rounded-circle container-resize btn-drag-here bg-white shadow d-none"><i style="display: block; transform: rotate(90deg) !important;" class="bi bi-arrows-collapse"></i></div>';
pageHTML += '<div title="Déplacer ici" class="position-absolute top-100 start-50 translate-middle p-2 ps-3 pe-3 rounded-circle container-resize btn-drag-here_mobile bg-white shadow d-none"><i class="bi bi-arrows-collapse"></i></div>';
pageHTML += '<div title="Annuler" class="position-absolute top-50 start-50 translate-middle p-2 ps-3 pe-3 rounded-circle container-resize btn-cancel d-none"><i class="bi bi-x-lg"></i></div>';
pageHTML += '<div title="Tourner cette page" class="position-absolute top-50 end-0 translate-middle-y p-2 ps-3 pe-3 me-2 rounded-circle container-rotate btn-rotate d-none"><i class="bi bi-arrow-clockwise"></i></div>';
pageHTML += '<div title="Télécharger cette page" class="position-absolute bottom-0 start-50 translate-middle-x p-2 ps-3 pe-3 mb-3 rounded-circle btn-download d-none"><i class="bi bi-download"></i></div>';
@ -179,7 +180,11 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
}
toggleDragPage(this.parentNode);
});
canvasContainer.querySelector('.btn-drag-here_mobile').addEventListener('click', function(e) {
canvasContainer.querySelector('.btn-drag-here').click();
});
canvasContainer.querySelector('.btn-drag-here').addEventListener('click', function(e) {
e.stopPropagation();
let pageHere = this.parentNode;
let after = false;
let pageHereFound = false;
@ -408,6 +413,7 @@ var updatePageState = function(page) {
page.querySelector('.btn-drag').classList.add('d-none');
page.querySelector('.btn-cancel').classList.add('d-none');
page.querySelector('.btn-drag-here').classList.add('d-none');
page.querySelector('.btn-drag-here_mobile').classList.add('d-none');
page.querySelector('.btn-restore').classList.add('d-none');
page.querySelector('.page-title').classList.add('d-none');
@ -448,9 +454,13 @@ var updatePageState = function(page) {
page.querySelector('.canvas-pdf').style.zIndex = 9999;
}
if(!isPageDragged(page) && isDraggedMode()) {
if(!is_mobile() && !isPageDragged(page) && isDraggedMode()) {
page.querySelector('.btn-drag-here').classList.remove('d-none');
}
if(is_mobile() && !isPageDragged(page) && isDraggedMode()) {
page.querySelector('.btn-drag-here_mobile').classList.remove('d-none');
}
}
var updateFilesState = function() {
@ -621,6 +631,16 @@ var createEventsListener = function() {
pageRender(index);
}
});
document.getElementById('btn_drag_select').addEventListener('click', function(event) {
let pages = getPagesSelected();
for(index in pages) {
toggleDragPage(pages[index]);
}
});
document.getElementById('btn_drag_select_mobile').addEventListener('click', function(event) {
document.getElementById('btn_drag_select').click();
this.blur();
});
}
async function getPDFBlobFromCache(cacheUrl) {

7
templates/organization.html.php
View File

@ -7,7 +7,7 @@
<link href="/vendor/bootstrap.min.css?5.1.1" rel="stylesheet">
<link href="/vendor/bootstrap-icons.css?1.5.0" rel="stylesheet">
<link href="/css/app.css" rel="stylesheet">
<link href="/css/app.css?202210080107" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="/favicon-organization.ico">
<title>Organiser un PDF</title>
@ -72,6 +72,7 @@
<div class="card-header small text-center p-1"><span>Aucune</span> page(s) séléctionnée(s) <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">
<button id="btn_rotate_select" disabled="disabled" type="button" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-clockwise"></i> Tourner de 90°</button>
<button id="btn_drag_select" disabled="disabled" type="button" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrows-move"></i> Déplacer</button>
<button id="btn_delete_select" disabled="disabled" type="button" class="btn btn-sm btn-outline-secondary"><i class="bi bi-trash"></i> Supprimer</button>
<button id="save-select" class="btn btn-sm btn-outline-secondary" disabled="disabled" form="form_pdf" type="submit"><i class="bi bi-download"></i> Télécharger</button>
</div>
@ -104,7 +105,7 @@
<div id="top_bar_action_selection_recap" class="bg-primary small text-white text-center rounded-top p-1"><span>Aucune</span> page(s) séléctionnée(s) <button id="btn_cancel_select_mobile" type="button" class="btn-close btn-close-white float-end" aria-label="Close"></button></div>
<div class="btn-group w-100">
<button id="btn_rotate_select_mobile" type="button" class="btn btn-outline-primary" style="border-top-left-radius: 0 !important;"><i class="bi bi-arrow-clockwise"></i> Tourner</button>
<button id="btn_drap_select_mobile" type="button" class="btn btn-outline-primary"><i class="bi bi-arrows-move"></i> Déplacer</button>
<button id="btn_drag_select_mobile" type="button" class="btn btn-outline-primary"><i class="bi bi-arrows-move"></i> Déplacer</button>
<button id="btn_delete_select_mobile" type="button" class="btn btn-outline-primary" style="border-top-right-radius: 0 !important;"><i class="bi bi-trash"></i> Supprimer</button>
</div>
</div>
@ -127,6 +128,6 @@
<script>
var maxSize = <?php echo $maxSize ?>;
</script>
<script src="/js/organization.js?202210080032"></script>
<script src="/js/organization.js?202210080107"></script>
</body>
</html>