Merge pull request #23 from AmazingDreams/master

Callbacks through emit
Wlada · May 12, 2017 · 824c318 · 824c318
2 parents e2f0767 + e0e490f
commit 824c318
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/play/index.js b/play/index.js
@@ -252,3 +252,34 @@ play('Carousel3d', module)
             }
         }
     })
+
+    .add("callbacks through emit", {
+        template: `<carousel-3d
+                      @afterSlideChanged="onAfterSlideChanged"
+                      @lastSlide="onLastSlide"
+                      @slideChange="onSlideChange">
+            <slide v-for="(slide, i) in slides" :index="i">
+                <img :src="slide.src">
+            </slide>
+        </carousel-3d>`,
+        components: {
+            Carousel3d,
+            Slide
+        },
+        data() {
+            return {
+                slides: slides
+            }
+        },
+        methods: {
+            onAfterSlideChanged(index){
+                console.log('@afterSlideChanged Callback Triggered', 'Slide Index ' + index)
+            },
+            onSlideChange(index){
+                console.log('@slideChange Callback Triggered', 'Slide Index ' + index)
+            },
+            onLastSlide(index){
+                console.log('@lastSlide Callback Triggered', 'Slide Index ' + index)
+            }
+        }
+    })
diff --git a/src/Carousel3d.vue b/src/Carousel3d.vue
@@ -207,9 +207,16 @@
                 this.lock = true
 
                 if (this.isLastSlide) {
+                    if (this.onLastSlide !== noop) {
+                        console.warn('onLastSlide deprecated, please use @lastSlide')
+                    }
                     this.onLastSlide(this.currentIndex)
+
+                    this.$emit('lastSlide', this.currentIndex)
                 }
 
+                this.$emit('slideChange', this.currentIndex)
+
                 setTimeout(() => this.animationEnd(), this.animationSpeed)
             },
             /**
@@ -240,7 +247,13 @@
              */
             animationEnd () {
                 this.lock = false
+
+                if (this.onSlideChange !== noop) {
+                    console.warn('onSlideChange deprecated, please use @afterSlideChanged')
+                }
                 this.onSlideChange(this.currentIndex)
+
+                this.$emit('afterSlideChanged', this.currentIndex)
             },
             /**
              * Trigger actions when mouse is released