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))
|
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"
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user