From 498f3c0c17dfc72d03b8a65f7ff9dc1725617655 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Wed, 25 Mar 2020 12:19:48 +0100
Subject: [PATCH] Use a component for carousel dots

- Show 5 dots by default
- First and last one from current index are smaller
- Other ones are hidden
---
 src/molecules/PaginationDots.svelte | 21 +++++++++++++++++++++
 src/organisms/Carousel.svelte       | 12 ++++--------
 src/style/organisms/_carousel.scss  | 26 +++++++++++++++++++++++---
 3 files changed, 48 insertions(+), 11 deletions(-)
 create mode 100644 src/molecules/PaginationDots.svelte

diff --git a/src/molecules/PaginationDots.svelte b/src/molecules/PaginationDots.svelte
new file mode 100644
index 0000000..39f150a
--- /dev/null
+++ b/src/molecules/PaginationDots.svelte
@@ -0,0 +1,21 @@
+<script>
+    import { createEventDispatcher } from 'svelte'
+    const dispatch = createEventDispatcher()
+
+    // Props
+    export let photos
+    export let currentIndex
+</script>
+
+<ol class="carousel__dots">
+    {#each photos as dot, index}
+    <li
+        class:active={index === currentIndex}
+        class:small={index < currentIndex - 2 || index > currentIndex + 2}
+        class:hidden={index < currentIndex - 3 || index > currentIndex + 3}
+        on:click={() => dispatch('goToIndex', { index })}
+    >
+        <button aria-label="Go to photo #{index + 1}"></button>
+    </li>
+    {/each}
+</ol>
diff --git a/src/organisms/Carousel.svelte b/src/organisms/Carousel.svelte
index bf9e982..98ec575 100644
--- a/src/organisms/Carousel.svelte
+++ b/src/organisms/Carousel.svelte
@@ -12,6 +12,7 @@
     // Components
     import IconArrow from '../atoms/IconArrow'
     import Counter from '../atoms/Counter'
+    import PaginationDots from '../molecules/PaginationDots'
 
     // Props
     export let photos
@@ -45,7 +46,6 @@
             currentIndex = (currentIndex >= photos.length) ? 0 : currentIndex
         } else {
             currentIndex = direction
-            console.log('Go to photo', direction, currentIndex)
         }
 
         // Send current photo to event
@@ -203,12 +203,8 @@
         </div>
     </div>
 
-    <ol class="carousel__dots">
-        {#each photos as page, index}
-        <li class:active={page === currentPhoto} on:click={() => goToPhoto(index)}>
-            <button aria-label="Go to photo #{index + 1}"></button>
-        </li>
-        {/each}
-    </ol>
+    <PaginationDots {photos} {currentIndex}
+        on:goToIndex={event => currentIndex = event.detail.index}
+    />
 </div>
 {/if}
diff --git a/src/style/organisms/_carousel.scss b/src/style/organisms/_carousel.scss
index a7facca..dfe96ef 100644
--- a/src/style/organisms/_carousel.scss
+++ b/src/style/organisms/_carousel.scss
@@ -252,16 +252,37 @@
             margin-top: 32px;
 
             li {
-                display: block;
+                display: flex;
+                align-items: center;
                 padding: 4px;
                 cursor: pointer;
 
+                &, button {
+                    transition: all 0.6s $ease-quart;
+                    will-change: transform, width, height, padding;
+                }
+
+                // Active
                 &.active button {
                     background-color: $color-secondary;
                     transform: scale(1.25);
-                    will-change: scale, background-color;
                 }
 
+                // Small dot
+                &.small button {
+                    transform: scale(0.6);
+                    opacity: 0.5;
+                }
+                // Hidden
+                &.hidden {
+                    padding: 0;
+                    transform: scale(0);
+                    opacity: 0;
+                    width: 0;
+                    height: 0;
+                }
+
+                // Hover
                 &:hover:not(.active) {
                     button {
                         background-color: lighten($color-lightpurple, 10);
@@ -277,7 +298,6 @@
                 background-color: $color-lightpurple;
                 border-radius: 100%;
                 text-decoration: none;
-                transition: all 600ms $ease-quart;
             }
         }
     }