list files
This commit is contained in:
John Hess
parent
590549f4c4
commit
1abbe63776
9 changed files with 127 additions and 63 deletions
|
|
@ -1,58 +1,13 @@
|
|||
/* Based on the default lighttpd styles, this butters up the UI */
|
||||
|
||||
|
||||
a,
|
||||
a:active {
|
||||
text-decoration: none;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #48468F;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
text-decoration: underline;
|
||||
color: red;
|
||||
}
|
||||
|
||||
body {
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "Poppins", sans-serif;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
table {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
font: 90% monospace;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
padding-right: 14px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding-right: 14px;
|
||||
}
|
||||
|
||||
td.s,
|
||||
th.s {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Don't display the .. nav tool. */
|
||||
tbody tr.d:first-of-type
|
||||
{
|
||||
body>h2 {
|
||||
/* Hide the builtin title "Index of /this/that */
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -66,25 +21,40 @@ div.foot {
|
|||
display: none;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid #E6E6E4;
|
||||
margin: 20px 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
height: 44px;
|
||||
margin: 10px;
|
||||
box-sizing: border-box;
|
||||
font-family: "Poppins", sans-serif;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.text-container {
|
||||
|
|
@ -99,10 +69,13 @@ div.foot {
|
|||
.text-container .upper-text {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 2px;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.text-container .lower-text {
|
||||
font-size: 12px;
|
||||
padding: 2px;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
|
|
|
|||
4
assets/images/explore-home.svg
Normal file
4
assets/images/explore-home.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.6923 18.5H17.7692C18.4492 18.5 19 17.9886 19 17.3571V8.48489C19 8.14203 18.8346 7.81775 18.5485 7.6006L12.3446 2.88714C12.0146 2.63714 11.6015 2.5 11.1762 2.5H10.8246C10.3985 2.5 9.98539 2.63714 9.6554 2.88714L3.45154 7.6006C3.16538 7.81775 3 8.14203 3 8.48489V17.3571C3 17.9886 3.55076 18.5 4.23076 18.5H7.30766C7.64766 18.5 7.92304 18.2443 7.92304 17.9286V12.7857C7.92304 12.1543 8.4738 11.6428 9.1538 11.6428H12.8461C13.5261 11.6428 14.0768 12.1543 14.0768 12.7857V17.9286C14.0768 18.2443 14.3523 18.5 14.6923 18.5Z" fill="black"/>
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 663 B |
7
assets/images/ext-apk.svg
Normal file
7
assets/images/ext-apk.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="32" height="32" rx="16" fill="#ADCB4E" />
|
||||
<path
|
||||
d="M11.2 12.3333L11.2008 19.8098C11.2008 20.4915 11.7576 21.0417 12.4464 21.0417H12.8V23.8458C12.8 24.4823 13.3656 25 14.008 25C14.6528 25 15.2 24.4823 15.2 23.845V21.0417H16.8V23.8458C16.8 24.4823 17.3656 25 18.0088 25C18.6536 25 19.2 24.4823 19.2 23.845V21.0417L19.5552 21.0409C20.2416 21.0409 20.8 20.4899 20.8 19.8082V12.3333H11.2ZM24 13.4979C24 12.8606 23.444 12.3333 22.8 12.3333C22.156 12.3325 21.6 12.8614 21.6 13.4987V18.3326C21.6 18.9707 22.1552 19.4583 22.8 19.4583C23.444 19.4583 24 18.9715 24 18.3326V13.4979ZM10.4 13.4979C10.4 12.8606 9.844 12.3333 9.2 12.3333C8.556 12.3325 8 12.8614 8 13.4987V18.3326C8 18.9707 8.5552 19.4583 9.2 19.4583C9.844 19.4583 10.4 18.9715 10.4 18.3326V13.4979ZM18.3608 7.70921L19.1128 6.2375C19.1672 6.133 19.0976 6 18.9824 6C18.9296 6 18.8784 6.03008 18.8512 6.08313L18.092 7.56988C16.8672 6.98642 15.2568 6.92704 13.9088 7.56988L13.1488 6.08313C13.1224 6.03008 13.0712 6 13.0176 6C12.9024 6 12.8328 6.133 12.8872 6.2375L13.6392 7.70921C12.1632 8.52779 11.2 9.75488 11.2 11.5409H20.8C20.8 9.75488 19.8368 8.52779 18.3608 7.70921ZM14.0008 9.95833C13.78 9.95833 13.6 9.781 13.6 9.5625C13.6 9.34558 13.78 9.16667 14.0008 9.16667C14.2216 9.16667 14.4 9.34558 14.4 9.5625C14.4 9.781 14.2216 9.95833 14.0008 9.95833ZM17.9992 9.95833C17.7784 9.95833 17.6 9.781 17.6 9.5625C17.6 9.34558 17.7784 9.16667 17.9992 9.16667C18.22 9.16667 18.4 9.34558 18.4 9.5625C18.4 9.781 18.22 9.95833 17.9992 9.95833Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
7
assets/images/ext-deb.svg
Normal file
7
assets/images/ext-deb.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="32" height="32" rx="16" fill="#FED148" />
|
||||
<path
|
||||
d="M23.6276 22.2553C23.1387 21.8279 23.3289 20.8839 22.8213 20.4182C23.3129 17.1934 21.9351 14.351 20.2924 12.5292C18.9138 11.0006 19.3582 9.51329 19.3582 8.22625C19.3582 6.16967 18.5751 4 16.2027 4C13.6667 4 12.9716 6.28083 12.9467 7.58225C12.8862 10.7083 13.5324 11.521 11.8356 13.7961C9.83911 16.4727 9.54489 19.1426 9.99556 20.559C9.78489 20.8235 9.50044 21.1168 8.96889 21.3592C7.50044 22.0492 8.57689 23.204 8.17067 24.0234C8.05511 24.2563 8 24.4997 8 24.7326C8 25.4513 8.52978 26.0733 9.49244 25.9803C10.7911 25.8557 11.9893 26.8476 12.7644 26.8476C13.4489 26.8476 14.0107 26.4279 14.272 25.85C15.496 25.5251 17.0071 25.5663 18.2302 25.9065C18.4498 26.5687 19.0453 27 19.7076 27C21.1573 27 21.4364 25.228 23.0996 24.6281C23.6987 24.4125 24 23.7858 24 23.2021C24 22.8284 23.8764 22.4728 23.6276 22.2553ZM15.4969 12.2263C15.2133 12.2263 14.9787 11.9791 14.608 11.682C14.1387 11.3063 13.6613 11.0898 13.6667 10.6949C13.6667 10.4237 14.0036 10.3403 14.4391 10.0423C14.9067 9.72317 15.0889 9.39925 15.5493 9.39925C16.0204 9.39925 16.1627 9.65608 16.8027 9.95412C17.432 10.2483 17.8702 10.3633 17.8702 10.6949C17.8702 11.0351 17.2116 11.2785 16.8409 11.5268C16.296 11.889 16.016 12.2263 15.4969 12.2263ZM16.9769 7.22862C17.7609 7.36375 17.8489 8.84917 17.4738 9.58037L17.1582 9.44142C17.3218 8.92104 17.3191 8.06429 16.7716 8.00967C16.424 7.97517 16.2 8.46967 16.152 8.89325C16.016 8.83192 15.8676 8.78783 15.6871 8.77154C15.7422 7.887 16.272 7.10692 16.9769 7.22862ZM13.952 7.54583C14.5529 7.38483 14.9076 8.13808 14.9102 8.92104L14.6347 9.10312C14.5973 8.77442 14.4613 8.2435 14.12 8.35658C13.7547 8.47925 13.8142 9.39446 14.0178 9.58229L13.7458 9.74521C13.3724 9.06767 13.3733 7.70108 13.952 7.54583ZM12.072 25.987C10.3271 25.1313 9.73422 25.3258 9.40089 25.3258C8.71022 25.3258 8.48444 24.7709 8.744 24.2457C8.96444 23.8001 8.896 23.3334 8.84178 22.9587C8.75822 22.3847 8.74311 22.1978 9.26667 21.9505C9.99111 21.619 10.3129 21.1925 10.5529 20.8734C11.2267 19.9754 11.9067 21.388 12.464 22.6463C12.8258 23.4618 13.5378 23.8749 13.7573 24.7786C13.9591 25.6133 13.1262 26.5045 12.072 25.987ZM18.2827 24.1911C17.0524 24.8361 15.4853 25.1322 14.3129 24.4777C14.1396 23.9381 13.8622 23.5893 13.5636 23.2385C14.0427 23.1025 14.3982 22.4585 13.9724 21.8116C13.5182 21.1206 12.5902 20.6386 11.6524 19.8566C10.7751 19.1254 10.4978 17.3228 11.6924 15.3083C11.1102 17.0928 11.4507 18.7372 11.7431 19.2078C11.8036 18.261 11.8729 16.6797 13.0729 14.7851C13.6782 13.8287 13.6871 12.5656 13.7004 11.7759L14.2516 12.1823C14.6569 12.5052 14.9964 12.8608 15.4836 12.8608C16.2036 12.8608 16.6018 12.4142 17.1564 12.0433C17.3733 11.8995 17.7013 11.7539 17.9769 11.5517C18.4391 13.9245 20.3538 16.7784 20.4613 18.4037C20.9067 17.4147 20.3351 15.0362 20.3351 15.0362C21.0836 16.2676 21.1431 17.294 21.176 18.5532C21.6996 18.7842 22.2613 19.386 22.3129 20.1786L22.0951 20.1518C21.9831 19.271 19.7778 17.9773 19.5796 19.6352C18.5218 19.8087 18.9067 21.6151 18.6933 22.7862C18.5956 23.3219 18.4142 23.7455 18.2827 24.1911ZM22.5902 24.1518C21.7147 24.516 21.1236 25.2894 20.7173 25.7695C19.9351 26.6952 18.9004 26.2515 18.7902 25.3852C18.6738 24.4595 19.1102 23.9544 19.2987 22.9185C19.4702 21.9726 19.2782 20.5169 19.6818 20.3616C19.944 22.0416 21.5182 21.3353 21.8773 20.8772C22.4613 20.8772 22.5102 21.09 22.6409 21.6793C22.7227 22.0483 22.8356 22.3588 23.1547 22.7239C23.5262 23.1523 23.4124 23.8097 22.5902 24.1518ZM15.4791 11.6878C14.9004 11.6878 14.4676 11.2728 14.1156 10.9508C13.9351 10.7869 14.16 10.4841 14.3404 10.6489C14.6844 10.9633 15.0311 11.2958 15.4791 11.2958C16.0187 11.2958 16.4942 10.7984 17.1387 10.5243C17.3582 10.4314 17.4836 10.7975 17.2658 10.8904C16.64 11.1559 16.1378 11.6878 15.4791 11.6878Z"
|
||||
fill="#5C5B5A" />
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
7
assets/images/ext-img.svg
Normal file
7
assets/images/ext-img.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="32" height="32" rx="16" fill="#676767" />
|
||||
<path
|
||||
d="M19.8143 6C17.6777 6.71428 16.0126 7.42857 16.25 10.5238C18.3866 10.0476 20.2891 8.85714 19.8143 6ZM13.0286 10.2976C10.9714 10.2976 8 12.1071 8 15.5C8 20.25 11.2 25 13.0286 25C14.4 25 15.5429 24.0952 16.4571 24.0952C17.3714 24.0952 18.2857 25 19.6571 25C21.4857 25 23.5429 22.2857 24 19.7976C22.4 18.6667 21.2571 17.9881 21.2571 15.9524C21.2571 14.5952 22.4 13.2381 23.7714 12.1071C23.0857 11.2024 21.7143 10.2976 20.3429 10.2976C18.9714 10.2976 17.4967 11.3714 16.4571 11.4286C15.5429 11.4286 14.4 10.2976 13.0286 10.2976Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 736 B |
7
assets/images/ext-pdf.svg
Normal file
7
assets/images/ext-pdf.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="32" height="32" rx="16" fill="#F26969" />
|
||||
<path
|
||||
d="M23.2 8H12.4C11.41 8 10.6 8.72 10.6 9.6V19.2C10.6 20.08 11.41 20.8 12.4 20.8H23.2C24.19 20.8 25 20.08 25 19.2V9.6C25 8.72 24.19 8 23.2 8ZM15.55 14C15.55 14.664 14.947 15.2 14.2 15.2H13.3V16.8H11.95V12H14.2C14.947 12 15.55 12.536 15.55 13.2V14ZM20.05 15.6C20.05 16.264 19.447 16.8 18.7 16.8H16.45V12H18.7C19.447 12 20.05 12.536 20.05 13.2V15.6ZM23.65 13.2H22.3V14H23.65V15.2H22.3V16.8H20.95V12H23.65V13.2ZM13.3 14H14.2V13.2H13.3V14ZM8.8 11.2H7V22.4C7 23.28 7.81 24 8.8 24H21.4V22.4H8.8V11.2ZM17.8 15.6H18.7V13.2H17.8V15.6Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 734 B |
7
assets/images/ext-unknown.svg
Normal file
7
assets/images/ext-unknown.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="32" height="32" rx="16" fill="#69A0F2" />
|
||||
<path
|
||||
d="M25 23V9C25 7.9 24.1 7 23 7H9C7.9 7 7 7.9 7 9V23C7 24.1 7.9 25 9 25H23C24.1 25 25 24.1 25 23ZM12.5 17.5L15 20.51L18.5 16L23 22H9L12.5 17.5Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
|
||||
|
After Width: | Height: | Size: 352 B |
|
|
@ -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);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue