diff options
Diffstat (limited to 'server/src/routes/ui')
| -rw-r--r-- | server/src/routes/ui/layout.rs | 1 | ||||
| -rw-r--r-- | server/src/routes/ui/style/layout.css | 2 | ||||
| -rw-r--r-- | server/src/routes/ui/style/mod.rs | 27 | ||||
| -rw-r--r-- | server/src/routes/ui/style/transition.js | 53 |
4 files changed, 82 insertions, 1 deletions
diff --git a/server/src/routes/ui/layout.rs b/server/src/routes/ui/layout.rs index 51905db..cda8b0f 100644 --- a/server/src/routes/ui/layout.rs +++ b/server/src/routes/ui/layout.rs @@ -9,6 +9,7 @@ markup::define! { head { title { @title " - " @CONF.brand } link[rel="stylesheet", href="/assets/style.css"]; + script[src="/assets/bundle.js"] {} } body { nav { diff --git a/server/src/routes/ui/style/layout.css b/server/src/routes/ui/style/layout.css index 913bd77..0a6d25f 100644 --- a/server/src/routes/ui/style/layout.css +++ b/server/src/routes/ui/style/layout.css @@ -197,5 +197,5 @@ option { font-stretch: 200%; } .page.item .title .play::before { - content: "▶ "; + content: "▶"; } diff --git a/server/src/routes/ui/style/mod.rs b/server/src/routes/ui/style/mod.rs index 07e92dd..ad9c5e5 100644 --- a/server/src/routes/ui/style/mod.rs +++ b/server/src/routes/ui/style/mod.rs @@ -47,6 +47,28 @@ fn font_bundle() -> Vec<u8> { } } +fn js_bundle() -> String { + if cfg!(debug_assertions) { + ["transition.js"] + .into_iter() + .map(|n| { + read_to_string( + PathBuf::from_str(file!()) + .unwrap() + .parent() + .unwrap() + .join(n), + ) + .unwrap() + }) + .collect::<Vec<_>>() + .join("\n") + } else { + include_str!("transition.js").to_string() + } +} + + #[get("/assets/style.css")] pub fn r_assets_style() -> (ContentType, String) { (ContentType::CSS, css_bundle()) @@ -56,3 +78,8 @@ pub fn r_assets_style() -> (ContentType, String) { pub fn r_assets_font() -> (ContentType, Vec<u8>) { (ContentType::WOFF2, font_bundle()) } + +#[get("/assets/bundle.js")] +pub fn r_assets_js() -> (ContentType, String) { + (ContentType::JavaScript, js_bundle()) +} diff --git a/server/src/routes/ui/style/transition.js b/server/src/routes/ui/style/transition.js new file mode 100644 index 0000000..193f5a2 --- /dev/null +++ b/server/src/routes/ui/style/transition.js @@ -0,0 +1,53 @@ +/// <reference lib="dom" /> + +const duration = 0.2 +globalThis.addEventListener("load", () => { + patch_page() +}) + +function patch_page() { + document.querySelectorAll("a").forEach(el => { + el.addEventListener("click", async ev => { + ev.preventDefault() + const trigger_load = prepare_load(el.href) + await fade(false) + trigger_load() + }) + }) +} + +function prepare_load(href) { + const r_promise = fetch(href) + return async () => { + const r = await r_promise + const rt = await r.text() + const [head, body] = rt.split("<head>")[1].split("</body>")[0].split("</head><body>") + document.head.innerHTML = head + document.body.innerHTML = body + fade(true) + window.history.pushState({}, "", href) + patch_page() + } +} + +function fade(dir) { + const overlay = document.createElement("div") + overlay.style.position = "absolute" + overlay.style.left = "0px" + overlay.style.top = "0px" + overlay.style.width = "100vw" + overlay.style.height = "100vh" + overlay.style.backgroundColor = dir ? "black" : "transparent" + overlay.style.transition = `background-color ${duration}s` + overlay.style.zIndex = 99999; + setTimeout(() => { + overlay.style.backgroundColor = dir ? "transparent" : "black" + }, 0) + document.body.appendChild(overlay) + return new Promise(res => { + setTimeout(() => { + document.body.removeChild(overlay) + res() + }, duration * 1000) + }) +}
\ No newline at end of file |