More accesskeys, incl a helpful listing.

This commit is contained in:
Rasmus Kaj 2017-11-17 00:26:17 +01:00
parent a240e9aecb
commit 3dd706c1ef
6 changed files with 44 additions and 7 deletions

View File

@ -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);
}

View File

@ -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;

View File

@ -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();
}

View File

@ -5,14 +5,14 @@
@(req: &Request, lpath: &[Link])
<header>
<span><a href="/">Images</a>
<span><a href="/" accesskey="h" title="Images from all years">Images</a>
@for p in lpath { - <a href="@p.url">@p.name</a> }
</span>
<span>· <a href="/tag/">Tags</a></span>
<span>· <a href="/person/">People</a></span>
<span>· <a href="/place/">Places</a></span>
<span>· <a href="/thisday">On this day</a></span>
<span>· <a href="/random">Random pic</a></span>
<span>· <a href="/random" accesskey="r">Random pic</a></span>
@if let Some(ref u) = req.authorized_user() {<span class="user">@u (<a href="/logout">log out</a>)</span>}
else {<span class="user">(<a href="/login@if let Some(p) = req.path_without_query() {?next=@p}">log in</a>)</span>}
</header>

View File

@ -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 @@
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="/static/@photos_css.name" type="text/css"/>
@if req.authorized_user().is_some() {
<script language="javascript" src="/static/@admin_js.name"
type="text/javascript" async onload="rpadmin()">
<script src="/static/@admin_js.name" type="text/javascript"
async defer onload="rpadmin()">
</script>
}
<script src="/static/@ux_js.name" type="text/javascript" defer>
</script>
</head>
<body>
@:head(req, lpath)

18
ux.js Normal file
View File

@ -0,0 +1,18 @@
(function(d) {
let f = d.querySelector('footer');
f.insertAdjacentHTML(
'afterbegin',
'<p><a href="#help" title="Help" accesskey="?">?</a></p>')
document.querySelector('[href="#help"]').onclick = e => {
if (document.getElementById('help') == null) {
f.insertAdjacentHTML(
'beforebegin',
'<div id="help"><h2>Key bindings</h2>' +
[].map.call(
document.querySelectorAll('[accesskey]'),
e => e.accessKeyLabel + ": " + (e.title || e.innerText)).join('<br/>') +
'</div>');
}
return true;
};
})(document)