Tiny File Manager

Back Back Up Advanced Editor

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Explorateur de fichiers</title>
    <style>
        ul { list-style-type: none; }
        li { padding: 5px; cursor: pointer; }
        .hidden { display: none; }
        .folder-icon, .file-icon { margin-right: 10px; }

/* Menu contextuel */
        .context-menu {
            position: absolute;
            background-color: white;
            border: 1px solid #ddd;
            padding: 10px;
            display: none;
            z-index: 1000;
        }
        .context-menu ul { list-style-type: none; padding: 0; }
        .context-menu li { padding: 5px; cursor: pointer; }
        .context-menu li:hover { background-color: #eee; }
    </style>
</head>
<body>

<?php

function getFileIcon($extension) 
{
    /*
    // Assigner des icônes selon l'extension
   
    $icons = [
        'txt' => '&#x1F4C4;', // 📄 pour fichier texte
        'jpg' => '&#x1F5BC;', // 🖼️ pour image jpg
        'png' => '&#x1F5BC;', // 🖼️ pour image png
        'pdf' => '&#x1F4D5;', // 📕 pour PDF
        'zip' => '&#x1F5DC;', // 🗜️ pour fichier compressé
        'default' => '&#x1F4C1;' // 📁 pour fichier par défaut
    ];
    
    return $icons[$extension] ?? $icons['default'];
    */
    return = '&#x1F4C1;'
}

// Appeler la fonction pour générer l'arborescence à partir du répertoire courant ou celui spécifié
 */   
    echo "TRACE...";

generateFileTree(getcwd());
?>

<div id="contextMenu" class="context-menu">
        <ul>
            <li id="option1">Option 1</li>
            <li id="option2">Option 2</li>
            <li id="option3">Option 3</li>
        </ul>
        <p id="elementInfo"></p>
    </div>

// Si l'élément cliqué est un dossier (représenté par la classe 'directory')
    if (target.closest('.directory')) {
        const liElement = target.closest('.directory');
        const sublist = liElement.querySelector('ul');

// Alternance entre afficher et cacher le contenu du dossier
        if (sublist.classList.contains('hidden')) {
            sublist.classList.remove('hidden');
            target.querySelector('.folder-icon').textContent = '📂'; // Icône ouverte
        } else {
            sublist.classList.add('hidden');
            target.querySelector('.folder-icon').textContent = '📁'; // Icône fermée
        }
    }
});

/*
// Gérer le menu contextuel au clic droit sur un fichier
document.addEventListener('contextmenu', function(event) {
    event.preventDefault();

const target = event.target.closest('.file');

if (target) {
        // Récupérer les informations du fichier
        const filePath = target.dataset.path;
        const fileName = target.textContent.trim();

// Positionner et afficher le menu contextuel
        const contextMenu = document.getElementById('contextMenu');
        contextMenu.style.top = `${event.clientY}px`;
        contextMenu.style.left = `${event.clientX}px`;
        contextMenu.style.display = 'block';

// Afficher les informations du fichier
        document.getElementById('elementInfo').textContent = `Fichier: ${fileName}, Chemin: ${filePath}`;

// Masquer le menu lorsque l'on clique ailleurs
        document.addEventListener('click', function(e) {
            if (!contextMenu.contains(e.target)) {
                contextMenu.style.display = 'none';
            }
        });
    }
});
*/

// Gérer le collapse/expand au clic sur le nom du répertoire parent
document.addEventListener('click', function(event) {
    const directoryName = event.target.closest('.directory'); // Vérifie si le clic est sur un répertoire

if (directoryName) {
        // Toggle (afficher/cacher) le contenu du répertoire
        const subTree = directoryName.querySelector('ul');
        if (subTree) {
            subTree.classList.toggle('hidden'); // Ajoute ou retire la classe 'hidden' pour afficher/masquer
        }
    }
});

// Gérer le menu contextuel uniquement au clic droit sur le texte du nom du fichier
document.addEventListener('contextmenu', function(event) {
    event.preventDefault(); // Empêcher le menu contextuel par défaut

const target = event.target.closest('.file-name') || event.target.closest('.directory'); // Vérifie si le clic est sur le nom du fichier ou d'un dossier

if (target) {
        // Récupérer l'élément parent qui contient les données du fichier ou dossier
        const itemElement = target.closest('li');
        const filePath = itemElement.dataset.path;   // Chemin relatif du fichier/dossier
        const depth = itemElement.dataset.depth;     // Profondeur dans l'arborescence
        const itemName = target.textContent.trim();  // Nom du fichier ou du dossier

// Positionner le menu contextuel aux coordonnées de la souris
        const contextMenu = document.getElementById('contextMenu');
        contextMenu.style.top = `${event.clientY}px`;  // Position Y de la souris
        contextMenu.style.left = `${event.clientX}px`; // Position X de la souris
        contextMenu.style.display = 'block';

// Afficher les informations du fichier/dossier dans le menu
        document.getElementById('elementInfo').textContent = `Nom: ${itemName}, Chemin: ${filePath}, Profondeur: ${depth}`;

// Masquer le menu lorsqu'on clique ailleurs
        document.addEventListener('click', function(e) {
            if (!contextMenu.contains(e.target)) {
                contextMenu.style.display = 'none';
            }
        });
    }

// Options du menu contextuel
document.getElementById('option1').addEventListener('click', function() {
    alert('Option 1 sélectionnée');
});
document.getElementById('option2').addEventListener('click', function() {
    alert('Option 2 sélectionnée');
});
document.getElementById('option3').addEventListener('click', function() {
    alert('Option 3 sélectionnée');
});

</script>
</body>
</html>