butter/butter-kanglam-ui
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

initial rerendering of dirlist

Browse source
This commit is contained in:
John Hess 2024-06-05 12:39:00 -05:00
parent 3a083f4425
commit 590549f4c4
5 changed files with 142 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -7,3 +7,4 @@ _site
vendor/bundle
.DS_Store
Gemfile.lock
usb-butter*

53
assets/css/butter-dir-listing.css
View file

@ -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;
}

4
assets/images/directory.svg Normal file
View file

@ -0,0 +1,4 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.9757 6H24.7535L26.6498 7.73281H13.5637C13.8132 6.76612 14.7691 6 15.9757 6Z" fill="#7571ED" stroke="#7571ED"/>
<path d="M13.0377 5H4.00943C2.35425 5 1.01505 6.2375 1.01505 7.75L1 24.25C1 25.7625 2.35425 27 4.00943 27H28.0849C29.7401 27 31 25.7512 31 24.2387V10.5C31 8.9875 29.7307 7.8 28.0755 7.8H16.0943L13.0377 5Z" fill="#C6C5C3"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 450 B

83
assets/js/butter-dir-listing.js
View file

@ -1 +1,84 @@
console.log("butter-dir-listing.js loaded!");
const getFolderDivHTML = (directory_name, number_of_items, href) => {
return `
<a class="container" href="${href}">
<div class="logo-container">
<img src="/assets/images/directory.svg" alt="directory">
</div>
<div class="text-container">
<div class="upper-text">${directory_name}</div>
<div class="lower-text">${number_of_items} items</div>
</div>
<div class="empty-block"></div>
</a>`;
}
// 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);
}

23
simulated-usb-butter.html → simulated-usb-butter/index.html
View file

@ -29,24 +29,11 @@ layout: empty
</tr>
</thead>
<tbody>
<tr class="d">
<td class="n"><a href="../">..</a>/</td>
<td class="m">&nbsp;</td>
<td class="s">- &nbsp;</td>
<td class="t">Directory</td>
</tr>
<tr class="d">
<td class="n"><a href="johns_folder/">johns_folder</a>/</td>
<td class="m">2024-May-01 15:39:05</td>
<td class="s">- &nbsp;</td>
<td class="t">Directory</td>
</tr>
<tr class="d">
<td class="n"><a href="ocw/">ocw</a>/</td>
<td class="m">2024-Mar-29 20:42:52</td>
<td class="s">- &nbsp;</td>
<td class="t">Directory</td>
</tr>
<tr class="d"><td class="n"><a href="../">..</a>/</td><td class="m">&nbsp;</td><td class="s">- &nbsp;</td><td class="t">Directory</td></tr>
<tr class="d"><td class="n"><a href="John%27s%20Folder/">John&#x27;s Folder</a>/</td><td class="m">2024-Jun-05 12:29:30</td><td class="s">- &nbsp;</td><td class="t">Directory</td></tr>
<tr class="d"><td class="n"><a href="johns_folder/">johns_folder</a>/</td><td class="m">2024-May-01 15:39:05</td><td class="s">- &nbsp;</td><td class="t">Directory</td></tr>
<tr class="d"><td class="n"><a href="ocw/">ocw</a>/</td><td class="m">2024-Mar-29 20:42:52</td><td class="s">- &nbsp;</td><td class="t">Directory</td></tr>
<tr><td class="n"><a href="some_file.txt">some_file.txt</a></td><td class="m">2024-Jun-05 11:54:57</td><td class="s">0.0K</td><td class="t">text/plain;charset=utf-8</td></tr>
</tbody>
</table>
</div>