ajout d'une modale indiquant qu'un téléversement est en cours

arbre-img-prive.php

@@ -227,80 +227,70 @@ $config = getSiteConfig();
         </form>
     </div>
 
+    <!-- Modale d'indication de téléversement -->
+    <div id="uploadModal" class="modal-upload">
+        <div class="modal-content">
+            <div class="spinner"></div>
+            <p>Téléversement en cours... veuillez patienter...</p>
+        </div>
+    </div>
+
     <script>
-        function updateActionButtons() {
+    document.addEventListener('DOMContentLoaded', function() {
-            const checkboxes = document.querySelectorAll('.image-checkbox:checked');
+        const modal = document.getElementById('uploadModal');
-            const count = checkboxes.length;
-            const deleteBtn = document.getElementById('deleteSelectedBtn');
-            
-            if (count > 0) {
-                deleteBtn.style.display = 'inline-flex';
-            } else {
-                deleteBtn.style.display = 'none';
-            }
-        }
-
-        function deleteImage(imageName) {
-            if (confirm('Êtes-vous sûr de vouloir supprimer cette image ?')) {
-                const form = document.getElementById('imagesForm');
-                form.innerHTML = `
-                    <input type="hidden" name="action" value="delete">
-                    <input type="hidden" name="images[]" value="${imageName}">
-                `;
-                form.submit();
-            }
-        }
-
-        function deleteSelected() {
-            const checkboxes = document.querySelectorAll('.image-checkbox:checked');
-            if (checkboxes.length > 0 && confirm('Êtes-vous sûr de vouloir supprimer les images sélectionnées ?')) {
-                document.getElementById('formAction').value = 'delete';
-                document.getElementById('imagesForm').submit();
-            }
-        }
-
-        function toggleTop(imageName) {
-            const form = document.createElement('form');
-            form.method = 'post';
-            form.innerHTML = `
-                <input type="hidden" name="action" value="toggle_top">
-                <input type="hidden" name="image" value="${imageName}">
-            `;
-            document.body.appendChild(form);
-            form.submit();
-        }
-
-        // Gestion du drag & drop
         const dropZone = document.getElementById('dropZone');
         const uploadForm = document.getElementById('uploadForm');
         const imageUploadForm = document.getElementById('imageUploadForm');
 
-        dropZone.addEventListener('dragover', (e) => {
+        // Gestion du formulaire d'upload
-            e.preventDefault();
+        if (uploadForm) {
-            dropZone.classList.add('drag-over');
+            uploadForm.addEventListener('submit', function(e) {
-        });
+                const fileInput = this.querySelector('input[type="file"]');
-
+                if (fileInput && fileInput.files && fileInput.files.length > 0) {
-        dropZone.addEventListener('dragleave', () => {
+                    modal.style.display = 'block';
-            dropZone.classList.remove('drag-over');
-        });
-
-        dropZone.addEventListener('drop', (e) => {
-            e.preventDefault();
-            dropZone.classList.remove('drag-over');
-            
-            const files = e.dataTransfer.files;
-            if (files.length > 0) {
-                const dataTransfer = new DataTransfer();
-                for (let file of files) {
-                    dataTransfer.items.add(file);
                 }
-                imageUploadForm.files = dataTransfer.files;
+            });
-                uploadForm.submit();
+        }
-            }
-        });
 
-        // Initialisation : masquer les boutons au chargement
+        // Gestion du drag & drop
-        document.addEventListener('DOMContentLoaded', updateActionButtons);
+        if (dropZone) {
+            dropZone.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                dropZone.classList.add('drag-over');
+            });
+
+            dropZone.addEventListener('dragleave', () => {
+                dropZone.classList.remove('drag-over');
+            });
+
+            dropZone.addEventListener('drop', (e) => {
+                e.preventDefault();
+                dropZone.classList.remove('drag-over');
+                
+                const files = e.dataTransfer.files;
+                if (files.length > 0) {
+                    const dataTransfer = new DataTransfer();
+                    for (let file of files) {
+                        dataTransfer.items.add(file);
+                    }
+                    imageUploadForm.files = dataTransfer.files;
+                    modal.style.display = 'block';  // Afficher la modale avant la soumission
+                    uploadForm.submit();
+                }
+            });
+        }
+
+    // Gestion du click sur "Ajouter des images"
+        const imageUploadInput = document.getElementById('imageUploadForm');
+        if (imageUploadInput) {
+            imageUploadInput.addEventListener('change', function() {
+                if (this.files && this.files.length > 0) {
+                    modal.style.display = 'block';
+                    uploadForm.submit();
+                }
+            });
+        }
+    });
     </script>
     <?php include 'footer.php'; ?>
 </body>

arbre-img.php

@@ -602,6 +602,72 @@ $config = getSiteConfig();
             </form>
         </div>
     </div>
+    <!-- Modale d'indication de téléversement -->
+    <div id="uploadModal" class="modal-upload">
+        <div class="modal-content">
+            <div class="spinner"></div>
+            <p>Téléversement en cours... veuillez patienter...</p>
+        </div>
+    </div>
+
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const modal = document.getElementById('uploadModal');
+        const dropZone = document.getElementById('dropZone');
+        const uploadForm = document.getElementById('uploadForm');
+        const imageUploadForm = document.getElementById('imageUploadForm');
+
+        // Gestion du formulaire d'upload
+        if (uploadForm) {
+            uploadForm.addEventListener('submit', function(e) {
+                const fileInput = this.querySelector('input[type="file"]');
+                if (fileInput && fileInput.files && fileInput.files.length > 0) {
+                    modal.style.display = 'block';
+                }
+            });
+        }
+
+        // Gestion du drag & drop
+        if (dropZone) {
+            dropZone.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                dropZone.classList.add('drag-over');
+            });
+
+            dropZone.addEventListener('dragleave', () => {
+                dropZone.classList.remove('drag-over');
+            });
+
+            dropZone.addEventListener('drop', (e) => {
+                e.preventDefault();
+                dropZone.classList.remove('drag-over');
+                
+                const files = e.dataTransfer.files;
+                if (files.length > 0) {
+                    const dataTransfer = new DataTransfer();
+                    for (let file of files) {
+                        dataTransfer.items.add(file);
+                    }
+                    imageUploadForm.files = dataTransfer.files;
+                    modal.style.display = 'block';  // Afficher la modale avant la soumission
+                    uploadForm.submit();
+                }
+            });
+        }
+
+    // Gestion du click sur "Ajouter des images"
+        const imageUploadInput = document.getElementById('imageUploadForm');
+        if (imageUploadInput) {
+            imageUploadInput.addEventListener('change', function() {
+                if (this.files && this.files.length > 0) {
+                    modal.style.display = 'block';
+                    uploadForm.submit();
+                }
+            });
+        }
+    });
+    </script>
+
     <?php include 'footer.php'; ?>
 </body>
 </html>

styles-admin.css

@@ -761,6 +761,45 @@ body {
     border-color: #1976d2;
 }
 
+.modal-upload {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+}
+
+.modal-content {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #2a2a2a;
+    color: #ffffff;
+    padding: 20px;
+    border-radius: 5px;
+    text-align: center;
+    border: 1px solid #3a3a3a;
+}
+
+.spinner {
+    border: 4px solid #3a3a3a;
+    border-top: 4px solid #ffffff;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 10px auto;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
 /* Style de la modale des clés de partage */
 .tree-button-share {
     background-color: rgba(33, 150, 243, 0.2) !important;