ref: 9f244f7e71c394c37863042e3388a380ae493d8c
parent: c30ab46dcdc34abeb9bd2bf5de98f77a1578bab0
author: Alex Musolino <[email protected]>
date: Thu Dec 7 21:03:27 EST 2023
add javascript to allow keyboard navigation
--- a/album.tpl
+++ b/album.tpl
@@ -18,17 +18,33 @@
color: grey;
}
</style>
+<script type="text/javascript">
+document.onkeydown = function (e) {
+ e = e || window.event
+ switch(e.keyCode){
+ case 37:
+ document.getElementById("prev").click()
+ break
+ case 38:
+ document.getElementById("up").click()
+ break
+ case 39:
+ document.getElementById("next").click()
+ break
+ }
+}
+</script>
</head>
<body>
<p>
{{if .Prev}}
-<a href="{{.Prev}}">prev</a>
+<a id="prev" href="{{.Prev}}">prev</a>
{{else}}
<span class="disabled">prev</span>
{{end}}
- | <a href="../index.html">index</a> |
+ | <a id="up" href="../index.html">index</a> |
{{if .Next}}
-<a href="{{.Next}}">next</a>
+<a id="next" href="{{.Next}}">next</a>
{{else}}
<span class="disabled">next</span>
{{end}}
--- a/image.tpl
+++ b/image.tpl
@@ -15,9 +15,27 @@
color: grey;
}
</style>
+<script type="text/javascript">
+document.onkeydown = function (e) {
+ if (document.activeElement == document.getElementById("tag-list"))
+ return
+ e = e || window.event
+ switch(e.keyCode){
+ case 37:
+ document.getElementById("prev").click()
+ break
+ case 38:
+ document.getElementById("up").click()
+ break
+ case 39:
+ document.getElementById("next").click()
+ break
+ }
+}
+</script>
</head>
<body>
-<p>{{if .Prev}}<a href="{{.Prev}}">prev</a>{{else}}<span class="disabled">prev</span>{{end}} | <a href=".">up</a> | {{if .Next}}<a href="{{.Next}}">next</a>{{else}}<span class="disabled">next</span>{{end}}</p>
+<p>{{if .Prev}}<a id="prev" href="{{.Prev}}">prev</a>{{else}}<span class="disabled">prev</span>{{end}} | <a id="up" href=".">up</a> | {{if .Next}}<a id="next" href="{{.Next}}">next</a>{{else}}<span class="disabled">next</span>{{end}}</p>
<p><a href="{{.Image}}.full.JPG"><img src="{{.Image}}.big.JPG"/></a></p>
{{range .Tags}} <a href="#">#{{.}}</a>{{end}}
<form action="/api/tag" method="post">
--- a/mkalbumindex.rc
+++ b/mkalbumindex.rc
@@ -1,5 +1,14 @@
#!/bin/rc
+yflag=()
+
+while(~ $1 -*){
+ switch($1){
+ case -y
+ yflag=1
+ }
+}
+
this=`{basename `{pwd}}
year=`{basename `{dirname `{pwd}}}
@@ -7,6 +16,8 @@
<!DOCTYPE html>
<html>
<head>
+<title>$1</title>
+<link rel="shortcut icon" href="montage.jpg">
<style>
body{
background-color: black;
@@ -24,11 +35,10 @@
</style>
</head>
<body>
-<p>
EOF
fn findnext1{
- for(i in `{seq $2 $3 $4 | sed 's/^.$/0&/'}){
+ for(i in `{9 seq $2 $3 $4 | sed 's/^.$/0&/'}){
if(test -d ../../$1/^$i){
echo $1/$i
exit
@@ -38,6 +48,11 @@
fn findnext{
@{
+ if(~ $#yflag 0){
+ echo 0
+ exit
+ }
+
findnext1 $1 `{echo $2 $3 | bc} $3 $4
end=1990
@@ -49,7 +64,7 @@
me=12
}
- for(y in `{seq `{echo $1 $3 | bc} $3 $end}){
+ for(y in `{9 seq `{echo $1 $3 | bc} $3 $end}){
if(test -d ../../^$y)
findnext1 $y $ms $3 $me
}
@@ -56,22 +71,30 @@
}
}
-prev=`{findnext $year $this -1 1}
-if(~ $#prev 0)
- echo '<span class="disabled">prev</span>'
-if not
- echo '<a href="../../'^$"prev^'/index.html">prev</a>'
+fn prnav{
+ echo '<p>'
+ prev=`{findnext $year $this -1 1}
+ if(~ $#prev 0)
+ echo '<span class="disabled">prev</span>'
+ if not
+ echo '<a href="../../'^$"prev^'/index.html">prev</a>'
-echo ' | <a href="../index.html">'^$year^'</a> | '
+ if(! ~ $#yflag 0)
+ echo ' | <a href="../index.html">'^$year^'</a> | '
+ if not
+ echo ' | <a href="../index.html">index</a> | '
-next=`{findnext $year $this +1 12}
-if(~ $#next 0)
- echo '<span class="disabled">next</span>'
-if not
- echo '<a href="../../'^$next^'/index.html">next</a>'
-echo '</p>'
+ next=`{findnext $year $this +1 12}
+ if(~ $#next 0)
+ echo '<span class="disabled">next</span>'
+ if not
+ echo '<a href="../../'^$next^'/index.html">next</a>'
+ echo '</p>'
+}
+prnav
ls *.thumb.JPG | awk '{ printf "<a href=\"%d.html\"><img src=\"%s\"/></a>\n", NR, $0 }'
+prnav
cat <<EOF
</body>
--- a/mkpages.rc
+++ b/mkpages.rc
@@ -1,5 +1,14 @@
#!/bin/rc
+yflag=()
+
+while(~ $1 -*){
+ switch($1){
+ case -y
+ yflag=1
+ }
+}
+
month=`{basename `{pwd}}
year=`{basename `{dirname `{pwd}}}
@@ -26,7 +35,10 @@
echo '<a href="'^$3^'.html">prev</a>'
if not
echo '<span class="disabled">prev</span>'
-echo ' | <a href="../../'^$year^/^$month^'/index.html">'^$year^/^$month^'</a> | '
+if(~ $yflag 1)
+ echo ' | <a href="../../'^$year^/^$month^'/index.html">'^$year^/^$month^'</a> | '
+if not
+ echo ' | <a href=".">up</a> | '
if(! ~ $4 '')
echo '<a href="'^$4^'.html">next</a>'
if not
--- a/year.tpl
+++ b/year.tpl
@@ -34,17 +34,33 @@
color: grey;
}
</style>
+<script type="text/javascript">
+document.onkeydown = function (e) {
+ e = e || window.event
+ switch(e.keyCode){
+ case 37:
+ document.getElementById("prev").click()
+ break
+ case 38:
+ document.getElementById("up").click()
+ break
+ case 39:
+ document.getElementById("next").click()
+ break
+ }
+}
+</script>
</head>
<body>
<p>
{{if .Prev}}
-<a href="../{{.Prev}}/index.html">prev</a>
+<a id="prev" href="../{{.Prev}}/index.html">prev</a>
{{else}}
<span class="disabled">prev</span>
{{end}}
- | <a href="../index.html">index</a> |
+ | <a id="up" href="../index.html">index</a> |
{{if .Next}}
-<a href="../{{.Next}}/index.html">prev</a>
+<a id="next" href="../{{.Next}}/index.html">prev</a>
{{else}}
<span class="disabled">next</span>
{{end}}