camelia-studio/ICO
camelia-studio/ICO
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases 15 Wiki Activity

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

Browse Source
This commit is contained in:
Esenjin 2025-01-06 15:16:25 +01:00
parent d9cc871f60
commit 6247c40cf9
3 changed files with 162 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
arbre-img-prive.php
View File

@ -227,54 +227,33 @@ $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() {
const checkboxes = document.querySelectorAll('.image-checkbox:checked');
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
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');
@ -295,12 +274,23 @@ $config = getSiteConfig();
dataTransfer.items.add(file);
}
imageUploadForm.files = dataTransfer.files;
modal.style.display = 'block'; // Afficher la modale avant la soumission
uploadForm.submit();
}
});
}
// Initialisation : masquer les boutons au chargement
document.addEventListener('DOMContentLoaded', updateActionButtons);
// 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>

66
arbre-img.php
View File

@ -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>

39
styles-admin.css
View File

@ -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;