shithub: img

Download patch

ref: 9f244f7e71c394c37863042e3388a380ae493d8c
parent: c30ab46dcdc34abeb9bd2bf5de98f77a1578bab0
author: Alex Musolino <alex@musolino.id.au>
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}}