From b6c1480179d5ee2188071c3eced4d8701ae3b343 Mon Sep 17 00:00:00 2001
From: Vincent LAURENT <vince.laurent@gmail.com>
Date: Sun, 24 Sep 2023 00:30:12 +0200
Subject: [PATCH] organisation: better management of page movement

---
 public/css/app.css              | 10 +++--
 public/js/organization.js       | 74 ++++++++++-----------------------
 templates/organization.html.php | 12 ------
 3 files changed, 30 insertions(+), 66 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index ca23aff..d6fa16b 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -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;
 }
diff --git a/public/js/organization.js b/public/js/organization.js
index cad9cc9..dd11c41 100644
--- a/public/js/organization.js
+++ b/public/js/organization.js
@@ -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;
diff --git a/templates/organization.html.php b/templates/organization.html.php
index c5fdffa..85ebeab 100644
--- a/templates/organization.html.php
+++ b/templates/organization.html.php
@@ -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">