mirror of
https://github.com/gmemstr/sliproad.git
synced 2024-09-20 00:21:15 +01:00
292e24978d
Started work on a new basic frontend, with some magic code from @tomhodgins (Tom Hodgins) for templating and processing data, which was the primary purpose for considering a full-fledged JavaScript framework. Fairly simple right now, with minimal "bling", and seems "functional enough". Might need to consider options for using less or no JS down the line if there is demand. As part of this frontend, actually implemented route logic for fetching a sorted list of providers (might be worth investigating whether storing this final result in memory is worth the performance to memory trade-off). Also fixed a bug where adding "/" to the end of a provider name without a file path would result in a 404. This was addressed with some Regex filtering on the path that should be able to handle that matching.
80 lines
1.9 KiB
JavaScript
80 lines
1.9 KiB
JavaScript
// Register our router, and fire it off initially in case user is being linked a dir.
|
|
window.addEventListener("hashchange", router, false);
|
|
router()
|
|
|
|
function getFileListing(provider, path = "") {
|
|
fetch(`/api/files/${provider}${path}`)
|
|
.then((response) => {
|
|
return response.json()
|
|
})
|
|
.then((data) => {
|
|
let files = data["Files"]
|
|
html`
|
|
<div class="grid-sm">
|
|
${files.map(file =>
|
|
`<a href="${!file.IsDirectory ? `/api/files/${provider}${path}/${file.Name}` : `#${provider + "/" + file.Name}`}">
|
|
${file.Name}${file.IsDirectory ? '/' : ''}
|
|
</a>
|
|
`
|
|
).join('')}
|
|
</div>
|
|
`
|
|
})
|
|
}
|
|
|
|
function getProviders() {
|
|
fetch(`/api/providers`)
|
|
.then((response) => {
|
|
return response.json()
|
|
})
|
|
.then((data) => {
|
|
let providers = data
|
|
html`
|
|
<div class="grid-lg">
|
|
${providers.map(provider =>
|
|
`<a href=#${provider}>
|
|
${provider}
|
|
</a>
|
|
`
|
|
).join('')}
|
|
</div>
|
|
`
|
|
})
|
|
}
|
|
|
|
function router(event = null) {
|
|
let hash = location.hash.replace("#", "")
|
|
// If hash is empty, "redirect" to index.
|
|
if (hash === "") {
|
|
getProviders()
|
|
return
|
|
}
|
|
|
|
let path = hash.split("/")
|
|
let provider = path.shift()
|
|
console.log(path, provider)
|
|
getFileListing(provider, "/" + path)
|
|
}
|
|
|
|
// Tagged template function for parsing a string of text as HTML objects
|
|
// <3 @innovati for this brilliance.
|
|
function html(strings, ...things) {
|
|
// Our "body", where we'll render stuff.
|
|
const body = document.getElementById("main")
|
|
let x = document.createRange().createContextualFragment(
|
|
strings.reduce(
|
|
(markup, string, index) => {
|
|
markup += string
|
|
|
|
if (things[index]) {
|
|
markup += things[index]
|
|
}
|
|
|
|
return markup
|
|
},
|
|
''
|
|
)
|
|
)
|
|
body.innerHTML = ""
|
|
body.append(x)
|
|
} |