diff --git a/module/webui/scripts/menu_option.js b/module/webui/scripts/menu_option.js index 655c492..d3590f0 100644 --- a/module/webui/scripts/menu_option.js +++ b/module/webui/scripts/menu_option.js @@ -147,6 +147,23 @@ document.head.appendChild(style); let currentPath = '/storage/emulated/0/Download'; +function updateCurrentPath() { + const currentPathElement = document.querySelector('.current-path'); + const segments = currentPath.split('/').filter(Boolean); + + // Create spans with data-path attribute for each segment + const pathHTML = segments.map((segment, index) => { + const fullPath = '/' + segments.slice(0, index + 1).join('/'); + return `${segment}`; + }).join(''); + + currentPathElement.innerHTML = pathHTML; + currentPathElement.scrollTo({ + left: currentPathElement.scrollWidth, + behavior: 'smooth' + }); +} + // Function to list files in directory async function listFiles(path, skipAnimation = false) { const fileList = document.querySelector('.file-list'); @@ -234,8 +251,34 @@ async function listFiles(path, skipAnimation = false) { } } applyRippleEffect(); + updateCurrentPath(); } +// Update click handler to use data-path attribute +document.querySelector('.current-path').addEventListener('click', async (event) => { + const segment = event.target.closest('.path-segment'); + if (!segment) return; + + const targetPath = segment.dataset.path; + if (!targetPath || targetPath === currentPath) return; + + // Return if already at /storage/emulated/0 + const clickedSegment = segment.textContent; + if ((clickedSegment === 'storage' || clickedSegment === 'emulated') && + currentPath === '/storage/emulated/0') { + return; + } + + // Always stay within /storage/emulated/0 + if (targetPath.split('/').length <= 3) { + currentPath = '/storage/emulated/0'; + } else { + currentPath = targetPath; + } + updateCurrentPath(); + await listFiles(currentPath); +}); + // Back button handler document.querySelector('.back-button').addEventListener('click', async () => { if (currentPath === '/storage/emulated/0') return;