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) {