From 09852e9b9b8e64f003bed5aa57630d8b42c8ac95 Mon Sep 17 00:00:00 2001 From: François Frisch Date: Sat, 17 Mar 2012 19:28:30 -0700 Subject: Integrating picasa carousel and youtube channel --- .../ComponentsPanelBase.js | 16 +- node_modules/components-data/map.json | 4 +- node_modules/components-data/picasa-carousel.json | 15 ++ node_modules/components-data/youtube-channel.json | 16 ++ .../examples/youtube-channel-example/index.html | 2 +- .../youtube-channel.reel/youtube-channel.html | 34 ---- .../youtube-channel.reel/youtube-channel.js | 101 ------------ .../picasa-carousel.reel/image.reel/image.html | 37 ----- .../picasa-carousel.reel/image.reel/image.js | 20 --- .../picasa-carousel.reel/picasa-carousel.css | 44 ----- .../picasa-carousel.reel/picasa-carousel.html | 181 --------------------- .../google/picasa-carousel.reel/picasa-carousel.js | 124 -------------- .../ui/picasa-carousel.reel/image.reel/image.html | 37 +++++ .../ui/picasa-carousel.reel/image.reel/image.js | 20 +++ .../ui/picasa-carousel.reel/picasa-carousel.css | 44 +++++ .../ui/picasa-carousel.reel/picasa-carousel.html | 181 +++++++++++++++++++++ .../ui/picasa-carousel.reel/picasa-carousel.js | 124 ++++++++++++++ .../ui/youtube-channel.reel/youtube-channel.html | 34 ++++ .../ui/youtube-channel.reel/youtube-channel.js | 101 ++++++++++++ 19 files changed, 588 insertions(+), 547 deletions(-) create mode 100644 node_modules/components-data/picasa-carousel.json create mode 100644 node_modules/components-data/youtube-channel.json delete mode 100644 node_modules/montage/examples/youtube-channel-example/youtube-channel.reel/youtube-channel.html delete mode 100644 node_modules/montage/examples/youtube-channel-example/youtube-channel.reel/youtube-channel.js delete mode 100644 node_modules/montage/ui/google/picasa-carousel.reel/image.reel/image.html delete mode 100644 node_modules/montage/ui/google/picasa-carousel.reel/image.reel/image.js delete mode 100755 node_modules/montage/ui/google/picasa-carousel.reel/picasa-carousel.css delete mode 100755 node_modules/montage/ui/google/picasa-carousel.reel/picasa-carousel.html delete mode 100644 node_modules/montage/ui/google/picasa-carousel.reel/picasa-carousel.js create mode 100644 node_modules/montage/ui/picasa-carousel.reel/image.reel/image.html create mode 100644 node_modules/montage/ui/picasa-carousel.reel/image.reel/image.js create mode 100755 node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.css create mode 100755 node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.html create mode 100644 node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.js create mode 100644 node_modules/montage/ui/youtube-channel.reel/youtube-channel.html create mode 100644 node_modules/montage/ui/youtube-channel.reel/youtube-channel.js diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index 92d21bc3..49d1179a 100755 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js @@ -25,20 +25,30 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component { "text": "Widgets", "children": [ + { + "text": "Feed Reader", + "dataFile" : "node_modules/components-data/feed-reader.json", + "component": "feedreader" + }, { "text": "Map", "dataFile" : "node_modules/components-data/map.json", "component": "map" }, { - "text": "Feed Reader", - "dataFile" : "node_modules/components-data/feed-reader.json", - "component": "feedreader" + "text": "Picasa Carousel", + "dataFile" : "node_modules/components-data/picasa-carousel.json", + "component": "picasa-carousel" }, { "text": "Search Bar", "dataFile" : "node_modules/components-data/searchfield.json", "component": "searchfield" + }, + { + "text": "Youtube Channel", + "dataFile" : "node_modules/components-data/youtube-channel.json", + "component": "youtube-channel" } ] }, diff --git a/node_modules/components-data/map.json b/node_modules/components-data/map.json index 071fa73a..796b2fad 100644 --- a/node_modules/components-data/map.json +++ b/node_modules/components-data/map.json @@ -9,13 +9,13 @@ { "name": "category", "type": "string", - "default": null, + "default": "", "possibleValues": ["restaurant", "hospital", "cafe", "museum"] }, { "name": "center", "type": "string", - "default": null + "default": "" } ] diff --git a/node_modules/components-data/picasa-carousel.json b/node_modules/components-data/picasa-carousel.json new file mode 100644 index 00000000..34fe0e8f --- /dev/null +++ b/node_modules/components-data/picasa-carousel.json @@ -0,0 +1,15 @@ +{ + "component": "picasa-carousel", + + "module": "montage/ui/picasa-carousel.reel", + + "name": "PicasaCarousel", + + "properties": [ + { + "name": "queryParameter", + "type": "string", + "default": "" + } + ] +} \ No newline at end of file diff --git a/node_modules/components-data/youtube-channel.json b/node_modules/components-data/youtube-channel.json new file mode 100644 index 00000000..8affffba --- /dev/null +++ b/node_modules/components-data/youtube-channel.json @@ -0,0 +1,16 @@ +{ + "component": "youtube-channel", + + "module": "montage/ui/youtube-channel.reel", + + "name": "YoutubeChannel", + + "properties": [ + { + "name": "channelUrl", + "type": "string", + "default": "" + } + + ] +} \ No newline at end of file diff --git a/node_modules/montage/examples/youtube-channel-example/index.html b/node_modules/montage/examples/youtube-channel-example/index.html index 71baba29..b313d5d8 100755 --- a/node_modules/montage/examples/youtube-channel-example/index.html +++ b/node_modules/montage/examples/youtube-channel-example/index.html @@ -12,7 +12,7 @@ - - -
-
-
- - diff --git a/node_modules/montage/examples/youtube-channel-example/youtube-channel.reel/youtube-channel.js b/node_modules/montage/examples/youtube-channel-example/youtube-channel.reel/youtube-channel.js deleted file mode 100644 index 1f5aa2d1..00000000 --- a/node_modules/montage/examples/youtube-channel-example/youtube-channel.reel/youtube-channel.js +++ /dev/null @@ -1,101 +0,0 @@ -/* - 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*/ -var Montage = require("montage").Montage, - Component = require("montage/ui/component").Component, - Uuid = require("montage/core/uuid").Uuid; - - -var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { - - _userRe: { - enumerable: false, - value: /youtube.com\/(user\/)?([a-z0-9]+)/i - }, - - _channelUrl: { - enumerable: false, - value: null - }, - channelUrl: { - depends: ["channel"], - get: function() { - return this._channelUrl; - }, - set: function(value, fromChannel) { - if (this._channelUrl !== value) { - this._channelUrl = value; - - // prevent infinite loop - if (!fromChannel) { - var match = this._userRe.exec(value); - if (match && match[2]) { - Object.getPropertyDescriptor(this, "channel").set.call(this, match[2], true); - } - } - } - } - }, - - _channel: { - enumerable: false, - value: null - }, - channel: { - get: function() { - return this._channel; - }, - set: function(value, fromUrl) { - if (this._channel !== value) { - this._channel = value; - - // prevent infinite loop - if (!fromUrl) { - Object.getPropertyDescriptor(this, "channelUrl").set.call(this, "http://www.youtube.com/user/" + value, true); - } - - this._loadChannel(); - } - } - }, - - _loadChannel: { - enumerable: false, - value: function() { - var self = this; - - var callbackName = "scriptCallback" + Uuid.generate().replace(/-/g, "_"); - - window[callbackName] = function(data) { - self.handleData(data); - delete window[callbackName]; - }; - - // 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); - } - }, - - handleData: { - value: function(data) { - var entries = data.feed.entry || []; - - var playlist = []; - - for (var i = 0, len = entries.length; i < len; i++) { - var id = entries[i]["media$group"]["yt$videoid"]["$t"]; - playlist.push(id); - } - - this.player.playlist = playlist; - } - } - -}); \ No newline at end of file diff --git a/node_modules/montage/ui/google/picasa-carousel.reel/image.reel/image.html b/node_modules/montage/ui/google/picasa-carousel.reel/image.reel/image.html deleted file mode 100644 index e3d9c7a2..00000000 --- a/node_modules/montage/ui/google/picasa-carousel.reel/image.reel/image.html +++ /dev/null @@ -1,37 +0,0 @@ - - - - - - - - -
- - diff --git a/node_modules/montage/ui/google/picasa-carousel.reel/image.reel/image.js b/node_modules/montage/ui/google/picasa-carousel.reel/image.reel/image.js deleted file mode 100644 index 0bced41b..00000000 --- a/node_modules/montage/ui/google/picasa-carousel.reel/image.reel/image.js +++ /dev/null @@ -1,20 +0,0 @@ -var Montage = require("montage").Montage, - Component = require("ui/component").Component; - -var Image = exports.Image = Montage.create(Component, { - - _src: {value: null}, - - src: { - set: function(value) { - this._src = value; - this.needsDraw = true; - } - }, - - draw: { - value: function() { - this._element.style.backgroundImage = "url(" + this._src + ")"; - } - } -}); diff --git a/node_modules/montage/ui/google/picasa-carousel.reel/picasa-carousel.css b/node_modules/montage/ui/google/picasa-carousel.reel/picasa-carousel.css deleted file mode 100755 index cab6d1bb..00000000 --- a/node_modules/montage/ui/google/picasa-carousel.reel/picasa-carousel.css +++ /dev/null @@ -1,44 +0,0 @@ -/* - 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. - */ -.montage-google-picasa-carousel { - width: 100%; - height: 100%; - display: -webkit-box; - -webkit-box-pack: center; - -webkit-box-align: center; - display: -moz-box; - -moz-box-pack: center; - -moz-box-align: center; - display: -ms-box; - -ms-box-pack: center; - -ms-box-align: center; - display: box; - box-pack: center; - box-align: center; - -} - -.montage-google-picasa-carousel .flow { - width: 100%; - height: 100%; -/* top: 0; - left: 0; - right: 0; - bottom: 0; -*/ -webkit-perspective: 800px; - background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#bbb)); -} -.image { - position: absolute; -/* -top: 50%; -*/ -webkit-box-shadow: 0 0 35px rgba(0,0,0,.5); -} - -.montage-google-picasa-carousel .flow .montage-flow-repetition { -margin: 10% 0; - -} - diff --git a/node_modules/montage/ui/google/picasa-carousel.reel/picasa-carousel.html b/node_modules/montage/ui/google/picasa-carousel.reel/picasa-carousel.html deleted file mode 100755 index 73ccf076..00000000 --- a/node_modules/montage/ui/google/picasa-carousel.reel/picasa-carousel.html +++ /dev/null @@ -1,181 +0,0 @@ - - - - - - - - - - - - -
-
- -
-
- - - diff --git a/node_modules/montage/ui/google/picasa-carousel.reel/picasa-carousel.js b/node_modules/montage/ui/google/picasa-carousel.reel/picasa-carousel.js deleted file mode 100644 index 25d363b0..00000000 --- a/node_modules/montage/ui/google/picasa-carousel.reel/picasa-carousel.js +++ /dev/null @@ -1,124 +0,0 @@ -/* - 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. - */ -/** - - @requires montage/core/core - @requires montage/ui/component -*/ -var Montage = require("montage").Montage, - Component = require("ui/component").Component; -/** - @class module:"montage/ui/google/map.reel".Map - @extends module:montage/ui/component.Component - */ -var PicasaCarousel = exports.PicasaCarousel = Montage.create(Component, /** @lends module:"montage/ui/toggle-switch.reel".ToggleSwitch# */ { - photoListController: { - enumerable: false, - value: null - }, - - queryParameter: { - enumerable: false, - value: null - }, - - resultCount: { - enumerable: false, - value: 20 - }, - - prepareForDraw: { - enumerable: false, - value: function() { - // this.searchForm.identifier = "searchForm"; - // this.searchForm.addEventListener("submit", this, false); - } - }, - - _isSearching: { - value: false, - enumerable: false - }, - - isSearching: { - enumerable: false, - get: function() { - return this._isSearching; - }, - set: function(value) { - if (value === this._isSearching) { - return; - } - - this._isSearching = value; - this.needsDraw = true; - } - }, - - handleSearchFormSubmit: { - value: function(evt) { - evt.preventDefault(); - this.performSearch(); - } - }, - - performSearch: { - value: function() { - if (this.isSearching) { - console.log("already searching!") - return; - } - - this.isSearching = true; - this.searchResults = null; - - var base = "http://picasaweb.google.com/data/feed/base/all?visibility=public&alt=json&max-results=" + this.resultCount + "&kind=photo&prettyprint=true&imgmax=720u&q=" - // var base = "http://picasaweb.google.com/data/feed/base/featured?visibility=public&alt=json&max-results=" + this.resultCount + "&kind=photo&prettyprint=true" - var url = base + this.queryParameter; - - var req = new XMLHttpRequest(); - req.identifier = "searchRequest"; - req.open("GET", url); - req.addEventListener("load", this, false); - req.addEventListener("error", this, false); - req.send(); - - } - }, - - handleSearchRequestLoad: { - value: function(evt) { - var response = JSON.parse(evt.target.responseText); - this.searchResults = response.feed.entry; - this.isSearching = false; - } - }, - - handleSearchRequestError: { - value: function(evt) { - console.error("handleSearchRequestError", evt); - this.isSearching = false; - } - }, - - searchResults: { - enumerable: false, - value: null - }, - - draw: { - value: function() { - - if (this.isSearching) { - this.element.classList.add("searching"); - } else { - this.element.classList.remove("searching"); - } - - } - } - -}); diff --git a/node_modules/montage/ui/picasa-carousel.reel/image.reel/image.html b/node_modules/montage/ui/picasa-carousel.reel/image.reel/image.html new file mode 100644 index 00000000..e3d9c7a2 --- /dev/null +++ b/node_modules/montage/ui/picasa-carousel.reel/image.reel/image.html @@ -0,0 +1,37 @@ + + + + + + + + +
+ + diff --git a/node_modules/montage/ui/picasa-carousel.reel/image.reel/image.js b/node_modules/montage/ui/picasa-carousel.reel/image.reel/image.js new file mode 100644 index 00000000..0bced41b --- /dev/null +++ b/node_modules/montage/ui/picasa-carousel.reel/image.reel/image.js @@ -0,0 +1,20 @@ +var Montage = require("montage").Montage, + Component = require("ui/component").Component; + +var Image = exports.Image = Montage.create(Component, { + + _src: {value: null}, + + src: { + set: function(value) { + this._src = value; + this.needsDraw = true; + } + }, + + draw: { + value: function() { + this._element.style.backgroundImage = "url(" + this._src + ")"; + } + } +}); diff --git a/node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.css b/node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.css new file mode 100755 index 00000000..cab6d1bb --- /dev/null +++ b/node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.css @@ -0,0 +1,44 @@ +/* + 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. + */ +.montage-google-picasa-carousel { + width: 100%; + height: 100%; + display: -webkit-box; + -webkit-box-pack: center; + -webkit-box-align: center; + display: -moz-box; + -moz-box-pack: center; + -moz-box-align: center; + display: -ms-box; + -ms-box-pack: center; + -ms-box-align: center; + display: box; + box-pack: center; + box-align: center; + +} + +.montage-google-picasa-carousel .flow { + width: 100%; + height: 100%; +/* top: 0; + left: 0; + right: 0; + bottom: 0; +*/ -webkit-perspective: 800px; + background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#bbb)); +} +.image { + position: absolute; +/* -top: 50%; +*/ -webkit-box-shadow: 0 0 35px rgba(0,0,0,.5); +} + +.montage-google-picasa-carousel .flow .montage-flow-repetition { +margin: 10% 0; + +} + diff --git a/node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.html b/node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.html new file mode 100755 index 00000000..73ccf076 --- /dev/null +++ b/node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.html @@ -0,0 +1,181 @@ + + + + + + + + + + + + +
+
+ +
+
+ + + diff --git a/node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.js b/node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.js new file mode 100644 index 00000000..25d363b0 --- /dev/null +++ b/node_modules/montage/ui/picasa-carousel.reel/picasa-carousel.js @@ -0,0 +1,124 @@ +/* + 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. + */ +/** + + @requires montage/core/core + @requires montage/ui/component +*/ +var Montage = require("montage").Montage, + Component = require("ui/component").Component; +/** + @class module:"montage/ui/google/map.reel".Map + @extends module:montage/ui/component.Component + */ +var PicasaCarousel = exports.PicasaCarousel = Montage.create(Component, /** @lends module:"montage/ui/toggle-switch.reel".ToggleSwitch# */ { + photoListController: { + enumerable: false, + value: null + }, + + queryParameter: { + enumerable: false, + value: null + }, + + resultCount: { + enumerable: false, + value: 20 + }, + + prepareForDraw: { + enumerable: false, + value: function() { + // this.searchForm.identifier = "searchForm"; + // this.searchForm.addEventListener("submit", this, false); + } + }, + + _isSearching: { + value: false, + enumerable: false + }, + + isSearching: { + enumerable: false, + get: function() { + return this._isSearching; + }, + set: function(value) { + if (value === this._isSearching) { + return; + } + + this._isSearching = value; + this.needsDraw = true; + } + }, + + handleSearchFormSubmit: { + value: function(evt) { + evt.preventDefault(); + this.performSearch(); + } + }, + + performSearch: { + value: function() { + if (this.isSearching) { + console.log("already searching!") + return; + } + + this.isSearching = true; + this.searchResults = null; + + var base = "http://picasaweb.google.com/data/feed/base/all?visibility=public&alt=json&max-results=" + this.resultCount + "&kind=photo&prettyprint=true&imgmax=720u&q=" + // var base = "http://picasaweb.google.com/data/feed/base/featured?visibility=public&alt=json&max-results=" + this.resultCount + "&kind=photo&prettyprint=true" + var url = base + this.queryParameter; + + var req = new XMLHttpRequest(); + req.identifier = "searchRequest"; + req.open("GET", url); + req.addEventListener("load", this, false); + req.addEventListener("error", this, false); + req.send(); + + } + }, + + handleSearchRequestLoad: { + value: function(evt) { + var response = JSON.parse(evt.target.responseText); + this.searchResults = response.feed.entry; + this.isSearching = false; + } + }, + + handleSearchRequestError: { + value: function(evt) { + console.error("handleSearchRequestError", evt); + this.isSearching = false; + } + }, + + searchResults: { + enumerable: false, + value: null + }, + + draw: { + value: function() { + + if (this.isSearching) { + this.element.classList.add("searching"); + } else { + this.element.classList.remove("searching"); + } + + } + } + +}); diff --git a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html new file mode 100644 index 00000000..b3858ec9 --- /dev/null +++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.html @@ -0,0 +1,34 @@ + + + + + + + + +
+
+
+ + diff --git a/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js new file mode 100644 index 00000000..fd642290 --- /dev/null +++ b/node_modules/montage/ui/youtube-channel.reel/youtube-channel.js @@ -0,0 +1,101 @@ +/* + 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*/ +var Montage = require("montage").Montage, + Component = require("ui/component").Component, + Uuid = require("core/uuid").Uuid; + + +var YoutubeChannel = exports.YoutubeChannel = Montage.create(Component, { + + _userRe: { + enumerable: false, + value: /youtube.com\/(user\/)?([a-z0-9]+)/i + }, + + _channelUrl: { + enumerable: false, + value: null + }, + channelUrl: { + depends: ["channel"], + get: function() { + return this._channelUrl; + }, + set: function(value, fromChannel) { + if (this._channelUrl !== value) { + this._channelUrl = value; + + // prevent infinite loop + if (!fromChannel) { + var match = this._userRe.exec(value); + if (match && match[2]) { + Object.getPropertyDescriptor(this, "channel").set.call(this, match[2], true); + } + } + } + } + }, + + _channel: { + enumerable: false, + value: null + }, + channel: { + get: function() { + return this._channel; + }, + set: function(value, fromUrl) { + if (this._channel !== value) { + this._channel = value; + + // prevent infinite loop + if (!fromUrl) { + Object.getPropertyDescriptor(this, "channelUrl").set.call(this, "http://www.youtube.com/user/" + value, true); + } + + this._loadChannel(); + } + } + }, + + _loadChannel: { + enumerable: false, + value: function() { + var self = this; + + var callbackName = "scriptCallback" + Uuid.generate().replace(/-/g, "_"); + + window[callbackName] = function(data) { + self.handleData(data); + delete window[callbackName]; + }; + + // 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); + } + }, + + handleData: { + value: function(data) { + var entries = data.feed.entry || []; + + var playlist = []; + + for (var i = 0, len = entries.length; i < len; i++) { + var id = entries[i]["media$group"]["yt$videoid"]["$t"]; + playlist.push(id); + } + + this.player.playlist = playlist; + } + } + +}); \ No newline at end of file -- cgit v1.2.3