More accesskeys, incl a helpful listing.
This commit is contained in:
parent
a240e9aecb
commit
3dd706c1ef
4
admin.js
4
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);
|
||||
}
|
||||
|
16
photos.scss
16
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;
|
||||
|
@ -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();
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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
18
ux.js
Normal 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)
|
Loading…
Reference in New Issue
Block a user