Carousel: Add URL to location

src/organisms/Carousel.svelte

@@ -21,6 +21,7 @@
     // Props and Variables
     export let photos
     export let viewer = false
+    export let locationUrl = false
     let scope
     let swiped
     let currentIndex = 0
@@ -35,30 +36,6 @@
     const defaultHeight = Math.ceil(defaultWidth / 1.5)
 
 
-    // Get lazyload class
-    const getLazyloadClass = index => {
-        console.log(index, currentIndex)
-        // Preload current photo
-        if (index === currentIndex || index >= currentIndex - 2 && index <= currentIndex + 2) {
-            return true
-        }
-        // Preload the two previous and next photos
-        if (index >= currentIndex - 2 && index <= currentIndex + 2) {
-            return true
-        }
-        // If currentIndex = last photo, preload the two first ones
-        if (currentIndex === photos.length - 1 && (index === 0 || index === 1)) {
-            return true
-        }
-        // return false
-        // If currentIndex = first photo, preload the two last ones
-        // if (index) {
-
-        // }
-        return false
-    }
-
-
     /*
     ** Navigate to a photo
     */
@@ -171,12 +148,13 @@
                     class:is-prev={id === prevPhoto.id}
                     class:is-active={id === currentPhoto.id}
                     class:is-next={id === nextPhoto.id}
-                    on:click={openFullscreen}
                     role="tabpanel"
                     aria-label="Photo {index + 1} of {photos.length}"
                     aria-hidden={index === currentIndex ? undefined : true}
                 >
-                    <picture class="gallery__picture">
+                    <picture class="gallery__picture"
+                        on:click={openFullscreen}
+                    >
                         <source media="(min-width: 968px)" data-srcset={getThumbnail(image.private_hash, 1200)}>
                         <source media="(min-width: 800px)" data-srcset={getThumbnail(image.private_hash, 900)}>
                         <source media="(min-width: 500px)" data-srcset={getThumbnail(image.private_hash, 600)}>
@@ -235,7 +213,13 @@
                 >
                     <p class="street">{name}</p>
                     <p class="state style-caps style-caps--transparent">
-                        {location.name}, {location.country.name}
+                        {#if locationUrl}
+                        <a href="/location/{location.country.slug}/{location.slug}" sapper-noscroll>
+                            {location.name}, {location.country.name}
+                        </a>
+                        {:else}
+                            {location.name}, {location.country.name}
+                        {/if}
                     </p>
                 </div>
                 {/each}

src/routes/index.svelte

@@ -7,7 +7,8 @@
         // Fields
         const fields = [
             'id', 'name', 'image.private_hash',
-            'location.id', 'location.name', 'location.slug', 'location.country.name'
+            'location.id', 'location.name', 'location.slug',
+            'location.country.name', 'location.country.slug'
         ]
         // Random sort
         const sort = '?'
@@ -97,7 +98,7 @@
         </div>
 
         <div id="intro-carousel">
-            <Carousel {photos} />
+            <Carousel {photos} locationUrl={true} />
             <Fullscreen />
         </div>
     </section>

src/style/organisms/_carousel.scss

@@ -65,6 +65,7 @@
             height: 100%;
             transform: scale($scale);
             transition: transform $duration $ease-quart, opacity ($duration / 2) $ease-quart;
+            pointer-events: none;
             @extend %willchange;
 
             // Active photo
@@ -72,6 +73,7 @@
                 opacity: 1;
                 z-index: 10;
                 transform: scale(1);
+                pointer-events: auto;
 
                 img {
                     opacity: 1;
@@ -81,6 +83,7 @@
             // Previous & next photo
             &.is-prev, &.is-next {
                 opacity: 1;
+                pointer-events: auto;
 
                 img {
                     opacity: 1;
@@ -240,6 +243,7 @@
         margin-top: 32px;
         padding-bottom: 4px;
         text-align: center;
+        pointer-events: none;
         transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
         will-change: transform, opacity;
 
@@ -250,6 +254,16 @@
             margin-top: 72px;
         }
 
+        a {
+            color: rgba($color-tertiary, 0.5);
+            text-decoration: none;
+            transition: color 150ms $ease-inout;
+
+            &:hover {
+                color: rgba($color-tertiary, 0.8);
+            }
+        }
+
         // State
         .state {
             margin-top: 6px;
@@ -262,6 +276,7 @@
         &.is-active {
             transform: translateY(0);
             opacity: 1;
+            pointer-events: auto;
         }
         &.is-next {
             transform: translateY($distance);