File "debug09.php"

Full Path: /home/analogde/www/PERSO/uploads/debug09.php
File size: 6.31 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Explorateur de fichiers</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        ul {
            list-style-type: none;
            padding-left: 20px; /* Espacement pour l'arborescence */
            position: relative;
        }

        li {
            position: relative;
            padding: 5px 0;
            cursor: pointer;
        }

        li::before {
            content: '';
            position: absolute;
            left: -15px; /* Ajustez cette valeur pour aligner avec le texte */
            top: 10px; /* Ajustez cette valeur pour aligner avec le texte */
            width: 1px; /* Largeur de la ligne */
            height: calc(100% - 10px); /* Hauteur de la ligne pour couvrir le reste du nœud */
            background: #ccc; /* Couleur de la ligne */
        }

        li:last-child::before {
            height: 50%; /* Si c'est le dernier élément, réduire la ligne */
            top: 50%;
        }

        li.directory::after {
            content: '';
            position: absolute;
            left: -15px; /* Positionne la ligne pour le répertoire */
            top: 5px; /* Ajustez cette valeur pour aligner avec le texte */
            width: 10px; /* Largeur de la ligne pour la connexion vers les sous-répertoires */
            height: 1px; /* Longueur de la ligne */
            background: #ccc; /* Couleur de la ligne */
        }

        .context-menu {
            display: none;
            position: absolute;
            background-color: white;
            border: 1px solid #ccc;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
            padding: 0;
            z-index: 1000;
            min-width: 200px;
            max-width: 400px;
        }

        .context-menu ul {
            margin: 0;
            padding: 0;
            list-style-type: none !important; /* Supprime les puces de la liste */
        }

        .context-menu ul li {
            list-style: none !important; /* Supprime les puces de la liste */
            padding: 8px 12px;
            cursor: pointer;
            background-color: white;
        }

        .context-menu ul li:hover {
            background-color: #0078d4;
            color: white;
        }
    </style>
</head>
<body>

<ul id="tree-view"></ul>

<div id="context-menu" class="context-menu">
    <ul>
        <li id="open">Ouvrir</li>
        <li id="delete">Supprimer</li>
        <li id="rename">Renommer</li>
    </ul>
</div>

<script>
    let currentItem = {}; // Pour stocker l'élément actuellement sélectionné

    // Fonction pour créer l'arborescence
    function createTreeView(tree, parentElement) {
        tree.forEach(item => {
            const li = document.createElement('li');
            li.setAttribute('data-level', item.level);

            if (item.type === 'directory') {
                li.classList.add('directory');
                li.innerHTML = '📁 ' + item.name; // Ajout de l'icône de répertoire

                const ul = document.createElement('ul');
                ul.style.display = 'none'; // Masquer les sous-arborescences par défaut
                createTreeView(item.children, ul);
                li.appendChild(ul);

                li.addEventListener('click', function (e) {
                    const subTree = this.querySelector('ul');
                    if (subTree) {
                        subTree.style.display = subTree.style.display === 'none' ? 'block' : 'none';
                    }
                    e.stopPropagation();
                });
            } else if (item.type === 'file') {
                li.classList.add('file');
                li.innerHTML = '📄 ' + item.name; // Ajout de l'icône de fichier

                // Ouvrir le menu contextuel uniquement si on clique sur le nom du fichier
                li.addEventListener('contextmenu', function (e) {
                    e.preventDefault();
                    currentItem = item; // Stocker l'élément actuel
                    showContextMenu(e, item);
                });

                li.addEventListener('click', function (e) {
                    e.stopPropagation();
                });
            }

            parentElement.appendChild(li);
        });
    }

    function showContextMenu(event, item) {
        const contextMenu = document.getElementById('context-menu');
        contextMenu.style.top = event.clientY + 'px';
        contextMenu.style.left = event.clientX + 'px';
        contextMenu.style.display = 'block';

        // Gérer les clics sur les éléments du menu contextuel
        document.getElementById('open').onclick = function () {
            alert(`Ouvrir: ${currentItem.name}\nChemin: ${currentItem.path}\nNiveau: ${currentItem.level}`);
        };
        
        document.getElementById('delete').onclick = function () {
            alert(`Supprimer: ${currentItem.name}\nChemin: ${currentItem.path}\nNiveau: ${currentItem.level}`);
        };
        
        document.getElementById('rename').onclick = function () {
            alert(`Renommer: ${currentItem.name}\nChemin: ${currentItem.path}\nNiveau: ${currentItem.level}`);
        };
    }

    // Fermer le menu contextuel lorsque l'on clique ailleurs
    window.addEventListener('click', function (e) {
        const contextMenu = document.getElementById('context-menu');
        if (contextMenu.style.display === 'block') {
            contextMenu.style.display = 'none';
        }
    });

    // Fermer le menu contextuel si la touche Échap est pressée
    window.addEventListener('keydown', function (e) {
        const contextMenu = document.getElementById('context-menu');
        if (e.key === 'Escape' && contextMenu.style.display === 'block') {
            contextMenu.style.display = 'none';
        }
    });

    // Charger les données depuis le script PHP
    fetch('return_files.php') // Remplacez par le chemin vers votre fichier PHP
        .then(response => response.json())
        .then(data => createTreeView(data, document.getElementById('tree-view')))
        .catch(error => console.error('Erreur:', error));
</script>

</body>
</html>