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

chore: optimize ui

Browse source
This commit is contained in:
sigoden 2023-02-20 17:23:31 +08:00
parent 111103f26b
commit c6c78a16c5
2 changed files with 102 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
assets/index.css
View file

@ -7,6 +7,7 @@ html {
body { body {
/* prevent premature breadcrumb wrapping on mobile */ /* prevent premature breadcrumb wrapping on mobile */
min-width: 500px; min-width: 500px;
margin: 0;
} }
.hidden { .hidden {
@ -17,7 +18,10 @@ body {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
padding: 1em 1em 0; padding: 0.6em 1em;
position: fixed;
width: 100%;
background-color: white;
} }
.breadcrumb { .breadcrumb {
@ -104,7 +108,7 @@ body {
} }
.main { .main {
padding: 0 1em; padding: 3em 1em 0;
} }
.empty-folder { .empty-folder {

176
assets/index.js
View file

@ -58,6 +58,10 @@ let $emptyFolder;
* @type Element * @type Element
*/ */
let $newFolder; let $newFolder;
/**
* @type Element
*/
let $searchbar;
class Uploader { class Uploader {
/** /**
@ -106,7 +110,7 @@ class Uploader {
const ajax = new XMLHttpRequest(); const ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", e => this.progress(e), false); ajax.upload.addEventListener("progress", e => this.progress(e), false);
ajax.addEventListener("readystatechange", () => { ajax.addEventListener("readystatechange", () => {
if(ajax.readyState === 4) { if (ajax.readyState === 4) {
if (ajax.status >= 200 && ajax.status < 300) { if (ajax.status >= 200 && ajax.status < 300) {
this.complete(); this.complete();
} else { } else {
@ -119,7 +123,7 @@ class Uploader {
ajax.open("PUT", url); ajax.open("PUT", url);
ajax.send(this.file); ajax.send(this.file);
} }
progress(event) { progress(event) {
const now = Date.now(); const now = Date.now();
@ -182,7 +186,7 @@ function addBreadcrumb(href, uri_prefix) {
const name = parts[i]; const name = parts[i];
if (i > 0) { if (i > 0) {
if (!path.endsWith("/")) { if (!path.endsWith("/")) {
path += "/"; path += "/";
} }
path += encodeURIComponent(name); path += encodeURIComponent(name);
} }
@ -224,20 +228,20 @@ function renderPathsTableHead() {
$pathsTableHead.insertAdjacentHTML("beforeend", ` $pathsTableHead.insertAdjacentHTML("beforeend", `
<tr> <tr>
${headerItems.map(item => { ${headerItems.map(item => {
let svg = `<svg width="12" height="12" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z"/></svg>`; let svg = `<svg width="12" height="12" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z"/></svg>`;
let order = "asc"; let order = "asc";
if (PARAMS.sort === item.name) { if (PARAMS.sort === item.name) {
if (PARAMS.order === "asc") { if (PARAMS.order === "asc") {
order = "desc"; order = "desc";
svg = `<svg width="12" height="12" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z"/></svg>` svg = `<svg width="12" height="12" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z"/></svg>`
} else { } else {
svg = `<svg width="12" height="12" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/></svg>` svg = `<svg width="12" height="12" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z"/></svg>`
} }
} }
const qs = new URLSearchParams({...PARAMS, order, sort: item.name }).toString(); const qs = new URLSearchParams({ ...PARAMS, order, sort: item.name }).toString();
const icon = `<span>${svg}</span>` const icon = `<span>${svg}</span>`
return `<th class="cell-${item.name}" ${item.props}><a href="?${qs}">${item.text}${icon}</a></th>` return `<th class="cell-${item.name}" ${item.props}><a href="?${qs}">${item.text}${icon}</a></th>`
}).join("\n")} }).join("\n")}
<th class="cell-actions">Actions</th> <th class="cell-actions">Actions</th>
</tr> </tr>
`); `);
@ -339,13 +343,13 @@ async function deletePath(index) {
method: "DELETE", method: "DELETE",
}); });
if (res.status >= 200 && res.status < 300) { if (res.status >= 200 && res.status < 300) {
document.getElementById(`addPath${index}`).remove(); document.getElementById(`addPath${index}`).remove();
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 = dirEmptyNote;
$emptyFolder.classList.remove("hidden"); $emptyFolder.classList.remove("hidden");
} }
} else { } else {
throw new Error(await res.text()) throw new Error(await res.text())
} }
@ -368,7 +372,7 @@ async function movePath(index) {
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)
@ -395,27 +399,65 @@ async function movePath(index) {
} }
function dropzone() { function dropzone() {
["drag", "dragstart", "dragend", "dragover", "dragenter", "dragleave", "drop"].forEach(name => { ["drag", "dragstart", "dragend", "dragover", "dragenter", "dragleave", "drop"].forEach(name => {
document.addEventListener(name, e => { document.addEventListener(name, e => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
});
}); });
document.addEventListener("drop", e => { });
if (!e.dataTransfer.items[0].webkitGetAsEntry) { document.addEventListener("drop", e => {
const files = e.dataTransfer.files.filter(v => v.size > 0); if (!e.dataTransfer.items[0].webkitGetAsEntry) {
for (const file of files) { const files = e.dataTransfer.files.filter(v => v.size > 0);
new Uploader(file, []).upload(); for (const file of files) {
} new Uploader(file, []).upload();
} else {
const entries = [];
const len = e.dataTransfer.items.length;
for (let i = 0; i < len; i++) {
entries.push(e.dataTransfer.items[i].webkitGetAsEntry());
}
addFileEntries(entries, [])
} }
}); } else {
const entries = [];
const len = e.dataTransfer.items.length;
for (let i = 0; i < len; i++) {
entries.push(e.dataTransfer.items[i].webkitGetAsEntry());
}
addFileEntries(entries, [])
}
});
}
/**
* Setup searchbar
*/
function setupSearch() {
$searchbar.classList.remove("hidden");
$searchbar.addEventListener("submit", event => {
event.preventDefault();
const formData = new FormData($searchbar);
const q = formData.get("q");
let href = getUrl();
if (q) {
href += "?q=" + q;
}
location.href = href;
});
if (PARAMS.q) {
document.getElementById('search').value = PARAMS.q;
}
}
/**
* Setup upload
*/
function setupUpload() {
$newFolder.classList.remove("hidden");
$newFolder.addEventListener("click", () => {
const name = prompt("Enter folder name");
if (name) createFolder(name);
});
document.querySelector(".upload-file").classList.remove("hidden");
document.getElementById("file").addEventListener("change", e => {
const files = e.target.files;
for (let file of files) {
new Uploader(file, []).upload();
}
});
} }
/** /**
@ -451,11 +493,11 @@ async function addFileEntries(entries, dirs) {
function getUrl(name) { function getUrl(name) {
let url = location.href.split('?')[0]; let url = location.href.split('?')[0];
if (!url.endsWith("/")) url += "/"; if (!url.endsWith("/")) url += "/";
if (!name) return url; if (!name) return url;
url += name.split("/").map(encodeURIComponent).join("/"); url += name.split("/").map(encodeURIComponent).join("/");
return url; return url;
} }
function getSvg(path_type) { function getSvg(path_type) {
@ -511,8 +553,8 @@ function formatPercent(percent) {
} }
function encodedStr(rawStr) { function encodedStr(rawStr) {
return rawStr.replace(/[\u00A0-\u9999<>\&]/g, function(i) { return rawStr.replace(/[\u00A0-\u9999<>\&]/g, function (i) {
return '&#'+i.charCodeAt(0)+';'; return '&#' + i.charCodeAt(0) + ';';
}); });
} }
@ -523,24 +565,11 @@ function ready() {
$pathsTableBody = document.querySelector(".paths-table tbody"); $pathsTableBody = document.querySelector(".paths-table tbody");
$uploadersTable = document.querySelector(".uploaders-table"); $uploadersTable = document.querySelector(".uploaders-table");
$emptyFolder = document.querySelector(".empty-folder"); $emptyFolder = document.querySelector(".empty-folder");
$searchForm = document.querySelector(".searchbar");
$newFolder = document.querySelector(".new-folder"); $newFolder = document.querySelector(".new-folder");
$searchbar = document.querySelector(".searchbar");
if (DATA.allow_search) { if (DATA.allow_search) {
$searchForm.classList.remove("hidden"); setupSearch()
$searchForm.addEventListener("submit", event => {
event.preventDefault();
const formData = new FormData($searchForm);
const q = formData.get("q");
let href = getUrl();
if (q) {
href += "?q=" + q;
}
location.href = href;
});
if (PARAMS.q) {
document.getElementById('search').value = PARAMS.q;
}
} }
if (DATA.allow_archive) { if (DATA.allow_archive) {
@ -553,19 +582,6 @@ function ready() {
if (DATA.allow_upload) { if (DATA.allow_upload) {
dropzone(); dropzone();
if (DATA.allow_delete) { setupUpload();
$newFolder.classList.remove("hidden");
$newFolder.addEventListener("click", () => {
const name = prompt("Enter name of new folder");
if (name) createFolder(name);
});
}
document.querySelector(".upload-file").classList.remove("hidden");
document.getElementById("file").addEventListener("change", e => {
const files = e.target.files;
for (let file of files) {
new Uploader(file, []).upload();
}
});
} }
} }