From 437347ec3eb34a6672c47d74d863fe995b91996b Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Thu, 15 Jul 2021 13:08:44 +0300
Subject: [PATCH 1/5] #41 : Rename auto play to autoplay

---
 README.md                                                   | 6 +++---
 src/components/Carousel/Carousel.svelte                     | 6 +++---
 src/components/Carousel/stories/CarouselView.svelte         | 6 +++---
 .../Carousel/stories/CarouselViewCustomArrows.svelte        | 6 +++---
 .../Carousel/stories/CarouselViewCustomDots.svelte          | 6 +++---
 src/docs/Carousel.svx                                       | 6 +++---
 6 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index 0169985..528b28d 100644
--- a/README.md
+++ b/README.md
@@ -40,9 +40,9 @@ Import component
 | `infinite`           | `boolean`  | `true`          | Infinite looping                              |
 | `initialPageIndex`   | `number`   | `0`             | Page to start on                              |
 | `duration`           | `number`   | `500`           | Transition duration (ms)                      |
-| `autoplay`           | `boolean`  | `false`         | Enables auto play of pages                    |
-| `autoplayDuration`   | `number`   | `3000`          | Auto play change interval (ms)                |
-| `autoplayDirection`  | `string`   | `'next'`        | Auto play change direction (`next` or `prev`) |
+| `autoplay`           | `boolean`  | `false`         | Enables autoplay of pages                     |
+| `autoplayDuration`   | `number`   | `3000`          | Autoplay change interval (ms)                 |
+| `autoplayDirection`  | `string`   | `'next'`        | Autoplay change direction (`next` or `prev`)  |
 | `pauseOnFocus`       | `boolean`  | `false`         | Pause autoplay on focus                       |
 | `dots`               | `boolean`  | `true`          | Current page indicator dots                   |
 | `timingFunction`     | `string`   | `'ease-in-out'` | CSS animation timing function                 |
diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 7189513..1d5d93a 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -48,17 +48,17 @@
   let _duration = duration
 
   /**
-   * Enables auto play of pages
+   * Enables autoplay of pages
    */
   export let autoplay = false
 
   /**
-   * Auto play change interval (ms)
+   * Autoplay change interval (ms)
    */
   export let autoplayDuration = 3000
 
   /**
-   * Auto play change direction ('next', 'prev')
+   * Autoplay change direction ('next', 'prev')
    */
   export let autoplayDirection = NEXT
 
diff --git a/src/components/Carousel/stories/CarouselView.svelte b/src/components/Carousel/stories/CarouselView.svelte
index 90c4ebf..3335110 100644
--- a/src/components/Carousel/stories/CarouselView.svelte
+++ b/src/components/Carousel/stories/CarouselView.svelte
@@ -28,17 +28,17 @@
   export let duration = 500
 
   /**
-   * Enables auto play of pages
+   * Enables autoplay of pages
    */
   export let autoplay = false
 
   /**
-   * Auto play change interval
+   * Autoplay change interval
    */
   export let autoplayDuration = 3000
 
   /**
-   * Auto play change direction ('next', 'prev')
+   * Autoplay change direction ('next', 'prev')
    */
   export let autoplayDirection = NEXT
   
diff --git a/src/components/Carousel/stories/CarouselViewCustomArrows.svelte b/src/components/Carousel/stories/CarouselViewCustomArrows.svelte
index 909fe3a..99aa91d 100644
--- a/src/components/Carousel/stories/CarouselViewCustomArrows.svelte
+++ b/src/components/Carousel/stories/CarouselViewCustomArrows.svelte
@@ -28,17 +28,17 @@
   export let duration = 500
 
   /**
-   * Enables auto play of pages
+   * Enables autoplay of pages
    */
   export let autoplay = false
 
   /**
-   * Auto play change interval
+   * Autoplay change interval
    */
   export let autoplayDuration = 3000
 
   /**
-   * Auto play change direction ('next', 'prev')
+   * Autoplay change direction ('next', 'prev')
    */
   export let autoplayDirection = NEXT
 
diff --git a/src/components/Carousel/stories/CarouselViewCustomDots.svelte b/src/components/Carousel/stories/CarouselViewCustomDots.svelte
index 369692d..d292348 100644
--- a/src/components/Carousel/stories/CarouselViewCustomDots.svelte
+++ b/src/components/Carousel/stories/CarouselViewCustomDots.svelte
@@ -28,17 +28,17 @@
   export let duration = 500
 
   /**
-   * Enables auto play of pages
+   * Enables autoplay of pages
    */
   export let autoplay = false
 
   /**
-   * Auto play change interval
+   * Autoplay change interval
    */
   export let autoplayDuration = 3000
 
   /**
-   * Auto play change direction ('next', 'prev')
+   * Autoplay change direction ('next', 'prev')
    */
   export let autoplayDirection = NEXT
 
diff --git a/src/docs/Carousel.svx b/src/docs/Carousel.svx
index 65e47f1..cc5b26a 100644
--- a/src/docs/Carousel.svx
+++ b/src/docs/Carousel.svx
@@ -214,9 +214,9 @@ Import component
 | `infinite`           | `boolean`  | `true`          | Infinite looping                              |
 | `initialPageIndex`   | `number`   | `0`             | Page to start on                              |
 | `duration`           | `number`   | `500`           | Transition duration (ms)                      |
-| `autoplay`           | `boolean`  | `false`         | Enables auto play of pages                    |
-| `autoplayDuration`   | `number`   | `3000`          | Auto play change interval (ms)                |
-| `autoplayDirection`  | `string`   | `'next'`        | Auto play change direction (`next` or `prev`) |
+| `autoplay`           | `boolean`  | `false`         | Enables autoplay of pages                     |
+| `autoplayDuration`   | `number`   | `3000`          | Autoplay change interval (ms)                 |
+| `autoplayDirection`  | `string`   | `'next'`        | Autoplay change direction (`next` or `prev`)  |
 | `dots`               | `boolean`  | `true`          | Current page indicator dots                   |
 | `pauseOnFocus`       | `boolean`  | `false`         | Pause autoplay on focus                       |
 | `timingFunction`     | `string`   | `'ease-in-out'` | CSS animation timing function                 |

From c3957ca4f37ed6b7b766b6d1593ea02e7fb1d172 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Thu, 15 Jul 2021 13:17:33 +0300
Subject: [PATCH 2/5] #43 : Move colors and values to css vars

---
 src/components/Arrow/Arrow.svelte       | 14 +++++++-------
 src/components/Carousel/Carousel.svelte |  6 ++++++
 src/components/Dot/Dot.svelte           |  2 +-
 src/components/Dots/Dots.svelte         |  6 +++---
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/Arrow/Arrow.svelte b/src/components/Arrow/Arrow.svelte
index 895dd06..b11105d 100644
--- a/src/components/Arrow/Arrow.svelte
+++ b/src/components/Arrow/Arrow.svelte
@@ -26,13 +26,13 @@
 
 <style>
   :root {
-    --size: 2px
+    --sc-arrow-size: 2px;
   }
   .sc-carousel-arrow__circle {
     width: 20px;
     height: 20px;
     border-radius: 50%;
-    background-color: rgba(93, 93, 93, 0.5); /* #5d5d5d */
+    background-color: var(--sc-color-rgb-light-50p);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -44,18 +44,18 @@
     opacity: 0.9;
   }
   .sc-carousel-arrow__arrow {
-    border: solid #1e1e1e;
-    border-width: 0 var(--size) var(--size) 0;
-    padding: var(--size);
+    border: solid var(--sc-color-hex-dark);
+    border-width: 0 var(--sc-arrow-size) var(--sc-arrow-size) 0;
+    padding: var(--sc-arrow-size);
     position: relative;
   }
   .sc-carousel-arrow__arrow-next {
     transform: rotate(-45deg);
-    left: calc(var(--size) / -2);
+    left: calc(var(--sc-arrow-size) / -2);
   }
   .sc-carousel-arrow__arrow-prev {
     transform: rotate(135deg);
-    right: calc(var(--size) / -2);
+    right: calc(var(--sc-arrow-size) / -2);
   }
   .sc-carousel-arrow__circle_disabled,
   .sc-carousel-arrow__circle_disabled:hover {
diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 1d5d93a..32e0996 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -318,6 +318,12 @@
 </div>
 
 <style>
+  :root {
+    --sc-color-rgb-light-50p: rgba(93, 93, 93, 0.5);
+    --sc-color-rgb-light: #5d5d5d;
+    --sc-color-hex-dark-50p: rgba(30, 30, 30, 0.5);
+    --sc-color-hex-dark: #1e1e1e;
+  }
   .sc-carousel__carousel-container {
     display: flex;
     width: 100%;
diff --git a/src/components/Dot/Dot.svelte b/src/components/Dot/Dot.svelte
index 0442063..0b6d62d 100644
--- a/src/components/Dot/Dot.svelte
+++ b/src/components/Dot/Dot.svelte
@@ -41,7 +41,7 @@
     width: 16px;
   }
   .sc-carousel-dot__dot {
-    background-color: #5d5d5d;
+    background-color: var(--sc-color-rgb-light);
     border-radius: 50%;
     display: inline-block;
     opacity: 0.5;
diff --git a/src/components/Dots/Dots.svelte b/src/components/Dots/Dots.svelte
index 4242be5..2524d38 100644
--- a/src/components/Dots/Dots.svelte
+++ b/src/components/Dots/Dots.svelte
@@ -32,7 +32,7 @@
 
 <style>
   :root {
-    --dot-size: 10px; 
+    --sc-dot-size: 10px; 
   }
   .sc-carousel-dots__container {
     display: flex;
@@ -42,8 +42,8 @@
     padding: 0 30px;
   }
   .sc-carousel-dots__dot-container {
-    height: calc(var(--dot-size) + 10px);
-    width: calc(var(--dot-size) + 10x);
+    height: calc(var(--sc-dot-size) + 10px);
+    width: calc(var(--sc-dot-size) + 10px);
     display: flex;
     align-items: center;
     justify-content: center;

From 8f2137b078d6409bbd29fc9813eaadb87eb2152d Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Thu, 15 Jul 2021 19:04:59 +0300
Subject: [PATCH 3/5] Fix stories

---
 src/components/Carousel/stories/CarouselView.svelte            | 3 +--
 .../Carousel/stories/CarouselViewCustomArrows.svelte           | 3 +--
 src/components/Carousel/stories/CarouselViewCustomDots.svelte  | 3 +--
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/Carousel/stories/CarouselView.svelte b/src/components/Carousel/stories/CarouselView.svelte
index 3335110..2cdaa38 100644
--- a/src/components/Carousel/stories/CarouselView.svelte
+++ b/src/components/Carousel/stories/CarouselView.svelte
@@ -1,6 +1,5 @@
 <script>
   import Carousel from '../Carousel.svelte'
-  import { NEXT } from '../../../direction'
 
   /**
    * CSS animation timing function
@@ -40,7 +39,7 @@
   /**
    * Autoplay change direction ('next', 'prev')
    */
-  export let autoplayDirection = NEXT
+  export let autoplayDirection = 'next'
   
   /**
    * Pause autoplay on focus
diff --git a/src/components/Carousel/stories/CarouselViewCustomArrows.svelte b/src/components/Carousel/stories/CarouselViewCustomArrows.svelte
index 99aa91d..df01022 100644
--- a/src/components/Carousel/stories/CarouselViewCustomArrows.svelte
+++ b/src/components/Carousel/stories/CarouselViewCustomArrows.svelte
@@ -1,6 +1,5 @@
 <script>
   import Carousel from '../Carousel.svelte'
-  import { NEXT } from '../../../direction'
 
   /**
    * CSS animation timing function
@@ -40,7 +39,7 @@
   /**
    * Autoplay change direction ('next', 'prev')
    */
-  export let autoplayDirection = NEXT
+  export let autoplayDirection = 'next'
 
   /**
    * Pause autoplay on focus
diff --git a/src/components/Carousel/stories/CarouselViewCustomDots.svelte b/src/components/Carousel/stories/CarouselViewCustomDots.svelte
index d292348..d9d8cc3 100644
--- a/src/components/Carousel/stories/CarouselViewCustomDots.svelte
+++ b/src/components/Carousel/stories/CarouselViewCustomDots.svelte
@@ -1,6 +1,5 @@
 <script>
   import Carousel from '../Carousel.svelte'
-  import { NEXT } from '../../../direction'
 
   /**
    * CSS animation timing function
@@ -40,7 +39,7 @@
   /**
    * Autoplay change direction ('next', 'prev')
    */
-  export let autoplayDirection = NEXT
+  export let autoplayDirection = 'next'
 
   /**
    * Pause autoplay on focus

From 211e39028653b79dea95acff9000ab4264638b4c Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Thu, 15 Jul 2021 19:08:39 +0300
Subject: [PATCH 4/5] Skip optional args

---
 src/components/Carousel/Carousel.svelte | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 32e0996..9afd137 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -77,21 +77,17 @@
     if (typeof pageIndex !== 'number') {
       throw new Error('pageIndex should be a number')
     }
-    showPage(pageIndex + Number(infinite), { offsetDelayMs: 0, animated })
+    showPage(pageIndex + Number(infinite), { animated })
   }
 
   export function goToPrev(options) {
     const animated = get(options, 'animated', true)
-    showPrevPage({
-      animated
-    })
+    showPrevPage({ animated })
   }
 
   export function goToNext(options) {
     const animated = get(options, 'animated', true)
-    showNextPage({
-      animated
-    })
+    showNextPage({ animated })
   }
 
   let store = createStore()
@@ -183,7 +179,7 @@
   })
 
   function handlePageChange(pageIndex) {
-    showPage(pageIndex + Number(infinite), { offsetDelayMs: 0, animated: true })
+    showPage(pageIndex + Number(infinite))
   }
 
   function offsetPage(animated) {
@@ -246,7 +242,7 @@
     offset += event.detail.dx
   }
   function handleSwipeEnd() {
-    showPage(currentPageIndex, { offsetDelayMs: 0, animated: true })
+    showPage(currentPageIndex)
   }
   function handleFocused(event) {
     focused = event.detail.value

From fa7020ed6b95071930e3fc861d1521a557820b05 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Thu, 15 Jul 2021 19:16:23 +0300
Subject: [PATCH 5/5] Move jumping to real page to separate fn

---
 src/components/Carousel/Carousel.svelte | 21 +++++++++++++++++++--
 src/components/Dots/Dots.svelte         |  2 +-
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 9afd137..6aa01b1 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -183,15 +183,25 @@
   }
 
   function offsetPage(animated) {
+    // _duration is an offset animation time
     _duration = animated ? duration : 0
     offset = -currentPageIndex * pageWidth
+  }
+
+  // makes delayed jump to 1st or last element
+  function jumpIfNeeded() {
+    let jumped = false
     if (infinite) {
       if (currentPageIndex === 0) {
-        showPage(pagesCount - 2, { offsetDelayMs: duration, animated: false })
+        // offsetDelayMs should depend on _duration, as it wait when offset finishes
+        showPage(pagesCount - 2, { offsetDelayMs: _duration, animated: false })
+        jumped = true
       } else if (currentPageIndex === pagesCount - 1) {
-        showPage(1, { offsetDelayMs: duration, animated: false })
+        showPage(1, { offsetDelayMs: _duration, animated: false })
+        jumped = true
       }
     }
+    return jumped
   }
 
   // Disable page change while animation is in progress
@@ -211,8 +221,11 @@
     const offsetDelayMs = get(options, 'offsetDelayMs', true)
     safeChangePage(() => {
       store.moveToPage({ pageIndex, pagesCount })
+      // delayed page transition, used for infinite autoplay to jump to real page
       setTimeout(() => {
         offsetPage(animated)
+        const jumped = jumpIfNeeded()
+        !jumped && applyAutoplay()
       }, offsetDelayMs)
     }, { animated })
   }
@@ -221,6 +234,8 @@
     safeChangePage(() => {
       store.prev({ infinite, pagesCount })
       offsetPage(animated)
+      const jumped = jumpIfNeeded()
+      !jumped && applyAutoplay()
     }, { animated })
   }
   function showNextPage(options) {
@@ -228,6 +243,8 @@
     safeChangePage(() => {
       store.next({ infinite, pagesCount })
       offsetPage(animated)
+      const jumped = jumpIfNeeded()
+      !jumped && applyAutoplay()
     }, { animated })
   }
 
diff --git a/src/components/Dots/Dots.svelte b/src/components/Dots/Dots.svelte
index 2524d38..c9374b7 100644
--- a/src/components/Dots/Dots.svelte
+++ b/src/components/Dots/Dots.svelte
@@ -43,7 +43,7 @@
   }
   .sc-carousel-dots__dot-container {
     height: calc(var(--sc-dot-size) + 10px);
-    width: calc(var(--sc-dot-size) + 10px);
+    width: calc(var(--sc-dot-size) + 6px);
     display: flex;
     align-items: center;
     justify-content: center;