File "arboresence09.php"

Full Path: /home/analogde/www/CGI/uploads/arboresence09.php
File size: 7.49 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!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 generateFileTree($directory)
{
    echo "---->>> " .$directory;
    // Lire le contenu du répertoire
    $files = scandir($directory);
    echo "<ul>";
    
    foreach ($files as $file) {
        if ($file != '.' && $file != '..') {
            $filePath = $directory . DIRECTORY_SEPARATOR . $file;
            
            // Si c'est un dossier, ajouter un bouton pour l'expand/collapse
            if (is_dir($filePath)) {
                echo "<li class='directory' data-path='$filePath'><span class='folder-icon'>📁</span> $file";
                // Appeler récursivement pour les sous-répertoires
                echo "<ul class='hidden'>";
                generateFileTree($filePath);
                echo "</ul>";
                echo "</li>";
            } else {
                // Si c'est un fichier, afficher avec une icône appropriée
                $fileExtension = pathinfo($file, PATHINFO_EXTENSION);
                $fileIcon = getFileIcon($fileExtension);
                echo "<li class='file' data-path='$filePath'><span class='file-icon'>$fileIcon</span> $file</li>";
            }
        }
    }
    
    echo "</ul>";
}

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());
?>




    <!-- Menu contextuel -->
    <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>

    <script>
    
    // Gérer l'expansion et la réduction des dossiers au clic gauche
document.addEventListener('click', function(event) {
    const target = event.target;

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