Temporary browsable Carousel on photo page

Stuff to be fixed/work on:
- Why is currentPhoto only triggered at the second photo and not the first?
- popState events (prev/next on browser) not working - detect URL changes and change the currentIndex

src/organisms/Carousel.svelte

@@ -1,7 +1,10 @@
 <script>
-    import { onMount } from 'svelte'
+    import { onMount, createEventDispatcher } from 'svelte'
+    import { stores } from '@sapper/app'
     import { currentLocation } from '../store'
     import * as fn from '../functions'
+    const dispatch = createEventDispatcher()
+    const { page } = stores()
 
     // Dependencies
 	import dayjs from 'dayjs'
@@ -12,27 +15,47 @@
     import IconArrow from '../atoms/IconArrow'
 
     // Props
+    export let photos
     export let viewer = false
-    export let photos = []
+    export let init = undefined
 
     // Variables
     let hover
-    let currentIndex = 1
+    let currentIndex = 0
     $: currentPhoto = photos[currentIndex] || null
     $: prevPhoto = photos[currentIndex - 1] || photos[photos.length - 1]
     $: nextPhoto = photos[currentIndex + 1] || photos[0]
 
 
     /*
-    ** Go to a photo
+    ** Navigate to a photo
     */
-    const goToPrev = () => {
-        currentIndex--
-        currentIndex = (currentIndex < 0) ? photos.length - 1 : currentIndex
+   // Go to specific photo on Init
+    if (init) {
+        currentIndex = photos.findIndex(photo => photo.slug === init.params.photo)
     }
-    const goToNext = () => {
-        currentIndex++
-        currentIndex = (currentIndex >= photos.length) ? 0 : currentIndex
+
+    // Send current photo to event
+    const sendCurrentPhoto = ({ init = false }) => {
+        console.log('sendCurrentPhoto event: ', currentPhoto.slug)
+        dispatch('photoChange', {
+            currentPhoto: currentPhoto,
+            init
+        })
+    }
+
+    // Change the current index depending on direction
+    const goToPhoto = direction => {
+        if (direction === 'prev') {
+            currentIndex--
+            currentIndex = (currentIndex < 0) ? photos.length - 1 : currentIndex
+        } else if (direction === 'next') {
+            currentIndex++
+            currentIndex = (currentIndex >= photos.length) ? 0 : currentIndex
+        }
+
+        // Send current photo to event
+        sendCurrentPhoto({ init: false })
     }
 
 
@@ -51,25 +74,19 @@
     const swipeEnd = event => {
         touchEndX = event.changedTouches[0].screenX
         touchEndY = event.changedTouches[0].screenY
-        if (touchEndX <= touchStartX) goToNext()
-        if (touchEndX >= touchStartX) goToPrev()
+        if (touchEndX <= touchStartX) goToPhoto('prev')
+        if (touchEndX >= touchStartX) goToPhoto('next')
     }
 
-    // Keyboard navigation
-    const keyboardNav = event => {
-        const keyCode = event.keyCode
 
-        switch (event.keyCode) {
-            case 37: case 80: case 74:
-                goToPrev()
-                break
-            case 39: case 78: case 75:
-                goToNext()
-                break
-            // case 27: case 67:
-            //     document.getElementById('photo_close').click()
-            //     break
-            default: break
+    /*
+    ** Keyboard navigation
+    */
+    const keyboardNav = event => {
+        if ([37,80,74].includes(event.keyCode)) {
+            goToPhoto('prev')
+        } else if ([39,78,75].includes(event.keyCode)) {
+            goToPhoto('next')
         }
     }
 
@@ -90,22 +107,25 @@
                 photoToHover = (photoActive.nextSibling != null) ? photoActive.nextSibling : photoActive.parentNode.firstChild
             }
 
-            switch (event.type) {
-                case 'mouseenter':
-                    photoToHover.classList.add('hover')
-                    button.focus()
-                    break
-                case 'mouseleave':
-                    photoToHover.classList.remove('hover')
-                    button.blur()
-                    break
-                default: break
+            // Toggle class and focus of the button
+            if (event.type === 'mouseenter') {
+                photoToHover.classList.add('hover')
+                button.focus()
+            } else if (event.type === 'mouseleave') {
+                photoToHover.classList.remove('hover')
+                button.blur()
             }
         }
+
+        // Send current photo to event for init
+        sendCurrentPhoto({ init: true })
     })
 
+
+
+
     /*
-        REVEAL ANIMATION ON CAROUSEL:
+        TODO: REVEAL ANIMATION ON CAROUSEL
         Fix the CSS priority? Cancel the transition delay and duration?
         data-aos="{
             (photo === prevPhoto) ? 'carousel-prev' :
@@ -117,7 +137,10 @@
 
 <svelte:window on:keydown={keyboardNav} />
 
-<div class="carousel" on:touchstart={swipeStart} on:touchend={swipeEnd}>
+<div class="carousel"
+    on:touchstart={swipeStart}
+    on:touchend={swipeEnd}
+>
     <div class="wrap">
         <div class="gallery">
             <div class="gallery__images">
@@ -137,14 +160,20 @@
             </div>
 
             <div class="carousel__controls">
-                <div class="carousel__area carousel__area--prev" data-to="prev" on:mouseenter={hover} on:mouseleave={hover} on:click={goToPrev}>
+                <div class="carousel__area carousel__area--prev" data-to="prev"
+                    on:mouseenter={hover} on:mouseleave={hover}
+                    on:click={() => goToPhoto('prev')}
+                >
                     <button class="button-control button-control--white dir-left" aria-label="Previous">
                         <IconArrow direction="left" color="#ff6c89" class="icon" />
                         <IconArrow direction="left" color="#fff" class="icon" hidden="true" />
                     </button>
                 </div>
 
-                <div class="carousel__area carousel__area--next" data-to="next" on:mouseenter={hover} on:mouseleave={hover} on:click={goToNext}>
+                <div class="carousel__area carousel__area--next" data-to="next"
+                    on:mouseenter={hover} on:mouseleave={hover}
+                    on:click={() => goToPhoto('next')}
+                >
                     <button class="button-control button-control--white dir-right" aria-label="Next">
                         <IconArrow direction="right" color="#ff6c89" class="icon" />
                         <IconArrow direction="right" color="#fff" class="icon" hidden="true" />