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 1/3] 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

From 99f6c2d48831fe43b47aea9709d7d42a372e63a4 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Fri, 22 Jan 2021 14:54:17 +0300
Subject: [PATCH 2/3] Add size animation to dots, move stories to component
 folder

---
 src/Dot/Dot.stories.js                        | 13 +++++
 src/Dot/Dot.svelte                            | 54 +++++++++++++++++++
 src/Dot/DotView.svelte                        | 17 ++++++
 src/{stories => Dots}/Dots.stories.js         |  0
 src/{ => Dots}/Dots.svelte                    | 29 +++-------
 src/{stories => Dots}/DotsView.svelte         |  2 +-
 .../ImageCarousel.stories.js                  |  0
 src/{ => ImageCarousel}/ImageCarousel.svelte  |  6 +--
 .../ImageCarouselView.svelte                  |  2 +-
 9 files changed, 95 insertions(+), 28 deletions(-)
 create mode 100644 src/Dot/Dot.stories.js
 create mode 100644 src/Dot/Dot.svelte
 create mode 100644 src/Dot/DotView.svelte
 rename src/{stories => Dots}/Dots.stories.js (100%)
 rename src/{ => Dots}/Dots.svelte (61%)
 rename src/{stories => Dots}/DotsView.svelte (90%)
 rename src/{stories => ImageCarousel}/ImageCarousel.stories.js (100%)
 rename src/{ => ImageCarousel}/ImageCarousel.svelte (97%)
 rename src/{stories => ImageCarousel}/ImageCarouselView.svelte (96%)

diff --git a/src/Dot/Dot.stories.js b/src/Dot/Dot.stories.js
new file mode 100644
index 0000000..1b828d0
--- /dev/null
+++ b/src/Dot/Dot.stories.js
@@ -0,0 +1,13 @@
+import DotView from './DotView.svelte';
+
+export default {
+  title: 'Dot',
+  component: DotView
+};
+
+const Template = ({ ...args }) => ({
+  Component: DotView,
+  props: args
+});
+
+export const Primary = Template.bind({});
diff --git a/src/Dot/Dot.svelte b/src/Dot/Dot.svelte
new file mode 100644
index 0000000..edb2f48
--- /dev/null
+++ b/src/Dot/Dot.svelte
@@ -0,0 +1,54 @@
+<script>
+	import { tweened } from 'svelte/motion';
+	import { cubicInOut } from 'svelte/easing';
+
+	const size = tweened(10, {
+		duration: 100,
+		easing: cubicInOut
+	});
+
+  /**
+   * Indicates if dot is active
+   */
+  export let active = false
+
+  $: {
+    size.set(active ? 13 : 10)
+  }
+</script>
+
+<div class="main-container">
+  <div
+    class="dot"
+    class:current="{active}"
+    style="
+      height: {$size}px;
+      width: {$size}px;
+    "
+    on:click
+  ></div>
+</div>
+
+<style>
+  .main-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 16px;
+    width: 16px;
+  }
+  .dot {
+    background-color: #5d5d5d;
+    border-radius: 50%;
+    display: inline-block;
+    opacity: 0.5;
+    cursor: pointer;
+    transition: opacity 100ms ease;
+  }
+  .dot:hover {
+    opacity: 0.9;
+  }
+  .current {
+    opacity: 0.7;
+  }
+</style>
\ No newline at end of file
diff --git a/src/Dot/DotView.svelte b/src/Dot/DotView.svelte
new file mode 100644
index 0000000..100ea7a
--- /dev/null
+++ b/src/Dot/DotView.svelte
@@ -0,0 +1,17 @@
+<script>
+  import Dot from './Dot.svelte'
+
+  /**
+   * Indicates if dot is active
+   */
+  export let active = false
+
+  function handleDotClick() {
+    active = !active
+  }
+</script>
+
+<Dot
+  {active}
+  on:click={handleDotClick}
+/>
diff --git a/src/stories/Dots.stories.js b/src/Dots/Dots.stories.js
similarity index 100%
rename from src/stories/Dots.stories.js
rename to src/Dots/Dots.stories.js
diff --git a/src/Dots.svelte b/src/Dots/Dots.svelte
similarity index 61%
rename from src/Dots.svelte
rename to src/Dots/Dots.svelte
index c3993a1..394c75a 100644
--- a/src/Dots.svelte
+++ b/src/Dots/Dots.svelte
@@ -1,5 +1,7 @@
 <script>
   import { createEventDispatcher } from 'svelte'
+  import Dot from '../Dot/Dot.svelte'
+
   const dispatch = createEventDispatcher()
 
   /**
@@ -18,13 +20,12 @@
 </script>
 
 <div class="main-container">
-  {#each Array(pagesCount) as _, pageIndex}
+  {#each Array(pagesCount) as _, pageIndex (pageIndex)}
     <div class="dot-container">
-      <div
-        class="dot"
-        class:current="{currentPageIndex === pageIndex}"
+      <Dot
+        active={currentPageIndex === pageIndex}
         on:click={() => handleDotClick(pageIndex)}
-      ></div>
+      ></Dot>
     </div>
   {/each}  
 </div>
@@ -44,22 +45,4 @@
     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/stories/DotsView.svelte b/src/Dots/DotsView.svelte
similarity index 90%
rename from src/stories/DotsView.svelte
rename to src/Dots/DotsView.svelte
index 86f88e9..dd8cd7c 100644
--- a/src/stories/DotsView.svelte
+++ b/src/Dots/DotsView.svelte
@@ -1,5 +1,5 @@
 <script>
-  import Dots from '../Dots.svelte'
+  import Dots from './Dots.svelte'
 
   /**
    * Amount of pages (amount of dots)
diff --git a/src/stories/ImageCarousel.stories.js b/src/ImageCarousel/ImageCarousel.stories.js
similarity index 100%
rename from src/stories/ImageCarousel.stories.js
rename to src/ImageCarousel/ImageCarousel.stories.js
diff --git a/src/ImageCarousel.svelte b/src/ImageCarousel/ImageCarousel.svelte
similarity index 97%
rename from src/ImageCarousel.svelte
rename to src/ImageCarousel/ImageCarousel.svelte
index ff3ddb6..b1aec5e 100644
--- a/src/ImageCarousel.svelte
+++ b/src/ImageCarousel/ImageCarousel.svelte
@@ -2,15 +2,15 @@
   // TODO: rename image carousel to just carousel
   // TODO: seems CarouselChild component can be removed
   import { onMount } from 'svelte'
-  import { store } from './store'
+  import { store } from '../store'
   import {
     getPageIndex,
     getPagesCount,
     getSlidesToShowTail,
     getSlideSize,
     getIsNotCompletePage
-  } from './utils/size'
-  import Dots from './Dots.svelte'
+  } from '../utils/size'
+  import Dots from '../Dots/Dots.svelte'
 
   /**
    * Enable Next/Prev arrows
diff --git a/src/stories/ImageCarouselView.svelte b/src/ImageCarousel/ImageCarouselView.svelte
similarity index 96%
rename from src/stories/ImageCarouselView.svelte
rename to src/ImageCarousel/ImageCarouselView.svelte
index e8e0d2f..79f5b33 100644
--- a/src/stories/ImageCarouselView.svelte
+++ b/src/ImageCarousel/ImageCarouselView.svelte
@@ -1,5 +1,5 @@
 <script>
-  import ImageCarousel from '../ImageCarousel.svelte'
+  import ImageCarousel from './ImageCarousel.svelte'
 
   /**
    * Enable Next/Previos arrows

From e66d0f158dc655aa3f851a65bd9b6cb97382f3c6 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Fri, 22 Jan 2021 15:25:27 +0300
Subject: [PATCH 3/3] Add custom dots example

---
 src/ImageCarousel/ImageCarousel.stories.js    |   9 ++
 src/ImageCarousel/ImageCarousel.svelte        |  17 ++-
 .../ImageCarouselViewCustomDots.svelte        | 139 ++++++++++++++++++
 3 files changed, 161 insertions(+), 4 deletions(-)
 create mode 100644 src/ImageCarousel/ImageCarouselViewCustomDots.svelte

diff --git a/src/ImageCarousel/ImageCarousel.stories.js b/src/ImageCarousel/ImageCarousel.stories.js
index cfec282..2294fdd 100644
--- a/src/ImageCarousel/ImageCarousel.stories.js
+++ b/src/ImageCarousel/ImageCarousel.stories.js
@@ -1,4 +1,5 @@
 import ImageCarouselView from './ImageCarouselView.svelte';
+import ImageCarouselViewCustomDots from './ImageCarouselViewCustomDots.svelte';
 
 export default {
   title: 'ImageCarousel',
@@ -10,4 +11,12 @@ const Template = ({ ...args }) => ({
   props: args
 });
 
+const TemplateCustomDots = ({ ...args }) => ({
+  Component: ImageCarouselViewCustomDots,
+  props: args
+});
+
 export const Primary = Template.bind({});
+
+export const WithCustomDots = TemplateCustomDots.bind({});
+
diff --git a/src/ImageCarousel/ImageCarousel.svelte b/src/ImageCarousel/ImageCarousel.svelte
index b1aec5e..861ddff 100644
--- a/src/ImageCarousel/ImageCarousel.svelte
+++ b/src/ImageCarousel/ImageCarousel.svelte
@@ -1,6 +1,8 @@
 <script>
   // TODO: rename image carousel to just carousel
   // TODO: seems CarouselChild component can be removed
+  // TODO: subscribe on mount and unsubscribe on destroy to
+  // $store.currentItemIndex to avoid multiple subscriptions
   import { onMount } from 'svelte'
   import { store } from '../store'
   import {
@@ -168,11 +170,18 @@
     {/if}
   </div>
   {#if dots}
-    <Dots
+    <slot
+      name="dots"
+      currentPage={$store.currentItemIndex}
       {pagesCount}
-      currentPageIndex={$store.currentItemIndex}
-      on:pageChange={handlePageChange}
-    ></Dots>
+      {showPage}
+    >
+      <Dots
+        {pagesCount}
+        currentPageIndex={$store.currentItemIndex}
+        on:pageChange={handlePageChange}
+      ></Dots>
+    </slot>
   {/if}
 </div>
 
diff --git a/src/ImageCarousel/ImageCarouselViewCustomDots.svelte b/src/ImageCarousel/ImageCarouselViewCustomDots.svelte
new file mode 100644
index 0000000..62a71f1
--- /dev/null
+++ b/src/ImageCarousel/ImageCarouselViewCustomDots.svelte
@@ -0,0 +1,139 @@
+<script>
+  import ImageCarousel from './ImageCarousel.svelte'
+
+  /**
+   * Enable Next/Previos arrows
+   */
+  export let arrows = true;
+  
+  /**
+   * Infinite looping
+   */
+  export let infinite = true;
+
+  /**
+   * Number of slides to show at a time
+   */
+  export let slidesToShow = 1;
+
+  /**
+   * Page to start on
+   */
+  export let initialPage = 1
+
+  /**
+   * Transition speed (ms)
+   */
+  export let speed = 500
+
+  /**
+   * Enables auto play of slides
+   */
+  export let autoplay = false
+
+  /**
+   * Auto play change interval
+   */
+  export let autoplaySpeed = 3000
+
+  /**
+   * Auto play change direction ('next', 'prev')
+   */
+  export let autoplayDirection = 'next'
+
+  /**
+   * Current page indicator dots
+   */
+  export let dots = true
+
+  function onPageChange(event, showPage) {
+    showPage(event.target.value)
+  }
+
+  const colors = [
+    '#e5f9f0',
+    '#ccf3e2',
+    '#b2edd3',
+    '#99e7c5',
+    '#7fe1b7',
+    '#66dba8',
+    '#4cd59a',
+    '#32cf8b',
+    '#19c97d',
+    '#00c36f'
+  ]
+</script>
+
+<div class="main-container">
+  <ImageCarousel
+    {arrows}
+    {infinite}
+    {slidesToShow}
+    {initialPage}
+    {speed}
+    {autoplay}
+    {autoplaySpeed}
+    {autoplayDirection}
+    {dots}
+    let:currentPage
+    let:pagesCount
+    let:showPage
+  >
+    {#each colors as color (color)}
+      <div
+        class="color-container"
+        style="background-color: {color};"
+      >
+        <p>{color}</p>
+      </div>
+    {/each}
+    <div slot="dots">
+      <div class="select-container">
+        <select
+          value={currentPage}
+          on:change="{(event) => onPageChange(event, showPage)}"
+          on:blur="{(event) => onPageChange(event, showPage)}"
+        >
+          {#each  Array(pagesCount) as _, pageIndex (pageIndex)}
+            <option value={pageIndex} class:active={currentPage === pageIndex}>
+              {pageIndex}
+            </option>
+          {/each}
+        </select>
+      </div>
+    </div>
+  </ImageCarousel>
+</div>
+
+<style>
+  .main-container {
+    display: flex;
+    width: 100%;
+  }
+  .color-container {
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .color-container > p {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-style: italic;
+    font-size: 18px;
+  }
+  .active {
+    background-color: grey;
+    color: white;
+  }
+
+  .select-container {
+    padding: 5px 0;
+  }
+  .select-container > select {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-style: italic;
+    height: 25px;
+    width: 100px;
+    border-radius: 5px;
+  }
+</style>
\ No newline at end of file