From 28a7a71d2962158cab34f50627f2d22540c29eab Mon Sep 17 00:00:00 2001 From: Benoit Marchant Date: Sat, 17 Mar 2012 17:41:47 -0700 Subject: Added a new picasa-carousel component as well as an example using it --- .../lab/sandbox/ui/picasa-carousel-test/index.html | 77 +++++++++ .../ui/picasa-carousel-test/main.reel/main.css | 8 + .../ui/picasa-carousel-test/main.reel/main.html | 75 +++++++++ .../ui/picasa-carousel-test/main.reel/main.js | 35 ++++ .../sandbox/ui/picasa-carousel-test/package.json | 10 ++ .../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 ++++++++++++++ 10 files changed, 611 insertions(+) create mode 100755 node_modules/montage/lab/sandbox/ui/picasa-carousel-test/index.html create mode 100755 node_modules/montage/lab/sandbox/ui/picasa-carousel-test/main.reel/main.css create mode 100755 node_modules/montage/lab/sandbox/ui/picasa-carousel-test/main.reel/main.html create mode 100755 node_modules/montage/lab/sandbox/ui/picasa-carousel-test/main.reel/main.js create mode 100755 node_modules/montage/lab/sandbox/ui/picasa-carousel-test/package.json create mode 100644 node_modules/montage/ui/google/picasa-carousel.reel/image.reel/image.html create mode 100644 node_modules/montage/ui/google/picasa-carousel.reel/image.reel/image.js create mode 100755 node_modules/montage/ui/google/picasa-carousel.reel/picasa-carousel.css create mode 100755 node_modules/montage/ui/google/picasa-carousel.reel/picasa-carousel.html create mode 100644 node_modules/montage/ui/google/picasa-carousel.reel/picasa-carousel.js diff --git a/node_modules/montage/lab/sandbox/ui/picasa-carousel-test/index.html b/node_modules/montage/lab/sandbox/ui/picasa-carousel-test/index.html new file mode 100755 index 00000000..ec34286f --- /dev/null +++ b/node_modules/montage/lab/sandbox/ui/picasa-carousel-test/index.html @@ -0,0 +1,77 @@ + + + + + + + Flow Example + + + + + + + + + +
+

Bootstrapper

+

This is the bootstrapper content which will now be shown for at least 1500ms.

+
+
+

Loader

+

This is the loader content which will now be shown for at least 2000ms.

+
+ + diff --git a/node_modules/montage/lab/sandbox/ui/picasa-carousel-test/main.reel/main.css b/node_modules/montage/lab/sandbox/ui/picasa-carousel-test/main.reel/main.css new file mode 100755 index 00000000..82b04cf9 --- /dev/null +++ b/node_modules/montage/lab/sandbox/ui/picasa-carousel-test/main.reel/main.css @@ -0,0 +1,8 @@ +.montage-google-picasa-carousel, [data-montage-id="montage-google-picasa-carousel"] { + width: 800px; + height: 400px; + -webkit-perspective: 800px; + background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#bbb)); +} + + diff --git a/node_modules/montage/lab/sandbox/ui/picasa-carousel-test/main.reel/main.html b/node_modules/montage/lab/sandbox/ui/picasa-carousel-test/main.reel/main.html new file mode 100755 index 00000000..177eb068 --- /dev/null +++ b/node_modules/montage/lab/sandbox/ui/picasa-carousel-test/main.reel/main.html @@ -0,0 +1,75 @@ + + + + + + Main Component + + + + + + + + +
+

Main component of application

+
+ + +
+ +
+ +
+ + + diff --git a/node_modules/montage/lab/sandbox/ui/picasa-carousel-test/main.reel/main.js b/node_modules/montage/lab/sandbox/ui/picasa-carousel-test/main.reel/main.js new file mode 100755 index 00000000..3851d82b --- /dev/null +++ b/node_modules/montage/lab/sandbox/ui/picasa-carousel-test/main.reel/main.js @@ -0,0 +1,35 @@ +/* + 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/core/core").Montage, + Component = require("montage/ui/component").Component; + + +exports.Main = Montage.create(Component, { + + templateDidLoad: { + value: function() { + //console.log("main templateDidLoad") + } + }, + picasaCarousel: { + enumerable: false, + value: null + }, + prepareForDraw: { + enumerable: false, + value: function() { + this.searchForm.identifier = "searchForm"; + this.searchForm.addEventListener("submit", this, false); + } + }, + handleSearchFormSubmit: { + value: function(evt) { + evt.preventDefault(); + this.picasaCarousel.performSearch(); + } + }, + +}); diff --git a/node_modules/montage/lab/sandbox/ui/picasa-carousel-test/package.json b/node_modules/montage/lab/sandbox/ui/picasa-carousel-test/package.json new file mode 100755 index 00000000..4dcc16c6 --- /dev/null +++ b/node_modules/montage/lab/sandbox/ui/picasa-carousel-test/package.json @@ -0,0 +1,10 @@ +{ + "name": "loader", + "version": "0.0.0", + "mappings": { + "montage": "../../../../" + }, + "directories": { + "lib": "" + } +} 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 new file mode 100644 index 00000000..e3d9c7a2 --- /dev/null +++ b/node_modules/montage/ui/google/picasa-carousel.reel/image.reel/image.html @@ -0,0 +1,37 @@ + + + + + + + + +
+ + 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 new file mode 100644 index 00000000..0bced41b --- /dev/null +++ b/node_modules/montage/ui/google/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/google/picasa-carousel.reel/picasa-carousel.css b/node_modules/montage/ui/google/picasa-carousel.reel/picasa-carousel.css new file mode 100755 index 00000000..cab6d1bb --- /dev/null +++ b/node_modules/montage/ui/google/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/google/picasa-carousel.reel/picasa-carousel.html b/node_modules/montage/ui/google/picasa-carousel.reel/picasa-carousel.html new file mode 100755 index 00000000..73ccf076 --- /dev/null +++ b/node_modules/montage/ui/google/picasa-carousel.reel/picasa-carousel.html @@ -0,0 +1,181 @@ + + + + + + + + + + + + +
+
+ +
+
+ + + 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 new file mode 100644 index 00000000..25d363b0 --- /dev/null +++ b/node_modules/montage/ui/google/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"); + } + + } + } + +}); -- cgit v1.2.3