diff --git a/assets/index.css b/assets/index.css index 61ba3a6..a1a4908 100644 --- a/assets/index.css +++ b/assets/index.css @@ -7,6 +7,7 @@ html { body { /* prevent premature breadcrumb wrapping on mobile */ min-width: 500px; + margin: 0; } .hidden { @@ -17,7 +18,10 @@ body { display: flex; flex-wrap: wrap; align-items: center; - padding: 1em 1em 0; + padding: 0.6em 1em; + position: fixed; + width: 100%; + background-color: white; } .breadcrumb { @@ -104,7 +108,7 @@ body { } .main { - padding: 0 1em; + padding: 3em 1em 0; } .empty-folder { diff --git a/assets/index.js b/assets/index.js index 0259308..dfaa159 100644 --- a/assets/index.js +++ b/assets/index.js @@ -58,6 +58,10 @@ let $emptyFolder; * @type Element */ let $newFolder; +/** + * @type Element + */ +let $searchbar; class Uploader { /** @@ -106,7 +110,7 @@ class Uploader { const ajax = new XMLHttpRequest(); ajax.upload.addEventListener("progress", e => this.progress(e), false); ajax.addEventListener("readystatechange", () => { - if(ajax.readyState === 4) { + if (ajax.readyState === 4) { if (ajax.status >= 200 && ajax.status < 300) { this.complete(); } else { @@ -119,7 +123,7 @@ class Uploader { ajax.open("PUT", url); ajax.send(this.file); } - + progress(event) { const now = Date.now(); @@ -182,7 +186,7 @@ function addBreadcrumb(href, uri_prefix) { const name = parts[i]; if (i > 0) { if (!path.endsWith("/")) { - path += "/"; + path += "/"; } path += encodeURIComponent(name); } @@ -224,20 +228,20 @@ function renderPathsTableHead() { $pathsTableHead.insertAdjacentHTML("beforeend", ` ${headerItems.map(item => { - let svg = ``; - let order = "asc"; - if (PARAMS.sort === item.name) { - if (PARAMS.order === "asc") { - order = "desc"; - svg = `` - } else { - svg = `` - } - } - const qs = new URLSearchParams({...PARAMS, order, sort: item.name }).toString(); - const icon = `${svg}` - return `${item.text}${icon}` - }).join("\n")} + let svg = ``; + let order = "asc"; + if (PARAMS.sort === item.name) { + if (PARAMS.order === "asc") { + order = "desc"; + svg = `` + } else { + svg = `` + } + } + const qs = new URLSearchParams({ ...PARAMS, order, sort: item.name }).toString(); + const icon = `${svg}` + return `${item.text}${icon}` + }).join("\n")} Actions `); @@ -339,13 +343,13 @@ async function deletePath(index) { method: "DELETE", }); if (res.status >= 200 && res.status < 300) { - document.getElementById(`addPath${index}`).remove(); - DATA.paths[index] = null; - if (!DATA.paths.find(v => !!v)) { - $pathsTable.classList.add("hidden"); - $emptyFolder.textContent = dirEmptyNote; - $emptyFolder.classList.remove("hidden"); - } + document.getElementById(`addPath${index}`).remove(); + DATA.paths[index] = null; + if (!DATA.paths.find(v => !!v)) { + $pathsTable.classList.add("hidden"); + $emptyFolder.textContent = dirEmptyNote; + $emptyFolder.classList.remove("hidden"); + } } else { throw new Error(await res.text()) } @@ -368,7 +372,7 @@ async function movePath(index) { const fileUrlObj = new URL(fileUrl) const prefix = DATA.uri_prefix.slice(0, -1); - + const filePath = decodeURIComponent(fileUrlObj.pathname.slice(prefix.length)); let newPath = prompt("Enter new path", filePath) @@ -395,27 +399,65 @@ async function movePath(index) { } function dropzone() { - ["drag", "dragstart", "dragend", "dragover", "dragenter", "dragleave", "drop"].forEach(name => { - document.addEventListener(name, e => { - e.preventDefault(); - e.stopPropagation(); - }); + ["drag", "dragstart", "dragend", "dragover", "dragenter", "dragleave", "drop"].forEach(name => { + document.addEventListener(name, e => { + e.preventDefault(); + e.stopPropagation(); }); - document.addEventListener("drop", e => { - if (!e.dataTransfer.items[0].webkitGetAsEntry) { - const files = e.dataTransfer.files.filter(v => v.size > 0); - 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, []) + }); + document.addEventListener("drop", e => { + if (!e.dataTransfer.items[0].webkitGetAsEntry) { + const files = e.dataTransfer.files.filter(v => v.size > 0); + 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, []) + } + }); +} + +/** + * 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) { - let url = location.href.split('?')[0]; - if (!url.endsWith("/")) url += "/"; - if (!name) return url; - url += name.split("/").map(encodeURIComponent).join("/"); - return url; + let url = location.href.split('?')[0]; + if (!url.endsWith("/")) url += "/"; + if (!name) return url; + url += name.split("/").map(encodeURIComponent).join("/"); + return url; } function getSvg(path_type) { @@ -511,8 +553,8 @@ function formatPercent(percent) { } function encodedStr(rawStr) { - return rawStr.replace(/[\u00A0-\u9999<>\&]/g, function(i) { - return '&#'+i.charCodeAt(0)+';'; + return rawStr.replace(/[\u00A0-\u9999<>\&]/g, function (i) { + return '&#' + i.charCodeAt(0) + ';'; }); } @@ -523,24 +565,11 @@ function ready() { $pathsTableBody = document.querySelector(".paths-table tbody"); $uploadersTable = document.querySelector(".uploaders-table"); $emptyFolder = document.querySelector(".empty-folder"); - $searchForm = document.querySelector(".searchbar"); $newFolder = document.querySelector(".new-folder"); + $searchbar = document.querySelector(".searchbar"); if (DATA.allow_search) { - $searchForm.classList.remove("hidden"); - $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; - } + setupSearch() } if (DATA.allow_archive) { @@ -553,19 +582,6 @@ function ready() { if (DATA.allow_upload) { dropzone(); - if (DATA.allow_delete) { - $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(); - } - }); + setupUpload(); } }