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

get item count

Browse source
This commit is contained in:
John Hess 2024-06-12 21:33:48 -05:00
parent f322c1cf08
commit c7646d99ce
2 changed files with 24 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,12 +6,10 @@
* INJECTION ATTACKS***. We just pop filenames and the like right into innerHTML. * INJECTION ATTACKS***. We just pop filenames and the like right into innerHTML.
*/ */
console.log("butter-dir-listing.js loaded!");
const supported_extensions = ["apk", "deb", "dmg", "pdf", "exe", "jpg", "png", "pptx", "ppt", "mp3"]; const supported_extensions = ["apk", "deb", "dmg", "pdf", "exe", "jpg", "png", "pptx", "ppt", "mp3"];
const usbRoot = "usb-butter/"; const usbRoot = "usb-butter/";
const inferredBaseURL = window.location.pathname.split("/" + usbRoot)[0] + "/"; const inferredBaseURL = window.location.pathname.split("/" + usbRoot)[0] + "/";
console.log("Inferred Base URL:", inferredBaseURL);
const getFolderDivHTML = (directory_name, number_of_items, href) => { const getFolderDivHTML = (directory_name, number_of_items, href) => {
return ` return `
@ -21,7 +19,7 @@ const getFolderDivHTML = (directory_name, number_of_items, href) => {
</div> </div>
<div class="text-filerow"> <div class="text-filerow">
<div class="upper-text">${directory_name}</div> <div class="upper-text">${directory_name}</div>
<div class="lower-text">${number_of_items} items</div> <div class="lower-text"><span id="${href}">${number_of_items}</span> items</div>
</div> </div>
<div class="empty-block"></div> <div class="empty-block"></div>
</a>`; </a>`;
@ -30,7 +28,6 @@ const getFolderDivHTML = (directory_name, number_of_items, href) => {
const getFileDivHTML = (file_name, size, date, href) => { const getFileDivHTML = (file_name, size, date, href) => {
icon = "ext-unknown.svg"; icon = "ext-unknown.svg";
extension = file_name.split('.').pop(); extension = file_name.split('.').pop();
console.log("Extension:", extension);
if (supported_extensions.includes(extension)) { if (supported_extensions.includes(extension)) {
icon = "ext-" + extension + ".svg"; icon = "ext-" + extension + ".svg";
} }
@ -49,11 +46,26 @@ const getFileDivHTML = (file_name, size, date, href) => {
</a>`; </a>`;
}; };
const getFolderItemCount = async (folder_href) => {
async function populateSpan(response) {
if (!response.ok) {
console.error("Failed to fetch " + folder_href);
return;
}
const text = await response.text();
const doc = new DOMParser().parseFromString(text, 'text/html');
const { files, folders } = extractDirectoryListing(doc);
const items = files.length + folders.length;
const span = document.getElementById(folder_href);
span.textContent = items;
}
const response = fetch(folder_href).then(populateSpan);
}
// Function to extract directory listing information // Function to extract directory listing information
function extractDirectoryListing() { function extractDirectoryListing(doc) {
// Get all rows in the table body // Get all rows in the table body
const rows = document.querySelectorAll('tbody tr'); const rows = doc.querySelectorAll('tbody tr');
console.log('Rows:', rows)
// Initialize arrays to hold file and folder information // Initialize arrays to hold file and folder information
const files = []; const files = [];
@ -99,16 +111,12 @@ function extractDirectoryListing() {
window.onload = function () { window.onload = function () {
// Example usage // Example usage
const { files, folders } = extractDirectoryListing(); const { files, folders } = extractDirectoryListing(window.document);
console.log('Files:', files);
console.log('Folders:', folders);
const listDiv = document.querySelector('div.list'); const listDiv = document.querySelector('div.list');
// Header with breadcrumbs // Header with breadcrumbs
const h2Path = document.querySelector('h2').textContent; const h2Path = document.querySelector('h2').textContent;
console.log("H2 Path:", h2Path);
const path = h2Path.replace('Index of ', '').replace(usbRoot, ''); const path = h2Path.replace('Index of ', '').replace(usbRoot, '');
console.log("Path:", path);
const breadcrumbs = document.createElement("div"); const breadcrumbs = document.createElement("div");
breadcrumbs.classList.add('breadcrumbs'); breadcrumbs.classList.add('breadcrumbs');
@ -153,8 +161,9 @@ window.onload = function () {
folders.forEach(folder => { folders.forEach(folder => {
const folderDiv = document.createElement('div'); const folderDiv = document.createElement('div');
folderDiv.classList.add('folder-row'); folderDiv.classList.add('folder-row');
folderDiv.innerHTML = getFolderDivHTML(folder.name, 0, folder.href); folderDiv.innerHTML = getFolderDivHTML(folder.name, "?", folder.href);
folderListing.appendChild(folderDiv); folderListing.appendChild(folderDiv);
getFolderItemCount(folder.href);
}); });
// do the insertion // do the insertion

4
simulated-usb-butter/Learn/index.html
View file

@ -10,14 +10,14 @@ layout: empty
<html> <html>
<head> <head>
<title>Index of /usb-butter/Download/Learn/</title> <title>Index of /usb-butter/Learn/</title>
<meta name="viewport" content="initial-scale=1"> <meta name="viewport" content="initial-scale=1">
<link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/butter-dir-listing.css"> <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/assets/css/butter-dir-listing.css">
<script src="{{ site.baseurl }}/assets/js/butter-dir-listing.js"></script> <script src="{{ site.baseurl }}/assets/js/butter-dir-listing.js"></script>
</head> </head>
<body> <body>
<h2>Index of /usb-butter/Download/Learn/</h2> <h2>Index of /usb-butter/Learn/</h2>
<div class="list"> <div class="list">
<table summary="Directory Listing" cellpadding="0" cellspacing="0"> <table summary="Directory Listing" cellpadding="0" cellspacing="0">
<thead> <thead>