refactored and shimmed code (#10)

README.md

@@ -15,7 +15,7 @@ ember install ember-carousel
 Add invoke the component as follows
 
 ```handlebars
-{{#carousel-container transition-interval=400}}
+{{#carousel-container transitionInterval=400}}
   {{#carousel-body}}
     {{#carousel-item}}
       Emberjs

addon/components/carousel-arrow.js

@@ -1,6 +1,9 @@
-import Ember from 'ember';
+import Component from 'ember-component';
 import layout from '../templates/components/carousel-arrow';
 
+import computed from 'ember-computed';
+import get from 'ember-metal/get';
+
 const carouselArrowClassMap = {
   left: 'carousel-left-arrow',
   right: 'carousel-right-arrow'
@@ -11,22 +14,16 @@ const carouselSlideActionMap = {
   right: 'slideRight'
 };
 
-const computed = Ember.computed;
-
-export default Ember.Component.extend({
-  layout: layout,
-  carousel: Ember.inject.service(),
+export default Component.extend({
   classNamesBindings: ['carousel-arrow-class'],
-  direction: 'left',
+  layout: layout,
 
-  'carousel-arrow-class': computed('direction', {
-    get() {
-      return carouselArrowClassMap[this.get('direction')];
-    }
+  'carousel-arrow-class': computed('direction', function() {
+    return carouselArrowClassMap[get(this, 'direction')];
   }),
 
   click() {
-    var method = carouselSlideActionMap[this.get('direction')];
+    let method = carouselSlideActionMap[get(this, 'direction')];
     this.nearestWithProperty('isCarouselParentContainer')[method]();
   }
 });

addon/components/carousel-body.js

@@ -1,8 +1,8 @@
-import Ember from 'ember';
+import Component from 'ember-component';
 import layout from '../templates/components/carousel-body';
 
 
-export default Ember.Component.extend({
+export default Component.extend({
   layout: layout,
   classNames: ['carousel-body']
 });

addon/components/carousel-container.js

@@ -1,50 +1,52 @@
-import Ember from 'ember';
+import Component from 'ember-component';
 import layout from '../templates/components/carousel-container';
 
-const { computed, on, run } = Ember;
+import computed, { reads } from 'ember-computed';
+import run, { later } from 'ember-runloop';
+import { A } from 'ember-array/utils';
+import get from 'ember-metal/get';
+import set from 'ember-metal/set';
 
-export default Ember.Component.extend({
-  layout: layout,
+export default Component.extend({
   classNames: ['carousel-container'],
-  'transition-interval': 500,
 
+  layout: layout,
+  transitionInterval: 500,
   isCarouselParentContainer: true,
-
   carouselItems: null,
-  totalCarouselItems: computed.reads('carouselItems.length'),
+  totalCarouselItems: reads('carouselItems.length'),
 
-  initializeCarouselItems: on('init', function() {
-    this.set('carouselItems', Ember.A());
-  }),
+  init() {
+    this._super(...arguments);
+    set(this, 'carouselItems', A());
+  },
 
-  activeCarouselItem: computed('carouselItems.length', '[email protected]', {
-    get() {
-      return this.get('carouselItems').findBy('isActive');
-    }
+  activeCarouselItem: computed('carouselItems.length', '[email protected]', function () {
+    return get(this, 'carouselItems').findBy('isActive');
   }),
 
   registerCarouselItem(carouselItem) {
-    this.get('carouselItems').pushObject(carouselItem);
+    get(this, 'carouselItems').pushObject(carouselItem);
   },
 
   slide(newActiveIndex, direction) {
-    var carouselItems = this.get('carouselItems');
-    var activeCarouselItem = this.get('activeCarouselItem');
-    var newActiveCarouselItem = carouselItems[newActiveIndex];
-    let transitionInterval = this.get('transition-interval');
+    let carouselItems = get(this, 'carouselItems');
+    let activeCarouselItem = get(this, 'activeCarouselItem');
+    let newActiveCarouselItem = carouselItems[newActiveIndex];
+    let transitionInterval = get(this, 'transitionInterval');
     let transitionOffset = 50;
 
     run(function() {
-      activeCarouselItem.set('from', direction);
-      newActiveCarouselItem.set('from', direction);
+      set(activeCarouselItem, 'from', direction);
+      set(newActiveCarouselItem, 'from', direction);
     });
 
-    run.later(function() {
-      activeCarouselItem.set('slidingOut', true);
-      newActiveCarouselItem.set('slidingIn', true);
+    later(function() {
+      set(activeCarouselItem, 'slidingOut', true);
+      set(newActiveCarouselItem, 'slidingIn', true);
     }, transitionOffset);
 
-    run.later(function() {
+    later(function() {
       activeCarouselItem.setProperties({
         slidingOut: false,
         from: null,
@@ -61,14 +63,14 @@ export default Ember.Component.extend({
 
   slideRight() {
     let direction = 'right';
-    let activeIndex = this.get('activeCarouselItem.index');
+    let activeIndex = get(this, 'activeCarouselItem.index');
     let newActiveIndex = activeIndex - 1;
 
-    if(activeIndex === 0) {
-      newActiveIndex = this.get('totalCarouselItems') - 1;
+    if (activeIndex === 0) {
+      newActiveIndex = get(this, 'totalCarouselItems') - 1;
     }
 
-    if (this.get('on-slide')) {
+    if (get(this, 'on-slide')) {
       this.sendAction('on-slide', {
         index: newActiveIndex,
         previousIndex: activeIndex,
@@ -81,14 +83,14 @@ export default Ember.Component.extend({
 
   slideLeft() {
     let direction = 'left';
-    let activeIndex = this.get('activeCarouselItem.index');
+    let activeIndex = get(this, 'activeCarouselItem.index');
     let newActiveIndex = activeIndex + 1;
 
-    if(activeIndex === (this.get('totalCarouselItems') - 1)) {
+    if (activeIndex === (get(this, 'totalCarouselItems') - 1)) {
       newActiveIndex = 0;
     }
 
-    if (this.get('on-slide')) {
+    if (get(this, 'on-slide')) {
       this.sendAction('on-slide', {
         index: newActiveIndex,
         previousIndex: activeIndex,

addon/components/carousel-item.js

@@ -1,31 +1,27 @@
-import Ember from 'ember';
+import Component from 'ember-component';
 import layout from '../templates/components/carousel-item';
 
-const { on, computed } = Ember;
+import computed from 'ember-computed';
+import get from 'ember-metal/get';
+import set from 'ember-metal/set';
 
-export default Ember.Component.extend({
-  layout: layout,
-  carousel: Ember.inject.service(),
+export default Component.extend({
   classNameBindings: [':carousel-item', 'isActive:active', 'slidingIn:slide-in', 'slidingOut:slide-out', 'from'],
 
+  layout: layout,
   index: 0,
-
   _carouselContainer: null,
 
-  isActive: computed('_carouselContainer.carouselItems.[]', {
-    get() {
-      return this === this.get('_carouselContainer.carouselItems.firstObject');
-    },
+  init() {
+    this._super(...arguments);
+    let carouselContainer = this.nearestWithProperty('isCarouselParentContainer');
 
-    set(key, value) {
-      return value;
-    }
-  }),
-
-  registerOnCarosuelBody: on('init', function() {
-    const carouselContainer = this.nearestWithProperty('isCarouselParentContainer');
-    this.set('_carouselContainer', carouselContainer);
+    set(this, '_carouselContainer', carouselContainer);
     carouselContainer.registerCarouselItem(this);
-    this.set('index', carouselContainer.get('totalCarouselItems') - 1);
+    set(this, 'index', get(carouselContainer, 'totalCarouselItems') - 1);
+  },
+
+  isActive: computed('_carouselContainer.carouselItems.[]', function() {
+    return this === get(this, '_carouselContainer.carouselItems.firstObject');
   })
 });

bower.json

@@ -2,7 +2,7 @@
   "name": "ember-carousel",
   "dependencies": {
     "ember": "~2.3.1",
-    "ember-cli-shims": "0.1.0",
+    "ember-cli-shims": "0.1.3",
     "ember-cli-test-loader": "0.2.2",
     "ember-qunit-notifications": "0.1.0"
   },

tests/dummy/app/templates/application.hbs

@@ -1,7 +1,7 @@
 <div class="demo-carousel">
   <h2 class="text-center"> Ember Carousel Addon </h2>
 
-  {{#carousel-container transition-interval=400}}
+  {{#carousel-container transitionInterval=400}}
     {{#carousel-body}}
       {{#carousel-item}}
         <img class="img-responsive" src="https://unsplash.imgix.net/photo-1428452932365-4e7e1c4b0987?dpr=2&fit=crop&fm=jpg&h=700&q=75&w=1050" />