andrey/album
1
0
Fork 0
Code Issues 10 Pull Requests Packages Projects Releases Wiki Activity

More accesskeys, incl a helpful listing.

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
admin.js
View File

@ -161,7 +161,7 @@ function rpadmin() {
r.onclick = e => tag_form(e, 'tag'); r.onclick = e => tag_form(e, 'tag');
r.innerHTML = "🏷"; r.innerHTML = "🏷";
r.title = "Tag"; r.title = "Tag";
r.accessKey = "T"; r.accessKey = "t";
p.appendChild(r); p.appendChild(r);
p.appendChild(document.createTextNode(" ")); p.appendChild(document.createTextNode(" "));
@ -169,7 +169,7 @@ function rpadmin() {
r.onclick = e => tag_form(e, 'person'); r.onclick = e => tag_form(e, 'person');
r.innerHTML = "\u263a"; r.innerHTML = "\u263a";
r.title = "Person"; r.title = "Person";
r.accessKey = "P"; r.accessKey = "p";
p.appendChild(r); p.appendChild(r);
meta.appendChild(p); meta.appendChild(p);
} }

16
photos.scss
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? // Relevant for admin forms only. Move to separate file?
form.admin { form.admin {
position: relative; position: relative;

1
src/build.rs
View File

@ -12,5 +12,6 @@ fn main() {
.add_sass_file(&base_dir.join("photos.scss")) .add_sass_file(&base_dir.join("photos.scss"))
.unwrap(); .unwrap();
statics.add_file(&base_dir.join("admin.js")).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(); compile_templates(&base_dir.join("templates"), &out_dir).unwrap();
} }

4
templates/head.rs.html
View File

@ -5,14 +5,14 @@
@(req: &Request, lpath: &[Link]) @(req: &Request, lpath: &[Link])
<header> <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> } @for p in lpath { - <a href="@p.url">@p.name</a> }
</span> </span>
<span>· <a href="/tag/">Tags</a></span> <span>· <a href="/tag/">Tags</a></span>
<span>· <a href="/person/">People</a></span> <span>· <a href="/person/">People</a></span>
<span>· <a href="/place/">Places</a></span> <span>· <a href="/place/">Places</a></span>
<span>· <a href="/thisday">On this day</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>} @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>} else {<span class="user">(<a href="/login@if let Some(p) = req.path_without_query() {?next=@p}">log in</a>)</span>}
</header> </header>

8
templates/page_base.rs.html
View File

@ -2,7 +2,7 @@
@use nickel::Request; @use nickel::Request;
@use nickel_jwt_session::SessionRequestExtensions; @use nickel_jwt_session::SessionRequestExtensions;
@use templates::head; @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) @(req: &Request, title: &str, lpath: &[Link], content: Content)
@ -14,10 +14,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="/static/@photos_css.name" type="text/css"/> <link rel="stylesheet" href="/static/@photos_css.name" type="text/css"/>
@if req.authorized_user().is_some() { @if req.authorized_user().is_some() {
<script language="javascript" src="/static/@admin_js.name" <script src="/static/@admin_js.name" type="text/javascript"
type="text/javascript" async onload="rpadmin()"> async defer onload="rpadmin()">
</script> </script>
} }
<script src="/static/@ux_js.name" type="text/javascript" defer>
</script>
</head> </head>
<body> <body>
@:head(req, lpath) @: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)