1276stella · November 30, 2018 02:48 · Nov 30, 2018 · Nov 28, 2018 · Nov 28, 2018 · Nov 22, 2018
diff --git a/components.collection-carousel.js b/components.collection-carousel.js
@@ -10,7 +10,9 @@ export default Ember.Component.extend({
     console.log('currentCardIndex', currentCardIndex);     
     console.log('items', items);
 
-
+    if (!items || items.length === 0 || currentCardIndex >= items.length) {
+      return;
+    }
   	return items[currentCardIndex];
   }),
 
@@ -28,7 +30,7 @@ export default Ember.Component.extend({
       if (items.length > 1 && currentCardIndex === items.length - 1) {
         this.decrementProperty('currentCardIndex');
       }     
-      this.get("items").removeAt(currentCardIndex);
+      items.removeAt(currentCardIndex);
     }
   },
 

diff --git a/components.collection-carousel.js b/components.collection-carousel.js
@@ -6,26 +6,28 @@ export default Ember.Component.extend({
   currentCard: Ember.computed('currentCardIndex', 'items.length', function getCurrentCard() {
     const items = this.get('items');
     const currentCardIndex = this.get('currentCardIndex');
-    if (!items || currentCardIndex >= items.length) {
-      return;
-    }
+
+    console.log('currentCardIndex', currentCardIndex);     
+    console.log('items', items);
+
+
   	return items[currentCardIndex];
   }),
 
   actions: {
   	nextCard() {
-      console.log('next');
     	this.set('currentCardIndex', this._getNextCard());
     },
   	prevCard() {
-      console.log('prev');      
     	this.set('currentCardIndex', this._getPrevCard());
     },
     removeCard() {
-      console.log()
+      const items = this.get('items');      
 			const currentCardIndex = this.get('currentCardIndex');
-      console.log('items', this.get("items"));
-      console.log('currentCardIndex', currentCardIndex);
+
+      if (items.length > 1 && currentCardIndex === items.length - 1) {
+        this.decrementProperty('currentCardIndex');
+      }     
       this.get("items").removeAt(currentCardIndex);
     }
   },

diff --git a/components.collection-carousel.js b/components.collection-carousel.js
@@ -3,8 +3,13 @@ import Ember from 'ember';
 export default Ember.Component.extend({
   currentCardIndex: 0,
 
-  currentCard: Ember.computed('currentCardIndex', function getCurrentCard() {
-  	return this.get('items')[this.get('currentCardIndex')];
+  currentCard: Ember.computed('currentCardIndex', 'items.length', function getCurrentCard() {
+    const items = this.get('items');
+    const currentCardIndex = this.get('currentCardIndex');
+    if (!items || currentCardIndex >= items.length) {
+      return;
+    }
+  	return items[currentCardIndex];
   }),
 
   actions: {
@@ -15,7 +20,14 @@ export default Ember.Component.extend({
   	prevCard() {
       console.log('prev');      
     	this.set('currentCardIndex', this._getPrevCard());
-    },    
+    },
+    removeCard() {
+      console.log()
+			const currentCardIndex = this.get('currentCardIndex');
+      console.log('items', this.get("items"));
+      console.log('currentCardIndex', currentCardIndex);
+      this.get("items").removeAt(currentCardIndex);
+    }
   },
 
   _getNextCard() {

diff --git a/templates.application.hbs b/templates.application.hbs
@@ -2,10 +2,12 @@
 
 {{#collection-carousel
 	items=cards
-  as |card prevCard nextCard|
+  as |card prevCard nextCard removeCard|
 }}
  {{card.title}}
  {{card.subtitle}}
+ <br>
  <button {{action prevCard}}>Prev</button>
- <button {{action nextCard}}>Next</button> 
+ <button {{action nextCard}}>Next</button>
+ <button {{action removeCard}}>Dismiss</button> 
 {{/collection-carousel}}
diff --git a/templates.components.collection-carousel.hbs b/templates.components.collection-carousel.hbs
@@ -1,5 +1,6 @@
 {{yield
 	currentCard
   (action "prevCard")
-  (action "nextCard")  
+  (action "nextCard")
+  (action "removeCard")  
  }}
diff --git a/components.collection-carousel.js b/components.collection-carousel.js
@@ -0,0 +1,31 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  currentCardIndex: 0,
+
+  currentCard: Ember.computed('currentCardIndex', function getCurrentCard() {
+  	return this.get('items')[this.get('currentCardIndex')];
+  }),
+
+  actions: {
+  	nextCard() {
+      console.log('next');
+    	this.set('currentCardIndex', this._getNextCard());
+    },
+  	prevCard() {
+      console.log('prev');      
+    	this.set('currentCardIndex', this._getPrevCard());
+    },    
+  },
+
+  _getNextCard() {
+  	const maxIndex = this.get('items.length');
+		const currentCardIndex = this.get('currentCardIndex');
+    return (currentCardIndex + 1) % maxIndex;
+  },
+  _getPrevCard() {
+  	const maxIndex = this.get('items.length');
+		const currentCardIndex = this.get('currentCardIndex');
+    return (currentCardIndex + maxIndex - 1) % maxIndex;
+  }  
+});
diff --git a/controllers.application.js b/controllers.application.js
@@ -0,0 +1,22 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  appName: 'Ember Twiddle',
+
+  init() {
+    this.set('cards', [
+      {
+        title: 'Card 1',
+        subtitle: 'Composition in Ember is great',
+      },
+      {
+        title: 'Card 2',
+        subtitle: 'It makes components small and reusable',
+      }, 
+      {
+        title: 'Card 3',
+        subtitle: 'Not sure...',
+      }    
+    ]);
+  }
+});
diff --git a/templates.application.hbs b/templates.application.hbs
@@ -0,0 +1,11 @@
+<h1>Welcome to {{appName}}</h1>
+
+{{#collection-carousel
+	items=cards
+  as |card prevCard nextCard|
+}}
+ {{card.title}}
+ {{card.subtitle}}
+ <button {{action prevCard}}>Prev</button>
+ <button {{action nextCard}}>Next</button> 
+{{/collection-carousel}}
diff --git a/templates.components.collection-carousel.hbs b/templates.components.collection-carousel.hbs
@@ -0,0 +1,5 @@
+{{yield
+	currentCard
+  (action "prevCard")
+  (action "nextCard")  
+ }}
diff --git a/twiddle.json b/twiddle.json
@@ -0,0 +1,19 @@
+{
+  "version": "0.15.1",
+  "EmberENV": {
+    "FEATURES": {}
+  },
+  "options": {
+    "use_pods": false,
+    "enable-testing": false
+  },
+  "dependencies": {
+    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
+    "ember": "3.4.3",
+    "ember-template-compiler": "3.4.3",
+    "ember-testing": "3.4.3"
+  },
+  "addons": {
+    "ember-data": "3.4.2"
+  }
+}