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

src/routes/viewer/[country]/[place]/[photo].svelte

@@ -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>&nbsp;</a>
     </div>
 
     <Carousel
         viewer="true"
         photos={photos}
-        init={$page}
         on:photoChange={photoChanged}
     />