WIP

src/organisms/Carousel.svelte

@@ -1,46 +1,123 @@
+<script>
+    import { onMount } from 'svelte'
+    import * as fn from '../functions'
+
+    // Components
+    import IconArrow from '../atoms/IconArrow'
+
+    // Props and variables
+    export let viewer = false
+    export let photos = []
+    let hover
+    let photoPrev
+    let photoNext
+
+
+    /*
+    ** Run code on browser only
+    */
+    onMount(() => {
+        // Hover function
+        hover = event => {
+            const to = event.currentTarget.dataset.to
+            const photoActive = document.querySelector('.gallery .active')
+            const photoToHover = (to === 'prev') ? photoActive.previousSibling : photoActive.nextSibling
+            if (event.type === 'mouseenter') {
+                photoToHover.classList.add('hover')
+            } else {
+                photoToHover.classList.remove('hover')
+            }
+        }
+
+        // Go to previous photo
+        photoPrev = () => {
+            console.log('previous photo')
+        }
+
+        // Go to next photo
+        photoNext = () => {
+            console.log('next photo')
+        }
+    })
+
+</script>
+
 <div class="carousel">
     <div class="wrap">
         <div class="gallery">
             <div class="gallery__images">
-                <div class="gallery__images--photo prev">
-                    <img src="/img/RyanStreet58.jpg" alt="">
-                </div>
-                <div class="gallery__images--photo front">
-                    <img src="/img/TurinStreet33.jpg" alt="">
-                </div>
-                <div class="gallery__images--photo next">
-                    <img src="/img/GrayRoad15.jpg" alt="">
+                {#each photos as photo, index}
+                <div class="gallery__images--photo"
+                    class:prev={index === 0}
+                    class:active={index === 1}
+                    class:next={index === 2}
+                >
+                    <img
+                        src="{fn.getThumbnail(photo.image.private_hash, 800)}"
+                        srcset="{fn.getThumbnail(photo.image.private_hash, 1200)} 1200w, {fn.getThumbnail(photo.image.private_hash, 1600)} 1600w"
+                        alt="{photo.name}, {photo.location.name}, {photo.location.country.name}"
+                    />
                 </div>
+                {/each}
             </div>
 
             <div class="carousel__controls">
-                <button class="button-control button-control--white prev">
-                    <img src="/img/icons/arrow-pink.svg" alt="">
+                <button class="button-control button-control--white dir-left" data-to="prev" aria-label="Previous"
+                    on:click={photoPrev}
+                    on:mouseenter={hover}
+                    on:mouseleave={hover}
+                >
+                    <IconArrow direction="left" color="#ff6c89" className="icon" />
+                    <IconArrow direction="left" color="#fff" className="icon" hidden="true" />
                 </button>
-                <button class="button-control button-control--white next">
-                    <img src="/img/icons/arrow-pink.svg" alt="">
+                <button class="button-control button-control--white dir-right" data-to="next" aria-label="Next"
+                    on:mouseenter={hover}
+                    on:mouseleave={hover}
+                    on:click={photoNext}
+                >
+                    <IconArrow direction="right" color="#ff6c89" className="icon" />
+                    <IconArrow direction="right" color="#fff" className="icon" hidden="true" />
                 </button>
             </div>
+
+            {#if viewer}
+            <div class="carousel__number">05</div>
+            {/if}
         </div>
 
         <div class="carousel__information">
-            <div class="carousel__information--location location">
-                <p class="street">Rogers Street, West End</p>
-                <p class="style-caps state">Queensland, Australia</p>
+            <div class="carousel__information--location style-location">
+                <!-- <p class="street">{photos[0].name}</p>
+                <p class="style-caps state">{photos[0].location.region}, {photos[0].location.country.name}</p> -->
             </div>
-            <!-- {viewer &&
-                <p class="carousel__information--date">
-                    Apr 6th, 2019
-                </p>
-            } -->
+            <!-- <div class="carousel__information--location style-location" aria-hidden="true">
+                <p class="street">{photos[1].name}</p>
+                <p class="style-caps state">{photos[1].location.region}, {photos[1].location.country.name}</p>
+            </div> -->
+            {#if viewer}
+            <p class="carousel__information--date">Apr 6th, 2019</p>
+            {/if}
         </div>
 
-        <!-- {viewer &&
-            <div class="carousel__number">
-                05
-            </div>
-        } -->
-
-        <!-- {!viewer && pagination} -->
+        {#if !viewer}
+        <ol class="carousel__dots">
+            {#each photos as page, index}
+            <li class:active={index === 0}>
+                <button></button>
+            </li>
+            {/each}
+        </ol>
+        {/if}
     </div>
-</div>
+
+    {#if viewer}
+    <ol class="carousel__dots">
+        {#each photos as page}
+        <li class:active={false}>
+            <button></button>
+        </li>
+        {/each}
+    </ol>
+    {/if}
+</div>
+