aboutsummaryrefslogtreecommitdiff
path: root/node_modules/montage
diff options
context:
space:
mode:
authorKishore Subramanian2012-03-20 09:42:29 -0700
committerKishore Subramanian2012-03-20 09:43:13 -0700
commit64f2a4b6c0ca9e47996ab9bcec05b51d1e1194e4 (patch)
tree9bf6bc42f6a2bacc14f886d5a5c231cec1656eac /node_modules/montage
parentab7c54f28151e5ae485881ec53ba22718ff4b449 (diff)
downloadninja-64f2a4b6c0ca9e47996ab9bcec05b51d1e1194e4.tar.gz
Animation for the Feed reader
Diffstat (limited to 'node_modules/montage')
-rw-r--r--node_modules/montage/examples/feed-reader/main.reel/main.html42
-rw-r--r--node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html4
-rw-r--r--node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js38
3 files changed, 71 insertions, 13 deletions
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 @@
45 "name": "FeedReader", 45 "name": "FeedReader",
46 "properties": { 46 "properties": {
47 "element": {"#": "feed-reader"}, 47 "element": {"#": "feed-reader"},
48 "feedDisplayMode": "timed", 48 "feedDisplayMode": "animation",
49 "interval": "5" 49 "interval": "3"
50 } 50 }
51 }, 51 },
52 52
@@ -170,6 +170,7 @@
170 margin-top: 10px; 170 margin-top: 10px;
171 } 171 }
172 172
173
173 /* 174 /*
174 .feed-reader .feed-entry { 175 .feed-reader .feed-entry {
175 visibility:hidden; 176 visibility:hidden;
@@ -182,7 +183,42 @@
182 transition-delay:0s; 183 transition-delay:0s;
183 } 184 }
184 */ 185 */
186
187 @-webkit-keyframes rotateWithAlphaKeyframes {
188 0% {
189 opacity: 0;
190 -webkit-transform: perspective(1000) rotateY(95deg);
191 }
192 1% {
193 opacity: 0;
194 -webkit-transform: perspective(1000) rotateY(-90deg);
195 }
196 15% {
197 opacity: 1;
198 -webkit-transform: perspective(1000) rotateY(0deg);
199 }
200 85% {
201 opacity: 1;
202 -webkit-transform: perspective(1000) rotateY(0deg);
203 }
204 100% {
205 opacity: 0;
206 -webkit-transform: perspective(1000) rotateY(95deg);
207 }
208 }
209
210 .rotateWithAlphaAnimation {
211 -webkit-animation-name: rotateWithAlphaKeyframes;
212 -webkit-animation-duration: 5s;
213 -webkit-animation-iteration-count: infinite;
214 -webkit-animation-direction: normal;
215 -webkit-animation-timing-function: ease-out;
216 -webkit-transform-origin: 200% 50%;
217 -webkit-transform-style: preserve-3d;
218 -webkit-transform: perspective(1000);
219 }
185 220
221
186 </style> 222 </style>
187 223
188 224
@@ -201,7 +237,7 @@
201 <input type="button" id="btn-go" class="btn primary" value="OK"></button> 237 <input type="button" id="btn-go" class="btn primary" value="OK"></button>
202 </form> 238 </form>
203 </div> 239 </div>
204 <div class="feed-reader" id="feed-reader"></div> 240 <div class="feed-reader rotateWithAlphaAnimation" id="feed-reader" ></div>
205 </section> 241 </section>
206 242
207 <section class="map-container"> 243 <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 @@
52 52
53 <style> 53 <style>
54 div.feed-reader { 54 div.feed-reader {
55 padding: 10px; 55 padding: 10px;
56 height: 250px;
57 width: 350px;
56 } 58 }
57 59
58 .feed-entry { 60 .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, {
96 self.entries = []; 96 self.entries = [];
97 97
98 feed.load(function(result) { 98 feed.load(function(result) {
99 //self.removeEntryAnimation(); 99 self.removeEntryAnimation();
100 if(result.error) { 100 if(result.error) {
101 self.entries = []; 101 self.entries = [];
102 } else { 102 } else {
103 //console.log('entries: ', result.feed.entries); 103 //console.log('entries: ', result.feed.entries);
104 self.addEntryAnimation();
104 self.entries = result.feed.entries; 105 self.entries = result.feed.entries;
105 this._activeIndex = 0; 106 this._activeIndex = 0;
106 } 107 }
@@ -113,8 +114,14 @@ exports.FeedReader = Montage.create(Component, {
113 addEntryAnimation: { 114 addEntryAnimation: {
114 value: function() { 115 value: function() {
115 var self = this; 116 var self = this;
116 if("animation" == this.feedDisplayMode) { 117 if("animation" == this.feedDisplayMode) {
117 this.element.addEventListener('animationend', this); 118
119 this.element.addEventListener('webkitAnimationStart', this);
120 this.element.addEventListener('webkitAnimationIteration', this);
121 this.element.addEventListener('webkitAnimationEnd', this);
122
123
124
118 } else { 125 } else {
119 // timer 126 // timer
120 this.feedEntryTimer = setInterval(function() { 127 this.feedEntryTimer = setInterval(function() {
@@ -127,7 +134,9 @@ exports.FeedReader = Montage.create(Component, {
127 removeEntryAnimation: { 134 removeEntryAnimation: {
128 value: function() { 135 value: function() {
129 if("animation" == this.feedDisplayMode) { 136 if("animation" == this.feedDisplayMode) {
130 this.element.removeEventListener('animationend', this); 137 this.element.removeEventListener('webkitAnimationStart', this);
138 this.element.removeEventListener('webkitAnimationIteration', this);
139 this.element.removeEventListener('webkitAnimationEnd', this);
131 } else { 140 } else {
132 if(this.feedEntryTimer) { 141 if(this.feedEntryTimer) {
133 window.clearInterval(this.feedEntryTimer); 142 window.clearInterval(this.feedEntryTimer);
@@ -136,16 +145,27 @@ exports.FeedReader = Montage.create(Component, {
136 } 145 }
137 }, 146 },
138 147
139 handleAnimationend: { 148 handleWebkitAnimationStart: {
140 value: function() { 149 value: function() {
141 console.log('animation end'); 150 console.log('animation start');
142 this.activeIndex = this.activeIndex + 1;
143 } 151 }
144 }, 152 },
145 153
154 handleWebkitAnimationIteration: {
155 value: function() {
156 console.log('animation iteration');
157 this.activeIndex = this.activeIndex + 1;
158 }
159 },
160
161 handleWebkitAnimationEnd: {
162 value: function() {
163 console.log('animation end');
164 }
165 },
166
146 prepareForDraw: { 167 prepareForDraw: {
147 value: function() { 168 value: function() {
148 this.addEntryAnimation();
149 } 169 }
150 }, 170 },
151 171