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