File "debug03.php"
Full Path: /home/analogde/www/WINDOWS/2024_PHP/debug03.php
File size: 29.76 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Explorateur de fichiers</title>
<style>
ul { list-style-type: none; }
.directory { cursor: pointer; }
.file { cursor: pointer; }
.hidden { display: none; }
.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;
width: 150px;
font-family: sans-serif;
}
.context-menu ul {
margin: 0;
padding: 0;
}
.context-menu ul li {
list-style: none;
padding: 8px 12px;
cursor: pointer;
background-color: white;
}
.context-menu ul li:hover {
background-color: #0078d4;
color: white;
}
.file span { cursor: pointer; }
.menu-info {
padding: 10px;
border-bottom: 1px solid #ccc;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<ul id="file-explorer"></ul>
<div id="context-menu" class="context-menu">
<div class="menu-info">
<p id="file-name">Fichier : </p>
<p id="file-path">Chemin : </p>
<p id="file-level">Niveau : </p>
</div>
<ul>
<li data-action="open">Ouvrir</li>
<li data-action="delete">Supprimer</li>
<li data-action="rename">Renommer</li>
</ul>
</div>
<?php
function getDirectoryTree($dir, $level = 0) {
$result = [];
if (is_dir($dir)) {
$items = scandir($dir);
foreach ($items as $item) {
if ($item === '.' || $item === '..') continue;
$path = $dir . DIRECTORY_SEPARATOR . $item;
if (is_dir($path)) {
// C'est un répertoire
$result[] = [
'type' => 'directory',
'name' => $item,
'path' => $path,
'level' => $level,
'children' => getDirectoryTree($path, $level + 1)
];
} else {
// C'est un fichier
$result[] = [
'type' => 'file',
'name' => $item,
'path' => $path,
'level' => $level
];
}
}
}
return $result;
}
// Exemple d'utilisation pour un répertoire
$tree = getDirectoryTree( getcwd() );
echo json_encode($tree);
?>
<script>
/*
// Exemple de données d'arborescence (remplacer par celles du PHP)
const treeData = <?php echo json_encode($tree); ?>;
// 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.classList.add('hidden');
createTreeView(item.children, ul);
li.appendChild(ul);
li.addEventListener('click', function (e) {
const subTree = this.querySelector('ul');
if (subTree.classList.contains('hidden')) {
subTree.classList.remove('hidden');
} else {
subTree.classList.add('hidden');
}
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);
});
}
parentElement.appendChild(li);
});
}
// Fonction pour afficher le menu contextuel
function showContextMenu(e, file) {
const contextMenu = document.getElementById('context-menu');
contextMenu.innerHTML = `
<p>Fichier : ${file.name}</p>
<p>Chemin complet : ${file.path}</p>
<p>Niveau : ${file.level}</p>
<ul>
<li>Ouvrir</li>
<li>Supprimer</li>
</ul>
`;
contextMenu.style.top = e.clientY + 'px';
contextMenu.style.left = e.clientX + 'px';
contextMenu.style.display = 'block';
}
// Masquer le menu contextuel lorsque l'on clique en dehors
window.addEventListener('click', function () {
document.getElementById('context-menu').style.display = 'none';
});
// Créer l'arborescence
createTreeView(treeData, document.getElementById('file-explorer'));
*/
/****************************/
// Exemple de données d'arborescence (remplacer par celles du PHP)
/*
const treeData = <?php echo json_encode($tree); ?>;
// 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.classList.add('hidden');
createTreeView(item.children, ul);
li.appendChild(ul);
// Ajouter un événement de clic pour les répertoires
li.addEventListener('click', function (e) {
const subTree = this.querySelector('ul');
if (subTree.classList.contains('hidden')) {
subTree.classList.remove('hidden');
} else {
subTree.classList.add('hidden');
}
e.stopPropagation(); // Empêcher la propagation du clic vers les éléments parents
});
} else if (item.type === 'file') {
li.classList.add('file');
li.innerHTML = '📄 ' + item.name;
// Ajouter un événement de clic droit pour les fichiers (menu contextuel)
li.addEventListener('contextmenu', function (e) {
e.preventDefault();
showContextMenu(e, item);
});
// Empêcher la propagation des événements de clic des fichiers vers les répertoires
li.addEventListener('click', function (e) {
e.stopPropagation(); // Empêche de replier le répertoire parent lors d'un clic sur le fichier
});
}
parentElement.appendChild(li);
});
}
// Fonction pour afficher le menu contextuel
function showContextMenu(e, file) {
const contextMenu = document.getElementById('context-menu');
contextMenu.innerHTML = `
<p>Fichier : ${file.name}</p>
<p>Chemin complet : ${file.path}</p>
<p>Niveau : ${file.level}</p>
<ul>
<li>Ouvrir</li>
<li>Supprimer</li>
</ul>
`;
contextMenu.style.top = e.clientY + 'px';
contextMenu.style.left = e.clientX + 'px';
contextMenu.style.display = 'block';
}
// Masquer le menu contextuel lorsque l'on clique en dehors
window.addEventListener('click', function () {
document.getElementById('context-menu').style.display = 'none';
});
// Créer l'arborescence
createTreeView(treeData, document.getElementById('file-explorer'));
*/
/*************************************/
// Exemple de données d'arborescence (remplacer par celles du PHP)
/*
const treeData = <?php echo json_encode($tree); ?>;
// 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.classList.add('hidden');
createTreeView(item.children, ul);
li.appendChild(ul);
// Ajouter un événement de clic pour les répertoires
li.addEventListener('click', function (e) {
const subTree = this.querySelector('ul');
if (subTree.classList.contains('hidden')) {
subTree.classList.remove('hidden');
} else {
subTree.classList.add('hidden');
}
e.stopPropagation(); // Empêcher la propagation du clic vers les éléments parents
});
} else if (item.type === 'file') {
li.classList.add('file');
li.innerHTML = '📄 ' + item.name;
// Ajouter un événement de clic droit pour les fichiers (menu contextuel)
li.addEventListener('contextmenu', function (e) {
e.preventDefault();
showContextMenu(e, item);
});
// Empêcher la propagation des événements de clic des fichiers vers les répertoires
li.addEventListener('click', function (e) {
e.stopPropagation(); // Empêche de replier le répertoire parent lors d'un clic sur le fichier
});
}
parentElement.appendChild(li);
});
}
// Fonction pour afficher le menu contextuel
function showContextMenu(e, file) {
const contextMenu = document.getElementById('context-menu');
contextMenu.innerHTML = `
<p>Fichier : ${file.name}</p>
<p>Chemin complet : ${file.path}</p>
<p>Niveau : ${file.level}</p>
<ul>
<li>Ouvrir</li>
<li>Supprimer</li>
</ul>
`;
contextMenu.style.top = e.clientY + 'px';
contextMenu.style.left = e.clientX + 'px';
contextMenu.style.display = 'block';
// Empêcher que le clic droit ferme immédiatement le menu
e.stopPropagation();
}
// Masquer le menu contextuel lorsque l'on clique en dehors
window.addEventListener('click', function () {
const contextMenu = document.getElementById('context-menu');
contextMenu.style.display = 'none';
});
// Empêcher le menu contextuel de disparaître si on clique à l'intérieur
document.getElementById('context-menu').addEventListener('click', function (e) {
e.stopPropagation();
});
// Créer l'arborescence
createTreeView(treeData, document.getElementById('file-explorer'));
*/
/**********************************/
/*
// Exemple de données d'arborescence (remplacer par celles du PHP)
const treeData = <?php echo json_encode($tree); ?>;
// 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.classList.add('hidden');
createTreeView(item.children, ul);
li.appendChild(ul);
// Ajouter un événement de clic pour les répertoires
li.addEventListener('click', function (e) {
const subTree = this.querySelector('ul');
if (subTree.classList.contains('hidden')) {
subTree.classList.remove('hidden');
} else {
subTree.classList.add('hidden');
}
e.stopPropagation(); // Empêcher la propagation du clic vers les éléments parents
});
} else if (item.type === 'file') {
li.classList.add('file');
li.innerHTML = '📄 ' + item.name;
// Ajouter un événement de clic droit pour les fichiers (menu contextuel)
li.addEventListener('contextmenu', function (e) {
e.preventDefault();
showContextMenu(e, item);
});
// Empêcher la propagation des événements de clic des fichiers vers les répertoires
li.addEventListener('click', function (e) {
e.stopPropagation(); // Empêche de replier le répertoire parent lors d'un clic sur le fichier
});
}
parentElement.appendChild(li);
});
}
// Fonction pour afficher le menu contextuel
function showContextMenu(e, file) {
const contextMenu = document.getElementById('context-menu');
contextMenu.innerHTML = `
<p>Fichier : ${file.name}</p>
<p>Chemin complet : ${file.path}</p>
<p>Niveau : ${file.level}</p>
<ul>
<li>Ouvrir</li>
<li>Supprimer</li>
</ul>
`;
contextMenu.style.top = e.clientY + 'px';
contextMenu.style.left = e.clientX + 'px';
contextMenu.style.display = 'block';
// Empêcher que le clic droit ferme immédiatement le menu
e.stopPropagation();
}
// Masquer le menu contextuel lorsque l'on clique en dehors
window.addEventListener('click', function () {
const contextMenu = document.getElementById('context-menu');
contextMenu.style.display = 'none';
});
// Empêcher le menu contextuel de disparaître si on clique à l'intérieur
document.getElementById('context-menu').addEventListener('click', function (e) {
e.stopPropagation();
});
// Masquer le menu contextuel lorsque la touche Escape est pressée
window.addEventListener('keydown', function (e) {
if (e.key === 'Escape') {
const contextMenu = document.getElementById('context-menu');
contextMenu.style.display = 'none';
}
});
// Créer l'arborescence
createTreeView(treeData, document.getElementById('file-explorer'));
*/
/****************************************** */
/*
// Exemple de données d'arborescence (remplacer par celles du PHP)
const treeData = <?php echo json_encode($tree); ?>;
// 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.classList.add('hidden');
createTreeView(item.children, ul);
li.appendChild(ul);
// Ajouter un événement de clic pour les répertoires
li.addEventListener('click', function (e) {
const subTree = this.querySelector('ul');
if (subTree.classList.contains('hidden')) {
subTree.classList.remove('hidden');
} else {
subTree.classList.add('hidden');
}
e.stopPropagation(); // Empêcher la propagation du clic vers les éléments parents
});
} else if (item.type === 'file') {
li.classList.add('file');
// Ajouter un span pour le texte du fichier et l'événement contextmenu
const fileSpan = document.createElement('span');
fileSpan.innerHTML = '📄 ' + item.name;
// Ajouter un événement de clic droit pour les fichiers (menu contextuel)
fileSpan.addEventListener('contextmenu', function (e) {
e.preventDefault();
showContextMenu(e, item);
});
// Empêcher la propagation des événements de clic des fichiers vers les répertoires
fileSpan.addEventListener('click', function (e) {
e.stopPropagation(); // Empêche de replier le répertoire parent lors d'un clic sur le fichier
});
li.appendChild(fileSpan);
}
parentElement.appendChild(li);
});
}
// Fonction pour afficher le menu contextuel
function showContextMenu(e, file) {
const contextMenu = document.getElementById('context-menu');
contextMenu.innerHTML = `
<p>Fichier : ${file.name}</p>
<p>Chemin complet : ${file.path}</p>
<p>Niveau : ${file.level}</p>
<ul>
<li>Ouvrir</li>
<li>Supprimer</li>
</ul>
`;
contextMenu.style.top = e.clientY + 'px';
contextMenu.style.left = e.clientX + 'px';
contextMenu.style.display = 'block';
// Empêcher que le clic droit ferme immédiatement le menu
e.stopPropagation();
}
// Masquer le menu contextuel lorsque l'on clique en dehors
window.addEventListener('click', function () {
const contextMenu = document.getElementById('context-menu');
contextMenu.style.display = 'none';
});
// Empêcher le menu contextuel de disparaître si on clique à l'intérieur
document.getElementById('context-menu').addEventListener('click', function (e) {
e.stopPropagation();
});
// Masquer le menu contextuel lorsque la touche Escape est pressée
window.addEventListener('keydown', function (e) {
if (e.key === 'Escape') {
const contextMenu = document.getElementById('context-menu');
contextMenu.style.display = 'none';
}
});
// Créer l'arborescence
createTreeView(treeData, document.getElementById('file-explorer'));
*/
/******************************************** */
/*
// Exemple de données d'arborescence (remplacer par celles du PHP)
const treeData = <?php echo json_encode($tree); ?>;
// 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.classList.add('hidden');
createTreeView(item.children, ul);
li.appendChild(ul);
// Ajouter un événement de clic pour les répertoires
li.addEventListener('click', function (e) {
const subTree = this.querySelector('ul');
if (subTree.classList.contains('hidden')) {
subTree.classList.remove('hidden');
} else {
subTree.classList.add('hidden');
}
e.stopPropagation(); // Empêcher la propagation du clic vers les éléments parents
});
} else if (item.type === 'file') {
li.classList.add('file');
// Ajouter un span pour le texte du fichier et l'événement contextmenu
const fileSpan = document.createElement('span');
fileSpan.innerHTML = '📄 ' + item.name;
// Ajouter un événement de clic droit pour les fichiers (menu contextuel)
fileSpan.addEventListener('contextmenu', function (e) {
e.preventDefault();
showContextMenu(e, item);
});
// Empêcher la propagation des événements de clic des fichiers vers les répertoires
fileSpan.addEventListener('click', function (e) {
e.stopPropagation(); // Empêche de replier le répertoire parent lors d'un clic sur le fichier
});
li.appendChild(fileSpan);
}
parentElement.appendChild(li);
});
}
// Fonction pour afficher le menu contextuel
function showContextMenu(e, file) {
const contextMenu = document.getElementById('context-menu');
contextMenu.innerHTML = `
<p>Fichier : ${file.name}</p>
<p>Chemin complet : ${file.path}</p>
<p>Niveau : ${file.level}</p>
<ul>
<li>Ouvrir</li>
<li>Supprimer</li>
</ul>
`;
contextMenu.style.top = e.clientY + 'px';
contextMenu.style.left = e.clientX + 'px';
contextMenu.style.display = 'block';
// Empêcher que le clic droit ferme immédiatement le menu
e.stopPropagation();
}
// Masquer le menu contextuel lorsque l'on clique ailleurs, avec le bouton gauche ou droit
window.addEventListener('click', function () {
const contextMenu = document.getElementById('context-menu');
contextMenu.style.display = 'none';
});
window.addEventListener('contextmenu', function () {
const contextMenu = document.getElementById('context-menu');
contextMenu.style.display = 'none';
});
// Empêcher le menu contextuel de disparaître si on clique à l'intérieur
document.getElementById('context-menu').addEventListener('click', function (e) {
e.stopPropagation();
});
// Masquer le menu contextuel lorsque la touche Escape est pressée
window.addEventListener('keydown', function (e) {
if (e.key === 'Escape') {
const contextMenu = document.getElementById('context-menu');
contextMenu.style.display = 'none';
}
});
// Créer l'arborescence
createTreeView(treeData, document.getElementById('file-explorer'));
*/
/*************************************/
/*
const treeData = <?php echo json_encode($tree); ?>;
// 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.classList.add('hidden');
createTreeView(item.children, ul);
li.appendChild(ul);
// Ajouter un événement de clic pour les répertoires
li.addEventListener('click', function (e) {
const subTree = this.querySelector('ul');
if (subTree.classList.contains('hidden')) {
subTree.classList.remove('hidden');
} else {
subTree.classList.add('hidden');
}
e.stopPropagation(); // Empêcher la propagation du clic vers les éléments parents
});
} else if (item.type === 'file') {
li.classList.add('file');
// Ajouter un span pour le texte du fichier et l'événement contextmenu
const fileSpan = document.createElement('span');
fileSpan.innerHTML = '📄 ' + item.name;
// Ajouter un événement de clic droit pour les fichiers (menu contextuel)
fileSpan.addEventListener('contextmenu', function (e) {
e.preventDefault();
showContextMenu(e, item);
});
// Empêcher la propagation des événements de clic des fichiers vers les répertoires
fileSpan.addEventListener('click', function (e) {
e.stopPropagation(); // Empêche de replier le répertoire parent lors d'un clic sur le fichier
});
li.appendChild(fileSpan);
}
parentElement.appendChild(li);
});
}
// Fonction pour afficher le menu contextuel
function showContextMenu(e, file) {
const contextMenu = document.getElementById('context-menu');
// Stocker les informations du fichier dans le menu contextuel (pour l'utiliser plus tard si besoin)
contextMenu.setAttribute('data-file', JSON.stringify(file));
contextMenu.style.top = e.clientY + 'px';
contextMenu.style.left = e.clientX + 'px';
contextMenu.style.display = 'block';
// Empêcher que le clic droit ferme immédiatement le menu
e.stopPropagation();
}
// Fonction pour gérer la sélection d'une option du menu contextuel
document.getElementById('context-menu').addEventListener('click', function (e) {
const action = e.target.getAttribute('data-action');
const file = JSON.parse(this.getAttribute('data-file'));
if (action) {
alert(`Action sélectionnée : ${action} sur le fichier ${file.name}`);
}
// Fermer le menu après avoir sélectionné une option
this.style.display = 'none';
});
// Masquer le menu contextuel lorsque l'on clique ailleurs, avec le bouton gauche ou droit
window.addEventListener('click', function () {
const contextMenu = document.getElementById('context-menu');
contextMenu.style.display = 'none';
});
window.addEventListener('contextmenu', function () {
const contextMenu = document.getElementById('context-menu');
contextMenu.style.display = 'none';
});
// Empêcher le menu contextuel de disparaître si on clique à l'intérieur
document.getElementById('context-menu').addEventListener('click', function (e) {
e.stopPropagation();
});
// Masquer le menu contextuel lorsque la touche Escape est pressée
window.addEventListener('keydown', function (e) {
if (e.key === 'Escape') {
const contextMenu = document.getElementById('context-menu');
contextMenu.style.display = 'none';
}
});
// Créer l'arborescence
createTreeView(treeData, document.getElementById('file-explorer'));
*/
// Exemple de données d'arborescence (remplacer par celles du PHP)
const treeData = <?php echo json_encode($tree); ?>;
// 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.classList.add('hidden');
createTreeView(item.children, ul);
li.appendChild(ul);
// Ajouter un événement de clic pour les répertoires
li.addEventListener('click', function (e) {
const subTree = this.querySelector('ul');
if (subTree.classList.contains('hidden')) {
subTree.classList.remove('hidden');
} else {
subTree.classList.add('hidden');
}
e.stopPropagation(); // Empêcher la propagation du clic vers les éléments parents
});
} else if (item.type === 'file') {
li.classList.add('file');
// Ajouter un span pour le texte du fichier et l'événement contextmenu
const fileSpan = document.createElement('span');
fileSpan.innerHTML = '📄 ' + item.name;
// Ajouter un événement de clic droit pour les fichiers (menu contextuel)
fileSpan.addEventListener('contextmenu', function (e) {
e.preventDefault();
showContextMenu(e, item);
});
// Empêcher la propagation des événements de clic des fichiers vers les répertoires
fileSpan.addEventListener('click', function (e) {
e.stopPropagation(); // Empêche de replier le répertoire parent lors d'un clic sur le fichier
});
li.appendChild(fileSpan);
}
parentElement.appendChild(li);
});
}
// Fonction pour afficher le menu contextuel
function showContextMenu(e, file) {
const contextMenu = document.getElementById('context-menu');
// Remplir les informations du fichier dans le menu contextuel
document.getElementById('file-name').textContent = `Fichier : ${file.name}`;
document.getElementById('file-path').textContent = `Chemin : ${file.path}`;
document.getElementById('file-level').textContent = `Niveau : ${file.level}`;
// Stocker les informations du fichier pour utilisation ultérieure
contextMenu.setAttribute('data-file', JSON.stringify(file));
// Positionner et afficher le menu contextuel
contextMenu.style.top = e.clientY + 'px';
contextMenu.style.left = e.clientX + 'px';
contextMenu.style.display = 'block';
// Empêcher que le clic droit ferme immédiatement le menu
e.stopPropagation();
}
// Fonction pour gérer la sélection d'une option du menu contextuel
document.getElementById('context-menu').addEventListener('click', function (e) {
const action = e.target.getAttribute('data-action');
const file = JSON.parse(this.getAttribute('data-file'));
if (action) {
alert(`Action sélectionnée : ${action} sur le fichier ${file.name}, Chemin : ${file.path}, Niveau : ${file.level}`);
}
// Fermer le menu après avoir sélectionné une option
this.style.display = 'none';
});
// Masquer le menu contextuel lorsque l'on clique ailleurs, avec le bouton gauche ou droit
window.addEventListener('click', function () {
const contextMenu = document.getElementById('context-menu');
contextMenu.style.display = 'none';
});
window.addEventListener('contextmenu', function () {
const contextMenu = document.getElementById('context-menu');
contextMenu.style.display = 'none';
});
// Empêcher le menu contextuel de disparaître si on clique à l'intérieur
document.getElementById('context-menu').addEventListener('click', function (e) {
e.stopPropagation();
});
// Masquer le menu contextuel lorsque la touche Escape est pressée
window.addEventListener('keydown', function (e) {
if (e.key === 'Escape') {
const contextMenu = document.getElementById('context-menu');
contextMenu.style.display = 'none';
}
});
// Créer l'arborescence
createTreeView(treeData, document.getElementById('file-explorer'));
</script>
</body>
</html>