diff --git a/.gitignore b/.gitignore index a30e3ad..15d19a0 100644 --- a/.gitignore +++ b/.gitignore @@ -6,4 +6,5 @@ _site .bundle vendor/bundle .DS_Store -Gemfile.lock \ No newline at end of file +Gemfile.lock +usb-butter* \ No newline at end of file diff --git a/assets/css/butter-dir-listing.css b/assets/css/butter-dir-listing.css index f11e0b9..8127548 100644 --- a/assets/css/butter-dir-listing.css +++ b/assets/css/butter-dir-listing.css @@ -18,7 +18,6 @@ a:focus { } body { - background-color: #FFDF3F; } h2 { @@ -58,14 +57,56 @@ tbody tr.d:first-of-type } div.list { - background-color: white; - border-top: 1px solid #646464; - border-bottom: 1px solid #646464; - padding-top: 10px; - padding-bottom: 14px; + /* Hide the builtin listing, we're going to render our own. */ + display: none; } div.foot { /* No need to display the lighttpd version; this is user-facing. */ display: none; +} + +.container { + display: flex; + align-items: center; + width: 100%; + height: 30px; + box-sizing: border-box; +} + +.logo-container { + display: flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; +} + +.logo-container img { + width: 20px; + height: 20px; +} + +.text-container { + display: flex; + flex-direction: column; + justify-content: center; + flex-grow: 1; + padding: 0 10px; + box-sizing: border-box; +} + +.text-container .upper-text { + font-size: 14px; + line-height: 18px; +} + +.text-container .lower-text { + font-size: 12px; + color: gray; +} + +.empty-block { + width: 30px; + height: 30px; } \ No newline at end of file diff --git a/assets/images/directory.svg b/assets/images/directory.svg new file mode 100644 index 0000000..897a905 --- /dev/null +++ b/assets/images/directory.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/js/butter-dir-listing.js b/assets/js/butter-dir-listing.js index 7aeb049..d57c0db 100644 --- a/assets/js/butter-dir-listing.js +++ b/assets/js/butter-dir-listing.js @@ -1 +1,84 @@ -console.log("butter-dir-listing.js loaded!"); \ No newline at end of file +console.log("butter-dir-listing.js loaded!"); + +const getFolderDivHTML = (directory_name, number_of_items, href) => { + return ` + +
+ directory +
+
+
${directory_name}
+
${number_of_items} items
+
+
+ `; +} + +// Function to extract directory listing information +function extractDirectoryListing() { + // Get all rows in the table body + const rows = document.querySelectorAll('tbody tr'); + console.log('Rows:', rows) + + // Initialize arrays to hold file and folder information + const files = []; + const folders = []; + + // Iterate over each row + rows.forEach(row => { + const nameCell = row.querySelector('td.n a'); + const modifiedCell = row.querySelector('td.m'); + const sizeCell = row.querySelector('td.s'); + const typeCell = row.querySelector('td.t'); + + const name = nameCell.textContent; + const lastModified = modifiedCell.textContent.trim(); + const size = sizeCell.textContent.trim(); + const type = typeCell.textContent.trim(); + const href = nameCell.getAttribute('href'); + + // Determine if it's a file or folder based on the class of the row or type + if (type === 'Directory' && name !== '..') { + folders.push({ + name: name.replace('/', ''), // Remove the trailing slash + lastModified: lastModified, + size: size, + type: type, + href: href + }); + } else { + files.push({ + name: name, + lastModified: lastModified, + size: size, + type: type, + href: href + }); + } + }); + + return { files, folders }; +} + +window.onload = function() { + // Example usage + const { files, folders } = extractDirectoryListing(); + console.log('Files:', files); + console.log('Folders:', folders); + + // insert a new div before div.list + const folderListing = document.createElement("div"); + folderListing.classList.add('folder-list'); + + // for each folder, add a div to folderListing + folders.forEach(folder => { + const folderDiv = document.createElement('div'); + folderDiv.classList.add('folder-row'); + folderDiv.innerHTML = getFolderDivHTML(folder.name, 0, folder.href); + folderListing.appendChild(folderDiv); + }); + + // do the insertion + const listDiv = document.querySelector('div.list'); + listDiv.parentNode.insertBefore(folderListing, listDiv); +} \ No newline at end of file diff --git a/simulated-usb-butter.html b/simulated-usb-butter/index.html similarity index 90% rename from simulated-usb-butter.html rename to simulated-usb-butter/index.html index 96f3784..db29632 100644 --- a/simulated-usb-butter.html +++ b/simulated-usb-butter/index.html @@ -29,24 +29,11 @@ layout: empty - - ../ -   - -   - Directory - - - johns_folder/ - 2024-May-01 15:39:05 - -   - Directory - - - ocw/ - 2024-Mar-29 20:42:52 - -   - Directory - + ../ -  Directory + John's Folder/2024-Jun-05 12:29:30-  Directory + johns_folder/2024-May-01 15:39:05-  Directory + ocw/2024-Mar-29 20:42:52-  Directory + some_file.txt2024-Jun-05 11:54:570.0Ktext/plain;charset=utf-8