From 1d0efc758bc9404eebbc8b8d592de9dbb329899e Mon Sep 17 00:00:00 2001 From: François Frisch Date: Sat, 17 Mar 2012 11:21:22 -0700 Subject: Adding feed reader and map --- .../ui/feed-reader/feed-reader.reel/feed-reader.js | 82 ++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js (limited to 'node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js') 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 new file mode 100644 index 00000000..838a957d --- /dev/null +++ b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js @@ -0,0 +1,82 @@ +/* + This file contains proprietary software owned by Motorola Mobility, Inc.
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ +var Montage = require("montage").Montage, + Component = require("ui/component").Component; + //Notifier = require("ui/popup/notifier.reel").Notifier; + +exports.FeedReader = Montage.create(Component, { + + didCreate: { + value: function() { + var self = this; + var apiInit = function() { + console.log('google api initialized'); + + google.load("feeds", "1", { + callback: function() { + console.log('google feeds api loaded'); + self.needsDraw = true; + window.initGoogleAPI = null; + } + }); + }; + + // set up a global function + window.initGoogleAPI = apiInit; + } + }, + + _feedURL: {value: null}, + feedURL: { + get: function() { + return this._feedURL; + }, + set: function(value) { + this._feedURL = value; + // execute the search and get the entries + this._fetchFeed(); + } + }, + + entries: {value: null}, + + + _startLoading: { + value: function() { + //Notifier.show('Loading ... please wait', null, {top: this.element.style.top, left: this.element.style.left + 20}); + } + }, + + _stopLoading: { + value: function() { + //Notifier.hide(); + } + }, + + _fetchFeed: { + value: function() { + var url = this.feedURL; + var feed = new google.feeds.Feed(url); + feed.setNumEntries(10); + + var self = this; + + this._startLoading(); + self.entries = []; + + feed.load(function(result) { + self._stopLoading(); + if(result.error) { + self.entries = []; + } else { + //console.log('entries: ', result.feed.entries); + self.entries = result.feed.entries; + } + }); + } + } + +}); -- cgit v1.2.3 From 9d364be255900e9bde02c4b254d145ec41fc78fb Mon Sep 17 00:00:00 2001 From: Kishore Subramanian Date: Mon, 19 Mar 2012 10:36:49 -0700 Subject: Changes to the Demo - Feed Reader now shows one entry at a time - Category dropdown removed form the Map. It is included as part of the example code - Changed the categories that do not return results --- .../ui/feed-reader/feed-reader.reel/feed-reader.js | 51 ++++++++++++++++++++++ 1 file changed, 51 insertions(+) (limited to 'node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js') 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 838a957d..d5c9ca17 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,7 +40,13 @@ exports.FeedReader = Montage.create(Component, { this._fetchFeed(); } }, + + // time in ms between slides + interval: {value: 3000, distinct: true}, + + repetition: {enumerable: false, value: null}, + maxEntries: {value: 10, distinct: true}, entries: {value: null}, @@ -55,6 +61,51 @@ exports.FeedReader = Montage.create(Component, { //Notifier.hide(); } }, + + + feedEntryTimer: {enumerable: false, value: null}, + _items: { + value: null + }, + items: { + get: function() { + return this._items; + }, + set: function(value) { + this._items = value; + // reset the counter + console.log('got items'); + this.activeIndex = 0; + + if(this.feedEntryTimer) { + window.clearInterval(this.feedEntryTimer); + } + var self = this, maxEntries = self.maxEntries; + + this.feedEntryTimer = setInterval(function() { + var index = self.activeIndex + 1; + if(index > maxEntries) { + index = 0; + } + if(index < 0) { + index = 0; + } + self.activeIndex = index; + + }, this.interval); + } + }, + + _activeIndex: {value: null}, + activeIndex: { + get: function() { + return this._activeIndex || 0; + }, + set: function(value) { + this._activeIndex = value; + this.repetition.activeIndexes = [value]; + } + }, _fetchFeed: { value: function() { -- cgit v1.2.3 From ec58642a7b31165890eb5bef7d95ce59dd0c34a0 Mon Sep 17 00:00:00 2001 From: Kishore Subramanian Date: Mon, 19 Mar 2012 14:14:29 -0700 Subject: Changes to Map and FeedReader - Added traffic property to Map - Support for show/hide traffic in the example - Changed FeedReader to use only one DIV. No longer uses Repetition - Support multiple modes in the Feed reader - timed/animated--- .../ui/feed-reader/feed-reader.reel/feed-reader.js | 127 ++++++++++++--------- 1 file changed, 76 insertions(+), 51 deletions(-) (limited to 'node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js') 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 d5c9ca17..8fd9ae22 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 @@ -42,92 +42,117 @@ exports.FeedReader = Montage.create(Component, { }, // time in ms between slides - interval: {value: 3000, distinct: true}, - - repetition: {enumerable: false, value: null}, + interval: {value: 3, distinct: true}, maxEntries: {value: 10, distinct: true}, - entries: {value: null}, - - - _startLoading: { - value: function() { - //Notifier.show('Loading ... please wait', null, {top: this.element.style.top, left: this.element.style.left + 20}); - } - }, - - _stopLoading: { - value: function() { - //Notifier.hide(); - } - }, + entries: {value: null}, - feedEntryTimer: {enumerable: false, value: null}, - _items: { - value: null - }, - items: { + _feedDisplayMode: {value: null}, + feedDisplayMode: { get: function() { - return this._items; + return this._feedDisplayMode; }, set: function(value) { - this._items = value; - // reset the counter - console.log('got items'); - this.activeIndex = 0; - - if(this.feedEntryTimer) { - window.clearInterval(this.feedEntryTimer); - } - var self = this, maxEntries = self.maxEntries; - - this.feedEntryTimer = setInterval(function() { - var index = self.activeIndex + 1; - if(index > maxEntries) { - index = 0; - } - if(index < 0) { - index = 0; - } - self.activeIndex = index; - - }, this.interval); + this._feedDisplayMode = value; } }, + + feedEntryTimer: {enumerable: false, value: null}, + + + activeFeedEntry: {value: null}, _activeIndex: {value: null}, activeIndex: { get: function() { return this._activeIndex || 0; }, - set: function(value) { - this._activeIndex = value; - this.repetition.activeIndexes = [value]; + set: function(index) { + if(this.entries) { + var max = this.entries.length-1; + if(index > max) { + index = 0; + } + if(index < 0) { + index = 0; + } + 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); var self = this; - - this._startLoading(); self.entries = []; feed.load(function(result) { - self._stopLoading(); + //self.removeEntryAnimation(); if(result.error) { self.entries = []; } else { - //console.log('entries: ', result.feed.entries); + //console.log('entries: ', result.feed.entries); self.entries = result.feed.entries; + this._activeIndex = 0; } + + }); } + }, + + addEntryAnimation: { + value: function() { + var self = this; + if("animation" == this.feedDisplayMode) { + this.element.addEventListener('animationend', this); + } else { + // 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); + } else { + if(this.feedEntryTimer) { + window.clearInterval(this.feedEntryTimer); + } + } + } + }, + + handleAnimationend: { + value: function() { + console.log('animation end'); + this.activeIndex = this.activeIndex + 1; + } + }, + + prepareForDraw: { + value: function() { + this.addEntryAnimation(); + } + }, + + draw: { + value: function() { + + } } }); -- 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 --- .../ui/feed-reader/feed-reader.reel/feed-reader.js | 38 +++++++++++++++++----- 1 file changed, 29 insertions(+), 9 deletions(-) (limited to 'node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js') 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/ui/feed-reader/feed-reader.reel/feed-reader.js') 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 From be136337cd6d3f98ebae16c7f71fdc9fa1702e7e Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Tue, 20 Mar 2012 16:15:09 -0700 Subject: Feed Reader - Fix reference closure'd "this" --- node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js') 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 0d5d7bb1..cc652417 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 @@ -107,7 +107,8 @@ exports.FeedReader = Montage.create(Component, { //console.log('entries: ', result.feed.entries); self.addEntryAnimation(); self.entries = result.feed.entries; - this._activeIndex = 0; + self.activeIndex = 0; + } -- cgit v1.2.3