diff --git a/assets/css/butter-dir-listing.css b/assets/css/butter-dir-listing.css index e258684..544fba9 100644 --- a/assets/css/butter-dir-listing.css +++ b/assets/css/butter-dir-listing.css @@ -43,6 +43,24 @@ div.foot { font-size: 14px; } +.folder-name { + display: flex; + align-items: center; + height: 34px; + margin: 10px; + a { + display: flex; + align-items: center; + + } + img.back { + width: 18px; + height: 18px; + rotate: 180deg; + margin-right: 10px; + } +} + h2 { font-size: 18px; font-weight: 500; diff --git a/assets/js/butter-dir-listing.js b/assets/js/butter-dir-listing.js index 980b43c..fa5a7ec 100644 --- a/assets/js/butter-dir-listing.js +++ b/assets/js/butter-dir-listing.js @@ -8,7 +8,7 @@ console.log("butter-dir-listing.js loaded!"); -const supported_extensions = [".apk"]; +const supported_extensions = ["apk", "deb", "img", "pdf"]; const usbRoot = "usb-butter/"; const inferredBaseURL = window.location.pathname.split("/" + usbRoot)[0] + "/"; console.log("Inferred Base URL:", inferredBaseURL); @@ -30,8 +30,9 @@ const getFolderDivHTML = (directory_name, number_of_items, href) => { const getFileDivHTML = (file_name, size, date, href) => { icon = "ext-unknown.svg"; extension = file_name.split('.').pop(); + console.log("Extension:", extension); if (supported_extensions.includes(extension)) { - icon = "ext" + extension + ".svg"; + icon = "ext-" + extension + ".svg"; } return ` @@ -113,11 +114,13 @@ window.onload = function () { home Explore `; - pathSteps = path.split('/'); + const pathSteps = path.split('/'); + let thisDirsName = "Explore"; let pathToHere = usbRoot; pathSteps.forEach((step, index) => { - pathToHere += step + '/'; if (step !== "") { + pathToHere += step + '/'; + thisDirsName = step; breadcrumbHTML += ` ${step}`; } @@ -130,6 +133,13 @@ window.onload = function () { fullWithHR.classList.add('full-width'); listDiv.parentNode.insertBefore(fullWithHR, listDiv); + // Secondary header + const secondaryHeader = document.createElement('div'); + secondaryHeader.classList.add('folder-name'); + secondaryHeader.innerHTML = ``; + secondaryHeader.innerHTML += `${thisDirsName}`; + listDiv.parentNode.insertBefore(secondaryHeader, listDiv); + // Create a folder listing const folderListing = document.createElement("div"); folderListing.classList.add('folder-list'); diff --git a/simulated-usb-butter/johns_folder/index.html b/simulated-usb-butter/johns_folder/index.html index 964eb50..c0e0760 100644 --- a/simulated-usb-butter/johns_folder/index.html +++ b/simulated-usb-butter/johns_folder/index.html @@ -24,8 +24,9 @@ layout: empty ../ -  Directory johns_subfolder1/2024-Apr-30 17:11:52-  Directory johns_subfolder2/2024-Apr-30 17:11:54-  Directory -lub.zip2024-May-01 15:38:2230.3Mapplication/zip -test.txt2024-Mar-07 14:55:590.0Ktext/plain;charset=utf-8 +lub.pdf2024-May-01 15:38:2230.3Mapplication/zip +test.apk2024-Mar-07 14:55:590.0Ktext/plain;charset=utf-8 +foo.img2024-Mar-07 14:55:590.0Ktext/plain;charset=utf-8