Close Photo viewer when pressing Escape key

This commit is contained in:
2021-11-30 18:13:58 +01:00
parent f8fe141505
commit 47fee17eb8

View File

@@ -62,6 +62,9 @@
window.history.replaceState(null, '', $page.path.replace($page.params.photo, currentPhoto.slug)) window.history.replaceState(null, '', $page.path.replace($page.params.photo, currentPhoto.slug))
} }
// Define previous URL
$: previousUrl = $previousPage ? $previousPage : `/${location.country.slug}/${location.slug}`
/** /**
* Photo navigation * Photo navigation
@@ -71,17 +74,23 @@
canGoPrev && currentIndex++ canGoPrev && currentIndex++
}, 200) }, 200)
// Fo to previous photo // Go to previous photo
const goToPrevious = throttle(() => { const goToPrevious = throttle(() => {
canGoNext && (currentIndex = Math.max(currentIndex - 1, 0)) canGoNext && (currentIndex = Math.max(currentIndex - 1, 0))
}, 200) }, 200)
// Close viewer and go to previous page
const closeViewer = () => {
goto(previousUrl, { replaceState: false, noscroll: true, keepfocus: true })
}
// Enable navigation with keyboard // Enable navigation with keyboard
const handleKeydown = ({ key, defaultPrevented }: KeyboardEvent) => { const handleKeydown = ({ key, defaultPrevented }: KeyboardEvent) => {
if (defaultPrevented) return if (defaultPrevented) return
switch (key) { switch (key) {
case 'ArrowLeft': goToPrevious(); break; case 'ArrowLeft': goToPrevious(); break;
case 'ArrowRight': goToNext(); break; case 'ArrowRight': goToNext(); break;
case 'Escape': closeViewer(); break;
default: return; default: return;
} }
} }
@@ -221,7 +230,7 @@
<ButtonCircle <ButtonCircle
tag="a" tag="a"
url={$previousPage ? $previousPage : `/${location.country.slug}/${location.slug}`} url={previousUrl}
color="purple" color="purple"
class="viewer-photo__close shadow-box-dark" class="viewer-photo__close shadow-box-dark"
> >