Animation for the Feed reader

2 files changed, 32 insertions, 10 deletions

diff --git a/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html
index e5251e0a..21f3d4ee 100644
--- a/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html
+++ b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html
@@ -52,7 +52,9 @@
 
     <style>
        div.feed-reader  {
-           padding: 10px;          
+           padding: 10px; 
+           height: 250px;
+           width: 350px;        
        }
        
        .feed-entry {
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..49ce6523 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
@@ -96,11 +96,12 @@ 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;
                 }
@@ -113,8 +114,14 @@ exports.FeedReader = Montage.create(Component, {
     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                
                 this.feedEntryTimer = setInterval(function() {
@@ -127,7 +134,9 @@ exports.FeedReader = Montage.create(Component, {
     removeEntryAnimation: {
         value: function() {
             if("animation" == this.feedDisplayMode) {                
-                this.element.removeEventListener('animationend', this);
+                this.element.removeEventListener('webkitAnimationStart', this);
+                this.element.removeEventListener('webkitAnimationIteration', this);
+                this.element.removeEventListener('webkitAnimationEnd', this);
             } else {
                 if(this.feedEntryTimer) {
                     window.clearInterval(this.feedEntryTimer);
@@ -136,16 +145,27 @@ 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();
         }
     },