Merge pull request #6 from knownasilya/action

Add `on-slide` and document attributes
selvagsz · Feb 25, 2016 · c1e7e0e · c1e7e0e
2 parents be31391 + b39ecc2
commit c1e7e0e
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 27 deletions.
diff --git a/README.md b/README.md
@@ -1,39 +1,50 @@
-# Ember-carousel
+# ember-carousel
 
 An ember addon for Carousel component
 
+[DEMO](http://selvagsz.github.io/#/demos/carousel)
+
 ## Usage
 
 From within your Ember CLI application, run the following:
 
-`ember install ember-carousel`
+```no-highlight
+ember install ember-carousel
+```
 
 Add invoke the component as follows
 
 ```handlebars
-  {{#carousel-container transition-interval=400}}
-    {{#carousel-body}}
-      {{#carousel-item}}
-        Emberjs
-      {{/carousel-item}}
-      {{#carousel-item}}
-        Reactjs
-      {{/carousel-item}}
-      {{#carousel-item}}
-        Angularjs
-      {{/carousel-item}}
-    {{/carousel-body}}
-
-    {{#carousel-arrow direction="left" tagName="button"}}
-      Slide Left
-    {{/carousel-arrow}}
-    {{#carousel-arrow direction="right" tagName="button"}}
-      Slide Right
-    {{/carousel-arrow}}
-  {{/carousel-container}}
+{{#carousel-container transition-interval=400}}
+  {{#carousel-body}}
+    {{#carousel-item}}
+      Emberjs
+    {{/carousel-item}}
+    {{#carousel-item}}
+      Reactjs
+    {{/carousel-item}}
+    {{#carousel-item}}
+      Angularjs
+    {{/carousel-item}}
+  {{/carousel-body}}
+
+  {{#carousel-arrow direction="left" tagName="button"}}
+    Slide Left
+  {{/carousel-arrow}}
+  {{#carousel-arrow direction="right" tagName="button"}}
+    Slide Right
+  {{/carousel-arrow}}
+{{/carousel-container}}
 ```
 
-[DEMO](http://selvagsz.github.io/#/demos/carousel)
+## Attributes
+
+### `{{carousel-container}}`
+
+- `transition-interval` - Defaults to `500`.
+- `on-slide` - Optional, an action that receives one parameter, an object like `{ index: 3, previousIndex: 2, direction: 'right' }`.  
+  Triggered before the transition is completed.
+
 
 ## Development
 

diff --git a/addon/components/carousel-container.js b/addon/components/carousel-container.js
@@ -60,24 +60,42 @@ export default Ember.Component.extend({
   },
 
   slideRight() {
-    var activeIndex = this.get('activeCarouselItem.index');
+    let direction = 'right';
+    let activeIndex = this.get('activeCarouselItem.index');
     let newActiveIndex = activeIndex - 1;
 
     if(activeIndex === 0) {
       newActiveIndex = this.get('totalCarouselItems') - 1;
     }
 
-    this.slide(newActiveIndex, 'right');
+    if (this.get('on-slide')) {
+      this.sendAction('on-slide', {
+        index: newActiveIndex,
+        previousIndex: activeIndex,
+        direction
+      });
+    }
+
+    this.slide(newActiveIndex, direction);
   },
 
   slideLeft() {
-    var activeIndex = this.get('activeCarouselItem.index');
+    let direction = 'left';
+    let activeIndex = this.get('activeCarouselItem.index');
     let newActiveIndex = activeIndex + 1;
 
     if(activeIndex === (this.get('totalCarouselItems') - 1)) {
       newActiveIndex = 0;
     }
 
-    this.slide(newActiveIndex, 'left');
+    if (this.get('on-slide')) {
+      this.sendAction('on-slide', {
+        index: newActiveIndex,
+        previousIndex: activeIndex,
+        direction
+      });
+    }
+
+    this.slide(newActiveIndex, direction);
   }
 });