|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Mediator - Files</title>
- <link rel="stylesheet" href="style.css">
- <link rel="icon" type="image/png" href="favicon.png">
-
- <style>
- #breadcrumbs .crumb:first-child {
- margin-left: 0px;
- }
-
- #breadcrumbs .crumb {
- margin-left: 2px;
- margin-right: 2px;
- }
- </style>
- </head>
-
- <body>
- <div id="breadcrumbs"></div>
-
- <ul id="files"></ul>
-
- <script src="util.js"></script>
- <script>
- let breadcrumbsEl = document.getElementById("breadcrumbs");
- let filesEl = document.getElementById("files");
-
- function renderEntry(path, ent) {
- if (ent.type == "d") {
- let href =
- path == "/" ? "#/" + ent.name
- : "#" + path + "/" + ent.name;
- return html("li", {}, [
- html("a", {href}, ent.name + "/"),
- ]);
- } else {
- let href =
- path == "/" ? "play.html#/" + ent.name
- : "play.html#" + path + "/" + ent.name;
- return html("li", {}, [
- html("a", {href}, ent.name),
- ]);
- }
- }
-
- function renderEntries(path, entries) {
- let els = entries.map(ent => renderEntry(path, ent));
- if (entries.length == 0) {
- els.push(html("li", {}, "No files."));
- }
-
- return els;
- }
-
- function renderBreadcrumbs(path) {
- let crumbPath = "#/";
- let els = [];
-
- els.push(html("a",
- {class: "crumb", href: "#/"}, "/"));
-
- for (let component of path.split("/")) {
- if (component == "") {
- continue;
- }
-
- if (crumbPath == "#/") {
- crumbPath += component;
- } else {
- crumbPath += "/" + component;
- els.push(html("text", "/"));
- }
-
- els.push(html("a",
- {class: "crumb", href: crumbPath}, component));
- }
-
- return els;
- }
-
- async function render() {
- let path = "/";
- if (location.hash.length > 1) {
- path = location.hash.substr(1);
- }
-
- let resp = await api("GET", "dir" + path);
- renderToElement(filesEl, renderEntries(path, resp.entries));
- renderToElement(breadcrumbsEl, renderBreadcrumbs(path));
- }
-
- render();
- window.addEventListener("hashchange", render);
- </script>
- </body>
- </html>
|