From 54eb5672a5f43fb157aa7ecb88b0ba8a06296b86 Mon Sep 17 00:00:00 2001 From: François Frisch Date: Sun, 18 Mar 2012 22:25:35 -0700 Subject: using channel name rather than url --- .../montage/examples/youtube-channel-example/index.html | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) (limited to 'node_modules/montage') diff --git a/node_modules/montage/examples/youtube-channel-example/index.html b/node_modules/montage/examples/youtube-channel-example/index.html index b313d5d8..f3a0592a 100755 --- a/node_modules/montage/examples/youtube-channel-example/index.html +++ b/node_modules/montage/examples/youtube-channel-example/index.html @@ -14,7 +14,8 @@ "player": { "prototype": "montage/ui/youtube-channel.reel", "properties": { - "element": {"#": "player"} + "element": {"#": "player"}, + "channel": "drive" } }, @@ -23,12 +24,6 @@ "properties": { "element": {"#": "url"}, "value": "http://www.youtube.com/TEDEducation" - }, - "bindings": { - "value": { - "boundObject": {"@": "player"}, - "boundObjectPropertyPath": "channelUrl" - } } } } @@ -37,7 +32,7 @@
Youtube Channel
- +
-- cgit v1.2.3 From 222562c734396403c18c90a1ca395a36c4d49da4 Mon Sep 17 00:00:00 2001 From: François Frisch Date: Mon, 19 Mar 2012 09:21:15 -0700 Subject: Youtube appending script in draw --- .../ui/youtube-channel.reel/youtube-channel.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) (limited to 'node_modules/montage') 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 fd642290..3e20c406 100644 --- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js +++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js @@ -77,9 +77,22 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { // create url var url = "http://gdata.youtube.com/feeds/api/users/" + this._channel + "/uploads?v=2&alt=json-in-script&callback=" + callbackName; - var script = document.createElement("script"); - script.src = url; - this._element.appendChild(script); + this.script = document.createElement("script"); + this.script.src = url; + this.needsDraw = true; + } + }, + + script: { + value: null + }, + + draw: { + value: function() { + if (this.script) { + this._element.appendChild(this.script); + this.script = null; + } } }, -- cgit v1.2.3 From eb5cda3ce03b35c3335b91c34ead0cdf290b243e Mon Sep 17 00:00:00 2001 From: Stuart Knightley Date: Mon, 19 Mar 2012 09:46:38 -0700 Subject: Update Youtube player to HTML5 --- .../ui/youtube-player.reel/youtube-player.html | 10 ++---- .../ui/youtube-player.reel/youtube-player.js | 38 ++++++++++++---------- 2 files changed, 24 insertions(+), 24 deletions(-) (limited to 'node_modules/montage') diff --git a/node_modules/montage/ui/youtube-player.reel/youtube-player.html b/node_modules/montage/ui/youtube-player.reel/youtube-player.html index ae757626..ec61493c 100644 --- a/node_modules/montage/ui/youtube-player.reel/youtube-player.html +++ b/node_modules/montage/ui/youtube-player.reel/youtube-player.html @@ -7,23 +7,19 @@ + -
- - - -
+ ​ diff --git a/node_modules/montage/ui/youtube-player.reel/youtube-player.js b/node_modules/montage/ui/youtube-player.reel/youtube-player.js index 2f7709d7..462dca58 100644 --- a/node_modules/montage/ui/youtube-player.reel/youtube-player.js +++ b/node_modules/montage/ui/youtube-player.reel/youtube-player.js @@ -1,10 +1,9 @@ -//data="https://www.youtube.com/v/u1zgFlCw8Aw?version=3&enablejsapi=1&playerapiid=ytplayer" /* 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. */ -/*global require,exports*/ +/*global require,exports,YT */ var Montage = require("montage").Montage, Component = require("ui/component").Component; @@ -31,7 +30,6 @@ var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, { return this._player; }, set: function(value) { - // TODO don't allow this to be changed if (this._player !== value) { this._player = value; } @@ -127,30 +125,36 @@ var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, { value: function() { // Create the callback if it doesn't exist, and make it dispatch // an event on the document instead - if (!window.onYouTubePlayerReady) { - window.onYouTubePlayerReady = function(playerId) { + if (!window.onYouTubePlayerAPIReady) { + window.onYouTubePlayerAPIReady = function() { var event = document.createEvent("CustomEvent"); - event.initEvent("youtubePlayerReady", true, true); - event.playerId = playerId; + event.initEvent("youtubePlayerApiReady", true, true); document.dispatchEvent(event); }; } - document.addEventListener("youtubePlayerReady", this, false); + this._element.src += (this._videoId ? "/" + this._videoId : "") + "?enablejsapi=1"; - // If there's no videoId set one the doesn't exist - this._player.data = "https://www.youtube.com/v/" + (this._videoId || "xxxxxxxxxxx") + "?version=3&enablejsapi=1&playerapiid=" + this.uuid; + if (typeof YT !== "undefined" && YT.Player) { + this.handleYoutubePlayerApiReady(); + } else { + document.addEventListener("youtubePlayerApiReady", this, false); + } } }, - handleYoutubePlayerReady: { + handleYoutubePlayerApiReady: { value: function(event) { - if (event.playerId !== this.uuid) { - return; - } - - this._ready = true; - this.needsDraw = true; + console.log("handleYoutubePlayerApiReady"); + document.removeEventListener("youtubePlayerApiReady", this); + + var self = this; + this.player = new YT.Player(this._element, { events: { + onReady: function(event) { + self._ready = true; + self.needsDraw = true; + } + }}); } }, -- 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 --- .../examples/feed-reader/images/47-fuel.png | Bin 0 -> 3091 bytes .../feed-reader/images/80-shopping-cart.png | Bin 0 -> 2963 bytes .../examples/feed-reader/images/88-beer-mug.png | Bin 0 -> 3087 bytes .../examples/feed-reader/main.reel/main.html | 26 +++++++++++ .../montage/examples/feed-reader/main.reel/main.js | 10 ++++ .../ui/feed-reader/feed-entry.reel/feed-entry.html | 1 - .../feed-reader/feed-reader.reel/feed-reader.html | 26 +++++++++-- .../ui/feed-reader/feed-reader.reel/feed-reader.js | 51 +++++++++++++++++++++ node_modules/montage/ui/map.reel/map.html | 31 ++----------- node_modules/montage/ui/map.reel/map.js | 41 +++++------------ 10 files changed, 125 insertions(+), 61 deletions(-) create mode 100644 node_modules/montage/examples/feed-reader/images/47-fuel.png create mode 100644 node_modules/montage/examples/feed-reader/images/80-shopping-cart.png create mode 100644 node_modules/montage/examples/feed-reader/images/88-beer-mug.png (limited to 'node_modules/montage') diff --git a/node_modules/montage/examples/feed-reader/images/47-fuel.png b/node_modules/montage/examples/feed-reader/images/47-fuel.png new file mode 100644 index 00000000..617d7640 Binary files /dev/null and b/node_modules/montage/examples/feed-reader/images/47-fuel.png differ diff --git a/node_modules/montage/examples/feed-reader/images/80-shopping-cart.png b/node_modules/montage/examples/feed-reader/images/80-shopping-cart.png new file mode 100644 index 00000000..51a5f86f Binary files /dev/null and b/node_modules/montage/examples/feed-reader/images/80-shopping-cart.png differ diff --git a/node_modules/montage/examples/feed-reader/images/88-beer-mug.png b/node_modules/montage/examples/feed-reader/images/88-beer-mug.png new file mode 100644 index 00000000..b0fdd99a Binary files /dev/null and b/node_modules/montage/examples/feed-reader/images/88-beer-mug.png differ 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 8ea9a79b..ef4fc92a 100644 --- a/node_modules/montage/examples/feed-reader/main.reel/main.html +++ b/node_modules/montage/examples/feed-reader/main.reel/main.html @@ -79,6 +79,13 @@ "element": {"#": "map"} } }, + + "types": { + "prototype": "montage/ui/select-input.reel", + "properties": { + "element": {"#": "types"} + } + }, "owner": { "module": "main.reel", @@ -92,6 +99,10 @@ "mapCenter": { "boundObject": {"@": "mapCenter"}, "boundObjectPropertyPath": "value" + }, + "mapCategory": { + "boundObject": {"@": "types"}, + "boundObjectPropertyPath": "value" } } } @@ -140,6 +151,10 @@ visibility: hidden; } + #map, #feed-reader { + margin-top: 10px; + } + @@ -168,6 +183,17 @@
Location: +
+ Show: + +
Map
diff --git a/node_modules/montage/examples/feed-reader/main.reel/main.js b/node_modules/montage/examples/feed-reader/main.reel/main.js index bea5f91a..06d8fdba 100644 --- a/node_modules/montage/examples/feed-reader/main.reel/main.js +++ b/node_modules/montage/examples/feed-reader/main.reel/main.js @@ -13,6 +13,16 @@ exports.Main = Montage.create(Component, { distinct: true }, + mapCategory: { + get: function() { + return this._mapCategory; + }, + set: function(value) { + this._mapCategory = value; + this.map.category = value; + } + }, + feedReader: {value: null}, map: {value: null}, diff --git a/node_modules/montage/ui/feed-reader/feed-entry.reel/feed-entry.html b/node_modules/montage/ui/feed-reader/feed-entry.reel/feed-entry.html index 213b4602..6c3a5298 100644 --- a/node_modules/montage/ui/feed-reader/feed-entry.reel/feed-entry.html +++ b/node_modules/montage/ui/feed-reader/feed-entry.reel/feed-entry.html @@ -61,7 +61,6 @@ .feed-entry { padding: 10px; margin: 3px 0; - border: 1px solid #aaa; } .feed-entry h2 { font-size: 24px; 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 a3523001..646fd01e 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 @@ -53,7 +53,15 @@ "module": "montage/ui/feed-reader/feed-reader.reel", "name": "FeedReader", "properties": { - "element": {"#": "feed-reader"} + "element": {"#": "feed-reader"}, + "repetition": {"@": "repetition"} + }, + "bindings": { + "items": { + "boundObject": {"@": "repetition"}, + "boundObjectPropertyPath": "objects", + "oneway": true + } } } @@ -61,8 +69,20 @@ 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() { diff --git a/node_modules/montage/ui/map.reel/map.html b/node_modules/montage/ui/map.reel/map.html index 5cd3a5b5..b255ac1e 100644 --- a/node_modules/montage/ui/map.reel/map.html +++ b/node_modules/montage/ui/map.reel/map.html @@ -13,24 +13,13 @@ @@ -49,20 +38,8 @@ -
-
- Show: - -
-
MAP
- +
+
MAP
diff --git a/node_modules/montage/ui/map.reel/map.js b/node_modules/montage/ui/map.reel/map.js index c03d51c5..305ae181 100644 --- a/node_modules/montage/ui/map.reel/map.js +++ b/node_modules/montage/ui/map.reel/map.js @@ -42,34 +42,7 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/ enumerable: false, value: false }, - _latitude: { - enumerable: false, - value: -34.397 - }, - latitude: { - enumerable: false, - set: function(value) { - this._latitude = value; - this.needsDraw = true; - }, - get: function() { - return this._latitude; - } - }, - _longitude: { - enumerable: false, - value: -34.397 - }, - longitude: { - enumerable: false, - set: function(value) { - this._longitude = value; - this.needsDraw = true; - }, - get: function() { - return this._longitude; - } - }, + defaultLatLng: { value: {lat: -34.397, lng: 150.644} @@ -132,6 +105,7 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/ return this._category; }, set: function(value) { + console.log('category set: ' + value); if(value) { this._category = value; this._getPlaces(this._category); @@ -170,6 +144,7 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/ } var service = new google.maps.places.PlacesService(this._map); service.search(request, function(results, status) { + console.log('got places for ', self.category, status, results); if (status == google.maps.places.PlacesServiceStatus.OK) { self._places = results; } else { @@ -192,12 +167,18 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/ case 'hospital': icon = '10-medical.png'; break; - case 'cafe': - icon = '34-coffee.png'; + case 'bar': + icon = '88-beer-mug.png'; + break; + case 'grocery_or_supermarket': + icon = '80-shopping-cart.png'; break; case 'museum': icon = '41-picture-frame.png'; break; + case 'gas_station': + icon = '47-fuel.png'; + break; }; if(icon) { image = new google.maps.MarkerImage('images/' + icon); -- 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--- .../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 From ea439c4471948cb7e1dbb98bfa9c2ddc374d48e7 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 19 Mar 2012 14:19:48 -0700 Subject: Maps - Apply default width and height styles to components if specified. Change default location to Sunnyvale. Signed-off-by: Nivesh Rajbhandari --- node_modules/montage/ui/map.reel/map.html | 4 ++-- node_modules/montage/ui/map.reel/map.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'node_modules/montage') diff --git a/node_modules/montage/ui/map.reel/map.html b/node_modules/montage/ui/map.reel/map.html index b255ac1e..b39a11a9 100644 --- a/node_modules/montage/ui/map.reel/map.html +++ b/node_modules/montage/ui/map.reel/map.html @@ -29,8 +29,8 @@ .montage-google-map { margin: 0; padding: 0; - width: 600px; - height: 700px; + width: 280px; + height: 280px; } diff --git a/node_modules/montage/ui/map.reel/map.js b/node_modules/montage/ui/map.reel/map.js index 42af218e..cba08a42 100644 --- a/node_modules/montage/ui/map.reel/map.js +++ b/node_modules/montage/ui/map.reel/map.js @@ -43,9 +43,9 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/ value: false }, - + // Sunnyvale, CA defaultLatLng: { - value: {lat: -34.397, lng: 150.644} + value: {lat: 37.37, lng: -122.03} }, _latLng: { -- cgit v1.2.3 From dd382088b4990c4e39f77d793c1a6bd7e3c52aca Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 19 Mar 2012 14:30:22 -0700 Subject: Map - width and height should be 100% so resize handles work. Signed-off-by: Nivesh Rajbhandari --- node_modules/montage/ui/map.reel/map.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'node_modules/montage') diff --git a/node_modules/montage/ui/map.reel/map.html b/node_modules/montage/ui/map.reel/map.html index b39a11a9..abb51ddd 100644 --- a/node_modules/montage/ui/map.reel/map.html +++ b/node_modules/montage/ui/map.reel/map.html @@ -29,8 +29,8 @@ .montage-google-map { margin: 0; padding: 0; - width: 280px; - height: 280px; + width: 100%; + height: 100%; } -- cgit v1.2.3 From e438756a18e4ae46cd4713e81f0bc4a1d2ddea15 Mon Sep 17 00:00:00 2001 From: Stuart Knightley Date: Mon, 19 Mar 2012 15:13:28 -0700 Subject: Update Youtube channel to have three thumbnails --- .../examples/youtube-channel-example/index.html | 10 +- .../ui/youtube-channel.reel/youtube-channel.html | 72 +++++++++++- .../ui/youtube-channel.reel/youtube-channel.js | 128 ++++++++++++++++++--- .../ui/youtube-player.reel/youtube-player.js | 37 +++++- 4 files changed, 224 insertions(+), 23 deletions(-) (limited to 'node_modules/montage') diff --git a/node_modules/montage/examples/youtube-channel-example/index.html b/node_modules/montage/examples/youtube-channel-example/index.html index f3a0592a..132d0d5a 100755 --- a/node_modules/montage/examples/youtube-channel-example/index.html +++ b/node_modules/montage/examples/youtube-channel-example/index.html @@ -15,7 +15,7 @@ "prototype": "montage/ui/youtube-channel.reel", "properties": { "element": {"#": "player"}, - "channel": "drive" + "channelUrl": "http://www.youtube.com/TEDEducation" } }, @@ -24,6 +24,12 @@ "properties": { "element": {"#": "url"}, "value": "http://www.youtube.com/TEDEducation" + }, + "bindings": { + "value": { + "boundObject": {"@": "player"}, + "boundObjectPropertyPath": "channelUrl" + } } } } @@ -32,7 +38,7 @@
Youtube Channel
- +
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 184ac360..50286c22 100644 --- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html +++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html @@ -15,20 +15,86 @@ "element": {"#": "player"} } }, + "imageA": { + "prototype": "montage/ui/image.reel", + "properties": { + "element": {"#": "imageA"} + } + }, + "imageB": { + "prototype": "montage/ui/image.reel", + "properties": { + "element": {"#": "imageB"} + } + }, + "imageC": { + "prototype": "montage/ui/image.reel", + "properties": { + "element": {"#": "imageC"} + } + }, "owner": { - "prototype": "montage/ui/youtube-channel.reel", + "module": "montage/ui/youtube-channel.reel", + "name": "YoutubeChannel", "properties": { "element": {"#": "container"}, - "player": {"@": "player"} + "player": {"@": "player"}, + "_popupElement": {"#": "popup"}, + "imageA": {"@": "imageA"}, + "imageB": {"@": "imageB"}, + "imageC": {"@": "imageC"} } } } +
-
+ + + + +
+
+
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 3e20c406..3d9f7f2f 100644 --- a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js +++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js @@ -6,8 +6,7 @@ /*global require,exports*/ var Montage = require("montage").Montage, Component = require("ui/component").Component, - Uuid = require("core/uuid").Uuid; - + Uuid = require("core/Uuid"); var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { @@ -16,6 +15,25 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { value: /youtube.com\/(user\/)?([a-z0-9]+)/i }, + imageA: { + value: null + }, + imageB: { + value: null + }, + imageC: { + value: null + }, + _popupElement: { + enumerable: false, + value: null + }, + + _shouldShowPopup: { + enumerable: false, + value: false + }, + _channelUrl: { enumerable: false, value: null @@ -77,37 +95,115 @@ var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { // create url var url = "http://gdata.youtube.com/feeds/api/users/" + this._channel + "/uploads?v=2&alt=json-in-script&callback=" + callbackName; - this.script = document.createElement("script"); - this.script.src = url; + this._script = document.createElement("script"); + this._script.src = url; this.needsDraw = true; } }, - script: { + _script: { + enumerable: false, value: null }, + prepareForDraw: { + value: function() { + this.imageA.element.addEventListener("click", this, false); + this.imageB.element.addEventListener("click", this, false); + this.imageC.element.addEventListener("click", this, false); + } + }, + draw: { value: function() { - if (this.script) { - this._element.appendChild(this.script); - this.script = null; + if (this._script) { + this._element.appendChild(this._script); + this._script = null; } + + if (this._entries) { + this.imageA.src = this._entries[0]["media$group"]["media$thumbnail"][0].url; + this.imageB.src = this._entries[1]["media$group"]["media$thumbnail"][0].url; + this.imageC.src = this._entries[2]["media$group"]["media$thumbnail"][0].url; + } + + if (this._videoId) { + this.player.videoId = this._videoId; + this._videoId = null; + } + + if (this._shouldShowPopup) { + this._popupElement.classList.add("show"); + if (window.Touch) { + document.addEventListener('touchstart', this, false); + } else { + document.addEventListener('mousedown', this, false); + document.addEventListener('keyup', this, false); + } + } else { + this._popupElement.classList.remove("show"); + this.player.stop(); + + if (window.Touch) { + document.removeEventListener('touchstart', this); + } else { + document.removeEventListener('mousedown', this); + document.removeEventListener('keyup', this); + } + + } + } }, - handleData: { - value: function(data) { - var entries = data.feed.entry || []; + _entries: { + enumerable: false, + value: null + }, - var playlist = []; + handleClick: { + value: function(event) { + switch(event.target.dataset.montageId) { + case "imageA": + this._videoId = this._entries[0]["media$group"]["yt$videoid"]["$t"]; + break; + case "imageB": + this._videoId = this._entries[1]["media$group"]["yt$videoid"]["$t"]; + break; + case "imageC": + this._videoId = this._entries[2]["media$group"]["yt$videoid"]["$t"]; + break; + } + this._shouldShowPopup = true; + this.needsDraw = true; + } + }, - for (var i = 0, len = entries.length; i < len; i++) { - var id = entries[i]["media$group"]["yt$videoid"]["$t"]; - playlist.push(id); + handleTouchStart: { + value: function(event) { + this._shouldShowPopup = false; + this.needsDraw = true; + } + }, + handleMousedown: { + value: function(event) { + if (event.button === 0) { + this._shouldShowPopup = false; + this.needsDraw = true; } + } + }, + handleKeyup: { + value: function(event) { + this._shouldShowPopup = false; + this.needsDraw = true; + } + }, - this.player.playlist = playlist; + handleData: { + value: function(data) { + this._entries = data.feed.entry || []; + this.needsDraw = true; } } diff --git a/node_modules/montage/ui/youtube-player.reel/youtube-player.js b/node_modules/montage/ui/youtube-player.reel/youtube-player.js index 462dca58..b49f6ae1 100644 --- a/node_modules/montage/ui/youtube-player.reel/youtube-player.js +++ b/node_modules/montage/ui/youtube-player.reel/youtube-player.js @@ -36,6 +36,37 @@ var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, { } }, + _width: { + enumerable: false, + value: 640 + }, + width: { + get: function() { + return this._width; + }, + set: function(value) { + if (this._width !== value) { + this._width = value; + this.needsDraw = true; + } + } + }, + _height: { + enumerable: false, + value: 385 + }, + height: { + get: function() { + return this._height; + }, + set: function(value) { + if (this._height !== value) { + this._height = value; + this.needsDraw = true; + } + } + }, + _autoplay: { enumerable: false, value: false @@ -47,6 +78,7 @@ var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, { set: function(value) { if (this._autoplay !== value) { this._autoplay = value; + this.needsDraw = true; } } }, @@ -145,7 +177,6 @@ var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, { handleYoutubePlayerApiReady: { value: function(event) { - console.log("handleYoutubePlayerApiReady"); document.removeEventListener("youtubePlayerApiReady", this); var self = this; @@ -176,8 +207,10 @@ var YoutubePlayer = exports.YoutubePlayer = Montage.create(Component, { this._player[fnName].apply(this._player, args); } - this._playerQueue.length = 0; + + this._element.width = this._width; + this._element.height = this._height; } } }); \ No newline at end of file -- cgit v1.2.3 From 4f7f744b6982142c08b82239e8dbe40b610bf68b Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 19 Mar 2012 15:31:08 -0700 Subject: Preserve-3d on flow and specify default dimensions on picasa-carousel. Signed-off-by: Nivesh Rajbhandari --- node_modules/montage/ui/flow.reel/flow.html | 2 +- node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'node_modules/montage') diff --git a/node_modules/montage/ui/flow.reel/flow.html b/node_modules/montage/ui/flow.reel/flow.html index 646c87f8..e6c2f5b5 100644 --- a/node_modules/montage/ui/flow.reel/flow.html +++ b/node_modules/montage/ui/flow.reel/flow.html @@ -35,7 +35,7 @@ diff --git a/node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.html b/node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.html index 08b5ffa4..6774026b 100755 --- a/node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.html +++ b/node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.html @@ -83,7 +83,7 @@ "cameraRotationAxisX": 1, "cameraRotationAxisY": 0, "cameraRotationAxisZ": 0, - "scale": 380 + "scale": 210 }, "bindings": { "objects": { @@ -92,8 +92,8 @@ "oneway": true }, "path": { - "boundObject": {"@": "pathLerp1"}, - "boundObjectPropertyPath": "resultPath", + "boundObject": {"@": "path2"}, + "boundObjectPropertyPath": "path", "oneway": true }, "cameraRotationAngle": { @@ -113,20 +113,6 @@ } } }, - "path1": { - "module": "montage/ui/flow-path", - "name": "FlowPath", - "properties": { - "evalPath": [ - "path.translateX = slide.time-slide.index*155+50", - "path.translateY = (slide.index%3)*240", - "path.translateZ = -slide.time/3", - "path.rotateX = slide.speed/200", - "path.rotateY = 1", - "path.rotateZ = slide.time/500" - ] - } - }, "path2": { "module": "montage/ui/flow-path", "name": "FlowPath", @@ -134,35 +120,12 @@ "evalPath": [ "path.translateX = slide.time", "path.translateY = 0", - "path.translateZ = slide.time*slide.time/-1500", + "path.translateZ = Math.pow(1.1, -slide.time*slide.time/30000)*600-600", "path.rotateX = 0", - "path.rotateY = slide.time/1200", + "path.rotateY = 0", "path.rotateZ = slide.speed/1500" ] } - }, - "pathLerp1": { - "module": "montage/ui/flow-path-lerp", - "name": "FlowPathLerp", - "properties": { - "interpolant": 1 - }, - "bindings": { - "path1": { - "boundObject": {"@": "path1"}, - "boundObjectPropertyPath": "path", - "oneway": true - }, - "path2": { - "boundObject": {"@": "path2"}, - "boundObjectPropertyPath": "path", - "oneway": true - }, - "interpolant": { - "boundObject": {"@": "slider1"}, - "boundObjectPropertyPath": "value" - } - } } } @@ -172,7 +135,7 @@
-
+
-- cgit v1.2.3 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); + } + @@ -201,7 +237,7 @@
-
+
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 @@