Viewer: Finally fix Carousel navigation depending on URL
- Instead of detecting every case using popState event or whatnot, used a Sapper page stores subscribe to go to the current photo from the URL param (findIndex in photos) - No page transition when navigating between photos in Viewer, but runs In and Out - Also shortened dispatches to direct value over an object
This commit is contained in:
@@ -80,7 +80,7 @@
|
||||
let paginatedPhotos = photos.filter(photo => photo.hidden === false)
|
||||
|
||||
// Update pagination event from Pagination component
|
||||
const updatePagination = event => paginatedPhotos = event.detail.paginatedPhotos
|
||||
const updatePagination = event => paginatedPhotos = event.detail
|
||||
|
||||
|
||||
/*
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
pageReady,
|
||||
pageTransition
|
||||
} from '../../../../utils/store'
|
||||
import { getThumbnail, analyticsUpdate } from '../../../../utils/functions'
|
||||
import { getThumbnail } from '../../../../utils/functions'
|
||||
|
||||
// Components
|
||||
import IconGlobe from '../../../../atoms/IconGlobe'
|
||||
@@ -59,32 +59,22 @@
|
||||
const { page } = stores()
|
||||
const dispatch = createEventDispatcher()
|
||||
let windowWidth
|
||||
let gotoLink
|
||||
let currentPhoto = photos.find(photo => photo.slug === $page.params.photo)
|
||||
|
||||
// Update store current location
|
||||
if (!$currentLocation) currentLocation.set($locations.find(loc => loc.slug === $page.params.place))
|
||||
if (!$currentPhotos) currentPhotos.set(photos)
|
||||
|
||||
// Photo has changed from the Carousel component
|
||||
// Photo has changed (from Carousel)
|
||||
const photoChanged = event => {
|
||||
currentPhoto = event.detail.currentPhoto
|
||||
|
||||
// Change the URL to the current photo
|
||||
if (!event.detail.init) {
|
||||
const windowPathname = window.location.pathname
|
||||
const newUrl = windowPathname.substring(0, windowPathname.lastIndexOf('/') + 1) + currentPhoto.slug
|
||||
history.pushState('', document.title, newUrl)
|
||||
analyticsUpdate(newUrl)
|
||||
}
|
||||
const windowPathname = window.location.pathname
|
||||
const newUrl = windowPathname.substring(0, windowPathname.lastIndexOf('/') + 1) + event.detail.slug
|
||||
// Go to page via a sapper-noscroll link to avoid scroll jump
|
||||
gotoLink.href = newUrl
|
||||
gotoLink.click()
|
||||
}
|
||||
|
||||
// Access a direct photo or navigate in history
|
||||
const photoSlug = $page.params.photo
|
||||
// On init, send an event to the Carousel component with the photoSlug to set currentIndex and then change the photo
|
||||
|
||||
// Pop event from browser (prev/next)
|
||||
const changedUrl = event => dispatch('changedUrl', { currentPhoto: currentPhoto })
|
||||
|
||||
|
||||
/*
|
||||
** Run code when mounted
|
||||
@@ -92,8 +82,6 @@
|
||||
onMount(() => {
|
||||
// Page is loaded
|
||||
pageReady.set(true)
|
||||
|
||||
dispatch('changeUrl', { page: $page })
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -129,12 +117,12 @@
|
||||
<IconCross color="#fff" width="18" class="icon" hidden="true" />
|
||||
</a>
|
||||
</div>
|
||||
<a href="/" bind:this={gotoLink} aria-hidden="true" hidden class="hidden" sapper-noscroll> </a>
|
||||
</div>
|
||||
|
||||
<Carousel
|
||||
viewer="true"
|
||||
photos={photos}
|
||||
init={$page}
|
||||
on:photoChange={photoChanged}
|
||||
/>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user