add js to overlay back button functionality

This commit is contained in:
glyph 2022-06-23 12:01:18 +01:00
parent 65b5f95a90
commit 4568577f81
2 changed files with 22 additions and 1 deletions

View File

@ -1,5 +1,25 @@
use maud::{html, PreEscaped, DOCTYPE};
/// JavaScript event listener for the back button on the top navigation bar of
/// the UI.
///
/// When the button is clicked, prevent the default behaviour and invoke
/// the history API to load the previous URL (page) in the history list.
fn js_back_button_script() -> PreEscaped<String> {
html! {
(PreEscaped("
<script>
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('backButton').onclick = function(e) {
e.preventDefault();
history.back();
}
});
</script>
"))
}
}
/// Base template builder.
///
/// Takes an HTML body as input and splices it into the base template.
@ -14,6 +34,7 @@ pub fn build_template(body: PreEscaped<String>, theme: String) -> PreEscaped<Str
meta name="viewport" content="width=devide-width, initial-scale=1.0";
link rel="stylesheet" href="/css/peachcloud.css";
link rel="stylesheet" href="/css/_variables.css";
(js_back_button_script())
title { "PeachCloud" }
}
body {

View File

@ -38,7 +38,7 @@ pub fn build_template(
html! {
(PreEscaped("<!-- Top navigation bar -->"))
nav class="nav-bar" {
a class="nav-item" href=[back] title="Back" {
a id="backButton" class="nav-item" href=[back] title="Back" {
img class="icon-medium nav-icon-left icon-active" src="/icons/back.svg" alt="Back";
}
h1 class="nav-title" { (title) }