Tiny File Manager

Back Back Up Advanced Editor

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

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

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

// 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);
    });
}

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

parentElement.appendChild(li);
    });
}

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

parentElement.appendChild(li);
    });
}

// Empêcher que le clic droit ferme immédiatement le menu
    e.stopPropagation();
}

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

// 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);
    });
}

// Empêcher que le clic droit ferme immédiatement le menu
    e.stopPropagation();
}

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

li.appendChild(fileSpan);
        }

parentElement.appendChild(li);
    });
}

// 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();
});

// Créer l'arborescence
createTreeView(treeData, document.getElementById('file-explorer'));

/*************************************/
/*

const treeData = <?php echo json_encode($tree); ?>;

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';
});

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

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

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

// Fermer le menu après avoir sélectionné une option
    this.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();
});

// Créer l'arborescence
createTreeView(treeData, document.getElementById('file-explorer'));

</script>
</body>
</html>