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-entry.reel/feed-entry.js | 10 +- .../feed-reader/feed-reader.reel/feed-reader.html | 38 +----- .../ui/feed-reader/feed-reader.reel/feed-reader.js | 127 ++++++++++++--------- node_modules/montage/ui/map.reel/map.js | 29 ++++- 4 files changed, 118 insertions(+), 86 deletions(-) (limited to 'node_modules/montage/ui') diff --git a/node_modules/montage/ui/feed-reader/feed-entry.reel/feed-entry.js b/node_modules/montage/ui/feed-reader/feed-entry.reel/feed-entry.js index 3d97eec7..72c5023e 100644 --- a/node_modules/montage/ui/feed-reader/feed-entry.reel/feed-entry.js +++ b/node_modules/montage/ui/feed-reader/feed-entry.reel/feed-entry.js @@ -8,6 +8,14 @@ var Montage = require("montage").Montage, exports.FeedEntry = Montage.create(Component, { - entry: {value: null} + _entry: {value: null}, + entry: { + get: function() { + return this._entry; + }, + set: function(value) { + this._entry = value; + } + } }); 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 646fd01e..e5251e0a 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 @@ -23,17 +23,7 @@ } } }, - - "repetition": { - "module": "montage/ui/repetition.reel", - "name": "Repetition", - "properties": { - "element": {"#": "entries"}, - "contentController": {"@": "entriesController"}, - "isSelectionEnabled": true, - "orientation": "vertical" - } - }, + "feedEntry": { "module": "montage/ui/feed-reader/feed-entry.reel", "name": "FeedEntry", @@ -42,27 +32,19 @@ }, "bindings": { "entry": { - "boundObject": {"@": "repetition"}, - "boundObjectPropertyPath": "objectAtCurrentIteration", + "boundObject": {"@": "owner"}, + "boundObjectPropertyPath": "activeFeedEntry", "oneway": true } - } + } }, "owner": { "module": "montage/ui/feed-reader/feed-reader.reel", "name": "FeedReader", "properties": { - "element": {"#": "feed-reader"}, - "repetition": {"@": "repetition"} - }, - "bindings": { - "items": { - "boundObject": {"@": "repetition"}, - "boundObjectPropertyPath": "objects", - "oneway": true - } - } + "element": {"#": "feed-reader"} + } } } @@ -74,16 +56,8 @@ } .feed-entry { - display: none; - } - - .montage-hidden { - display: none; } - .active { - display: block; - } 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() { + + } } }); diff --git a/node_modules/montage/ui/map.reel/map.js b/node_modules/montage/ui/map.reel/map.js index 305ae181..42af218e 100644 --- a/node_modules/montage/ui/map.reel/map.js +++ b/node_modules/montage/ui/map.reel/map.js @@ -114,6 +114,21 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/ } }, + trafficLayer: {value: null}, + _traffic: {value: null}, + traffic: { + get: function() { + return this._traffic; + }, + set: function(value) { + if(value !== this._traffic) { + this._traffic = value; + this.needsDraw = true; + } + } + }, + + zoomValue: { value: 8 }, @@ -239,7 +254,7 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/ this._map = new window.google.maps.Map(this.mapEl, myOptions); } else { var map = this._map; - map.setZoom(12); + map.setZoom(10); var latLng = new window.google.maps.LatLng(latLng.lat, latLng.lng); map.setCenter(latLng); var marker = new google.maps.Marker({ @@ -249,11 +264,21 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/ var places = this._places; if(places && places.length > 0) { + map.setZoom(13); this._removeAllMarkers(); for (var i = 0; i < places.length; i++) { this._createMarker(places[i]); } - } + } + + if(this.traffic === true) { + this.trafficLayer = new google.maps.TrafficLayer(); + this.trafficLayer.setMap(map); + } else { + if(this.trafficLayer) { + this.trafficLayer.setMap(null); + } + } } } -- cgit v1.2.3