deblan-mirror/24eme-signaturepdf
1
0
Fork 0
mirror of https://github.com/24eme/signaturepdf synced 2024-05-21 15:16:37 +02:00
Code Activity

organisation: better management of page movement

Browse source
This commit is contained in:
Vincent LAURENT 2023-09-24 00:30:12 +02:00
parent 2cb09d6931
commit b6c1480179
3 changed files with 30 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
public/css/app.css
View file

@ -24,6 +24,10 @@
box-shadow: 0 .25rem .5rem rgba(0,0,0,.075) !important;
}
#top_bar {
z-index: 10000;
}
#input-text-signature {
font-family: Caveat;
font-size: 48px;
@ -34,18 +38,18 @@
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-left, .canvas-container .btn-drag-here-right, .canvas-container .btn-drag-here_mobile, .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-left, .canvas-container .btn-drag-here-right, .canvas-container .btn-drag-here_mobile, .canvas-container .btn-cancel {
.canvas-container .btn-drag-here, .canvas-container .btn-drag-here_mobile, .canvas-container .btn-cancel {
cursor: pointer;
z-index: 9999;
}
.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-left, .canvas-container .btn-drag-here-right {
.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 {
cursor: pointer;
font-size: 25px;
}

74
public/js/organization.js
View file

@ -87,9 +87,8 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
pageHTML += '<div title="' + trad['Delete this 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="' + trad['Restore this 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="' + trad['Move this 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="' + trad['Move here'] + '" class="position-absolute start-0 top-50 translate-middle p-2 ps-3 pe-3 rounded-circle container-resize btn-drag-here-left bg-white shadow d-none" style="left: -5px !important;"><i class="bi bi-arrow-up-square"></i></div>';
pageHTML += '<div title="' + trad['Move here'] + '" class="position-absolute start-100 top-50 translate-middle p-2 ps-3 pe-3 rounded-circle container-resize btn-drag-here-right bg-white shadow d-none" style="margin-left: 3px !important;"><i class="bi bi-arrow-up-square"></i></div>';
pageHTML += '<div title="' + trad['Move here'] + '" 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="' + trad['Move here'] + '" class="position-absolute start-50 top-50 translate-middle p-2 ps-3 pe-3 container-resize btn-drag-here d-none"><i class="bi bi-arrow-up-square"></i></div>';
pageHTML += '<div title="' + trad['Move here'] + '" class="position-absolute top-50 start-50 translate-middle rounded-circle container-resize btn-drag-here_mobile bg-white shadow d-none"><i class="bi bi-arrows-collapse"></i></div>';
pageHTML += '<div title="' + trad['Turn this 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="' + trad['Download this 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>';
pageHTML += '<p class="page-title position-absolute text-center w-100 ps-2 pe-2 pb-0 pt-0 mb-1 bg-white opacity-75 d-none" style="bottom: -4px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">Page '+page.pageNumber+' - '+filename+'</p>';
@ -104,7 +103,7 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
let canvasContainer = document.getElementById('canvas-container-' + pageIndex);
canvasContainer.addEventListener('click', function(e) {
if(isPageDeleted(this) || isPageDragged(this)) {
if(isPageDeleted(this) || isPageDragged(this) || isDraggedMode()) {
return;
}
canvasContainer.querySelector('.btn-select').click();
@ -127,9 +126,6 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
if(isDraggedMode()) {
return false;
}
if(isSelectionMode()) {
return false;
}
this.querySelector('.container-resize').classList.add('d-none');
this.querySelector('.canvas-pdf').classList.add('shadow-lg');
this.querySelector('.canvas-pdf').style.border = '2px dashed #777';
@ -198,20 +194,17 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
});
canvasContainer.querySelector('.btn-drag').addEventListener('click', function(e) {
e.stopPropagation();
toggleDragPage(this.parentNode);
toggleSelectPage(this.parentNode);
document.getElementById('btn_drag_select').click();
});
canvasContainer.querySelector('.btn-drag-here_mobile').addEventListener('click', function(e) {
e.stopPropagation();
movePagesDragged(this.parentNode, 'right');
});
canvasContainer.querySelector('.btn-drag-here-right').addEventListener('click', function(e) {
canvasContainer.querySelector('.btn-drag-here').addEventListener('click', function(e) {
e.stopPropagation();
movePagesDragged(this.parentNode, 'right');
});
canvasContainer.querySelector('.btn-drag-here-left').addEventListener('click', function(e) {
e.stopPropagation();
movePagesDragged(this.parentNode, 'left');
});
canvasContainer.querySelector('.btn-download').addEventListener('click', function(e) {
e.stopPropagation();
let container = this.parentNode;
@ -387,7 +380,7 @@ var movePagesDragged = function(pageHere, position) {
pageHere.insertAdjacentElement('beforebegin', page);
}
});
bootstrap.Modal.getOrCreateInstance(document.querySelector('#modalDrag')).hide();
document.getElementById('btn_drag_select').click();
}
var toggleDeletePage = function(page) {
@ -424,13 +417,17 @@ var updatePageState = function(page) {
page.querySelector('.btn-select').classList.add('d-none');
page.querySelector('.btn-select').classList.remove('text-primary');
page.querySelector('.btn-drag').classList.add('d-none');
page.querySelector('.btn-drag-here-left').classList.add('d-none');
page.querySelector('.btn-drag-here-right').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');
page.querySelector('.canvas-pdf').classList.remove('opacity-50');
page.classList.remove('page-dragged');
page.draggable = true;
if(isSelectionMode()) {
page.draggable = false;
}
if(isPageDeleted(page)) {
page.querySelector('.canvas-pdf').style.opacity = '0.15';
@ -458,7 +455,7 @@ var updatePageState = function(page) {
page.querySelector('.btn-restore').classList.remove('d-none');
}
if(isPageSelected(page) && !isDraggedMode()) {
if(isPageSelected(page)) {
page.querySelector('.page-title').classList.remove('d-none');
page.classList.add('border-primary', 'shadow-sm', 'bg-primary');
page.classList.remove('border-transparent', 'bg-transparent', 'border-secondary', 'bg-secondary');
@ -474,8 +471,7 @@ var updatePageState = function(page) {
if(!isPageDragged(page) && isDraggedMode()) {
page.querySelector('.canvas-pdf').classList.add('opacity-50');
page.querySelector('.btn-drag-here-left').classList.remove('d-none');
page.querySelector('.btn-drag-here-right').classList.remove('d-none');
page.querySelector('.btn-drag-here').classList.remove('d-none');
}
}
@ -537,11 +533,6 @@ var updateGlobalState = function() {
document.querySelector('#bottom_bar_action').classList.add('d-none');
document.querySelector('#save').setAttribute('disabled', 'disabled');
}
if(isDraggedMode()) {
document.querySelector('#modalDrag .modal-body').insertAdjacentElement('afterbegin', document.querySelector('#container-pages'));
document.querySelector('#container-pages').style.overflow = 'visible';
bootstrap.Modal.getOrCreateInstance(document.querySelector('#modalDrag')).show();
}
}
var degreesToOrientation = function(degrees) {
@ -630,6 +621,9 @@ var createEventsListener = function() {
document.getElementById('btn_cancel_select').click();
});
document.getElementById('btn_cancel_select').addEventListener('click', function(event) {
if(isDraggedMode()) {
document.getElementById('btn_drag_select').click();
}
document.querySelectorAll('.input-select:checked').forEach(function(input) {
input.parentNode.querySelector('.btn-select').click();
});
@ -638,6 +632,9 @@ var createEventsListener = function() {
document.getElementById('btn_delete_select').click();
});
document.getElementById('btn_delete_select').addEventListener('click', function(event) {
if(isDraggedMode()) {
document.getElementById('btn_drag_select').click();
}
let pages = getPagesSelected();
for(index in pages) {
deletePage(pages[index]);
@ -660,34 +657,12 @@ var createEventsListener = function() {
for(index in pages) {
toggleDragPage(pages[index]);
}
this.classList.toggle('active');
document.getElementById('btn_drag_select_mobile').classList.toggle('active');
});
document.getElementById('btn_drag_select_mobile').addEventListener('click', function(event) {
document.getElementById('btn_drag_select').click();
});
document.querySelector('#modalDrag').addEventListener('shown.bs.modal', event => {
document.querySelector('#modalDrag .modal-body').scrollTop = document.querySelector('.page-dragged').offsetTop;
});
document.querySelector('#modalDrag').addEventListener('hide.bs.modal', event => {
document.querySelector('#container-main').insertAdjacentElement('afterbegin', document.querySelector('#container-pages'));
document.querySelector('#container-pages').style.overflowY = 'scroll';
document.querySelector('#container-pages').style.overflowX = 'hidden';
});
document.querySelector('#modalDrag').addEventListener('hidden.bs.modal', event => {
if(is_mobile()) {
window.scrollTo(0, document.querySelector('.page-dragged').offsetTop);
} else {
document.querySelector('#container-pages').scrollTop = document.querySelector('.page-dragged').offsetTop;
}
document.querySelectorAll('.canvas-container .input-drag:checked').forEach(function(item) {
let page = item.parentNode;
page.querySelector('input[type=checkbox].input-drag').checked = false;
});
document.querySelectorAll('.canvas-container').forEach(function(page) {
page.querySelector('input[type=checkbox].input-hover').checked = false;
updatePageState(page);
});
updateGlobalState();
});
document.querySelector('#btn_liste_pdf').addEventListener('click', function(event) {
bootstrap.Modal.getOrCreateInstance(document.querySelector('#modalFichier')).show();
document.querySelector('#modalFichier .modal-body').insertAdjacentElement('afterbegin', document.querySelector('#list_pdf'));
@ -695,9 +670,6 @@ var createEventsListener = function() {
document.querySelector('#btn_liste_pdf_bar').addEventListener('click', function(event) {
document.querySelector('#btn_liste_pdf').click();
});
document.querySelector('#modalDrag').addEventListener('hidden.bs.modal', event => {
document.querySelector('#list_pdf_container').insertAdjacentElement('afterbegin', document.querySelector('#list_pdf'));
});
document.querySelector('body').addEventListener('click', function(event) {
if(!event.originalTarget.classList.contains('offcanvas-header') && !event.originalTarget.classList.contains('offcanvas-body') && event.originalTarget.id != 'container-pages' && event.originalTarget.id != 'sidebarToolsLabel' && event.originalTarget.id != 'btn_container') {
return;

12
templates/organization.html.php
View file

@ -115,18 +115,6 @@
</div>
</div>
</div>
<div class="modal fade" id="modalDrag" tabindex="-1">
<div class="modal-dialog modal-dialog-scrollable modal-xl modal-fullscreen-md-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><?php echo("Page move"); ?></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body bg-light ps-5">
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalFichier" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">