diff --git a/script.js b/script.js index eedb201..ef8431d 100644 --- a/script.js +++ b/script.js @@ -165,9 +165,49 @@ function showLoading(show = true) { function updateCurrentPathDisplay() { const pathDisplay = document.getElementById("current-path"); - if (pathDisplay) { - pathDisplay.textContent = "/" + config.currentPath; + if (!pathDisplay) return; + + // Créer la structure de navigation breadcrumb + let breadcrumbHTML = ''; + + // Toujours commencer par la racine + if (config.currentPath) { + // Si on n'est pas à la racine, rendre "/" cliquable + breadcrumbHTML += '/ '; + } else { + // Si on est à la racine, afficher "/" sans lien + breadcrumbHTML += '/'; } + + // Si on a un chemin, découper et créer les segments + if (config.currentPath) { + const segments = config.currentPath.split('/').filter(segment => segment.length > 0); + + for (let i = 0; i < segments.length; i++) { + const segment = segments[i]; + const segmentPath = segments.slice(0, i + 1).join('/'); + + // Le dernier segment (actuel) n'est pas cliquable + if (i === segments.length - 1) { + breadcrumbHTML += segment; + } else { + // Les segments précédents sont cliquables + breadcrumbHTML += `${segment} / `; + } + } + } + + pathDisplay.innerHTML = breadcrumbHTML; + + // Ajouter les event listeners aux liens de navigation + const pathLinks = pathDisplay.querySelectorAll('.path-segment'); + pathLinks.forEach(link => { + link.addEventListener('click', (e) => { + e.preventDefault(); + const targetPath = link.getAttribute('data-path'); + loadBucketContents(targetPath, true); + }); + }); } async function loadBucketContents(path = "", pushToHistory = true) { diff --git a/style.css b/style.css index 56aa171..c64da6d 100644 --- a/style.css +++ b/style.css @@ -34,6 +34,23 @@ h1 { margin-bottom: 20px; } +/* Styles pour la navigation breadcrumb dans le titre */ +.path-segment { + color: #0066cc; + text-decoration: none; + font-weight: normal; + cursor: pointer; +} + +.path-segment:hover { + text-decoration: underline; + color: #004499; +} + +.path-segment:active { + color: #002266; +} + /* Section développement */ .dev-section { background-color: #f0f0f0;