Create a functioning carousel

Thanks a million to Grafikart!
2020-02-17 22:33:44 +01:00
parent 6551aa738a
commit 6fb6937c1a
4 changed files with 172 additions and 77 deletions
--- a/src/organisms/Carousel.svelte
+++ b/src/organisms/Carousel.svelte
@@ -2,15 +2,75 @@
    import { onMount } from 'svelte'
    import * as fn from '../functions'

+    // Dependencies
+	import dayjs from 'dayjs'
+	import advancedFormat from 'dayjs/plugin/advancedFormat'
+	dayjs.extend(advancedFormat)
+
    // Components
    import IconArrow from '../atoms/IconArrow'

-    // Props and variables
+    // Props
    export let viewer = false
    export let photos = []
+
+    // Variables
    let hover
-    let photoPrev
-    let photoNext
+    let currentIndex = 1
+    $: currentPhoto = photos[currentIndex] || null
+    $: prevPhoto = photos[currentIndex - 1] || photos[photos.length - 1]
+    $: nextPhoto = photos[currentIndex + 1] || photos[0]
+
+
+    /*
+    ** Go to a photo
+    */
+    const goToPrev = () => {
+        currentIndex--
+        currentIndex = (currentIndex < 0) ? photos.length - 1 : currentIndex
+    }
+    const goToNext = () => {
+        currentIndex++
+        currentIndex = (currentIndex >= photos.length) ? 0 : currentIndex
+    }
+
+
+    /*
+    ** Drag and touch navigation
+    */
+    let touchStartX = 0
+    let touchStartY = 0
+    let touchEndX = 0
+    let touchEndY = 0
+
+    const swipeStart = event => {
+        touchStartX = event.changedTouches[0].screenX
+        touchStartY = event.changedTouches[0].screenY
+    }
+    const swipeEnd = event => {
+        touchEndX = event.changedTouches[0].screenX
+        touchEndY = event.changedTouches[0].screenY
+        if (touchEndX <= touchStartX) goToNext()
+        if (touchEndX >= touchStartX) goToPrev()
+    }
+
+    // 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
+        }
+    }


    /*
@@ -19,10 +79,15 @@
    onMount(() => {
        // Hover function
        hover = event => {
-            const to = event.currentTarget.dataset.to
            const button = event.currentTarget.querySelector('button')
-            const photoActive = document.querySelector('.gallery .active')
-            const photoToHover = (to === 'prev') ? photoActive.previousSibling : photoActive.nextSibling
+            const photoActive = document.querySelector('.gallery__images .active')
+
+            let photoToHover
+            if (event.currentTarget.dataset.to === 'prev') {
+                photoToHover = (photoActive.previousSibling != null) ? photoActive.previousSibling : photoActive.parentNode.lastChild
+            } else {
+                photoToHover = (photoActive.nextSibling != null) ? photoActive.nextSibling : photoActive.parentNode.firstChild
+            }

            switch (event.type) {
                case 'mouseenter':
@@ -36,29 +101,30 @@
                default: break
            }
        }
-
-        // Go to previous photo
-        photoPrev = () => {
-            console.log('previous photo')
-        }
-
-        // Go to next photo
-        photoNext = () => {
-            console.log('next photo')
-        }
    })

+    /*
+        REVEAL ANIMATION ON CAROUSEL:
+        Fix the CSS priority? Cancel the transition delay and duration?
+        data-aos="{
+            (photo === prevPhoto) ? 'carousel-prev' :
+            (photo === currentPhoto) ? 'carousel-active' :
+            (photo === nextPhoto) ? 'carousel-next' : ''
+        }
+    */
 </script>

-<div class="carousel">
+<svelte:window on:keydown={keyboardNav} />
+
+<div class="carousel" on:touchstart={swipeStart} on:touchend={swipeEnd}>
    <div class="wrap">
        <div class="gallery">
            <div class="gallery__images">
                {#each photos as photo, index}
                <picture class="gallery__images--photo"
-                    class:prev={index === 0}
-                    class:active={index === 1}
-                    class:next={index === 2}
+                    class:prev={photo === prevPhoto}
+                    class:active={photo === currentPhoto}
+                    class:next={photo === nextPhoto}
                >
                    <source media="(min-width: 968px)" srcset={fn.getThumbnail(photo.image.private_hash, 1400)}>
                    <source media="(min-width: 800px)" srcset={fn.getThumbnail(photo.image.private_hash, 900)}>
@@ -70,14 +136,14 @@
            </div>

            <div class="carousel__controls">
-                <div class="carousel__controls--area prev" data-to="prev" on:mouseenter={hover} on:mouseleave={hover} on:click={photoPrev}>
+                <div class="carousel__controls--area prev" data-to="prev" on:mouseenter={hover} on:mouseleave={hover} on:click={goToPrev}>
                    <button class="button-control button-control--white dir-left" aria-label="Previous">
                        <IconArrow direction="left" color="#ff6c89" className="icon" />
                        <IconArrow direction="left" color="#fff" className="icon" hidden="true" />
                    </button>
                </div>

-                <div class="carousel__controls--area next" data-to="next" on:mouseenter={hover} on:mouseleave={hover} on:click={photoNext}>
+                <div class="carousel__controls--area next" data-to="next" on:mouseenter={hover} on:mouseleave={hover} on:click={goToNext}>
                    <button class="button-control button-control--white dir-right" aria-label="Next">
                        <IconArrow direction="right" color="#ff6c89" className="icon" />
                        <IconArrow direction="right" color="#fff" className="icon" hidden="true" />
@@ -86,18 +152,18 @@
            </div>

            {#if viewer}
-            <div class="carousel__number">05</div>
+            <div class="carousel__number">{currentIndex < 10 ? 0 : ''}{currentIndex + 1}</div>
            {/if}
        </div>

        <div class="carousel__information">
            <div class="carousel__information--location style-location">
-                <p class="street">Street Name, Suburb</p>
-                <p class="style-caps state">Region, Country</p>
+                <p class="street">{currentPhoto.name}</p>
+                <p class="style-caps state">{currentPhoto.location.region}, {currentPhoto.location.country.name}</p>
            </div>
            <!-- Duplicate for animation? -->
            {#if viewer}
-            <p class="carousel__information--date">Apr 6th, 2019</p>
+            <p class="carousel__information--date">{dayjs(currentPhoto.created_on).format('MMM Do, YYYY')}</p>
            {/if}
        </div>

@@ -122,4 +188,3 @@
    </ol>
    {/if}
 </div>
-
--- a/src/style/organisms/_carousel.scss
+++ b/src/style/organisms/_carousel.scss
@@ -1,7 +1,6 @@
 // Carousel
 .carousel {
    background-color: $color-primary;
-    transform: translateZ(0);

    .wrap {
        max-width: 1280px;
@@ -12,7 +11,10 @@
        }
    }

-    // Gallery
+
+    /*
+    ** Gallery
+    */
    .gallery {
        position: relative;
        z-index: 2;
@@ -25,96 +27,122 @@
            max-width: 100%;
        }

+        // Variables
+        $scale: 0.9;
+        $angle: 1deg;
+        $angleHover: 1.25deg;
+        $distance: 9%;
+        $distanceHover: 10%;
+        $radius: 8px;
+
        // Images
        &__images {
            position: relative;
            height: 0;
            padding-bottom: calc(100% / 1.5); // Ratio 3.2
+            user-select: none;

            // Photo
            &--photo {
+                opacity: 0;
                overflow: hidden;
                position: absolute;
-                display: block;
-                background-color: $color-primary;
-                box-shadow: 0 15px 60px rgba(#000, 0.3);
-                transition: transform 600ms $ease-quart;
+                z-index: -1;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                transform: scale($scale);
+                box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
+                transition: transform 600ms $ease-quart, opacity 600ms $ease-quart;
+                will-change: transform, opacity;

                @include breakpoint (sm) {
-                    border-radius: 8px;
+                    border-radius: $radius;
                }

                img {
+                    opacity: 0;
+                    position: relative;
+                    z-index: 1;
                    display: block;
-                    height: auto;
                    width: 100%;
-                    opacity: 0.6;
-                    transition: opacity 600ms $ease-quart;
+                    height: auto;
                }

-                // Temp hiding
-                &:nth-of-type(4), &:nth-of-type(5) {
-                    display: none;
+                // Overlay
+                &:before {
+                    opacity: 0;
+                    content: "";
+                    display: block;
+                    position: absolute;
+                    z-index: 2;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    background-color: $color-primary;
                }
            }

            // Active photo
            .active {
+                opacity: 1;
                z-index: 10;
-                top: 50%;
-                left: 50%;
-                width: 100%;
-                transform: translate3d(-50%, -50%, 0);
+                transform: scale(1);

                img {
                    opacity: 1;
                }
            }

-            // Variables
-            $hoverAngle: 1.25deg;
-            $hoverDistance: 7%;
+            // Previous & next photo
+            .prev, .next {
+                opacity: 1;
+
+                img {
+                    opacity: 1;
+                }
+
+                &:before {
+                    opacity: 0.4;
+                }
+            }

            // Previous photo
            .prev {
+                z-index: 8;
+
                @include breakpoint (sm) {
-                    top: 50%;
-                    transform: translate3d(-6%, -50%, 0) rotate(-1deg);
-                    width: 85%;
+                    transform: translate(-$distance, -1%) rotate(-$angle) scale($scale);
                }

                // Hover
                &.hover {
-                    transform: translate3d(-$hoverDistance, -50%, 0) rotate(-$hoverAngle);
-
-                    img {
-                        opacity: 0.8;
-                    }
+                    transform: translate(-$distanceHover, -1%) rotate(-$angleHover) scale($scale);
                }
            }

            // Next photo
            .next {
+                z-index: 9;
+
                @include breakpoint (sm) {
-                    top: 50%;
-                    right: 0;
-                    transform: translate3d(6%, -50%, 0) rotate(1deg);
-                    width: 85%;
+                    transform: translate($distance, -1%) rotate($angle) scale($scale);
                }

                // Hover
                &.hover {
-                    transform: translate3d($hoverDistance, -50%, 0) rotate($hoverAngle);
-
-                    img {
-                        opacity: 0.8;
-                    }
+                    transform: translate($distanceHover, -1%) rotate($angleHover) scale($scale);
                }
            }
        }
    }

-    // Controls (arrows)
+
+    /*
+    ** Controls (arrows)
+    */
    &__controls {
        display: none;

@@ -237,8 +265,6 @@
    &__image {
        width: 100%;
        height: 100%;
-        // display: flex;
-        // justify-content: center;
        overflow: auto;

        img {
--- a/src/style/pages/_homepage.scss
+++ b/src/style/pages/_homepage.scss
@@ -48,12 +48,10 @@
            }
        }

-        // Gallery
-        .gallery {
-            &__images {
-                &--photo {
-                    background-color: $color-secondary;
-                }
+        // Photos
+        .gallery__images--photo {
+            &:before {
+                background-color: $color-secondary;
            }
        }
    }
--- a/src/style/pages/_viewer.scss
+++ b/src/style/pages/_viewer.scss
@@ -13,7 +13,10 @@
        width: 100%;
    }

-    // Top part
+
+    /*
+    ** Top part
+    */
    &__top {
        position: absolute;
        z-index: 10;
@@ -57,13 +60,16 @@
        }
    }

-    // Carousel
+
+    /*
+    ** Carousel
+    */
    .carousel {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
-        transform: translate3d(0, -37%, 0);
+        transform: translateY(-37%);
        margin: 0;

        @include breakpoint (sm) {
@@ -83,7 +89,7 @@
            // Specific box shadow for images
            &__images {
                &--photo {
-                    box-shadow: 0 16px pxVW(40) rgba(#2E025C, 0.4);
+                    box-shadow: 0 pxVW(16px) pxVW(40) rgba(#2E025C, 0.4);
                }
            }
        }