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

list files

Browse source
This commit is contained in:
John Hess 2024-06-05 13:20:56 -05:00
parent 590549f4c4
commit 1abbe63776
9 changed files with 127 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,15 @@
/**
* This script redraws the default lighttpd directory listing to our custom styles.
*
* Since the person inserting the files has physical access to the box and we serve
* their static sites directly from the USB, ***THIS SCRIPT DOES NOT ATTEMPT TO PREVENT
* INJECTION ATTACKS***. We just pop filenames and the like right into innerHTML.
*/
console.log("butter-dir-listing.js loaded!");
const supported_extensions = [".apk"];
const getFolderDivHTML = (directory_name, number_of_items, href) => {
return `
<a class="container" href="${href}">
@ -12,7 +22,26 @@ const getFolderDivHTML = (directory_name, number_of_items, href) => {
</div>
<div class="empty-block"></div>
</a>`;
}
};
const getFileDivHTML = (file_name, size, date, href) => {
icon = "ext-unknown.svg";
extension = file_name.split('.').pop();
if (supported_extensions.includes(extension)) {
icon = "ext" + extension + ".svg";
}
return `
<a class="container" href="${href}">
<div class="logo-container">
<img src="/assets/images/${icon}" alt="directory">
</div>
<div class="text-container">
<div class="upper-text">${file_name}</div>
<div class="lower-text">${size} | ${date}</div>
</div>
<div class="empty-block"></div>
</a>`;
};
// Function to extract directory listing information
function extractDirectoryListing() {
@ -38,14 +67,16 @@ function extractDirectoryListing() {
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
});
if (type === 'Directory') {
if (name !== '..') {
folders.push({
name: name.replace('/', ''), // Remove the trailing slash
lastModified: lastModified,
size: size,
type: type,
href: href
});
}
} else {
files.push({
name: name,
@ -60,7 +91,7 @@ function extractDirectoryListing() {
return { files, folders };
}
window.onload = function() {
window.onload = function () {
// Example usage
const { files, folders } = extractDirectoryListing();
console.log('Files:', files);
@ -69,6 +100,7 @@ window.onload = function() {
// insert a new div before div.list
const folderListing = document.createElement("div");
folderListing.classList.add('folder-list');
folderListing.innerHTML = '<h2>Folders</h2>';
// for each folder, add a div to folderListing
folders.forEach(folder => {
@ -81,4 +113,24 @@ window.onload = function() {
// do the insertion
const listDiv = document.querySelector('div.list');
listDiv.parentNode.insertBefore(folderListing, listDiv);
if (folders.length > 0 && files.length > 0) {
listDiv.parentNode.insertBefore(document.createElement('hr'), listDiv);
}
// then for files
const fileListing = document.createElement("div");
fileListing.classList.add('file-list');
fileListing.innerHTML = '<h2>Files</h2>';
// for each file, add a div to fileListing
files.forEach(file => {
const fileDiv = document.createElement('div');
fileDiv.classList.add('file-row');
fileDiv.innerHTML = getFileDivHTML(file.name, file.size, file.lastModified, file.href);
fileListing.appendChild(fileDiv);
});
// do the insertion
listDiv.parentNode.insertBefore(fileListing, listDiv);
}