ajout d'une modale indiquant qu'un téléversement est en cours
This commit is contained in:
parent
d9cc871f60
commit
6247c40cf9
@ -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() {
|
||||
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');
|
||||
|
||||
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);
|
||||
// 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';
|
||||
}
|
||||
imageUploadForm.files = dataTransfer.files;
|
||||
uploadForm.submit();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Initialisation : masquer les boutons au chargement
|
||||
document.addEventListener('DOMContentLoaded', updateActionButtons);
|
||||
// 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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user