puttaalu/photog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add swipe navigation to the photo detail page

Browse Source 
Swipe left for older, right for newer, matching the existing arrow keys.
The image tracks the finger and slides out on commit; the exit animation
covers the page load, so this stays plain static-site navigation.

The keyboard handler moves out of the template into static/photo-nav.js,
which the existing //go:embed of static/ picks up with no generator
changes.

Swipes starting within 24px of a screen edge are left alone — that strip
is the browser's own back-gesture. Only touch pointers are handled, so
desktop drag-to-save still works, and the axis locks after 10px so
vertical drags stay scrolls. With no neighbour that way the image
rubber-bands instead of navigating.

Also prefetch the neighbour medium JPEGs, not just their HTML, or the
next page still blocks on a fresh image request.

The keyboard handler now bails on modifier keys; it previously hijacked
Alt+ArrowLeft, which is browser-back on Linux and Windows.
This commit is contained in:
puttaalu
2026-08-19 23:24:42 +02:00
parent 210ce69e18
commit 15822ed227
3 changed files with 225 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/photo.html
+5 -13
View File
@@ -8,8 +8,10 @@
<link rel="stylesheet" href="/static/style.css">
<style>:root { --serif: '{{.SerifFamily}}', Georgia, serif; --mj: '{{.MlFamily}}', sans-serif; }</style>
<link rel="alternate" type="application/atom+xml" href="/feed.xml" title="Photo Feed">
{{if .Newer}}<link rel="prefetch" href="/photo/{{.Newer.Slug}}/">{{end}}
{{if .Older}}<link rel="prefetch" href="/photo/{{.Older.Slug}}/">{{end}}
{{if .Newer}}<link rel="prefetch" href="/photo/{{.Newer.Slug}}/">
<link rel="prefetch" as="image" href="/{{.Newer.Medium}}">{{end}}
{{if .Older}}<link rel="prefetch" href="/photo/{{.Older.Slug}}/">
<link rel="prefetch" as="image" href="/{{.Older.Medium}}">{{end}}
</head>
<body>
<div class="photo-page">
@@ -43,16 +45,6 @@
© 2000–{{.Year}} {{.Author}}. All rights reserved.
</footer>
<script>
(function () {
const newer = document.querySelector('[data-nav="newer"]');
const older = document.querySelector('[data-nav="older"]');
document.addEventListener('keydown', (e) => {
if (e.target.matches('input, textarea')) return;
if (e.key === 'ArrowLeft' && newer) location.href = newer.href;
if (e.key === 'ArrowRight' && older) location.href = older.href;
});
})();
</script>
<script src="/static/photo-nav.js" defer></script>
</body>
</html>