serv/dufs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: no inline scripts in HTML (#391)

Browse source 
* Moved 'ready' func call from index.html

Inline script moved to index.js

* Moved <script> out from index.html

* moved inline-styling to css

* minor formatting changes

* changed ratio from const to let

* refactor

* fix tests

---------

Co-authored-by: sigoden <sigoden@gmail.com>
This commit is contained in:
Need4Swede 2024-05-30 17:51:59 -07:00 committed by GitHub
parent ce740b1fb1
commit dc7a7cbb3f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 81 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
assets/index.html
View file

@ -6,10 +6,6 @@
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/x-icon" href="__ASSETS_PREFIX__favicon.ico"> <link rel="icon" type="image/x-icon" href="__ASSETS_PREFIX__favicon.ico">
<link rel="stylesheet" href="__ASSETS_PREFIX__index.css"> <link rel="stylesheet" href="__ASSETS_PREFIX__index.css">
<script>
DATA = __INDEX_DATA__
</script>
<script src="__ASSETS_PREFIX__index.js"></script>
</head> </head>
<body> <body>
@ -74,7 +70,8 @@
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" /> d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg> </svg>
</div> </div>
<input id="search" title="Searching for folders or files" name="q" type="text" maxlength="128" autocomplete="off" tabindex="1"> <input id="search" title="Searching for folders or files" name="q" type="text" maxlength="128" autocomplete="off"
tabindex="1">
<input type="submit" hidden /> <input type="submit" hidden />
</form> </form>
<div class="toolbox-right"> <div class="toolbox-right">
@ -125,9 +122,8 @@
<textarea id="editor" class="editor hidden" aria-label="Editor" cols="10"></textarea> <textarea id="editor" class="editor hidden" aria-label="Editor" cols="10"></textarea>
</div> </div>
</div> </div>
<script> <template id="index-data">__INDEX_DATA__</template>
window.addEventListener("DOMContentLoaded", ready); <script src="__ASSETS_PREFIX__index.js"></script>
</script>
</body> </body>
</html> </html>

104
assets/index.js
View file

@ -29,6 +29,11 @@ var DUFS_MAX_UPLOADINGS = 1;
*/ */
var DATA; var DATA;
/**
* @type {string}
*/
var DIR_EMPTY_NOTE;
/** /**
* @type {PARAMS} * @type {PARAMS}
* @typedef {object} PARAMS * @typedef {object} PARAMS
@ -45,8 +50,6 @@ const IFRAME_FORMATS = [
".mp3", ".ogg", ".wav", ".m4a", ".mp3", ".ogg", ".wav", ".m4a",
]; ];
const dirEmptyNote = PARAMS.q ? 'No results' : DATA.dir_exists ? 'Empty folder' : 'Folder will be created when a file is uploaded';
const ICONS = { const ICONS = {
dir: `<svg height="16" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M13 4H7V3c0-.66-.31-1-1-1H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zM6 4H1V3h5v1z"></path></svg>`, dir: `<svg height="16" viewBox="0 0 14 16" width="14"><path fill-rule="evenodd" d="M13 4H7V3c0-.66-.31-1-1-1H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zM6 4H1V3h5v1z"></path></svg>`,
symlinkFile: `<svg height="16" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M8.5 1H1c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V4.5L8.5 1zM11 14H1V2h7l3 3v9zM6 4.5l4 3-4 3v-2c-.98-.02-1.84.22-2.55.7-.71.48-1.19 1.25-1.45 2.3.02-1.64.39-2.88 1.13-3.73.73-.84 1.69-1.27 2.88-1.27v-2H6z"></path></svg>`, symlinkFile: `<svg height="16" viewBox="0 0 12 16" width="12"><path fill-rule="evenodd" d="M8.5 1H1c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V4.5L8.5 1zM11 14H1V2h7l3 3v9zM6 4.5l4 3-4 3v-2c-.98-.02-1.84.22-2.55.7-.71.48-1.19 1.25-1.45 2.3.02-1.64.39-2.88 1.13-3.73.73-.84 1.69-1.27 2.88-1.27v-2H6z"></path></svg>`,
@ -97,8 +100,22 @@ let $userBtn;
*/ */
let $userName; let $userName;
function ready() { // Produce table when window loads
$pathsTable = document.querySelector(".paths-table") window.addEventListener("DOMContentLoaded", async () => {
const $indexData = document.getElementById('index-data');
if (!$indexData) {
alert("No data");
return;
}
DATA = JSON.parse($indexData.innerHTML);
DIR_EMPTY_NOTE = PARAMS.q ? 'No results' : DATA.dir_exists ? 'Empty folder' : 'Folder will be created when a file is uploaded';
await ready();
});
async function ready() {
$pathsTable = document.querySelector(".paths-table");
$pathsTableHead = document.querySelector(".paths-table thead"); $pathsTableHead = document.querySelector(".paths-table thead");
$pathsTableBody = document.querySelector(".paths-table tbody"); $pathsTableBody = document.querySelector(".paths-table tbody");
$uploadersTable = document.querySelector(".uploaders-table"); $uploadersTable = document.querySelector(".uploaders-table");
@ -109,25 +126,24 @@ function ready() {
addBreadcrumb(DATA.href, DATA.uri_prefix); addBreadcrumb(DATA.href, DATA.uri_prefix);
if (DATA.kind == "Index") { if (DATA.kind === "Index") {
document.title = `Index of ${DATA.href} - Dufs`; document.title = `Index of ${DATA.href} - Dufs`;
document.querySelector(".index-page").classList.remove("hidden"); document.querySelector(".index-page").classList.remove("hidden");
setupIndexPage(); await setupIndexPage();
} else if (DATA.kind == "Edit") { } else if (DATA.kind === "Edit") {
document.title = `Edit ${DATA.href} - Dufs`; document.title = `Edit ${DATA.href} - Dufs`;
document.querySelector(".editor-page").classList.remove("hidden");; document.querySelector(".editor-page").classList.remove("hidden");
setupEditorPage(); await setupEditorPage();
} else if (DATA.kind == "View") { } else if (DATA.kind === "View") {
document.title = `View ${DATA.href} - Dufs`; document.title = `View ${DATA.href} - Dufs`;
document.querySelector(".editor-page").classList.remove("hidden");; document.querySelector(".editor-page").classList.remove("hidden");
setupEditorPage(); await setupEditorPage();
} }
} }
class Uploader { class Uploader {
/** /**
* *
@ -221,7 +237,7 @@ class Uploader {
uploadOffset = parseInt(value) || 0; uploadOffset = parseInt(value) || 0;
} }
this.uploadOffset = uploadOffset; this.uploadOffset = uploadOffset;
this.ajax() this.ajax();
} }
progress(event) { progress(event) {
@ -230,7 +246,7 @@ class Uploader {
const [speedValue, speedUnit] = formatSize(speed); const [speedValue, speedUnit] = formatSize(speed);
const speedText = `${speedValue} ${speedUnit}/s`; const speedText = `${speedValue} ${speedUnit}/s`;
const progress = formatPercent(((event.loaded + this.uploadOffset) / this.file.size) * 100); const progress = formatPercent(((event.loaded + this.uploadOffset) / this.file.size) * 100);
const duration = formatDuration((event.total - event.loaded) / speed) const duration = formatDuration((event.total - event.loaded) / speed);
this.$uploadStatus.innerHTML = `<span style="width: 80px;">${speedText}</span><span>${progress} ${duration}</span>`; this.$uploadStatus.innerHTML = `<span style="width: 80px;">${speedText}</span><span>${progress} ${duration}</span>`;
this.uploaded = event.loaded; this.uploaded = event.loaded;
this.lastUptime = now; this.lastUptime = now;
@ -274,7 +290,7 @@ Uploader.runQueue = async () => {
if (!Uploader.auth) { if (!Uploader.auth) {
Uploader.auth = true; Uploader.auth = true;
try { try {
await checkAuth() await checkAuth();
} catch { } catch {
Uploader.auth = false; Uploader.auth = false;
} }
@ -319,7 +335,7 @@ function addBreadcrumb(href, uri_prefix) {
} }
} }
function setupIndexPage() { async function setupIndexPage() {
if (DATA.allow_archive) { if (DATA.allow_archive) {
const $download = document.querySelector(".download"); const $download = document.querySelector(".download");
$download.href = baseUrl() + "?zip"; $download.href = baseUrl() + "?zip";
@ -335,11 +351,11 @@ function setupIndexPage() {
} }
if (DATA.auth) { if (DATA.auth) {
setupAuth(); await setupAuth();
} }
if (DATA.allow_search) { if (DATA.allow_search) {
setupSearch() setupSearch();
} }
renderPathsTableHead(); renderPathsTableHead();
@ -402,7 +418,7 @@ function renderPathsTableBody() {
addPath(DATA.paths[i], i); addPath(DATA.paths[i], i);
} }
} else { } else {
$emptyFolder.textContent = dirEmptyNote; $emptyFolder.textContent = DIR_EMPTY_NOTE;
$emptyFolder.classList.remove("hidden"); $emptyFolder.classList.remove("hidden");
} }
} }
@ -414,7 +430,7 @@ function renderPathsTableBody() {
*/ */
function addPath(file, index) { function addPath(file, index) {
const encodedName = encodedStr(file.name); const encodedName = encodedStr(file.name);
let url = newUrl(file.name) let url = newUrl(file.name);
let actionDelete = ""; let actionDelete = "";
let actionDownload = ""; let actionDownload = "";
let actionMove = ""; let actionMove = "";
@ -455,7 +471,7 @@ function addPath(file, index) {
${actionMove} ${actionMove}
${actionDelete} ${actionDelete}
${actionEdit} ${actionEdit}
</td>` </td>`;
$pathsTableBody.insertAdjacentHTML("beforeend", ` $pathsTableBody.insertAdjacentHTML("beforeend", `
<tr id="addPath${index}"> <tr id="addPath${index}">
@ -468,7 +484,7 @@ function addPath(file, index) {
<td class="cell-mtime">${formatMtime(file.mtime)}</td> <td class="cell-mtime">${formatMtime(file.mtime)}</td>
<td class="cell-size">${formatSize(file.size).join(" ")}</td> <td class="cell-size">${formatSize(file.size).join(" ")}</td>
${actionCell} ${actionCell}
</tr>`) </tr>`);
} }
function setupDropzone() { function setupDropzone() {
@ -480,7 +496,7 @@ function setupDropzone() {
}); });
document.addEventListener("drop", async e => { document.addEventListener("drop", async e => {
if (!e.dataTransfer.items[0].webkitGetAsEntry) { if (!e.dataTransfer.items[0].webkitGetAsEntry) {
const files = e.dataTransfer.files.filter(v => v.size > 0); const files = Array.from(e.dataTransfer.files).filter(v => v.size > 0);
for (const file of files) { for (const file of files) {
new Uploader(file, []).upload(); new Uploader(file, []).upload();
} }
@ -490,12 +506,12 @@ function setupDropzone() {
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
entries.push(e.dataTransfer.items[i].webkitGetAsEntry()); entries.push(e.dataTransfer.items[i].webkitGetAsEntry());
} }
addFileEntries(entries, []) addFileEntries(entries, []);
} }
}); });
} }
function setupAuth() { async function setupAuth() {
if (DATA.user) { if (DATA.user) {
$userBtn.classList.remove("hidden"); $userBtn.classList.remove("hidden");
$userName.textContent = DATA.user; $userName.textContent = DATA.user;
@ -504,7 +520,7 @@ function setupAuth() {
$loginBtn.classList.remove("hidden"); $loginBtn.classList.remove("hidden");
$loginBtn.addEventListener("click", async () => { $loginBtn.addEventListener("click", async () => {
try { try {
await checkAuth() await checkAuth();
location.reload(); location.reload();
} catch (err) { } catch (err) {
alert(err.message); alert(err.message);
@ -585,7 +601,7 @@ async function setupEditorPage() {
await doDeletePath(name, url, () => { await doDeletePath(name, url, () => {
location.href = location.href.split("/").slice(0, -1).join("/"); location.href = location.href.split("/").slice(0, -1).join("/");
}); });
}) });
const $saveBtn = document.querySelector(".save-btn"); const $saveBtn = document.querySelector(".save-btn");
$saveBtn.classList.remove("hidden"); $saveBtn.classList.remove("hidden");
@ -599,7 +615,7 @@ async function setupEditorPage() {
const url = baseUrl(); const url = baseUrl();
const ext = extName(baseName(url)); const ext = extName(baseName(url));
if (IFRAME_FORMATS.find(v => v === ext)) { if (IFRAME_FORMATS.find(v => v === ext)) {
$notEditable.insertAdjacentHTML("afterend", `<iframe src="${url}" sandbox width="100%" height="${window.innerHeight - 100}px"></iframe>`) $notEditable.insertAdjacentHTML("afterend", `<iframe src="${url}" sandbox width="100%" height="${window.innerHeight - 100}px"></iframe>`);
} else { } else {
$notEditable.classList.remove("hidden"); $notEditable.classList.remove("hidden");
$notEditable.textContent = "Cannot edit because file is too large or binary."; $notEditable.textContent = "Cannot edit because file is too large or binary.";
@ -616,8 +632,8 @@ async function setupEditorPage() {
$editor.value = await res.text(); $editor.value = await res.text();
} else { } else {
const bytes = await res.arrayBuffer(); const bytes = await res.arrayBuffer();
const dataView = new DataView(bytes) const dataView = new DataView(bytes);
const decoder = new TextDecoder(encoding) const decoder = new TextDecoder(encoding);
$editor.value = decoder.decode(dataView); $editor.value = decoder.decode(dataView);
} }
} catch (err) { } catch (err) {
@ -638,10 +654,10 @@ async function deletePath(index) {
DATA.paths[index] = null; DATA.paths[index] = null;
if (!DATA.paths.find(v => !!v)) { if (!DATA.paths.find(v => !!v)) {
$pathsTable.classList.add("hidden"); $pathsTable.classList.add("hidden");
$emptyFolder.textContent = dirEmptyNote; $emptyFolder.textContent = DIR_EMPTY_NOTE;
$emptyFolder.classList.remove("hidden"); $emptyFolder.classList.remove("hidden");
} }
}) });
} }
async function doDeletePath(name, url, cb) { async function doDeletePath(name, url, cb) {
@ -674,13 +690,13 @@ async function movePath(index) {
} }
async function doMovePath(fileUrl) { async function doMovePath(fileUrl) {
const fileUrlObj = new URL(fileUrl) const fileUrlObj = new URL(fileUrl);
const prefix = DATA.uri_prefix.slice(0, -1); const prefix = DATA.uri_prefix.slice(0, -1);
const filePath = decodeURIComponent(fileUrlObj.pathname.slice(prefix.length)); const filePath = decodeURIComponent(fileUrlObj.pathname.slice(prefix.length));
let newPath = prompt("Enter new path", filePath) let newPath = prompt("Enter new path", filePath);
if (!newPath) return; if (!newPath) return;
if (!newPath.startsWith("/")) newPath = "/" + newPath; if (!newPath.startsWith("/")) newPath = "/" + newPath;
if (filePath === newPath) return; if (filePath === newPath) return;
@ -803,7 +819,7 @@ function baseUrl() {
} }
function baseName(url) { function baseName(url) {
return decodeURIComponent(url.split("/").filter(v => v.length > 0).slice(-1)[0]) return decodeURIComponent(url.split("/").filter(v => v.length > 0).slice(-1)[0]);
} }
function extName(filename) { function extName(filename) {
@ -830,7 +846,7 @@ function getPathSvg(path_type) {
} }
function formatMtime(mtime) { function formatMtime(mtime) {
if (!mtime) return "" if (!mtime) return "";
const date = new Date(mtime); const date = new Date(mtime);
const year = date.getFullYear(); const year = date.getFullYear();
const month = padZero(date.getMonth() + 1, 2); const month = padZero(date.getMonth() + 1, 2);
@ -841,17 +857,17 @@ function formatMtime(mtime) {
} }
function padZero(value, size) { function padZero(value, size) {
return ("0".repeat(size) + value).slice(-1 * size) return ("0".repeat(size) + value).slice(-1 * size);
} }
function formatSize(size) { function formatSize(size) {
if (size == null) return [0, "B"] if (size == null) return [0, "B"];
const sizes = ['B', 'KB', 'MB', 'GB', 'TB']; const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
if (size == 0) return [0, "B"]; if (size == 0) return [0, "B"];
const i = parseInt(Math.floor(Math.log(size) / Math.log(1024))); const i = parseInt(Math.floor(Math.log(size) / Math.log(1024)));
ratio = 1 let ratio = 1;
if (i >= 3) { if (i >= 3) {
ratio = 100 ratio = 100;
} }
return [Math.round(size * ratio / Math.pow(1024, i), 2) / ratio, sizes[i]]; return [Math.round(size * ratio / Math.pow(1024, i), 2) / ratio, sizes[i]];
} }
@ -860,7 +876,7 @@ function formatDuration(seconds) {
seconds = Math.ceil(seconds); seconds = Math.ceil(seconds);
const h = Math.floor(seconds / 3600); const h = Math.floor(seconds / 3600);
const m = Math.floor((seconds - h * 3600) / 60); const m = Math.floor((seconds - h * 3600) / 60);
const s = seconds - h * 3600 - m * 60 const s = seconds - h * 3600 - m * 60;
return `${padZero(h, 2)}:${padZero(m, 2)}:${padZero(s, 2)}`; return `${padZero(h, 2)}:${padZero(m, 2)}:${padZero(s, 2)}`;
} }
@ -889,8 +905,8 @@ function getEncoding(contentType) {
if (/charset/i.test(charset)) { if (/charset/i.test(charset)) {
let encoding = charset.split("=")[1]; let encoding = charset.split("=")[1];
if (encoding) { if (encoding) {
return encoding.toLowerCase() return encoding.toLowerCase();
} }
} }
return 'utf-8' return 'utf-8';
} }

2
tests/assets.rs
View file

@ -115,7 +115,7 @@ fn assets_override(tmpdir: TempDir, port: u16) -> Result<(), Error> {
let url = format!("http://localhost:{port}"); let url = format!("http://localhost:{port}");
let resp = reqwest::blocking::get(&url)?; let resp = reqwest::blocking::get(&url)?;
assert!(resp.text()?.starts_with(&format!( assert!(resp.text()?.starts_with(&format!(
"/__dufs_v{}__/index.js;DATA", "/__dufs_v{}__/index.js;<template id=\"index-data\">",
env!("CARGO_PKG_VERSION") env!("CARGO_PKG_VERSION")
))); )));
let resp = reqwest::blocking::get(&url)?; let resp = reqwest::blocking::get(&url)?;

2
tests/fixtures.rs
View file

@ -65,7 +65,7 @@ pub fn tmpdir() -> TempDir {
if *directory == DIR_ASSETS { if *directory == DIR_ASSETS {
tmpdir tmpdir
.child(format!("{}{}", directory, "index.html")) .child(format!("{}{}", directory, "index.html"))
.write_str("__ASSETS_PREFIX__index.js;DATA = __INDEX_DATA__") .write_str("__ASSETS_PREFIX__index.js;<template id=\"index-data\">__INDEX_DATA__</template>")
.unwrap(); .unwrap();
} else { } else {
for file in FILES { for file in FILES {

16
tests/utils.rs
View file

@ -62,8 +62,18 @@ pub fn encode_uri(v: &str) -> String {
#[allow(dead_code)] #[allow(dead_code)]
pub fn retrieve_json(content: &str) -> Option<Value> { pub fn retrieve_json(content: &str) -> Option<Value> {
let lines: Vec<&str> = content.lines().collect(); let lines: Vec<&str> = content.lines().collect();
let line = lines.iter().find(|v| v.contains("DATA ="))?; let start_tag = "<template id=\"index-data\">";
let line_col = line.find("DATA =").unwrap() + 6; let end_tag = "</template>";
let value: Value = line[line_col..].parse().unwrap();
let line = lines.iter().find(|v| v.contains(start_tag))?;
let start_index = line.find(start_tag)?;
let start_content_index = start_index + start_tag.len();
let end_index = line[start_content_index..].find(end_tag)?;
let end_content_index = start_content_index + end_index;
let value = line[start_content_index..end_content_index].parse().ok()?;
Some(value) Some(value)
} }