explorigin/image_server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use navigable link elements.

Browse Source
This commit is contained in:
Timothy Farrell 2026-03-09 10:01:02 +00:00
parent 5774ef7779
commit b57ca2c47a
1 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend.html
View File

@ -25,6 +25,7 @@
padding: 20px; padding: 20px;
user-select: none; user-select: none;
transition: color 0.2s; transition: color 0.2s;
text-decoration: none;
} }
.chevron:hover { color: rgba(255, 255, 255, 0.9); } .chevron:hover { color: rgba(255, 255, 255, 0.9); }
.chevron.left { left: 10px; } .chevron.left { left: 10px; }
@ -33,23 +34,30 @@
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<img id="img" alt="Random image"> <a href="#" id="img-link"><img id="img" alt="Random image"></a>
<div class="chevron left" id="prev-btn">&#8249;</div> <a href="#" class="chevron left" id="prev-btn">&#8249;</a>
<div class="chevron right" id="next-btn">&#8250;</div> <a href="#" class="chevron right" id="next-btn">&#8250;</a>
</div> </div>
<script> <script>
let currentData = null; let currentData = null;
function loadImageSrc(hash) { function loadImageSrc(hash) {
document.getElementById('img').src = '/' + hash + '/data'; document.getElementById('img').src = '/' + hash + '/data';
document.getElementById('img-link').href = '#';
history.replaceState(null, '', '#' + hash); history.replaceState(null, '', '#' + hash);
} }
async function loadInfo(hash) { async function loadInfo(hash) {
const response = await fetch('/' + hash); const response = await fetch('/' + hash);
if (!response.ok) {
loadRandom();
return;
}
currentData = await response.json(); currentData = await response.json();
loadImageSrc(currentData.img); loadImageSrc(currentData.img);
document.getElementById('img').title = currentData.filename || ''; document.getElementById('img').title = currentData.filename || '';
document.getElementById('prev-btn').href = '#' + currentData.previous;
document.getElementById('next-btn').href = '#' + currentData.next;
} }
async function loadRandom() { async function loadRandom() {
@ -58,24 +66,30 @@
await loadInfo(data.img); await loadInfo(data.img);
} }
document.getElementById('img').addEventListener('click', loadRandom); window.addEventListener('hashchange', function() {
document.getElementById('prev-btn').addEventListener('click', function() { const hash = window.location.hash.slice(1);
if (currentData && currentData.previous) loadInfo(currentData.previous); if (hash) {
loadInfo(hash);
} else {
loadRandom();
}
}); });
document.getElementById('next-btn').addEventListener('click', function() {
if (currentData && currentData.next) loadInfo(currentData.next); window.addEventListener('hashchange', function() {
const hash = window.location.hash.slice(1);
if (hash) loadInfo(hash);
}); });
document.addEventListener('keydown', function(e) { document.addEventListener('keydown', function(e) {
e.preventDefault();
if (e.code === 'Space') { if (e.code === 'Space') {
e.preventDefault(); window.location.hash = '';
loadRandom(); } else if (e.code === 'ArrowLeft') {
} else if (e.code === 'ArrowLeft' && currentData && currentData.previous) { document.getElementById('prev-btn').click();
e.preventDefault(); } else if (e.code === 'ArrowRight') {
loadInfo(currentData.previous); document.getElementById('next-btn').click();
} else if (e.code === 'ArrowRight' && currentData && currentData.next) { } else {
e.preventDefault(); return;
loadInfo(currentData.next);
} }
}); });