From 218676b9ca3106c229010f1e1ac7ac61490d6ea3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Wed, 1 Jun 2022 20:11:11 +0200
Subject: [PATCH] Add rotating images to Shop module

---
 src/components/organisms/Shop.svelte | 48 +++++++++++++++++++++-------
 src/routes/__layout.svelte           |  8 +++--
 src/style/organisms/_shop.scss       | 19 +++++++++--
 3 files changed, 59 insertions(+), 16 deletions(-)

diff --git a/src/components/organisms/Shop.svelte b/src/components/organisms/Shop.svelte
index 10fb093..d9c6904 100644
--- a/src/components/organisms/Shop.svelte
+++ b/src/components/organisms/Shop.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { getContext } from 'svelte'
+    import { getContext, onMount } from 'svelte'
     // Components
     import Button from '$components/atoms/Button.svelte'
     import Image from '$components/atoms/Image.svelte'
@@ -18,20 +18,46 @@
         .sort((a: Location, b: Location) => a.slug.localeCompare(b.slug))
         // Return name only
         .map((loc: Location) => loc.name)
+
+
+    // Image rotation
+    let imagesLoop: ReturnType<typeof setTimeout>
+    let currentImageIndex = 0
+
+    const incrementCurrentImageIndex = () => {
+        currentImageIndex = currentImageIndex === shop.module_images.length - 1 ? 0 : currentImageIndex + 1
+        imagesLoop = setTimeout(() => requestAnimationFrame(incrementCurrentImageIndex), 3000)
+    }
+
+    onMount(() => {
+        incrementCurrentImageIndex()
+
+        return () => {
+            // Clear rotating words timeout
+            clearTimeout(imagesLoop)
+        }
+    })
 </script>
 
 <div class="shop shadow-box-dark">
     <div class="content">
-        <div class="shop__image">
-            <Image
-                id={shop.module_image.id}
-                sizeKey="square"
-                sizes={{
-                    small: { width: 400, height: 400 },
-                    large: { width: 800, height: 800 },
-                }}
-                alt={shop.module_image.title}
-            />
+        <div class="shop__images">
+            {#if shop.module_images}
+            <a href="/shop" sveltekit:noscroll sveltekit:prefetch>
+                {#each shop.module_images as { directus_files_id: { id }, title }, index}
+                    <Image
+                        class={index === currentImageIndex ? 'is-visible' : null}
+                        {id}
+                        sizeKey="square"
+                        sizes={{
+                            small: { width: 400, height: 400 },
+                            large: { width: 800, height: 800 },
+                        }}
+                        alt={title}
+                    />
+                {/each}
+            </a>
+            {/if}
         </div>
 
         <div class="shop__content">
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 39628e4..c85f959 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -129,9 +129,11 @@
                     enabled
                     module_title
                     module_text
-                    module_image {
-                        id
-                        title
+                    module_images {
+                        directus_files_id {
+                            id
+                            title
+                        }
                     }
                 }
 
diff --git a/src/style/organisms/_shop.scss b/src/style/organisms/_shop.scss
index 5b4113e..331c56e 100644
--- a/src/style/organisms/_shop.scss
+++ b/src/style/organisms/_shop.scss
@@ -17,11 +17,26 @@
         }
     }
 
-    // Image
-    &__image {
+    // Images
+    &__images {
         position: relative;
         overflow: hidden;
 
+        picture {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            transform: scale3d(1.075, 1.075, 1.075);
+            transition: opacity 0.8s, transform 1.6s var(--ease-quart);
+
+            &.is-visible {
+                opacity: 1;
+                transform: scale3d(1,1,1);
+            }
+        }
         img {
             display: block;
             width: 100%;