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

bigger touch targets

Browse source
This commit is contained in:
John Hess 2024-06-12 21:50:55 -05:00
parent c7646d99ce
commit 48f3d1d6ae
8 changed files with 14 additions and 1262 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -27,8 +27,13 @@ div.foot {
.breadcrumbs {
display: flex;
align-items: center;
margin: 10px;
height: 34px;
height: 54px;
a {
height: -webkit-fill-available;
}
.home-icon {
padding-left: 12px;
}
.path-next {
margin: 0 5px;
height: 12px;
@ -46,12 +51,12 @@ div.foot {
.breadcrumb-name {
display: flex;
align-items: center;
height: 34px;
margin: 10px;
height: 48px;
a {
display: flex;
align-items: center;
height: -webkit-fill-available;
padding: 0 10px;
}
img.back {
width: 18px;
@ -81,8 +86,8 @@ hr.full-width {
display: flex;
align-items: center;
width: 100%;
height: 44px;
margin: 10px;
height: 54px;
margin: 0 10px;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}

2
assets/images/home.svg
View file

@ -1,4 +1,4 @@
<svg width="22" height="20" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="22" height="20" viewBox="0 0 22 20" 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>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 659 B

After

Width:  |  Height:  |  Size: 659 B

Before After
Before After

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

@ -121,7 +121,7 @@ window.onload = function () {
const breadcrumbs = document.createElement("div");
breadcrumbs.classList.add('breadcrumbs');
let breadcrumbHTML = `
<a href="${inferredBaseURL}"><img class="home-icon" src="${inferredBaseURL}assets/images/home.svg" alt="home"></a>
<a href="${inferredBaseURL}" class="crumb"><img class="home-icon" src="${inferredBaseURL}assets/images/home.svg" alt="home"></a>
<a href="${inferredBaseURL}${usbRoot}" class="crumb"><img class="path-next" src="${inferredBaseURL}assets/images/next.svg">Explore</a>
`;
const pathSteps = path.split('/');

259
simulated-usb-butter/Download/Desktop/index.html
View file

@ -1,259 +0,0 @@
---
layout: empty
---
<!-- This simulates a drive being plugged in. CI moves this into place as /usb-butter. You can too. -->
<!-- Mostly, this is a copy paste of the real dirlisting. We modify the JS and CSS links to load ones from this repo. -->
<!DOCTYPE html>
<html>
<head>
<title>Index of /usb-butter/Download/Desktop/</title>
<meta name="viewport" content="initial-scale=1">
<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>
</head>
<body>
<h2>Index of /usb-butter/Download/Desktop/</h2>
<div class="list">
<table summary="Directory Listing" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="n">Name</th>
<th class="m">Last Modified</th>
<th class="s">Size</th>
<th class="t">Type</th>
</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="TunnelBear%202.app/">TunnelBear 2.app</a>/</td>
<td class="m">2024-Apr-08 17:16:38</td>
<td class="s">- &nbsp;</td>
<td class="t">Directory</td>
</tr>
<tr class="d">
<td class="n"><a href="TunnelBear.app/">TunnelBear.app</a>/</td>
<td class="m">2024-Apr-08 17:16:38</td>
<td class="s">- &nbsp;</td>
<td class="t">Directory</td>
</tr>
<tr>
<td class="n"><a href="TunnelBear-Installer.exe">TunnelBear-Installer.exe</a></td>
<td class="m">2024-Jun-12 15:00:17</td>
<td class="s">153.4M</td>
<td class="t">application/x-msdos-program</td>
</tr>
<tr>
<td class="n"><a href="TunnelBear.zip">TunnelBear.zip</a></td>
<td class="m">2024-Jun-12 14:59:56</td>
<td class="s">44.0M</td>
<td class="t">application/zip</td>
</tr>
</tbody>
</table>
</div>
<div class="foot">lighttpd/1.4.69</div>
<script type="text/javascript">
// <!--
var click_column;
var name_column = 0;
var date_column = 1;
var size_column = 2;
var type_column = 3;
var prev_span = null;
if (typeof (String.prototype.localeCompare) === 'undefined') {
String.prototype.localeCompare = function (str, locale, options) {
return ((this == str) ? 0 : ((this > str) ? 1 : -1));
};
}
if (typeof (String.prototype.toLocaleUpperCase) === 'undefined') {
String.prototype.toLocaleUpperCase = function () {
return this.toUpperCase();
};
}
function get_inner_text(el) {
if ((typeof el == 'string') || (typeof el == 'undefined'))
return el;
if (el.innerText)
return el.innerText;
else {
var str = "";
var cs = el.childNodes;
var l = cs.length;
for (var i = 0; i < l; i++) {
if (cs[i].nodeType == 1) str += get_inner_text(cs[i]);
else if (cs[i].nodeType == 3) str += cs[i].nodeValue;
}
}
return str;
}
function isdigit(c) {
return (c >= '0' && c <= '9');
}
function unit_multiplier(unit) {
return (unit == 'K') ? 1000
: (unit == 'M') ? 1000000
: (unit == 'G') ? 1000000000
: (unit == 'T') ? 1000000000000
: (unit == 'P') ? 1000000000000000
: (unit == 'E') ? 1000000000000000000 : 1;
}
var li_date_regex = /(\d{4})-(\w{3})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/;
var li_mon = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function li_mon_num(mon) {
var i; for (i = 0; i < 12 && mon != li_mon[i]; ++i); return i;
}
function li_date_cmp(s1, s2) {
var dp1 = li_date_regex.exec(s1)
var dp2 = li_date_regex.exec(s2)
for (var i = 1; i < 7; ++i) {
var cmp = (2 != i)
? parseInt(dp1[i]) - parseInt(dp2[i])
: li_mon_num(dp1[2]) - li_mon_num(dp2[2]);
if (0 != cmp) return cmp;
}
return 0;
}
function sortfn_then_by_name(a, b, sort_column) {
if (sort_column == name_column || sort_column == type_column) {
var ad = (a.cells[type_column].innerHTML === 'Directory');
var bd = (b.cells[type_column].innerHTML === 'Directory');
if (ad != bd) return (ad ? -1 : 1);
}
var at = get_inner_text(a.cells[sort_column]);
var bt = get_inner_text(b.cells[sort_column]);
var cmp;
if (sort_column == name_column) {
if (at == '../') return -1;
if (bt == '../') return 1;
}
if (a.cells[sort_column].className == 'int') {
cmp = parseInt(at) - parseInt(bt);
} else if (sort_column == date_column) {
var ad = isdigit(at.substr(0, 1));
var bd = isdigit(bt.substr(0, 1));
if (ad != bd) return (!ad ? -1 : 1);
cmp = li_date_cmp(at, bt);
} else if (sort_column == size_column) {
var ai = parseInt(at, 10) * unit_multiplier(at.substr(-1, 1));
var bi = parseInt(bt, 10) * unit_multiplier(bt.substr(-1, 1));
if (at.substr(0, 1) == '-') ai = -1;
if (bt.substr(0, 1) == '-') bi = -1;
cmp = ai - bi;
} else {
cmp = at.toLocaleUpperCase().localeCompare(bt.toLocaleUpperCase());
if (0 != cmp) return cmp;
cmp = at.localeCompare(bt);
}
if (0 != cmp || sort_column == name_column) return cmp;
return sortfn_then_by_name(a, b, name_column);
}
function sortfn(a, b) {
return sortfn_then_by_name(a, b, click_column);
}
function resort(lnk) {
var span = lnk.childNodes[1];
var table = lnk.parentNode.parentNode.parentNode.parentNode;
var rows = new Array();
for (var j = 1; j < table.rows.length; j++)
rows[j - 1] = table.rows[j];
click_column = lnk.parentNode.cellIndex;
rows.sort(sortfn);
if (prev_span != null) prev_span.innerHTML = '';
if (span.getAttribute('sortdir') == 'down') {
span.innerHTML = '&uarr;';
span.setAttribute('sortdir', 'up');
rows.reverse();
} else {
span.innerHTML = '&darr;';
span.setAttribute('sortdir', 'down');
}
for (var i = 0; i < rows.length; i++)
table.tBodies[0].appendChild(rows[i]);
prev_span = span;
}
function init_sort(init_sort_column, ascending) {
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
var table = tables[i];
//var c = table.getAttribute("class")
//if (-1 != c.split(" ").indexOf("sort")) {
var row = table.rows[0].cells;
for (var j = 0; j < row.length; j++) {
var n = row[j];
if (n.childNodes.length == 1 && n.childNodes[0].nodeType == 3) {
var link = document.createElement("a");
var title = n.childNodes[0].nodeValue.replace(/:$/, "");
link.appendChild(document.createTextNode(title));
link.setAttribute("href", "#");
link.setAttribute("class", "sortheader");
link.setAttribute("onclick", "resort(this);return false;");
var arrow = document.createElement("span");
arrow.setAttribute("class", "sortarrow");
arrow.appendChild(document.createTextNode(":"));
link.appendChild(arrow)
n.replaceChild(link, n.firstChild);
}
}
var lnk = row[init_sort_column].firstChild;
if (ascending) {
var span = lnk.childNodes[1];
span.setAttribute('sortdir', 'down');
}
resort(lnk);
//}
}
}
function init_sort_from_query() {
var urlParams = new URLSearchParams(location.search);
var c = 0;
var o = 0;
switch (urlParams.get('C')) {
case "N": c = 0; break;
case "M": c = 1; break;
case "S": c = 2; break;
case "T":
case "D": c = 3; break;
}
switch (urlParams.get('O')) {
case "A": o = 1; break;
case "D": o = 0; break;
}
init_sort(c, o);
}
init_sort_from_query();
// -->
</script>
</body>
</html>

247
simulated-usb-butter/Download/Mobile/index.html
View file

@ -1,247 +0,0 @@
---
layout: empty
---
<!-- This simulates a drive being plugged in. CI moves this into place as /usb-butter. You can too. -->
<!-- Mostly, this is a copy paste of the real dirlisting. We modify the JS and CSS links to load ones from this repo. -->
<!DOCTYPE html>
<html>
<head>
<title>Index of /usb-butter/Download/Mobile/</title>
<meta name="viewport" content="initial-scale=1">
<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>
</head>
<body>
<h2>Index of /usb-butter/Download/Mobile/</h2>
<div class="list">
<table summary="Directory Listing" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="n">Name</th>
<th class="m">Last Modified</th>
<th class="s">Size</th>
<th class="t">Type</th>
</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>
<td class="n"><a href="swob%200.5.0.apk">swob 0.5.0.apk</a></td>
<td class="m">2024-Jun-12 14:57:22</td>
<td class="s">19.5M</td>
<td class="t">application/vnd.android.package-archive</td>
</tr>
<tr>
<td class="n"><a href="swob.png">swob.png</a></td>
<td class="m">2024-Jun-12 14:52:21</td>
<td class="s">408.4K</td>
<td class="t">image/png</td>
</tr>
</tbody>
</table>
</div>
<div class="foot">lighttpd/1.4.69</div>
<script type="text/javascript">
// <!--
var click_column;
var name_column = 0;
var date_column = 1;
var size_column = 2;
var type_column = 3;
var prev_span = null;
if (typeof (String.prototype.localeCompare) === 'undefined') {
String.prototype.localeCompare = function (str, locale, options) {
return ((this == str) ? 0 : ((this > str) ? 1 : -1));
};
}
if (typeof (String.prototype.toLocaleUpperCase) === 'undefined') {
String.prototype.toLocaleUpperCase = function () {
return this.toUpperCase();
};
}
function get_inner_text(el) {
if ((typeof el == 'string') || (typeof el == 'undefined'))
return el;
if (el.innerText)
return el.innerText;
else {
var str = "";
var cs = el.childNodes;
var l = cs.length;
for (var i = 0; i < l; i++) {
if (cs[i].nodeType == 1) str += get_inner_text(cs[i]);
else if (cs[i].nodeType == 3) str += cs[i].nodeValue;
}
}
return str;
}
function isdigit(c) {
return (c >= '0' && c <= '9');
}
function unit_multiplier(unit) {
return (unit == 'K') ? 1000
: (unit == 'M') ? 1000000
: (unit == 'G') ? 1000000000
: (unit == 'T') ? 1000000000000
: (unit == 'P') ? 1000000000000000
: (unit == 'E') ? 1000000000000000000 : 1;
}
var li_date_regex = /(\d{4})-(\w{3})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/;
var li_mon = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function li_mon_num(mon) {
var i; for (i = 0; i < 12 && mon != li_mon[i]; ++i); return i;
}
function li_date_cmp(s1, s2) {
var dp1 = li_date_regex.exec(s1)
var dp2 = li_date_regex.exec(s2)
for (var i = 1; i < 7; ++i) {
var cmp = (2 != i)
? parseInt(dp1[i]) - parseInt(dp2[i])
: li_mon_num(dp1[2]) - li_mon_num(dp2[2]);
if (0 != cmp) return cmp;
}
return 0;
}
function sortfn_then_by_name(a, b, sort_column) {
if (sort_column == name_column || sort_column == type_column) {
var ad = (a.cells[type_column].innerHTML === 'Directory');
var bd = (b.cells[type_column].innerHTML === 'Directory');
if (ad != bd) return (ad ? -1 : 1);
}
var at = get_inner_text(a.cells[sort_column]);
var bt = get_inner_text(b.cells[sort_column]);
var cmp;
if (sort_column == name_column) {
if (at == '../') return -1;
if (bt == '../') return 1;
}
if (a.cells[sort_column].className == 'int') {
cmp = parseInt(at) - parseInt(bt);
} else if (sort_column == date_column) {
var ad = isdigit(at.substr(0, 1));
var bd = isdigit(bt.substr(0, 1));
if (ad != bd) return (!ad ? -1 : 1);
cmp = li_date_cmp(at, bt);
} else if (sort_column == size_column) {
var ai = parseInt(at, 10) * unit_multiplier(at.substr(-1, 1));
var bi = parseInt(bt, 10) * unit_multiplier(bt.substr(-1, 1));
if (at.substr(0, 1) == '-') ai = -1;
if (bt.substr(0, 1) == '-') bi = -1;
cmp = ai - bi;
} else {
cmp = at.toLocaleUpperCase().localeCompare(bt.toLocaleUpperCase());
if (0 != cmp) return cmp;
cmp = at.localeCompare(bt);
}
if (0 != cmp || sort_column == name_column) return cmp;
return sortfn_then_by_name(a, b, name_column);
}
function sortfn(a, b) {
return sortfn_then_by_name(a, b, click_column);
}
function resort(lnk) {
var span = lnk.childNodes[1];
var table = lnk.parentNode.parentNode.parentNode.parentNode;
var rows = new Array();
for (var j = 1; j < table.rows.length; j++)
rows[j - 1] = table.rows[j];
click_column = lnk.parentNode.cellIndex;
rows.sort(sortfn);
if (prev_span != null) prev_span.innerHTML = '';
if (span.getAttribute('sortdir') == 'down') {
span.innerHTML = '&uarr;';
span.setAttribute('sortdir', 'up');
rows.reverse();
} else {
span.innerHTML = '&darr;';
span.setAttribute('sortdir', 'down');
}
for (var i = 0; i < rows.length; i++)
table.tBodies[0].appendChild(rows[i]);
prev_span = span;
}
function init_sort(init_sort_column, ascending) {
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
var table = tables[i];
//var c = table.getAttribute("class")
//if (-1 != c.split(" ").indexOf("sort")) {
var row = table.rows[0].cells;
for (var j = 0; j < row.length; j++) {
var n = row[j];
if (n.childNodes.length == 1 && n.childNodes[0].nodeType == 3) {
var link = document.createElement("a");
var title = n.childNodes[0].nodeValue.replace(/:$/, "");
link.appendChild(document.createTextNode(title));
link.setAttribute("href", "#");
link.setAttribute("class", "sortheader");
link.setAttribute("onclick", "resort(this);return false;");
var arrow = document.createElement("span");
arrow.setAttribute("class", "sortarrow");
arrow.appendChild(document.createTextNode(":"));
link.appendChild(arrow)
n.replaceChild(link, n.firstChild);
}
}
var lnk = row[init_sort_column].firstChild;
if (ascending) {
var span = lnk.childNodes[1];
span.setAttribute('sortdir', 'down');
}
resort(lnk);
//}
}
}
function init_sort_from_query() {
var urlParams = new URLSearchParams(location.search);
var c = 0;
var o = 0;
switch (urlParams.get('C')) {
case "N": c = 0; break;
case "M": c = 1; break;
case "S": c = 2; break;
case "T":
case "D": c = 3; break;
}
switch (urlParams.get('O')) {
case "A": o = 1; break;
case "D": o = 0; break;
}
init_sort(c, o);
}
init_sort_from_query();
// -->
</script>
</body>
</html>

247
simulated-usb-butter/Download/index.html
View file

@ -1,247 +0,0 @@
---
layout: empty
---
<!-- This simulates a drive being plugged in. CI moves this into place as /usb-butter. You can too. -->
<!-- Mostly, this is a copy paste of the real dirlisting. We modify the JS and CSS links to load ones from this repo. -->
<!DOCTYPE html>
<html>
<head>
<title>Index of /usb-butter/Download/</title>
<meta name="viewport" content="initial-scale=1">
<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>
</head>
<body>
<h2>Index of /usb-butter/Download/</h2>
<div class="list">
<table summary="Directory Listing" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="n">Name</th>
<th class="m">Last Modified</th>
<th class="s">Size</th>
<th class="t">Type</th>
</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="Desktop/">Desktop</a>/</td>
<td class="m">2024-Jun-12 15:37:49</td>
<td class="s">- &nbsp;</td>
<td class="t">Directory</td>
</tr>
<tr class="d">
<td class="n"><a href="Mobile/">Mobile</a>/</td>
<td class="m">2024-Jun-12 14:57:56</td>
<td class="s">- &nbsp;</td>
<td class="t">Directory</td>
</tr>
</tbody>
</table>
</div>
<div class="foot">lighttpd/1.4.69</div>
<script type="text/javascript">
// <!--
var click_column;
var name_column = 0;
var date_column = 1;
var size_column = 2;
var type_column = 3;
var prev_span = null;
if (typeof (String.prototype.localeCompare) === 'undefined') {
String.prototype.localeCompare = function (str, locale, options) {
return ((this == str) ? 0 : ((this > str) ? 1 : -1));
};
}
if (typeof (String.prototype.toLocaleUpperCase) === 'undefined') {
String.prototype.toLocaleUpperCase = function () {
return this.toUpperCase();
};
}
function get_inner_text(el) {
if ((typeof el == 'string') || (typeof el == 'undefined'))
return el;
if (el.innerText)
return el.innerText;
else {
var str = "";
var cs = el.childNodes;
var l = cs.length;
for (var i = 0; i < l; i++) {
if (cs[i].nodeType == 1) str += get_inner_text(cs[i]);
else if (cs[i].nodeType == 3) str += cs[i].nodeValue;
}
}
return str;
}
function isdigit(c) {
return (c >= '0' && c <= '9');
}
function unit_multiplier(unit) {
return (unit == 'K') ? 1000
: (unit == 'M') ? 1000000
: (unit == 'G') ? 1000000000
: (unit == 'T') ? 1000000000000
: (unit == 'P') ? 1000000000000000
: (unit == 'E') ? 1000000000000000000 : 1;
}
var li_date_regex = /(\d{4})-(\w{3})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/;
var li_mon = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function li_mon_num(mon) {
var i; for (i = 0; i < 12 && mon != li_mon[i]; ++i); return i;
}
function li_date_cmp(s1, s2) {
var dp1 = li_date_regex.exec(s1)
var dp2 = li_date_regex.exec(s2)
for (var i = 1; i < 7; ++i) {
var cmp = (2 != i)
? parseInt(dp1[i]) - parseInt(dp2[i])
: li_mon_num(dp1[2]) - li_mon_num(dp2[2]);
if (0 != cmp) return cmp;
}
return 0;
}
function sortfn_then_by_name(a, b, sort_column) {
if (sort_column == name_column || sort_column == type_column) {
var ad = (a.cells[type_column].innerHTML === 'Directory');
var bd = (b.cells[type_column].innerHTML === 'Directory');
if (ad != bd) return (ad ? -1 : 1);
}
var at = get_inner_text(a.cells[sort_column]);
var bt = get_inner_text(b.cells[sort_column]);
var cmp;
if (sort_column == name_column) {
if (at == '../') return -1;
if (bt == '../') return 1;
}
if (a.cells[sort_column].className == 'int') {
cmp = parseInt(at) - parseInt(bt);
} else if (sort_column == date_column) {
var ad = isdigit(at.substr(0, 1));
var bd = isdigit(bt.substr(0, 1));
if (ad != bd) return (!ad ? -1 : 1);
cmp = li_date_cmp(at, bt);
} else if (sort_column == size_column) {
var ai = parseInt(at, 10) * unit_multiplier(at.substr(-1, 1));
var bi = parseInt(bt, 10) * unit_multiplier(bt.substr(-1, 1));
if (at.substr(0, 1) == '-') ai = -1;
if (bt.substr(0, 1) == '-') bi = -1;
cmp = ai - bi;
} else {
cmp = at.toLocaleUpperCase().localeCompare(bt.toLocaleUpperCase());
if (0 != cmp) return cmp;
cmp = at.localeCompare(bt);
}
if (0 != cmp || sort_column == name_column) return cmp;
return sortfn_then_by_name(a, b, name_column);
}
function sortfn(a, b) {
return sortfn_then_by_name(a, b, click_column);
}
function resort(lnk) {
var span = lnk.childNodes[1];
var table = lnk.parentNode.parentNode.parentNode.parentNode;
var rows = new Array();
for (var j = 1; j < table.rows.length; j++)
rows[j - 1] = table.rows[j];
click_column = lnk.parentNode.cellIndex;
rows.sort(sortfn);
if (prev_span != null) prev_span.innerHTML = '';
if (span.getAttribute('sortdir') == 'down') {
span.innerHTML = '&uarr;';
span.setAttribute('sortdir', 'up');
rows.reverse();
} else {
span.innerHTML = '&darr;';
span.setAttribute('sortdir', 'down');
}
for (var i = 0; i < rows.length; i++)
table.tBodies[0].appendChild(rows[i]);
prev_span = span;
}
function init_sort(init_sort_column, ascending) {
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
var table = tables[i];
//var c = table.getAttribute("class")
//if (-1 != c.split(" ").indexOf("sort")) {
var row = table.rows[0].cells;
for (var j = 0; j < row.length; j++) {
var n = row[j];
if (n.childNodes.length == 1 && n.childNodes[0].nodeType == 3) {
var link = document.createElement("a");
var title = n.childNodes[0].nodeValue.replace(/:$/, "");
link.appendChild(document.createTextNode(title));
link.setAttribute("href", "#");
link.setAttribute("class", "sortheader");
link.setAttribute("onclick", "resort(this);return false;");
var arrow = document.createElement("span");
arrow.setAttribute("class", "sortarrow");
arrow.appendChild(document.createTextNode(":"));
link.appendChild(arrow)
n.replaceChild(link, n.firstChild);
}
}
var lnk = row[init_sort_column].firstChild;
if (ascending) {
var span = lnk.childNodes[1];
span.setAttribute('sortdir', 'down');
}
resort(lnk);
//}
}
}
function init_sort_from_query() {
var urlParams = new URLSearchParams(location.search);
var c = 0;
var o = 0;
switch (urlParams.get('C')) {
case "N": c = 0; break;
case "M": c = 1; break;
case "S": c = 2; break;
case "T":
case "D": c = 3; break;
}
switch (urlParams.get('O')) {
case "A": o = 1; break;
case "D": o = 0; break;
}
init_sort(c, o);
}
init_sort_from_query();
// -->
</script>
</body>
</html>

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

@ -1,253 +0,0 @@
---
layout: empty
---
<!-- This simulates a drive being plugged in. CI moves this into place as /usb-butter. You can too. -->
<!-- Mostly, this is a copy paste of the real dirlisting. We modify the JS and CSS links to load ones from this repo. -->
<!DOCTYPE html>
<html>
<head>
<title>Index of /usb-butter/Learn/</title>
<meta name="viewport" content="initial-scale=1">
<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>
</head>
<body>
<h2>Index of /usb-butter/Learn/</h2>
<div class="list">
<table summary="Directory Listing" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="n">Name</th>
<th class="m">Last Modified</th>
<th class="s">Size</th>
<th class="t">Type</th>
</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>
<td class="n"><a href="Digital%20Safety%20Intro.pdf">Digital Safety Intro.pdf</a></td>
<td class="m">2024-Jun-12 14:44:15</td>
<td class="s">381.1K</td>
<td class="t">application/pdf</td>
</tr>
<tr>
<td class="n"><a href="Digital%20Safety%20Intro.pptx">Digital Safety Intro.pptx</a></td>
<td class="m">2024-Jun-12 14:43:20</td>
<td class="s">6.9M</td>
<td class="t">application/vnd.openxmlformats-officedocument.presentationml.presentation</td>
</tr>
<tr>
<td class="n"><a href="swob.png">swob.png</a></td>
<td class="m">2024-Jun-12 14:52:21</td>
<td class="s">408.4K</td>
<td class="t">image/png</td>
</tr>
</tbody>
</table>
</div>
<div class="foot">lighttpd/1.4.69</div>
<script type="text/javascript">
// <!--
var click_column;
var name_column = 0;
var date_column = 1;
var size_column = 2;
var type_column = 3;
var prev_span = null;
if (typeof (String.prototype.localeCompare) === 'undefined') {
String.prototype.localeCompare = function (str, locale, options) {
return ((this == str) ? 0 : ((this > str) ? 1 : -1));
};
}
if (typeof (String.prototype.toLocaleUpperCase) === 'undefined') {
String.prototype.toLocaleUpperCase = function () {
return this.toUpperCase();
};
}
function get_inner_text(el) {
if ((typeof el == 'string') || (typeof el == 'undefined'))
return el;
if (el.innerText)
return el.innerText;
else {
var str = "";
var cs = el.childNodes;
var l = cs.length;
for (var i = 0; i < l; i++) {
if (cs[i].nodeType == 1) str += get_inner_text(cs[i]);
else if (cs[i].nodeType == 3) str += cs[i].nodeValue;
}
}
return str;
}
function isdigit(c) {
return (c >= '0' && c <= '9');
}
function unit_multiplier(unit) {
return (unit == 'K') ? 1000
: (unit == 'M') ? 1000000
: (unit == 'G') ? 1000000000
: (unit == 'T') ? 1000000000000
: (unit == 'P') ? 1000000000000000
: (unit == 'E') ? 1000000000000000000 : 1;
}
var li_date_regex = /(\d{4})-(\w{3})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/;
var li_mon = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function li_mon_num(mon) {
var i; for (i = 0; i < 12 && mon != li_mon[i]; ++i); return i;
}
function li_date_cmp(s1, s2) {
var dp1 = li_date_regex.exec(s1)
var dp2 = li_date_regex.exec(s2)
for (var i = 1; i < 7; ++i) {
var cmp = (2 != i)
? parseInt(dp1[i]) - parseInt(dp2[i])
: li_mon_num(dp1[2]) - li_mon_num(dp2[2]);
if (0 != cmp) return cmp;
}
return 0;
}
function sortfn_then_by_name(a, b, sort_column) {
if (sort_column == name_column || sort_column == type_column) {
var ad = (a.cells[type_column].innerHTML === 'Directory');
var bd = (b.cells[type_column].innerHTML === 'Directory');
if (ad != bd) return (ad ? -1 : 1);
}
var at = get_inner_text(a.cells[sort_column]);
var bt = get_inner_text(b.cells[sort_column]);
var cmp;
if (sort_column == name_column) {
if (at == '../') return -1;
if (bt == '../') return 1;
}
if (a.cells[sort_column].className == 'int') {
cmp = parseInt(at) - parseInt(bt);
} else if (sort_column == date_column) {
var ad = isdigit(at.substr(0, 1));
var bd = isdigit(bt.substr(0, 1));
if (ad != bd) return (!ad ? -1 : 1);
cmp = li_date_cmp(at, bt);
} else if (sort_column == size_column) {
var ai = parseInt(at, 10) * unit_multiplier(at.substr(-1, 1));
var bi = parseInt(bt, 10) * unit_multiplier(bt.substr(-1, 1));
if (at.substr(0, 1) == '-') ai = -1;
if (bt.substr(0, 1) == '-') bi = -1;
cmp = ai - bi;
} else {
cmp = at.toLocaleUpperCase().localeCompare(bt.toLocaleUpperCase());
if (0 != cmp) return cmp;
cmp = at.localeCompare(bt);
}
if (0 != cmp || sort_column == name_column) return cmp;
return sortfn_then_by_name(a, b, name_column);
}
function sortfn(a, b) {
return sortfn_then_by_name(a, b, click_column);
}
function resort(lnk) {
var span = lnk.childNodes[1];
var table = lnk.parentNode.parentNode.parentNode.parentNode;
var rows = new Array();
for (var j = 1; j < table.rows.length; j++)
rows[j - 1] = table.rows[j];
click_column = lnk.parentNode.cellIndex;
rows.sort(sortfn);
if (prev_span != null) prev_span.innerHTML = '';
if (span.getAttribute('sortdir') == 'down') {
span.innerHTML = '&uarr;';
span.setAttribute('sortdir', 'up');
rows.reverse();
} else {
span.innerHTML = '&darr;';
span.setAttribute('sortdir', 'down');
}
for (var i = 0; i < rows.length; i++)
table.tBodies[0].appendChild(rows[i]);
prev_span = span;
}
function init_sort(init_sort_column, ascending) {
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
var table = tables[i];
//var c = table.getAttribute("class")
//if (-1 != c.split(" ").indexOf("sort")) {
var row = table.rows[0].cells;
for (var j = 0; j < row.length; j++) {
var n = row[j];
if (n.childNodes.length == 1 && n.childNodes[0].nodeType == 3) {
var link = document.createElement("a");
var title = n.childNodes[0].nodeValue.replace(/:$/, "");
link.appendChild(document.createTextNode(title));
link.setAttribute("href", "#");
link.setAttribute("class", "sortheader");
link.setAttribute("onclick", "resort(this);return false;");
var arrow = document.createElement("span");
arrow.setAttribute("class", "sortarrow");
arrow.appendChild(document.createTextNode(":"));
link.appendChild(arrow)
n.replaceChild(link, n.firstChild);
}
}
var lnk = row[init_sort_column].firstChild;
if (ascending) {
var span = lnk.childNodes[1];
span.setAttribute('sortdir', 'down');
}
resort(lnk);
//}
}
}
function init_sort_from_query() {
var urlParams = new URLSearchParams(location.search);
var c = 0;
var o = 0;
switch (urlParams.get('C')) {
case "N": c = 0; break;
case "M": c = 1; break;
case "S": c = 2; break;
case "T":
case "D": c = 3; break;
}
switch (urlParams.get('O')) {
case "A": o = 1; break;
case "D": o = 0; break;
}
init_sort(c, o);
}
init_sort_from_query();
// -->
</script>
</body>
</html>

247
simulated-usb-butter/index.html
View file

@ -1,247 +0,0 @@
---
layout: empty
---
<!-- This simulates a drive being plugged in. CI moves this into place as /usb-butter. You can too. -->
<!-- Mostly, this is a copy paste of the real dirlisting. We modify the JS and CSS links to load ones from this repo. -->
<!DOCTYPE html>
<html>
<head>
<title>Index of /usb-butter/</title>
<meta name="viewport" content="initial-scale=1">
<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>
</head>
<body>
<h2>Index of /usb-butter/</h2>
<div class="list">
<table summary="Directory Listing" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="n">Name</th>
<th class="m">Last Modified</th>
<th class="s">Size</th>
<th class="t">Type</th>
</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="Download/">Download</a>/</td>
<td class="m">2024-Jun-12 14:35:22</td>
<td class="s">- &nbsp;</td>
<td class="t">Directory</td>
</tr>
<tr class="d">
<td class="n"><a href="Learn/">Learn</a>/</td>
<td class="m">2024-Jun-12 14:58:54</td>
<td class="s">- &nbsp;</td>
<td class="t">Directory</td>
</tr>
</tbody>
</table>
</div>
<div class="foot">lighttpd/1.4.69</div>
<script type="text/javascript">
// <!--
var click_column;
var name_column = 0;
var date_column = 1;
var size_column = 2;
var type_column = 3;
var prev_span = null;
if (typeof (String.prototype.localeCompare) === 'undefined') {
String.prototype.localeCompare = function (str, locale, options) {
return ((this == str) ? 0 : ((this > str) ? 1 : -1));
};
}
if (typeof (String.prototype.toLocaleUpperCase) === 'undefined') {
String.prototype.toLocaleUpperCase = function () {
return this.toUpperCase();
};
}
function get_inner_text(el) {
if ((typeof el == 'string') || (typeof el == 'undefined'))
return el;
if (el.innerText)
return el.innerText;
else {
var str = "";
var cs = el.childNodes;
var l = cs.length;
for (var i = 0; i < l; i++) {
if (cs[i].nodeType == 1) str += get_inner_text(cs[i]);
else if (cs[i].nodeType == 3) str += cs[i].nodeValue;
}
}
return str;
}
function isdigit(c) {
return (c >= '0' && c <= '9');
}
function unit_multiplier(unit) {
return (unit == 'K') ? 1000
: (unit == 'M') ? 1000000
: (unit == 'G') ? 1000000000
: (unit == 'T') ? 1000000000000
: (unit == 'P') ? 1000000000000000
: (unit == 'E') ? 1000000000000000000 : 1;
}
var li_date_regex = /(\d{4})-(\w{3})-(\d{2}) (\d{2}):(\d{2}):(\d{2})/;
var li_mon = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
function li_mon_num(mon) {
var i; for (i = 0; i < 12 && mon != li_mon[i]; ++i); return i;
}
function li_date_cmp(s1, s2) {
var dp1 = li_date_regex.exec(s1)
var dp2 = li_date_regex.exec(s2)
for (var i = 1; i < 7; ++i) {
var cmp = (2 != i)
? parseInt(dp1[i]) - parseInt(dp2[i])
: li_mon_num(dp1[2]) - li_mon_num(dp2[2]);
if (0 != cmp) return cmp;
}
return 0;
}
function sortfn_then_by_name(a, b, sort_column) {
if (sort_column == name_column || sort_column == type_column) {
var ad = (a.cells[type_column].innerHTML === 'Directory');
var bd = (b.cells[type_column].innerHTML === 'Directory');
if (ad != bd) return (ad ? -1 : 1);
}
var at = get_inner_text(a.cells[sort_column]);
var bt = get_inner_text(b.cells[sort_column]);
var cmp;
if (sort_column == name_column) {
if (at == '../') return -1;
if (bt == '../') return 1;
}
if (a.cells[sort_column].className == 'int') {
cmp = parseInt(at) - parseInt(bt);
} else if (sort_column == date_column) {
var ad = isdigit(at.substr(0, 1));
var bd = isdigit(bt.substr(0, 1));
if (ad != bd) return (!ad ? -1 : 1);
cmp = li_date_cmp(at, bt);
} else if (sort_column == size_column) {
var ai = parseInt(at, 10) * unit_multiplier(at.substr(-1, 1));
var bi = parseInt(bt, 10) * unit_multiplier(bt.substr(-1, 1));
if (at.substr(0, 1) == '-') ai = -1;
if (bt.substr(0, 1) == '-') bi = -1;
cmp = ai - bi;
} else {
cmp = at.toLocaleUpperCase().localeCompare(bt.toLocaleUpperCase());
if (0 != cmp) return cmp;
cmp = at.localeCompare(bt);
}
if (0 != cmp || sort_column == name_column) return cmp;
return sortfn_then_by_name(a, b, name_column);
}
function sortfn(a, b) {
return sortfn_then_by_name(a, b, click_column);
}
function resort(lnk) {
var span = lnk.childNodes[1];
var table = lnk.parentNode.parentNode.parentNode.parentNode;
var rows = new Array();
for (var j = 1; j < table.rows.length; j++)
rows[j - 1] = table.rows[j];
click_column = lnk.parentNode.cellIndex;
rows.sort(sortfn);
if (prev_span != null) prev_span.innerHTML = '';
if (span.getAttribute('sortdir') == 'down') {
span.innerHTML = '&uarr;';
span.setAttribute('sortdir', 'up');
rows.reverse();
} else {
span.innerHTML = '&darr;';
span.setAttribute('sortdir', 'down');
}
for (var i = 0; i < rows.length; i++)
table.tBodies[0].appendChild(rows[i]);
prev_span = span;
}
function init_sort(init_sort_column, ascending) {
var tables = document.getElementsByTagName("table");
for (var i = 0; i < tables.length; i++) {
var table = tables[i];
//var c = table.getAttribute("class")
//if (-1 != c.split(" ").indexOf("sort")) {
var row = table.rows[0].cells;
for (var j = 0; j < row.length; j++) {
var n = row[j];
if (n.childNodes.length == 1 && n.childNodes[0].nodeType == 3) {
var link = document.createElement("a");
var title = n.childNodes[0].nodeValue.replace(/:$/, "");
link.appendChild(document.createTextNode(title));
link.setAttribute("href", "#");
link.setAttribute("class", "sortheader");
link.setAttribute("onclick", "resort(this);return false;");
var arrow = document.createElement("span");
arrow.setAttribute("class", "sortarrow");
arrow.appendChild(document.createTextNode(":"));
link.appendChild(arrow)
n.replaceChild(link, n.firstChild);
}
}
var lnk = row[init_sort_column].firstChild;
if (ascending) {
var span = lnk.childNodes[1];
span.setAttribute('sortdir', 'down');
}
resort(lnk);
//}
}
}
function init_sort_from_query() {
var urlParams = new URLSearchParams(location.search);
var c = 0;
var o = 0;
switch (urlParams.get('C')) {
case "N": c = 0; break;
case "M": c = 1; break;
case "S": c = 2; break;
case "T":
case "D": c = 3; break;
}
switch (urlParams.get('O')) {
case "A": o = 1; break;
case "D": o = 0; break;
}
init_sort(c, o);
}
init_sort_from_query();
// -->
</script>
</body>
</html>