Add pauseOnFocus prop, update storybook, update autoplayInterval logic

.gitignore

@@ -1,5 +1,6 @@
 /node_modules/
 /public/build/
 dist
+/storybook-static
 
 .DS_Store

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}

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)}

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
   >

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