File "debug07.php"

Full Path: /home/analogde/www/CGI/uploads/debug07.php
File size: 4.84 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>Ouvrir</li>
        <li>Supprimer</li>
        <li>Renommer</li>
    </ul>
</div>

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

                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;

                li.addEventListener('contextmenu', function (e) {
                    e.preventDefault();
                    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';
    }

    window.addEventListener('click', function () {
        const contextMenu = document.getElementById('context-menu');
        contextMenu.style.display = 'none';
    });

    // Charger les données depuis le script PHP
    fetch('extract_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>