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

ajout d'un bouton pour déplacer les images d'un dossier à un autre

Browse Source
This commit is contained in:
Esenjin 2025-01-03 17:14:16 +01:00
parent 6f1994c53f
commit 464b4f5c24
2 changed files with 377 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

396
arbre-img.php
View File

@ -111,6 +111,49 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$_SESSION['success_message'] = "$deleteCount image(s) supprimée(s).";
}
break;
case 'move':
$images = $_POST['images'] ?? [];
$destinationPath = $_POST['destination_path'] ?? '';
$moveCount = 0;
$errors = [];
// Vérifier que le dossier de destination existe et est valide
if (!empty($destinationPath) && is_dir($destinationPath) && isSecurePath($destinationPath)) {
foreach ($images as $image) {
$sourcePath = $currentPath . '/' . basename($image);
$destPath = $destinationPath . '/' . basename($image);
// Vérifier que le fichier source existe et est dans un chemin sécurisé
if (file_exists($sourcePath) && isSecurePath($sourcePath)) {
// Vérifier si un fichier du même nom existe déjà dans la destination
if (file_exists($destPath)) {
$info = pathinfo($destPath);
$i = 1;
while (file_exists($destPath)) {
$destPath = $destinationPath . '/' . $info['filename'] . '_' . $i . '.' . $info['extension'];
$i++;
}
}
if (rename($sourcePath, $destPath)) {
$moveCount++;
} else {
$errors[] = "Erreur lors du déplacement de " . basename($image);
}
}
}
if ($moveCount > 0) {
$_SESSION['success_message'] = "$moveCount image(s) déplacée(s) avec succès.";
}
if (!empty($errors)) {
$_SESSION['error_message'] = implode("\n", $errors);
}
} else {
$_SESSION['error_message'] = "Dossier de destination invalide.";
}
break;
}
}
header('Location: arbre-img.php?path=' . urlencode($currentPath));
@ -156,7 +199,7 @@ $images = array_map(function($img) {
</head>
<body class="admin-page" data-page="<?php echo strpos($currentPath, 'img_carrousel') !== false ? 'carrousel' : 'default'; ?>">
<div class="admin-header">
<h1>
<h1>
<?php
if (strpos($currentPath, 'img_carrousel') !== false) {
echo 'Images du carrousel';
@ -164,21 +207,147 @@ $images = array_map(function($img) {
$currentAlbumInfo = getAlbumInfo($currentPath);
echo 'Images de : ' . htmlspecialchars($currentAlbumInfo['title']);
}
?></h1>
?>
</h1>
<div class="admin-actions">
<button onclick="document.getElementById('imageUploadForm').click()" class="action-button action-button-success">
Ajouter des images
</button>
<button onclick="deleteSelected()" id="deleteSelectedBtn" style="display: none;" class="action-button action-button-danger">
<button onclick="deleteSelected()" id="deleteSelectedBtn" class="action-button action-button-danger">
Supprimer la sélection
</button>
<button onclick="moveSelected()" id="moveSelectedBtn" class="action-button action-button-warning">
Déplacer la sélection
</button>
<a href="arbre.php?path=<?php echo urlencode($currentPath); ?>" class="action-button action-button-secondary">
Retour
</a>
</div>
</div>
<div class="admin-content">
<!-- Scripts -->
<script>
// Fonctions de gestion des sélections
function updateActionButtons() {
const checkboxes = document.querySelectorAll('.image-checkbox:checked');
const count = checkboxes.length;
const deleteBtn = document.getElementById('deleteSelectedBtn');
const moveBtn = document.getElementById('moveSelectedBtn');
if (count > 0) {
deleteBtn.style.display = 'inline-flex';
moveBtn.style.display = 'inline-flex';
} else {
deleteBtn.style.display = 'none';
moveBtn.style.display = 'none';
}
}
// Fonction de suppression multiple
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();
}
}
// Fonction de déplacement
function moveSelected() {
const checkboxes = document.querySelectorAll('.image-checkbox:checked');
if (checkboxes.length === 0) return;
const container = document.getElementById('selected-images-container');
container.innerHTML = '';
checkboxes.forEach(checkbox => {
const input = document.createElement('input');
input.type = 'hidden';
input.name = 'images[]';
input.value = checkbox.value;
container.appendChild(input);
});
document.getElementById('moveFolderModal').style.display = 'block';
}
// Fonction de suppression d'une seule image
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();
}
}
// Fonction de mise en top
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 des modales
function closeModal(modalId) {
document.getElementById(modalId).style.display = 'none';
}
// Gestion des clics sur les modales
window.onclick = function(event) {
if (event.target.classList.contains('modal')) {
event.target.style.display = 'none';
}
}
// Initialisation
document.addEventListener('DOMContentLoaded', function() {
// Masquer les boutons au démarrage
updateActionButtons();
// Gestion du drag & drop
const dropZone = document.getElementById('dropZone');
const uploadForm = document.getElementById('uploadForm');
const imageUploadForm = document.getElementById('imageUploadForm');
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;
uploadForm.submit();
}
});
}
});
</script>
<div class="admin-content">
<?php if (isset($_SESSION['success_message'])): ?>
<div class="message success-message"><?php echo nl2br(htmlspecialchars($_SESSION['success_message'])); ?></div>
<?php unset($_SESSION['success_message']); ?>
@ -197,10 +366,10 @@ $images = array_map(function($img) {
</form>
</div>
<form method="post" id="deleteForm">
<input type="hidden" name="action" value="delete">
<form method="post" id="imagesForm">
<input type="hidden" name="action" id="formAction" value="">
<div class="images-grid">
<?php foreach($images as $image):
<?php foreach($images as $image):
$isCarousel = strpos($currentPath, 'img_carrousel') !== false;
if ($isCarousel) {
@ -211,10 +380,10 @@ $images = array_map(function($img) {
?>
<div class="image-item">
<input type="checkbox" name="images[]" value="<?php echo htmlspecialchars($image); ?>"
class="image-checkbox" onchange="updateDeleteButton()">
class="image-checkbox" onchange="updateActionButtons()">
<div class="image-wrapper">
<img src="<?php echo htmlspecialchars($imageUrl); ?>"
alt="<?php echo htmlspecialchars($image); ?>" loading="lazy">
alt="<?php echo htmlspecialchars($image); ?>" loading="lazy">
<div class="image-actions">
<?php
$isTop = strpos($image, '--top--') !== false;
@ -234,7 +403,108 @@ $images = array_map(function($img) {
</form>
</div>
<!-- Modal de déplacement -->
<div id="moveFolderModal" class="modal">
<div class="modal-content">
<h2>Déplacer les images</h2>
<form method="post" id="moveForm">
<input type="hidden" name="action" value="move">
<div class="form-group">
<label for="destination_path">Choisir le dossier de destination :</label>
<select name="destination_path" id="destination_path" class="form-select" required>
<option value="">Sélectionner un dossier...</option>
<?php echo generateFolderList('./liste_albums', $currentPath); ?>
</select>
</div>
<div id="selected-images-container"></div>
<div class="form-actions">
<button type="button" onclick="closeModal('moveFolderModal')"
class="action-button action-button-secondary">Annuler</button>
<button type="submit" class="action-button action-button-warning">Déplacer</button>
</div>
</form>
</div>
</div>
<script>
// Gestion des boutons d'action
console.log("Définition de updateActionButtons");
function updateActionButtons() {
console.log("updateActionButtons appelé");
const checkboxes = document.querySelectorAll('.image-checkbox:checked');
const count = checkboxes.length;
console.log("Nombre d'images sélectionnées:", count);
const deleteBtn = document.getElementById('deleteSelectedBtn');
const moveBtn = document.getElementById('moveSelectedBtn');
if (!deleteBtn || !moveBtn) {
console.log("Boutons non trouvés");
return;
}
if (count > 0) {
deleteBtn.style.display = 'inline-flex';
moveBtn.style.display = 'inline-flex';
console.log("Affichage des boutons");
} else {
deleteBtn.style.display = 'none';
moveBtn.style.display = 'none';
console.log("Masquage des boutons");
}
}
// Fonction de suppression d'une seule image
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();
}
}
// Fonction de suppression multiple
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();
}
}
// Fonction de déplacement
function moveSelected() {
const checkboxes = document.querySelectorAll('.image-checkbox:checked');
if (checkboxes.length === 0) return;
const container = document.getElementById('selected-images-container');
container.innerHTML = '';
checkboxes.forEach(checkbox => {
const input = document.createElement('input');
input.type = 'hidden';
input.name = 'images[]';
input.value = checkbox.value;
container.appendChild(input);
});
document.getElementById('moveFolderModal').style.display = 'block';
}
// Gestion des modales
function closeModal(modalId) {
document.getElementById(modalId).style.display = 'none';
}
window.onclick = function(event) {
if (event.target.classList.contains('modal')) {
event.target.style.display = 'none';
}
}
// Gestion du drag & drop
const dropZone = document.getElementById('dropZone');
const uploadForm = document.getElementById('uploadForm');
@ -250,23 +520,20 @@ $images = array_map(function($img) {
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.classList.remove('drag-over');
const files = e.dataTransfer.files;
if (files.length > 0) {
// Créer un objet DataTransfer
const dataTransfer = new DataTransfer();
// Ajouter les fichiers
for (let file of files) {
dataTransfer.items.add(file);
}
// Mettre à jour l'input
imageUploadForm.files = dataTransfer.files;
// Soumettre le formulaire
uploadForm.submit();
}
});
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();
}
});
// Fonction de mise en top
function toggleTop(imageName) {
const form = document.createElement('form');
@ -279,30 +546,59 @@ $images = array_map(function($img) {
form.submit();
}
// Gestion de la suppression
function deleteImage(imageName) {
if (confirm('Êtes-vous sûr de vouloir supprimer cette image ?')) {
const form = document.getElementById('deleteForm');
form.innerHTML = `
<input type="hidden" name="action" value="delete">
<input type="hidden" name="images[]" value="${imageName}">
`;
form.submit();
}
}
function updateDeleteButton() {
const checkboxes = document.querySelectorAll('.image-checkbox:checked');
const deleteBtn = document.getElementById('deleteSelectedBtn');
deleteBtn.style.display = checkboxes.length > 0 ? 'inline-flex' : 'none';
}
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('deleteForm').submit();
}
}
// Initialisation : masquer les boutons au chargement
document.addEventListener('DOMContentLoaded', updateActionButtons);
</script>
<!-- Modal de déplacement -->
<div id="moveFolderModal" class="modal">
<div class="modal-content">
<h2>Déplacer les images</h2>
<form method="post" id="moveForm">
<input type="hidden" name="action" value="move">
<div class="form-group">
<label for="destination_path">Choisir le dossier de destination :</label>
<select name="destination_path" id="destination_path" class="form-select" required>
<option value="">Sélectionner un dossier...</option>
<?php
function generateFolderList($path, $currentPath, $level = 0) {
if (!is_dir($path)) return '';
$output = '';
$indent = str_repeat('&nbsp;&nbsp;&nbsp;&nbsp;', $level);
foreach (new DirectoryIterator($path) as $item) {
if ($item->isDot()) continue;
if ($item->isDir()) {
$fullPath = $item->getPathname();
// Ne pas afficher le dossier courant ni ses sous-dossiers
if (strpos($fullPath, $currentPath) === 0) continue;
// Ne pas afficher le dossier du carrousel
if (strpos($fullPath, './img_carrousel') === 0) continue;
if (!hasSubfolders($fullPath)) {
$info = getAlbumInfo($fullPath);
$output .= '<option value="' . htmlspecialchars($fullPath) . '">'
. $indent . htmlspecialchars($info['title'])
. '</option>';
}
$output .= generateFolderList($fullPath, $currentPath, $level + 1);
}
}
return $output;
}
echo generateFolderList('./liste_albums', $currentPath);
?>
</select>
</div>
<div id="selected-images-container"></div>
<div class="form-actions">
<button type="button" onclick="closeModal('moveFolderModal')"
class="action-button action-button-secondary">Annuler</button>
<button type="submit" class="action-button">Déplacer</button>
</div>
</form>
</div>
</div>
</body>
</html>

31
styles-admin.css
View File

@ -118,6 +118,37 @@ body {
background-color: #5a6268;
}
.action-button-warning {
background-color: #ffc107;
color: #000;
}
.action-button-warning:hover {
background-color: #e0a800;
}
.form-select {
width: 100%;
padding: 0.8rem;
border: none;
border-radius: 0.5rem;
background-color: #2a2a2a;
color: white;
font-size: 1rem;
cursor: pointer;
}
.form-select:focus {
outline: 2px solid #2196f3;
background-color: #333;
}
.form-select option {
background-color: #2a2a2a;
color: white;
padding: 0.5rem;
}
/* Menu administration */
.admin-menu {
display: grid;