Close Photo viewer when pressing Escape key
This commit is contained in:
@@ -62,6 +62,9 @@
|
||||
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
|
||||
@@ -71,17 +74,23 @@
|
||||
canGoPrev && currentIndex++
|
||||
}, 200)
|
||||
|
||||
// Fo to previous photo
|
||||
// Go to previous photo
|
||||
const goToPrevious = throttle(() => {
|
||||
canGoNext && (currentIndex = Math.max(currentIndex - 1, 0))
|
||||
}, 200)
|
||||
|
||||
// Close viewer and go to previous page
|
||||
const closeViewer = () => {
|
||||
goto(previousUrl, { replaceState: false, noscroll: true, keepfocus: true })
|
||||
}
|
||||
|
||||
// Enable navigation with keyboard
|
||||
const handleKeydown = ({ key, defaultPrevented }: KeyboardEvent) => {
|
||||
if (defaultPrevented) return
|
||||
switch (key) {
|
||||
case 'ArrowLeft': goToPrevious(); break;
|
||||
case 'ArrowRight': goToNext(); break;
|
||||
case 'Escape': closeViewer(); break;
|
||||
default: return;
|
||||
}
|
||||
}
|
||||
@@ -221,7 +230,7 @@
|
||||
|
||||
<ButtonCircle
|
||||
tag="a"
|
||||
url={$previousPage ? $previousPage : `/${location.country.slug}/${location.slug}`}
|
||||
url={previousUrl}
|
||||
color="purple"
|
||||
class="viewer-photo__close shadow-box-dark"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user