[Organization] Modal to manage docs in mobile

public/js/organization.js

@@ -314,7 +314,8 @@ var getFilesStats = function() {
 
 var updateListePDF = function() {
     document.querySelector('#list_pdf').innerHTML = "";
-    for (var i = 0; i < document.querySelector('#input_pdf').files.length; i++) {
+    let nbFiles = document.querySelector('#input_pdf').files.length;
+    for (var i = 0; i < nbFiles; i++) {
         let pdfLetter = String.fromCharCode(96 + i+1).toUpperCase();
         const pdfFile = document.querySelector('#input_pdf').files.item(i);
         document.querySelector('#list_pdf').insertAdjacentHTML('beforeend', '<li id="file_' + pdfLetter + '" class="list-group-item small ps-2 pe-5" title="'+decodeURI(pdfFile.name)+'" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden;"><i class="bi bi-files"></i><span class="ms-2">'+decodeURI(pdfFile.name)+'</span> <input class="form-check-input float-end position-absolute" style="right: 10px;" type="checkbox" /> </li>');
@@ -328,6 +329,10 @@ var updateListePDF = function() {
             updateGlobalState();
         });
         document.querySelector('#liste_pdf_titre_mobile').innerText = decodeURI(pdfFile.name);
+        document.querySelector('#btn_liste_pdf_bar span').innerText = nbFiles;
+        if(nbFiles > 1) {
+            document.querySelector('#liste_pdf_titre_mobile').innerText = nbFiles + ' documents PDF';
+        }
     }
     updateGlobalState();
 }
@@ -515,7 +520,7 @@ var updateGlobalState = function() {
 
     if(isSelectionMode()) {
         document.querySelector('#container_btn_select .card-header span').innerText = document.querySelectorAll('.canvas-container .input-select:checked').length;
-        document.querySelector('#top_bar_action_selection_recap span').innerText = document.querySelectorAll('.canvas-container .input-select:checked').length;
+        document.querySelector('#top_bar_action_selection_recap_nb_pages').innerText = document.querySelectorAll('.canvas-container .input-select:checked').length;
         document.querySelector('#container_btn_select').classList.remove('opacity-50');
         document.querySelector('#container_btn_select').classList.add('border-primary');
         document.querySelector('#container_btn_select .card-header').classList.remove('text-muted');
@@ -675,6 +680,16 @@ var createEventsListener = function() {
         });
         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'));
+    });
 }
 
 async function getPDFBlobFromCache(cacheUrl) {

templates/organization.html.php

@@ -62,8 +62,10 @@
                 <button type="button" class="btn-close text-reset d-md-none" data-bs-dismiss="offcanvas" aria-label="Close"></button>
             </div>
             <div class="offcanvas-body pt-3" style="padding-bottom: 60px;">
+                <div id="list_pdf_container">
                     <ul id="list_pdf" class="list-group">
                     </ul>
+                </div>
                 <div class="d-grid gap-2 mt-2">
                     <button type="button" class="btn btn-sm btn-outline-dark" onclick="document.getElementById('input_pdf_upload_2').click();"><i class="bi bi-plus-circle"></i> Ajouter un PDF</button>
                     <input id="input_pdf_upload_2" class="form-control d-none" type="file" accept=".pdf,application/pdf" multiple="true">
@@ -94,14 +96,14 @@
         <div id="top_bar" class="position-fixed top-0 start-0 bg-white w-100 shadow-sm d-md-none p-2">
             <div id="top_bar_action">
                 <div class="d-flex" role="group">
-                    <button type="button" class="btn btn-dark flex-grow-1 me-2"  style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+                    <button id="btn_liste_pdf" type="button" data-bs-toggle="modal" data-bs-target="#modalFichier" class="btn btn-dark flex-grow-1 me-2"  style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                         <i class="bi bi-files"></i> <span id="liste_pdf_titre_mobile"></span>
                     </button>
                     <button type="button" class="btn btn-outline-dark position-relative" style="padding-left: 30px;"  onclick="document.getElementById('input_pdf_upload_2').click(); this.blur();"><i class="bi bi-plus-circle position-absolute" style="left: 10px;"></i>Ajouter&nbsp;un&nbsp;PDF</button>
                 </div>
             </div>
             <div id="top_bar_action_selection" class="d-none">
-                <div id="top_bar_action_selection_recap" class="bg-primary text-white text-center rounded-top p-1 position-relative"><span>Aucune</span> page(s)<button id="btn_cancel_select_mobile" type="button" style="text-decoration: none;right: 0px; top:0px;" class="btn bg-white bg-opacity-50 text-primary position-absolute p-0 ps-1 pe-1 mt-1 me-1"><i class="bi bi-x-lg"></i>&nbsp;Annuler</button></div>
+                <div id="top_bar_action_selection_recap" class="bg-primary text-white text-center rounded-top p-1 position-relative"><button id="btn_liste_pdf_bar" type="button" style="text-decoration: none;left: 0px; top:0px;" class="btn bg-white bg-opacity-50 text-primary position-absolute p-0 ps-1 pe-1 mt-1 ms-1"><i class="bi bi-files"></i>&nbsp;<span></span> PDF</button><span id="top_bar_action_selection_recap_nb_pages">Aucune</span> page(s)<button id="btn_cancel_select_mobile" type="button" style="text-decoration: none;right: 0px; top:0px;" class="btn bg-white bg-opacity-50 text-primary position-absolute p-0 ps-1 pe-1 mt-1 me-1"><i class="bi bi-x-lg"></i>&nbsp;Annuler</button></div>
                 <div class="btn-group w-100">
                     <button id="btn_rotate_select_mobile" type="button" class="btn btn-outline-primary" style="border-top-left-radius: 0 !important;"><i class="bi bi-arrow-clockwise"></i> Tourner</button>
                     <button id="btn_drag_select_mobile" type="button" class="btn btn-outline-primary"><i class="bi bi-arrows-move"></i> Déplacer</button>
@@ -130,6 +132,18 @@
         </div>
       </div>
     </div>
+    <div class="modal fade" id="modalFichier" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h1 class="modal-title fs-5" id="exampleModalLabel">Documents PDF</h1>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                </div>
+            </div>
+        </div>
+    </div>
 
     <span id="is_mobile" class="d-md-none"></span>
 
@@ -138,6 +152,6 @@
     <script>
     var maxSize = <?php echo $maxSize ?>;
     </script>
-    <script src="/js/organization.js?202210140020"></script>
+    <script src="/js/organization.js?202210170048"></script>
   </body>
 </html>