From ba696c275b46d12632c98c83aabee4139c01d4b8 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Tue, 20 Apr 2021 22:20:21 +0300
Subject: [PATCH] Add pauseOnFocus prop, update storybook, update
 autoplayInterval logic

---
 .gitignore                                    |  1 +
 src/components/Carousel/Carousel.svelte       | 33 ++++++++++---------
 src/components/Carousel/CarouselView.svelte   | 10 +++++-
 .../Carousel/CarouselViewCustomArrows.svelte  |  8 ++++-
 .../Carousel/CarouselViewCustomDots.svelte    |  8 ++++-
 5 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/.gitignore b/.gitignore
index c4ba4c2..f5f1664 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 /node_modules/
 /public/build/
 dist
+/storybook-static
 
 .DS_Store
diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 6248cbb..91389cd 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -61,6 +61,11 @@
    */
   export let autoplayDirection = NEXT
 
+  /**
+   * Pause autoplay on focus
+   */
+   export let pauseOnFocus = false
+
   /**
    * Current page indicator dots
    */
@@ -79,12 +84,14 @@
   let pagesElement
   let hovered = false
 
-  let autoplayIntervals = []
+  let autoplayInterval = null
   $: {
-    if (hovered) {
-      clearAutoplay()
-    } else {
-      applyAutoplay()
+    if (pauseOnFocus) {
+      if (hovered) {
+        clearAutoplay()
+      } else {
+        applyAutoplay()
+      }
     }
   }
 
@@ -107,17 +114,16 @@
   }
 
   function applyAutoplay() {
-    if (autoplay) {
-      let autoplayInterval = setInterval(() => {
+    if (autoplay && !autoplayInterval) {
+      autoplayInterval = setInterval(() => {
         directionFnDescription[autoplayDirection]()
       }, autoplayDuration)
-      autoplayIntervals.push(autoplayInterval)
     }
   }
+
   function clearAutoplay() {
-    while(autoplayIntervals.length) {
-      clearInterval(autoplayIntervals.pop())
-    }     
+    clearInterval(autoplayInterval)
+    autoplayInterval = null
   }
   
   function addClones() {
@@ -213,15 +219,10 @@
     showPage(currentPageIndex, { offsetDelay: 0, animated: true })
   }
   function handleHovered(event) {
-    console.log('hovered', event.detail.value)
     hovered = event.detail.value
   }
 </script>
 
-<div> 
-hovered={hovered}
-</div>
-
 <div class="sc-carousel__carousel-container">
   <div class="sc-carousel__content-container">
     {#if arrows}
diff --git a/src/components/Carousel/CarouselView.svelte b/src/components/Carousel/CarouselView.svelte
index 0de72e7..df33c96 100644
--- a/src/components/Carousel/CarouselView.svelte
+++ b/src/components/Carousel/CarouselView.svelte
@@ -41,6 +41,11 @@
    * Auto play change direction ('next', 'prev')
    */
   export let autoplayDirection = NEXT
+  
+  /**
+   * Pause autoplay on focus
+   */
+  export let pauseOnFocus = false
 
   /**
    * Current page indicator dots
@@ -69,6 +74,7 @@
 
 <div class="main-container">
   <Carousel
+    {timingFunction}
     {arrows}
     {infinite}
     {initialPageIndex}
@@ -76,8 +82,8 @@
     {autoplay}
     {autoplayDuration}
     {autoplayDirection}
+    {pauseOnFocus}
     {dots}
-    {timingFunction}
     on:pageChange={
       event => console.log(`Current page index: ${event.detail}`)
     }
@@ -93,6 +99,7 @@
   </Carousel>
 
   <Carousel
+    {timingFunction}
     {arrows}
     {infinite}
     {initialPageIndex}
@@ -100,6 +107,7 @@
     {autoplay}
     {autoplayDuration}
     {autoplayDirection}
+    {pauseOnFocus}
     {dots}
   >
     {#each colors2 as { color, text } (color)}
diff --git a/src/components/Carousel/CarouselViewCustomArrows.svelte b/src/components/Carousel/CarouselViewCustomArrows.svelte
index 0628b01..dece9e1 100644
--- a/src/components/Carousel/CarouselViewCustomArrows.svelte
+++ b/src/components/Carousel/CarouselViewCustomArrows.svelte
@@ -42,6 +42,11 @@
    */
   export let autoplayDirection = NEXT
 
+  /**
+   * Pause autoplay on focus
+   */
+  export let pauseOnFocus = false
+
   /**
    * Current page indicator dots
    */
@@ -63,6 +68,7 @@
 
 <div class="main-container">
   <Carousel
+    {timingFunction}
     {arrows}
     {infinite}
     {initialPageIndex}
@@ -70,8 +76,8 @@
     {autoplay}
     {autoplayDuration}
     {autoplayDirection}
+    {pauseOnFocus}
     {dots}
-    {timingFunction}
     let:showPrevPage
     let:showNextPage
   >
diff --git a/src/components/Carousel/CarouselViewCustomDots.svelte b/src/components/Carousel/CarouselViewCustomDots.svelte
index 19d115f..de88f4c 100644
--- a/src/components/Carousel/CarouselViewCustomDots.svelte
+++ b/src/components/Carousel/CarouselViewCustomDots.svelte
@@ -42,6 +42,11 @@
    */
   export let autoplayDirection = NEXT
 
+  /**
+   * Pause autoplay on focus
+   */
+  export let pauseOnFocus = false
+
   /**
    * Current page indicator dots
    */
@@ -67,6 +72,7 @@
 
 <div class="main-container">
   <Carousel
+    {timingFunction}
     {arrows}
     {infinite}
     {initialPageIndex}
@@ -74,8 +80,8 @@
     {autoplay}
     {autoplayDuration}
     {autoplayDirection}
+    {pauseOnFocus}
     {dots}
-    {timingFunction}
     let:currentPageIndex
     let:pagesCount
     let:showPage