Feature: Reset autoplay timeout on manual slide switch (SSENSE#216)

mxzinke · Jun 26, 2018 · cbab1d7 · cbab1d7
1 parent e871a2a
commit cbab1d7
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 1 deletion.
diff --git a/play/index.js b/play/index.js
@@ -68,7 +68,7 @@ play("Carousel", module)
     )
   )
   .add("Autoplay", h => createContainer(
-      h, containerWidth, [h(Carousel, { props: { autoplay: true } }, generateSlideImages(h))]
+      h, containerWidth, [h(Carousel, { props: { autoplay: true, autoplayHoverPause: false } }, generateSlideImages(h))]
     )
   )
   .add("Autoplay, pause on hover", h => createContainer(

diff --git a/src/Carousel.vue b/src/Carousel.vue
@@ -478,6 +478,12 @@ export default {
               this.maxOffset
             )
           : Math.min(this.slideWidth * page, this.maxOffset);
+
+        // restart autoplay if specified
+        if (this.autoplay && !this.autoplayHoverPause) {
+          this.restartAutoplay();
+        }
+
         // update the current page
         this.currentPage = page;
       }

diff --git a/src/mixins/autoplay.js b/src/mixins/autoplay.js
@@ -46,6 +46,10 @@ const autoplay = {
           this.autoplayTimeout
         );
       }
+    },
+    restartAutoplay() {
+      this.pauseAutoplay();
+      this.startAutoplay();
     }
   },
   mounted() {

diff --git a/tests/client/components/__snapshots__/carousel.spec.js.snap b/tests/client/components/__snapshots__/carousel.spec.js.snap
@@ -169,6 +169,22 @@ exports[`Carousel should mount successfully 1`] = `
 "
 `;
 
+exports[`Carousel should not reset autoplay when switching slide with autoplayHoverPause 1`] = `
+".VueCarousel-wrapper
+  .VueCarousel-inner(role=\'listbox\', style=\'visibility: hidden;\')
+    .VueCarousel-slide(tabindex=\'-1\')
+    .VueCarousel-slide.VueCarousel-slide-active.VueCarousel-slide-center(tabindex=\'-1\')
+|  
+.VueCarousel-pagination
+  ul.VueCarousel-dot-container(role=\'tablist\')
+    li.VueCarousel-dot(aria-hidden=\'false\', role=\'presentation\', aria-selected=\'false\', style=\'margin-top: 20px; padding: 10px;\')
+      button.VueCarousel-dot-button(type=\'button\', role=\'button\', tabindex=\'0\', style=\'width: 10px; height: 10px; background: rgb(239, 239, 239);\')
+    li.VueCarousel-dot.VueCarousel-dot--active(aria-hidden=\'false\', role=\'presentation\', aria-selected=\'true\', style=\'margin-top: 20px; padding: 10px;\')
+      button.VueCarousel-dot-button(type=\'button\', role=\'button\', tabindex=\'1\', style=\'width: 10px; height: 10px; background: rgb(0, 0, 0);\')
+// 
+"
+`;
+
 exports[`Carousel should register 0 slides when 0 slides are added to the slots 1`] = `
 ".VueCarousel-wrapper
   .VueCarousel-inner(role=\'listbox\', style=\'visibility: hidden;\')
@@ -194,6 +210,22 @@ exports[`Carousel should register 3 slides when 3 slides are added to the slots
 "
 `;
 
+exports[`Carousel should reset autoplay when switching slide without autoplayHoverPause 1`] = `
+".VueCarousel-wrapper
+  .VueCarousel-inner(role=\'listbox\', style=\'visibility: hidden;\')
+    .VueCarousel-slide(tabindex=\'-1\')
+    .VueCarousel-slide.VueCarousel-slide-active.VueCarousel-slide-center(tabindex=\'-1\')
+|  
+.VueCarousel-pagination
+  ul.VueCarousel-dot-container(role=\'tablist\')
+    li.VueCarousel-dot(aria-hidden=\'false\', role=\'presentation\', aria-selected=\'false\', style=\'margin-top: 20px; padding: 10px;\')
+      button.VueCarousel-dot-button(type=\'button\', role=\'button\', tabindex=\'0\', style=\'width: 10px; height: 10px; background: rgb(239, 239, 239);\')
+    li.VueCarousel-dot.VueCarousel-dot--active(aria-hidden=\'false\', role=\'presentation\', aria-selected=\'true\', style=\'margin-top: 20px; padding: 10px;\')
+      button.VueCarousel-dot-button(type=\'button\', role=\'button\', tabindex=\'1\', style=\'width: 10px; height: 10px; background: rgb(0, 0, 0);\')
+// 
+"
+`;
+
 exports[`Carousel should unmount successfully 1`] = `
 ".VueCarousel-wrapper
   .VueCarousel-inner(role=\'listbox\', style=\'visibility: hidden;\')

diff --git a/tests/client/components/carousel.spec.js b/tests/client/components/carousel.spec.js
@@ -249,4 +249,31 @@ describe('Carousel', () => {
     expect(carouselInstance.autoplayInterval).toBe(undefined);
     return utils.expectToMatchSnapshot(vm);
   });
+
+  it('should reset autoplay when switching slide without autoplayHoverPause', () => {
+    const vm = new Vue({
+      el: document.createElement('div'),
+      render: (h) => h(Carousel, { props: { perPage: 1, autoplay: true, autoplayHoverPause: false } }, [h(Slide), h(Slide)]),
+    });
+
+    const carouselInstance = vm.$children[0];
+    const spy = spyOn(carouselInstance, 'restartAutoplay');
+    carouselInstance.goToPage(2);
+    expect(carouselInstance.restartAutoplay).toHaveBeenCalled();
+    return utils.expectToMatchSnapshot(vm);
+  });
+
+  it('should not reset autoplay when switching slide with autoplayHoverPause', () => {
+    const vm = new Vue({
+      el: document.createElement('div'),
+      render: (h) => h(Carousel, { props: { perPage: 1, autoplay: true, autoplayHoverPause: true } }, [h(Slide), h(Slide)]),
+    });
+
+    const carouselInstance = vm.$children[0];
+    const spy = spyOn(carouselInstance, 'restartAutoplay');
+    carouselInstance.goToPage(2);
+    expect(carouselInstance.restartAutoplay).not.toHaveBeenCalled();
+    return utils.expectToMatchSnapshot(vm);
+  });
+
 });