From 3dd706c1ef1ebae0c4a0add6baf554bcae03c9a9 Mon Sep 17 00:00:00 2001 From: Rasmus Kaj Date: Fri, 17 Nov 2017 00:26:17 +0100 Subject: [PATCH] More accesskeys, incl a helpful listing. --- admin.js | 4 ++-- photos.scss | 16 ++++++++++++++++ src/build.rs | 1 + templates/head.rs.html | 4 ++-- templates/page_base.rs.html | 8 +++++--- ux.js | 18 ++++++++++++++++++ 6 files changed, 44 insertions(+), 7 deletions(-) create mode 100644 ux.js diff --git a/admin.js b/admin.js index 6b22f96..d257f80 100644 --- a/admin.js +++ b/admin.js @@ -161,7 +161,7 @@ function rpadmin() { r.onclick = e => tag_form(e, 'tag'); r.innerHTML = "🏷"; r.title = "Tag"; - r.accessKey = "T"; + r.accessKey = "t"; p.appendChild(r); p.appendChild(document.createTextNode(" ")); @@ -169,7 +169,7 @@ function rpadmin() { r.onclick = e => tag_form(e, 'person'); r.innerHTML = "\u263a"; r.title = "Person"; - r.accessKey = "P"; + r.accessKey = "p"; p.appendChild(r); meta.appendChild(p); } diff --git a/photos.scss b/photos.scss index 4333995..2825713 100644 --- a/photos.scss +++ b/photos.scss @@ -150,6 +150,22 @@ form { } } +#help { + position: fixed; + bottom: 2em; + left: 2em; + border: solid 1px black; + padding: 1ex 1em; + background: #fafafa; + box-shadow: .3em .2em 1em; + display: none; + + &:target { + display: block; + } + h2 { margin: 0; } +} + // Relevant for admin forms only. Move to separate file? form.admin { position: relative; diff --git a/src/build.rs b/src/build.rs index 8ae5971..dd4707a 100644 --- a/src/build.rs +++ b/src/build.rs @@ -12,5 +12,6 @@ fn main() { .add_sass_file(&base_dir.join("photos.scss")) .unwrap(); statics.add_file(&base_dir.join("admin.js")).unwrap(); + statics.add_file(&base_dir.join("ux.js")).unwrap(); compile_templates(&base_dir.join("templates"), &out_dir).unwrap(); } diff --git a/templates/head.rs.html b/templates/head.rs.html index 65399b5..8806deb 100644 --- a/templates/head.rs.html +++ b/templates/head.rs.html @@ -5,14 +5,14 @@ @(req: &Request, lpath: &[Link])
-Images +Images @for p in lpath { - @p.name } · Tags · People · Places · On this day -· Random pic +· Random pic @if let Some(ref u) = req.authorized_user() {@u (log out)} else {(log in)}
diff --git a/templates/page_base.rs.html b/templates/page_base.rs.html index 404567b..fc94a02 100644 --- a/templates/page_base.rs.html +++ b/templates/page_base.rs.html @@ -2,7 +2,7 @@ @use nickel::Request; @use nickel_jwt_session::SessionRequestExtensions; @use templates::head; -@use templates::statics::{photos_css, admin_js}; +@use templates::statics::{photos_css, admin_js, ux_js}; @(req: &Request, title: &str, lpath: &[Link], content: Content) @@ -14,10 +14,12 @@ @if req.authorized_user().is_some() { - } + @:head(req, lpath) diff --git a/ux.js b/ux.js new file mode 100644 index 0000000..d3ed5d7 --- /dev/null +++ b/ux.js @@ -0,0 +1,18 @@ +(function(d) { + let f = d.querySelector('footer'); + f.insertAdjacentHTML( + 'afterbegin', + '

?

') + document.querySelector('[href="#help"]').onclick = e => { + if (document.getElementById('help') == null) { + f.insertAdjacentHTML( + 'beforebegin', + '

Key bindings

' + + [].map.call( + document.querySelectorAll('[accesskey]'), + e => e.accessKeyLabel + ": " + (e.title || e.innerText)).join('
') + + '
'); + } + return true; + }; +})(document)