diff options
author | Jose Antonio Marquez | 2012-03-18 16:14:34 -0700 |
---|---|---|
committer | Jose Antonio Marquez | 2012-03-18 16:14:34 -0700 |
commit | 06a790e0f830d01539dc9e80c90e2bcdabaa666b (patch) | |
tree | 474f3f1e0ea147b0400ff8528e1c33566179b211 /node_modules/montage/ui/map.reel | |
parent | fda7b595c96d99177fdd93de8da9030348a3f8fb (diff) | |
parent | 3056d540f32bb24927d06bfc516240cc6a0001f8 (diff) | |
download | ninja-06a790e0f830d01539dc9e80c90e2bcdabaa666b.tar.gz |
Merge branch 'refs/heads/francoisfrisch-Ninja-Internal' into FileIO-Montage-Components
Diffstat (limited to 'node_modules/montage/ui/map.reel')
-rw-r--r-- | node_modules/montage/ui/map.reel/map.css | 9 | ||||
-rw-r--r-- | node_modules/montage/ui/map.reel/map.html | 69 | ||||
-rw-r--r-- | node_modules/montage/ui/map.reel/map.js | 283 |
3 files changed, 361 insertions, 0 deletions
diff --git a/node_modules/montage/ui/map.reel/map.css b/node_modules/montage/ui/map.reel/map.css new file mode 100644 index 00000000..45307593 --- /dev/null +++ b/node_modules/montage/ui/map.reel/map.css | |||
@@ -0,0 +1,9 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | .montage-google-map { | ||
7 | width: 100%; | ||
8 | height: 100%; | ||
9 | } \ No newline at end of file | ||
diff --git a/node_modules/montage/ui/map.reel/map.html b/node_modules/montage/ui/map.reel/map.html new file mode 100644 index 00000000..5cd3a5b5 --- /dev/null +++ b/node_modules/montage/ui/map.reel/map.html | |||
@@ -0,0 +1,69 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <!-- <copyright> | ||
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
5 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
6 | </copyright> --> | ||
7 | <html> | ||
8 | <head> | ||
9 | <title></title> | ||
10 | <link rel="stylesheet" type="text/css" href="map.css"> | ||
11 | <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize&libraries=places"></script> | ||
12 | |||
13 | |||
14 | <script type="text/montage-serialization"> | ||
15 | { | ||
16 | "types": { | ||
17 | "prototype": "montage/ui/select-input.reel", | ||
18 | "properties": { | ||
19 | "element": {"#": "types"} | ||
20 | } | ||
21 | }, | ||
22 | "owner": { | ||
23 | "prototype": "montage/ui/map.reel", | ||
24 | "properties": { | ||
25 | "element": {"#": "map-container"}, | ||
26 | "mapEl": {"#": "map"} | ||
27 | }, | ||
28 | "bindings": { | ||
29 | "category": { | ||
30 | "boundObject": {"@": "types"}, | ||
31 | "boundObjectPropertyPath": "value" | ||
32 | } | ||
33 | } | ||
34 | } | ||
35 | } | ||
36 | </script> | ||
37 | |||
38 | <style> | ||
39 | |||
40 | .montage-google-map { | ||
41 | margin: 0; | ||
42 | padding: 0; | ||
43 | width: 600px; | ||
44 | height: 700px; | ||
45 | } | ||
46 | |||
47 | </style> | ||
48 | |||
49 | </head> | ||
50 | <body> | ||
51 | |||
52 | <div data-montage-id="map-container"> | ||
53 | <div> | ||
54 | Show: | ||
55 | <select data-montage-id="types"> | ||
56 | <option value=''>Select a Category</option> | ||
57 | <option value='cafe'>Coffee</option> | ||
58 | <option value='hospital'>Hospitals</option> | ||
59 | <option value='museum'>Museums</option> | ||
60 | <option value='restaurant'>Restaurants</option> | ||
61 | |||
62 | </select> | ||
63 | </div> | ||
64 | <div data-montage-id="map" id="map" class="montage-google-map">MAP</div> | ||
65 | |||
66 | </div> | ||
67 | |||
68 | </body> | ||
69 | </html> | ||
diff --git a/node_modules/montage/ui/map.reel/map.js b/node_modules/montage/ui/map.reel/map.js new file mode 100644 index 00000000..c03d51c5 --- /dev/null +++ b/node_modules/montage/ui/map.reel/map.js | |||
@@ -0,0 +1,283 @@ | |||
1 | /* <copyright> | ||
2 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
3 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
4 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
5 | </copyright> */ | ||
6 | /** | ||
7 | |||
8 | @requires montage/core/core | ||
9 | @requires montage/ui/component | ||
10 | */ | ||
11 | var Montage = require("montage").Montage, | ||
12 | Component = require("ui/component").Component; | ||
13 | |||
14 | /** | ||
15 | @class module:"montage/ui/google/map.reel".Map | ||
16 | @extends module:montage/ui/component.Component | ||
17 | */ | ||
18 | var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/toggle-switch.reel".ToggleSwitch# */ { | ||
19 | |||
20 | didCreate: { | ||
21 | value: function() { | ||
22 | var self = this; | ||
23 | window.initialize = function initialize() { | ||
24 | console.log('google maps api loaded'); | ||
25 | self._mapLoaded = true; | ||
26 | self._geoCoder = new google.maps.Geocoder(); | ||
27 | self.needsDraw = true; | ||
28 | }; | ||
29 | } | ||
30 | }, | ||
31 | |||
32 | _geoCoder: {value: null}, | ||
33 | |||
34 | // HTMLElement to load the Map into | ||
35 | mapEl: {value: null}, | ||
36 | |||
37 | _mapLoaded: { | ||
38 | enumerable: false, | ||
39 | value: false | ||
40 | }, | ||
41 | _map: { | ||
42 | enumerable: false, | ||
43 | value: false | ||
44 | }, | ||
45 | _latitude: { | ||
46 | enumerable: false, | ||
47 | value: -34.397 | ||
48 | }, | ||
49 | latitude: { | ||
50 | enumerable: false, | ||
51 | set: function(value) { | ||
52 | this._latitude = value; | ||
53 | this.needsDraw = true; | ||
54 | }, | ||
55 | get: function() { | ||
56 | return this._latitude; | ||
57 | } | ||
58 | }, | ||
59 | _longitude: { | ||
60 | enumerable: false, | ||
61 | value: -34.397 | ||
62 | }, | ||
63 | longitude: { | ||
64 | enumerable: false, | ||
65 | set: function(value) { | ||
66 | this._longitude = value; | ||
67 | this.needsDraw = true; | ||
68 | }, | ||
69 | get: function() { | ||
70 | return this._longitude; | ||
71 | } | ||
72 | }, | ||
73 | |||
74 | defaultLatLng: { | ||
75 | value: {lat: -34.397, lng: 150.644} | ||
76 | }, | ||
77 | |||
78 | _latLng: { | ||
79 | value: this.defaultLatLng, | ||
80 | distinct: true | ||
81 | }, | ||
82 | latLng: { | ||
83 | get: function() { | ||
84 | return this._latLng; | ||
85 | }, | ||
86 | set: function(value) { | ||
87 | if(value) { | ||
88 | this._latLng = value; | ||
89 | // refresh the map | ||
90 | this.needsDraw = true; | ||
91 | } | ||
92 | } | ||
93 | }, | ||
94 | |||
95 | // {lat, lon} Or a String representing the location (eg: Paris, France) | ||
96 | center: { | ||
97 | get: function() { | ||
98 | return this._center; | ||
99 | }, | ||
100 | set: function(value) { | ||
101 | if(value) { | ||
102 | var self = this, geocoder = this._geoCoder; | ||
103 | this._center = value; | ||
104 | if(this._mapLoaded) { | ||
105 | |||
106 | if(String.isString(value)) { | ||
107 | // geocode | ||
108 | geocoder.geocode( { 'address': value}, function(results, status) { | ||
109 | if (status == google.maps.GeocoderStatus.OK) { | ||
110 | var loc = results[0].geometry.location; | ||
111 | self.latLng = {lat: loc.lat(), lng: loc.lng()}; | ||
112 | } else { | ||
113 | console.log('Geocode was not successful : ' + status); | ||
114 | } | ||
115 | }); | ||
116 | } else if(value.lat && value.lng) { | ||
117 | this.latLng = value; | ||
118 | } else { | ||
119 | // default location | ||
120 | this.latLng = this.defaultLatLng; | ||
121 | } | ||
122 | |||
123 | } | ||
124 | |||
125 | } | ||
126 | |||
127 | } | ||
128 | }, | ||
129 | |||
130 | category: { | ||
131 | get: function() { | ||
132 | return this._category; | ||
133 | }, | ||
134 | set: function(value) { | ||
135 | if(value) { | ||
136 | this._category = value; | ||
137 | this._getPlaces(this._category); | ||
138 | this.needsDraw = true; | ||
139 | } | ||
140 | } | ||
141 | }, | ||
142 |