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---
.../examples/feed-reader/main.reel/main.html | 32 +++++-
.../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 ++++-
5 files changed, 148 insertions(+), 88 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 ef4fc92a..50bac601 100644
--- a/node_modules/montage/examples/feed-reader/main.reel/main.html
+++ b/node_modules/montage/examples/feed-reader/main.reel/main.html
@@ -44,7 +44,9 @@
"module": "montage/ui/feed-reader/feed-reader.reel",
"name": "FeedReader",
"properties": {
- "element": {"#": "feed-reader"}
+ "element": {"#": "feed-reader"},
+ "feedDisplayMode": "timed",
+ "interval": "5"
}
},
@@ -76,7 +78,14 @@
"map": {
"prototype": "montage/ui/map.reel",
"properties": {
- "element": {"#": "map"}
+ "element": {"#": "map"},
+ "traffic": false
+ },
+ "bindings": {
+ "traffic": {
+ "boundObject": {"@": "traffic"},
+ "boundObjectPropertyPath": "checked"
+ }
}
},
@@ -86,6 +95,12 @@
"element": {"#": "types"}
}
},
+ "traffic": {
+ "prototype": "montage/ui/checkbox.reel",
+ "properties": {
+ "element": {"#": "traffic"}
+ }
+ },
"owner": {
"module": "main.reel",
@@ -155,6 +170,18 @@
margin-top: 10px;
}
+ /*
+ .feed-reader .feed-entry {
+ visibility:hidden;
+ opacity:0;
+ transition:visibility 0s linear 0.5s,opacity 0.5s linear;
+ }
+ .feed-reader .feed-entry .active {
+ visibility:visible;
+ opacity:1;
+ transition-delay:0s;
+ }
+ */
@@ -194,6 +221,7 @@
+ Show Traffic
Map
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