feat(event): emitting navigation-click and pagination-click from Caro…

…usel (SSENSE#362)
bitardev · Mar 21, 2019 · 9ba1457 · 9ba1457
1 parent 67e59b3
commit 9ba1457
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 0 deletions.
diff --git a/play/index.js b/play/index.js
@@ -249,6 +249,55 @@ play("Carousel", module)
     }
   })
   .add("With local event on pageChange", {
+  .add("navigation-click event", {
+    template:
+      `<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">
+        <carousel style="width: 500px;" @navigation-click="onNavigationClick" navigationEnabled :paginationEnabled="false">
+          <slide v-for="slide in slides" :key="slide">
+            <img style="width: 100%;" :src="slide" />
+          </slide>
+        </carousel>
+      </div>`,
+    components: {
+      Carousel,
+      Slide
+    },
+    data() {
+      return {
+        slides: images
+      }
+    },
+    methods: {
+      onNavigationClick(direction) {
+        this.$log(`Captured [navigation-click] event. Current direction is ${direction}`)
+      },
+    }
+  })
+  .add("pagination-click event", {
+    template:
+      `<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">
+        <carousel style="width: 500px;" @pagination-click="onPaginationClick">
+          <slide v-for="slide in slides" :key="slide">
+            <img style="width: 100%;" :src="slide" />
+          </slide>
+        </carousel>
+      </div>`,
+    components: {
+      Carousel,
+      Slide
+    },
+    data() {
+      return {
+        slides: images
+      }
+    },
+    methods: {
+      onPaginationClick (currentPage) {
+        this.$log(`Captured [pagination-click] event. Current page is ${currentPage}`)
+      },
+    }
+  })
+  .add("With local event on pageChange", {
   .add("pageChange event", {
     template:
       `<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">

diff --git a/src/Carousel.vue b/src/Carousel.vue
@@ -603,6 +603,7 @@ export default {
       this.advancePage(direction);
       this.pauseAutoplay();
       this.$emit("navigation-click", direction);
+      this.$emit("navigation-click", direction);
     },
     /**
      * Stop listening to mutation changes