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

Move a page in clique instead of drag and drop for mobile mode

Browse Source
This commit is contained in:
Vincent LAURENT 2022-05-31 01:27:13 +02:00
parent 0739e2e7c3
commit d888334299
3 changed files with 100 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
public/css/app.css
View File

@ -34,12 +34,17 @@
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, .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 {
font-size: 30px;
cursor: move;
background: rgb(255,255,255,0.6);
}
.canvas-container .btn-drag-here, .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 {
cursor: pointer;
font-size: 25px;
@ -48,3 +53,9 @@
.border-transparent {
border-color: transparent !important;
}
#backdrop_drag_mode {
top: 0;
left: 0;
z-index: 1000;
}

88
public/js/organization.js
View File

@ -25,6 +25,9 @@ var responsiveDisplay = function() {
var isSelectionMode = function() {
return document.querySelectorAll('.canvas-container .input-select:checked').length > 0;
}
var isDraggedMode = function() {
return document.querySelectorAll('.canvas-container .input-drag:checked').length > 0;
}
var nbPagePerLine = 5;
if(is_mobile()) {
@ -65,6 +68,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-50 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-hand-index"></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 text-secondary 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>';
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>';
@ -72,6 +77,7 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
pageHTML += '<input type="hidden" class="input-rotate" value="0" id="input_rotate_'+pageIndex+'" />';
pageHTML += '<input type="checkbox" class="input-select d-none" value="'+pdfLetter+page.pageNumber+'" id="input_select_'+pageIndex+'" />';
pageHTML += '<input type="checkbox" class="input-hover d-none" value="'+pdfLetter+page.pageNumber+'" id="input_select_'+pageIndex+'" />';
pageHTML += '<input type="checkbox" class="input-drag d-none" value="'+pdfLetter+page.pageNumber+'" id="input_drag_'+pageIndex+'" />';
pageHTML += '</div>';
document.getElementById('container-pages').insertAdjacentHTML('beforeend', pageHTML);
@ -106,7 +112,7 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
canvasContainer.addEventListener('dragend', function(e) {
this.querySelector('.container-resize').classList.remove('d-none');
this.querySelector('.canvas-pdf').classList.remove('shadow-lg');
this.querySelector('.canvas-pdf').style.border = '2px solid transparent';
this.querySelector('.canvas-pdf').style.removeProperty('border');
this.style.opacity = 1;
updatePageState(this);
});
@ -131,6 +137,38 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
canvasContainer.querySelector('.btn-select').addEventListener('click', function(e) {
toggleSelectPage(this.parentNode);
});
canvasContainer.querySelector('.btn-drag').addEventListener('click', function(e) {
toggleDragPage(this.parentNode);
});
canvasContainer.querySelector('.btn-drag-here').addEventListener('click', function(e) {
let pageHere = this.parentNode;
let after = false;
let pageHereFound = false;
document.querySelectorAll('.canvas-container').forEach(function(page) {
if(page.id == pageHere.id) {
pageHereFound = true;
}
if(!after && isPageDragged(page) && !pageHereFound) {
after = true;
}
});
document.querySelectorAll('.canvas-container .input-drag:checked').forEach(function(item) {
let page = item.parentNode;
if(after) {
pageHere.insertAdjacentElement('afterend', page);
} else {
pageHere.insertAdjacentElement('beforebegin', page);
}
page.querySelector('input[type=checkbox].input-drag').checked = false;
});
updateGlobalState();
document.querySelectorAll('.canvas-container').forEach(function(page) {
updatePageState(page);
});
});
canvasContainer.querySelector('.btn-cancel').addEventListener('click', function(e) {
toggleDragPage(this.parentNode);
});
canvasContainer.querySelector('.btn-download').addEventListener('click', function(e) {
let container = this.parentNode;
let pageValue = container.querySelector('.checkbox-page').value;
@ -274,6 +312,24 @@ var isPageSelected = function(page) {
return page.querySelector('input[type=checkbox].input-select').checked;
}
var dragPage = function(page, state) {
page.querySelector('input[type=checkbox].input-drag').checked = state;
updatePageState(page);
}
var toggleDragPage = function(page) {
dragPage(page, !isPageDragged(page));
updateGlobalState();
document.querySelectorAll('.canvas-container').forEach(function(page) {
updatePageState(page);
});
}
var isPageDragged = function(page) {
return page.querySelector('input[type=checkbox].input-drag').checked;
}
var toggleDeletePage = function(page) {
deletePage(page, isPageDeleted(page))
updateGlobalState();
@ -298,13 +354,18 @@ var isPageHover = function(page) {
var updatePageState = function(page) {
page.classList.remove('border-primary', 'shadow-sm', 'bg-primary', 'border-secondary', 'bg-secondary');
page.classList.add('border-transparent', 'bg-transparent');
page.querySelector('.canvas-pdf').style.opacity = '1'
page.querySelector('.canvas-pdf').style.opacity = '1';
page.querySelector('.canvas-pdf').style.zIndex = 'inherit';
page.querySelector('.canvas-pdf').classList.add('shadow-sm');
page.querySelector('.canvas-pdf').classList.remove('shadow');
page.querySelector('.btn-rotate').classList.add('d-none');
page.querySelector('.btn-download').classList.add('d-none');
page.querySelector('.btn-delete').classList.add('d-none');
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-cancel').classList.add('d-none');
page.querySelector('.btn-drag-here').classList.add('d-none');
page.querySelector('.btn-restore').classList.add('d-none');
page.querySelector('.page-title').classList.add('d-none');
@ -312,7 +373,7 @@ var updatePageState = function(page) {
page.querySelector('.canvas-pdf').style.opacity = '0.15';
}
if(isPageHover(page) && !isPageDeleted(page)) {
if(isPageHover(page) && !isPageDeleted(page) && !isPageDragged(page) && !isDraggedMode()) {
page.querySelector('.page-title').classList.remove('d-none');
page.classList.add('border-secondary', 'bg-secondary');
page.classList.remove('border-transparent', 'bg-transparent');
@ -333,6 +394,17 @@ var updatePageState = function(page) {
page.querySelector('.btn-select').classList.add('text-primary');
page.querySelector('.btn-select').classList.remove('d-none')
}
if(isPageDragged(page)) {
page.querySelector('.btn-cancel').classList.remove('d-none');
page.querySelector('.canvas-pdf').classList.remove('shadow-sm');
page.querySelector('.canvas-pdf').classList.add('shadow');
page.querySelector('.canvas-pdf').style.zIndex = 9999;
}
if(!isPageDragged(page) && isDraggedMode()) {
page.querySelector('.btn-drag-here').classList.remove('d-none');
}
}
var updateFilesState = function() {
@ -361,6 +433,7 @@ var updateGlobalState = function() {
button.setAttribute('disabled', 'disabled');
});
document.querySelector('#container_btn_select .card-header span').innerText = "Aucune";
document.querySelector('#backdrop_drag_mode').classList.add('d-none');
if(isSelectionMode()) {
document.querySelector('#container_btn_select .card-header span').innerText = document.querySelectorAll('.canvas-container .input-select:checked').length;
document.querySelector('#container_btn_select').classList.remove('opacity-50');
@ -372,6 +445,15 @@ var updateGlobalState = function() {
button.classList.remove('btn-outline-secondary');
button.removeAttribute('disabled');
});
document.querySelectorAll('.canvas-container .btn-add').forEach(function(button) {
button.classList.remove('d-none');
});
}
if(isDraggedMode()) {
document.querySelector('#backdrop_drag_mode').style.width = document.querySelector('#container-pages').scrollWidth+'px';
console.log(document.querySelector('#container-pages'));
document.querySelector('#backdrop_drag_mode').style.height = document.querySelector('#container-pages').scrollHeight+'px';
document.querySelector('#backdrop_drag_mode').classList.remove('d-none');
}
}

5
templates/organization.html.php
View File

@ -44,7 +44,8 @@
</div>
<div id="page-organization" style="padding-right: 350px;" class="d-none">
<div style="height: 65px;" class="d-md-none"></div>
<div id="container-pages" class="col-12 pt-1 vh-100 d-flex align-content-start flex-wrap" style="overflow-y: scroll;">
<div id="container-pages" class="col-12 pt-1 vh-100 d-flex align-content-start flex-wrap position-relative" style="overflow-y: scroll;">
<div id="backdrop_drag_mode" class="position-absolute bg-dark opacity-25 d-none"></div>
</div>
<div id="container-btn-zoom" class="btn-group-vertical position-fixed" style="top: 6px; right: 368px;">
<button id="btn-zoom-increase" class="btn btn-outline-dark bg-white text-dark"><i class="bi bi-zoom-in"></i></button>
@ -102,6 +103,6 @@
<script>
var maxSize = <?php echo $maxSize ?>;
</script>
<script src="/js/organization.js?202205240042"></script>
<script src="/js/organization.js?202205310125"></script>
</body>
</html>