From ab7c54f28151e5ae485881ec53ba22718ff4b449 Mon Sep 17 00:00:00 2001
From: Stuart Knightley
Date: Tue, 20 Mar 2012 09:32:21 -0700
Subject: Change Youtube channel transition to avoid rendering bug

---
 .../montage/ui/youtube-channel.reel/youtube-channel.html   | 14 +++++++++-----
 .../montage/ui/youtube-channel.reel/youtube-channel.js     |  4 ++--
 2 files changed, 11 insertions(+), 7 deletions(-)

(limited to 'node_modules/montage')

diff --git a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html
index 50286c22..a405fc7c 100644
--- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html
+++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html
@@ -58,9 +58,15 @@
             height: 90px;
             width: 120px;
             background-color: #000;
+            opacity: 1;
+
+            -webkit-transition: opacity 0.5s ease-in-out;
+        }
+        .montage-youtube-channel.show img {
+            opacity: 0;
         }
 
-        .montage-youtube-channel-popup {
+        .montage-youtube-channel .montage-youtube-channel-popup {
             width: 640px;
             border: 5px solid #000;
             border-radius: 5px;
@@ -74,13 +80,11 @@
 
             z-index: 9000;
 
-            -webkit-transform: scale3d(0, 0, 1);
             opacity: 0;
-            -webkit-transition: all 0.5s ease-in-out;
             visibility: hidden;
+            -webkit-transition: all 0.5s ease-in-out;
         }
-        .montage-youtube-channel-popup.show {
-            -webkit-transform: scale3d(1, 1, 1);
+        .montage-youtube-channel.show .montage-youtube-channel-popup {
             opacity: 1;
             visibility: visible;
         }
diff --git a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js
index 3d9f7f2f..ccbd9978 100644
--- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js
+++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js
@@ -133,7 +133,7 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
             }
 
             if (this._shouldShowPopup) {
-                this._popupElement.classList.add("show");
+                this._element.classList.add("show");
                 if (window.Touch) {
                     document.addEventListener('touchstart', this, false);
                 } else {
@@ -141,7 +141,7 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, {
                     document.addEventListener('keyup', this, false);
                 }
             } else {
-                this._popupElement.classList.remove("show");
+                this._element.classList.remove("show");
                 this.player.stop();
 
                 if (window.Touch) {
-- 
cgit v1.2.3


From 64f2a4b6c0ca9e47996ab9bcec05b51d1e1194e4 Mon Sep 17 00:00:00 2001
From: Kishore Subramanian
Date: Tue, 20 Mar 2012 09:42:29 -0700
Subject: Animation for the Feed reader

---
 .../examples/feed-reader/main.reel/main.html       | 42 ++++++++++++++++++++--
 .../feed-reader/feed-reader.reel/feed-reader.html  |  4 ++-
 .../ui/feed-reader/feed-reader.reel/feed-reader.js | 38 +++++++++++++++-----
 3 files changed, 71 insertions(+), 13 deletions(-)

(limited to 'node_modules/montage')

diff --git a/node_modules/montage/examples/feed-reader/main.reel/main.html b/node_modules/montage/examples/feed-reader/main.reel/main.html
index 50bac601..1313219f 100644
--- a/node_modules/montage/examples/feed-reader/main.reel/main.html
+++ b/node_modules/montage/examples/feed-reader/main.reel/main.html
@@ -45,8 +45,8 @@
         "name": "FeedReader",
         "properties": {
             "element": {"#": "feed-reader"},
-            "feedDisplayMode": "timed",
-            "interval": "5"
+            "feedDisplayMode": "animation",
+            "interval": "3"
         }
     },
     
@@ -170,6 +170,7 @@
             margin-top: 10px;
         }
         
+        
         /*
         .feed-reader .feed-entry {
             visibility:hidden;
@@ -182,7 +183,42 @@
             transition-delay:0s;
         }
         */
+        
+        @-webkit-keyframes rotateWithAlphaKeyframes {
+            0% {
+                    opacity: 0;
+                    -webkit-transform: perspective(1000) rotateY(95deg);
+            }
+            1% {
+                    opacity: 0;
+                    -webkit-transform: perspective(1000) rotateY(-90deg);
+            }
+            15% {
+                    opacity: 1;
+                    -webkit-transform: perspective(1000) rotateY(0deg);
+            }
+            85% {
+                    opacity: 1;
+                    -webkit-transform: perspective(1000) rotateY(0deg);
+            }
+            100% {
+                    opacity: 0;
+                    -webkit-transform: perspective(1000) rotateY(95deg);
+            }
+        }
+        
+        .rotateWithAlphaAnimation {
+                -webkit-animation-name: rotateWithAlphaKeyframes;
+                -webkit-animation-duration: 5s;
+                -webkit-animation-iteration-count: infinite;
+                -webkit-animation-direction: normal;
+                -webkit-animation-timing-function: ease-out;
+                -webkit-transform-origin: 200% 50%;
+                -webkit-transform-style: preserve-3d;
+                -webkit-transform: perspective(1000);
+        }
 
+    
     </style>
 
 
@@ -201,7 +237,7 @@
                         <input type="button" id="btn-go" class="btn primary" value="OK"></button>
                     </form>
                 </div>
-                <div class="feed-reader" id="feed-reader"></div>
+                <div class="feed-reader rotateWithAlphaAnimation" id="feed-reader" ></div>
             </section>
             
             <section class="map-container">
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();
         }
     },
     
-- 
cgit v1.2.3


From 54a8b7c30ab8ca909b71ef15b9c89cb940b77022 Mon Sep 17 00:00:00 2001
From: Kishore Subramanian
Date: Tue, 20 Mar 2012 14:01:07 -0700
Subject: Reset the animation event handlers/timer when the display mode
 changes.

---
 .../ui/feed-reader/feed-reader.reel/feed-reader.js | 61 +++++++++++-----------
 1 file changed, 31 insertions(+), 30 deletions(-)

(limited to 'node_modules/montage')

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 49ce6523..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);
@@ -100,43 +104,40 @@ exports.FeedReader = Montage.create(Component, {
                 if(result.error) {
                     self.entries = [];
                 } else {
-                    //console.log('entries: ', result.feed.entries);   
-                    self.addEntryAnimation();                 
+                    //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('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) {                
+            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);
@@ -144,34 +145,34 @@ exports.FeedReader = Montage.create(Component, {
             }
         }
     },
-    
+
     handleWebkitAnimationStart: {
         value: function() {
             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() {
         }
     },
-    
+
     draw: {
         value: function() {
-            
+
         }
     }
 
-- 
cgit v1.2.3