1 files changed, 52 insertions, 31 deletions

diff --git a/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js
index 8fd9ae22..0d5d7bb1 100644
--- a/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js
+++ b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js
@@ -40,35 +40,39 @@ exports.FeedReader = Montage.create(Component, {
             this._fetchFeed();
         }
     },
-    
+
     // time in ms between slides
     interval: {value: 3, distinct: true},
 
     maxEntries: {value: 10, distinct: true},
-    
+
     entries: {value: null},
-    
+
     _feedDisplayMode: {value: null},
     feedDisplayMode: {
         get: function() {
             return this._feedDisplayMode;
         },
         set: function(value) {
-            this._feedDisplayMode = value;            
+
+            this.removeEntryAnimation();
+            this._feedDisplayMode = value;
+
+            this.addEntryAnimation();
         }
     },
-    
-    
+
+
     feedEntryTimer: {enumerable: false, value: null},
 
-    
+
     activeFeedEntry: {value: null},
     _activeIndex: {value: null},
     activeIndex: {
         get: function() {
             return this._activeIndex || 0;
         },
-        set: function(index) {                       
+        set: function(index) {
             if(this.entries) {
                 var max = this.entries.length-1;
                 if(index > max) {
@@ -77,17 +81,17 @@ exports.FeedReader = Montage.create(Component, {
                 if(index < 0) {
                     index = 0;
                 }
-                this._activeIndex = index;  
-                this.activeFeedEntry = this.entries[this._activeIndex];                             
+                this._activeIndex = index;
+                this.activeFeedEntry = this.entries[this._activeIndex];
             } else {
                 this._activeIndex = 0;
-            }            
+            }
         }
     },
 
     _fetchFeed: {
         value: function() {
-            
+
             var url = this.feedURL;
             var feed = new google.feeds.Feed(url);
             feed.setNumEntries(10);
@@ -96,38 +100,44 @@ exports.FeedReader = Montage.create(Component, {
             self.entries = [];
 
             feed.load(function(result) {
-                //self.removeEntryAnimation();
+                self.removeEntryAnimation();
                 if(result.error) {
                     self.entries = [];
                 } else {
-                    //console.log('entries: ', result.feed.entries);                    
+                    //console.log('entries: ', result.feed.entries);
+                    self.addEntryAnimation();
                     self.entries = result.feed.entries;
                     this._activeIndex = 0;
                 }
-                
-                
+
+
             });
         }
     },
-    
+
     addEntryAnimation: {
         value: function() {
             var self = this;
-            if("animation" == this.feedDisplayMode) {                
-                this.element.addEventListener('animationend', this);
+            if("animation" == this.feedDisplayMode) {
+                this.element.addEventListener('webkitAnimationStart', this);
+                this.element.addEventListener('webkitAnimationIteration', this);
+                this.element.addEventListener('webkitAnimationEnd', this);
             } else {
-                // timer                
+                // timer
                 this.feedEntryTimer = setInterval(function() {
                     self.activeIndex = self.activeIndex + 1;
                 }, (this.interval * 1000));
             }
         }
     },
-    
+
     removeEntryAnimation: {
         value: function() {
-            if("animation" == this.feedDisplayMode) {                
-                this.element.removeEventListener('animationend', this);
+            if("animation" == this.feedDisplayMode) {
+                this.element.removeEventListener('webkitAnimationStart', this);
+                this.element.removeEventListener('webkitAnimationIteration', this);
+                this.element.removeEventListener('webkitAnimationEnd', this);
+
             } else {
                 if(this.feedEntryTimer) {
                     window.clearInterval(this.feedEntryTimer);
@@ -135,23 +145,34 @@ exports.FeedReader = Montage.create(Component, {
             }
         }
     },
-    
-    handleAnimationend: {
+
+    handleWebkitAnimationStart: {
         value: function() {
-            console.log('animation end');
-            this.activeIndex = this.activeIndex + 1;
+            console.log('animation start');
         }
     },
-    
+
+    handleWebkitAnimationIteration: {
+        value: function() {
+           console.log('animation iteration');
+           this.activeIndex = this.activeIndex + 1;
+       }
+   },
+
+   handleWebkitAnimationEnd: {
+       value: function() {
+           console.log('animation end');
+       }
+    },
+
     prepareForDraw: {
         value: function() {
-            this.addEntryAnimation();
         }
     },
-    
+
     draw: {
         value: function() {
-            
+
         }
     }