From e112050623aa37dd0230220fb2dcc21e7dc5edde Mon Sep 17 00:00:00 2001
From: Vincent LAURENT <vince.laurent@gmail.com>
Date: Sun, 9 Oct 2022 01:46:17 +0200
Subject: [PATCH] [Organization] Button global to cancel draging mode

---
 public/js/organization.js       | 16 +++++++++++++++-
 templates/organization.html.php |  1 +
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/public/js/organization.js b/public/js/organization.js
index ff47515..bc6ffd9 100644
--- a/public/js/organization.js
+++ b/public/js/organization.js
@@ -192,7 +192,7 @@ var loadPDF = async function(pdfBlob, filename, pdfIndex) {
                 });
                 canvasContainer.querySelector('.btn-cancel').addEventListener('click', function(e) {
                     e.stopPropagation();
-                    toggleDragPage(this.parentNode);
+                    document.querySelector('#btn_cancel_drag_mode').click();
                 });
                 canvasContainer.querySelector('.btn-download').addEventListener('click', function(e) {
                     e.stopPropagation();
@@ -498,6 +498,8 @@ var updateGlobalState = function() {
     document.querySelector('#top_bar_action_selection').classList.add('d-none');
     document.querySelector('#bottom_bar_action').classList.remove('d-none');
     document.querySelector('#bottom_bar_action_selection').classList.add('d-none');
+    document.querySelector('#btn_cancel_drag_mode').classList.add('d-none');
+
     if(is_mobile()) {
         document.querySelector('#top_bar').classList.remove('d-none');
         document.querySelector('#bottom_bar').classList.remove('d-none');
@@ -523,6 +525,7 @@ var updateGlobalState = function() {
         document.querySelector('#bottom_bar_action').classList.add('d-none');
     }
     if(isDraggedMode()) {
+        document.querySelector('#btn_cancel_drag_mode').classList.remove('d-none');
         document.querySelector('#top_bar').classList.add('d-none');
         document.querySelector('#bottom_bar').classList.add('d-none');
         document.querySelector('#backdrop_drag_mode').style.width = document.querySelector('#container-pages').scrollWidth+'px';
@@ -543,6 +546,17 @@ var degreesToOrientation = function(degrees) {
 }
 
 var createEventsListener = function() {
+    document.querySelector('#btn_cancel_drag_mode').addEventListener('click', function(e) {
+        e.stopPropagation();
+        document.querySelectorAll('.canvas-container .input-drag:checked').forEach(function(item) {
+            let page = item.parentNode;
+            page.querySelector('input[type=checkbox].input-drag').checked = false;
+        });
+        updateGlobalState();
+        document.querySelectorAll('.canvas-container').forEach(function(page) {
+            updatePageState(page);
+        });
+    });
     document.getElementById('save-select_mobile').addEventListener('click', function(event) {
         document.getElementById('save').click();
         this.blur();
diff --git a/templates/organization.html.php b/templates/organization.html.php
index 9b933ba..042adb8 100644
--- a/templates/organization.html.php
+++ b/templates/organization.html.php
@@ -48,6 +48,7 @@
         <div id="div-margin-top" 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 position-relative" style="overflow-y: scroll; overflow-x: hidden;">
             <div id="backdrop_drag_mode" class="position-absolute bg-dark opacity-25 d-none"></div>
+            <button id="btn_cancel_drag_mode" type="button" class="btn-close position-fixed d-none" aria-label="Close" style="z-index: 1047; right: 354px; top: 2px;"></button>
         </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>