diff --git a/services/travel-memories/app/templates/phase2.html b/services/travel-memories/app/templates/phase2.html
index 28a08ad..075e0a6 100644
--- a/services/travel-memories/app/templates/phase2.html
+++ b/services/travel-memories/app/templates/phase2.html
@@ -4,7 +4,9 @@
@keydown.j.window="tagFocused('journal')"
@keydown.s.window="tagFocused('story')"
@keydown.x.window="tagFocused('skip')"
- @keydown.space.prevent.window="tagFocused('skip')">
+ @keydown.space.prevent.window="tagFocused('skip')"
+ @keydown.arrowleft.prevent.window="navigate(-1)"
+ @keydown.arrowright.prevent.window="navigate(1)">
Triage
@@ -139,8 +141,26 @@ function triageApp(albumId) {
return {
focused: null,
+ init() {
+ const first = document.querySelector('.photo-card');
+ if (first) this.select(first);
+ },
+
select(el) {
+ if (this.focused) this.focused.classList.remove('ring-4', 'ring-white', 'ring-offset-2', 'z-10');
this.focused = el;
+ if (el) {
+ el.classList.add('ring-4', 'ring-white', 'ring-offset-2', 'z-10');
+ el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+ }
+ },
+
+ navigate(dir) {
+ const cards = [...document.querySelectorAll('.photo-card')];
+ if (!cards.length) return;
+ const idx = this.focused ? cards.indexOf(this.focused) : -1;
+ const next = cards[Math.max(0, Math.min(cards.length - 1, idx + dir))];
+ if (next) this.select(next);
},
async tagFocused(tag) {