Skip to content

Commit

Permalink
organisation: better management of page movement
Browse files Browse the repository at this point in the history
  • Loading branch information
@wincelau
wincelau committed Sep 23, 2023
1 parent 2cb09d6 commit b6c1480
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 66 deletions.
10 changes: 7 additions & 3 deletions public/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Expand Down
74 changes: 23 additions & 51 deletions public/js/organization.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>';
Expand All @@ -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();
Expand All @@ -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';
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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');
Expand All @@ -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');
}
}

Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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();
});
Expand All @@ -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]);
Expand All @@ -660,44 +657,19 @@ 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'));
});
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;
Expand Down
12 changes: 0 additions & 12 deletions templates/organization.html.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down

0 comments on commit b6c1480

Please sign in to comment.