From 78c39bf7f164e936dafca9b83906ea37523a84e0 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Fri, 22 Jan 2021 11:13:54 +0300
Subject: [PATCH] Add dots

---
 src/Dots.svelte                      | 65 +++++++++++++++++++++++
 src/ImageCarousel.svelte             | 79 ++++++++++++++++++----------
 src/stories/Dots.stories.js          | 13 +++++
 src/stories/DotsView.svelte          | 24 +++++++++
 src/stories/ImageCarousel.stories.js | 10 +---
 src/stories/ImageCarouselView.svelte |  6 +++
 6 files changed, 162 insertions(+), 35 deletions(-)
 create mode 100644 src/Dots.svelte
 create mode 100644 src/stories/Dots.stories.js
 create mode 100644 src/stories/DotsView.svelte

diff --git a/src/Dots.svelte b/src/Dots.svelte
new file mode 100644
index 0000000..c3993a1
--- /dev/null
+++ b/src/Dots.svelte
@@ -0,0 +1,65 @@
+<script>
+  import { createEventDispatcher } from 'svelte'
+  const dispatch = createEventDispatcher()
+
+  /**
+   * Amount of pages (amount of dots)
+   */
+  export let pagesCount = 1
+
+  /**
+   * Index of the current page
+   */
+  export let currentPageIndex = 0
+
+  function handleDotClick(pageIndex) {
+    dispatch('pageChange', pageIndex)
+  }
+</script>
+
+<div class="main-container">
+  {#each Array(pagesCount) as _, pageIndex}
+    <div class="dot-container">
+      <div
+        class="dot"
+        class:current="{currentPageIndex === pageIndex}"
+        on:click={() => handleDotClick(pageIndex)}
+      ></div>
+    </div>
+  {/each}  
+</div>
+
+<style>
+  :root {
+    --dot-size: 10px; 
+  }
+  .main-container {
+    display: flex;
+    align-items: center;
+  }
+  .dot-container {
+    height: calc(var(--dot-size) + 10px);
+    width: calc(var(--dot-size) + 10x);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .dot {
+    height: var(--dot-size);
+    width: var(--dot-size);
+    background-color: #aaa;
+    border-radius: 50%;
+    display: inline-block;
+    opacity: 0.5;
+    margin: 3px;
+    cursor: pointer;
+  }
+  .dot:hover {
+    opacity: 0.9;
+  }
+  .current {
+    height: calc(var(--dot-size) + 3px);
+    width: calc(var(--dot-size) + 3px);
+    opacity: 0.7;
+  }
+</style>
\ No newline at end of file
diff --git a/src/ImageCarousel.svelte b/src/ImageCarousel.svelte
index 46b45ec..ff3ddb6 100644
--- a/src/ImageCarousel.svelte
+++ b/src/ImageCarousel.svelte
@@ -10,6 +10,7 @@
     getSlideSize,
     getIsNotCompletePage
   } from './utils/size'
+  import Dots from './Dots.svelte'
 
   /**
    * Enable Next/Prev arrows
@@ -51,6 +52,11 @@
    */
   export let autoplayDirection = 'next'
 
+  /**
+   * Current page indicator dots
+   */
+  export let dots = true
+
   let pagesCount = 0
   let contentContainerWidth = 0
   let offset
@@ -106,6 +112,10 @@
     }
   })
 
+  function handlePageChange(event) {
+    showPage(event.detail)
+  }
+
   function applyOffset() {
     offset = -$store.currentItemIndex * contentContainerWidth
   }
@@ -125,35 +135,44 @@
 </script>
 
 <div class="main-container">
-  {#if arrows}
-  <div class="side-container">
-    <span
-      class="clickable"
-      on:click={showPrevPage}
-    >&lt;</span>
-  </div>
-  {/if}
-  <div
-    class="content-container"
-    bind:this={contentContainerElement}
-  >
-    <div
-      style="
-        transform: translateX({offset}px);
-        transition-duration: {speed}ms;
-      "
-      bind:this={innerContentContainerElement}
-    >
-      <slot></slot>
+  <div class="carousel-container">
+    {#if arrows}
+    <div class="side-container">
+      <span
+        class="clickable"
+        on:click={showPrevPage}
+      >&lt;</span>
     </div>
+    {/if}
+    <div
+      class="content-container"
+      bind:this={contentContainerElement}
+    >
+      <div
+        style="
+          transform: translateX({offset}px);
+          transition-duration: {speed}ms;
+        "
+        bind:this={innerContentContainerElement}
+      >
+        <slot></slot>
+      </div>
+    </div>
+    {#if arrows}
+    <div class="side-container">
+      <span
+        class="clickable"
+        on:click={showNextPage}
+      >&gt;</span>
+    </div>
+    {/if}
   </div>
-  {#if arrows}
-  <div class="side-container">
-    <span
-      class="clickable"
-      on:click={showNextPage}
-    >&gt;</span>
-  </div>
+  {#if dots}
+    <Dots
+      {pagesCount}
+      currentPageIndex={$store.currentItemIndex}
+      on:pageChange={handlePageChange}
+    ></Dots>
   {/if}
 </div>
 
@@ -161,6 +180,12 @@
   .main-container {
     display: flex;
     width: 100%;
+    flex-direction: column;
+    align-items: center;
+  }
+  .carousel-container {
+    display: flex;
+    width: 100%;
   }
   .content-container {
     flex: 1;
diff --git a/src/stories/Dots.stories.js b/src/stories/Dots.stories.js
new file mode 100644
index 0000000..70434c1
--- /dev/null
+++ b/src/stories/Dots.stories.js
@@ -0,0 +1,13 @@
+import DotsView from './DotsView.svelte';
+
+export default {
+  title: 'Dots',
+  component: DotsView
+};
+
+const Template = ({ ...args }) => ({
+  Component: DotsView,
+  props: args
+});
+
+export const Primary = Template.bind({});
diff --git a/src/stories/DotsView.svelte b/src/stories/DotsView.svelte
new file mode 100644
index 0000000..86f88e9
--- /dev/null
+++ b/src/stories/DotsView.svelte
@@ -0,0 +1,24 @@
+<script>
+  import Dots from '../Dots.svelte'
+
+  /**
+   * Amount of pages (amount of dots)
+   */
+  export let pagesCount = 5
+
+  /**
+   * Index of the current page
+   */
+  export let currentPageIndex = 3
+
+  function handlePageChange(event) {
+    currentPageIndex = event.detail
+  }
+</script>
+
+<Dots
+  {pagesCount}
+  {currentPageIndex}
+  on:pageChange={handlePageChange}
+>
+</Dots>
diff --git a/src/stories/ImageCarousel.stories.js b/src/stories/ImageCarousel.stories.js
index 25b1795..cfec282 100644
--- a/src/stories/ImageCarousel.stories.js
+++ b/src/stories/ImageCarousel.stories.js
@@ -2,18 +2,12 @@ import ImageCarouselView from './ImageCarouselView.svelte';
 
 export default {
   title: 'ImageCarousel',
-  component: ImageCarouselView,
-  argTypes: {
-    arrows: { control: 'boolean' },
-  },
+  component: ImageCarouselView
 };
 
 const Template = ({ ...args }) => ({
   Component: ImageCarouselView,
-  props: args,
+  props: args
 });
 
 export const Primary = Template.bind({});
-Primary.args = {
-  arrows: true
-};
diff --git a/src/stories/ImageCarouselView.svelte b/src/stories/ImageCarouselView.svelte
index a4de909..e8e0d2f 100644
--- a/src/stories/ImageCarouselView.svelte
+++ b/src/stories/ImageCarouselView.svelte
@@ -41,6 +41,11 @@
    */
   export let autoplayDirection = 'next'
 
+  /**
+   * Current page indicator dots
+   */
+  export let dots = true
+
   const colors = [
     '#e5f9f0',
     '#ccf3e2',
@@ -65,6 +70,7 @@
     {autoplay}
     {autoplaySpeed}
     {autoplayDirection}
+    {dots}
   >
     {#each colors as color (color)}
       <div