diff options
Diffstat (limited to 'node_modules/montage/examples/feed-reader/main.reel/main.html')
-rw-r--r-- | node_modules/montage/examples/feed-reader/main.reel/main.html | 184 |
1 files changed, 184 insertions, 0 deletions
diff --git a/node_modules/montage/examples/feed-reader/main.reel/main.html b/node_modules/montage/examples/feed-reader/main.reel/main.html new file mode 100644 index 00000000..8ea9a79b --- /dev/null +++ b/node_modules/montage/examples/feed-reader/main.reel/main.html | |||
@@ -0,0 +1,184 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <html> | ||
3 | <head> | ||
4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
5 | <title>Feed Reader Example</title> | ||
6 | |||
7 | |||
8 | |||
9 | <script type="text/montage-serialization"> | ||
10 | { | ||
11 | |||
12 | "goButton": { | ||
13 | "module": "montage/ui/button.reel", | ||
14 | "name": "Button", | ||
15 | "properties": { | ||
16 | "element": { | ||
17 | "#": "btn-go" | ||
18 | }, | ||
19 | "identifier": "go" | ||
20 | }, | ||
21 | "listeners": [ | ||
22 | { | ||
23 | "type": "action", | ||
24 | "listener": {"@": "owner"} | ||
25 | } | ||
26 | ] | ||
27 | }, | ||
28 | |||
29 | "feedURL": { | ||
30 | "module": "montage/ui/textfield.reel", | ||
31 | "name": "Textfield", | ||
32 | "properties": { | ||
33 | "element": {"#": "feed-url"} | ||
34 | }, | ||
35 | "bindings": { | ||
36 | "value": { | ||
37 | "boundObject": {"@": "owner"}, | ||
38 | "boundObjectPropertyPath": "feedURL" | ||
39 | } | ||
40 | } | ||
41 | }, | ||
42 | |||
43 | "feedReader": { | ||
44 | "module": "montage/ui/feed-reader/feed-reader.reel", | ||
45 | "name": "FeedReader", | ||
46 | "properties": { | ||
47 | "element": {"#": "feed-reader"} | ||
48 | } | ||
49 | }, | ||
50 | |||
51 | "mapCenter": { | ||
52 | "module": "montage/ui/textfield.reel", | ||
53 | "name": "Textfield", | ||
54 | "properties": { | ||
55 | "element": {"#": "map-center"} | ||
56 | } | ||
57 | }, | ||
58 | |||
59 | "mapButton": { | ||
60 | "module": "montage/ui/button.reel", | ||
61 | "name": "Button", | ||
62 | "properties": { | ||
63 | "element": { | ||
64 | "#": "btn-map" | ||
65 | }, | ||
66 | "identifier": "mapButton" | ||
67 | }, | ||
68 | "listeners": [ | ||
69 | { | ||
70 | "type": "action", | ||
71 | "listener": {"@": "owner"} | ||
72 | } | ||
73 | ] | ||
74 | }, | ||
75 | |||
76 | "map": { | ||
77 | "prototype": "montage/ui/map.reel", | ||
78 | "properties": { | ||
79 | "element": {"#": "map"} | ||
80 | } | ||
81 | }, | ||
82 | |||
83 | "owner": { | ||
84 | "module": "main.reel", | ||
85 | "name": "Main", | ||
86 | "properties": { | ||
87 | "element": {"#": "example-root"}, | ||
88 | "feedReader": {"@": "feedReader"}, | ||
89 | "map": {"@": "map"} | ||
90 | }, | ||
91 | "bindings": { | ||
92 | "mapCenter": { | ||
93 | "boundObject": {"@": "mapCenter"}, | ||
94 | "boundObjectPropertyPath": "value" | ||
95 | } | ||
96 | } | ||
97 | } | ||
98 | } | ||
99 | </script> | ||
100 | |||
101 | <style> | ||
102 | |||
103 | #feed-url, #map-center { | ||
104 | width: 60%; | ||
105 | } | ||
106 | |||
107 | |||
108 | .feed-reader-container { | ||
109 | float: left; | ||
110 | margin-right: 10px; | ||
111 | width: 500px; | ||
112 | |||
113 | } | ||
114 | |||
115 | .main { | ||
116 | |||
117 | |||
118 | } | ||
119 | |||
120 | .container { | ||
121 | } | ||
122 | |||
123 | .map-container { | ||
124 | |||
125 | float: left; | ||
126 | } | ||
127 | |||
128 | .montage-google-map { | ||
129 | margin: 0; | ||
130 | padding: 0; | ||
131 | width: 600px; | ||
132 | height: 700px; | ||
133 | } | ||
134 | |||
135 | .clearfix { | ||
136 | content: "."; | ||
137 | display: block; | ||
138 | height: 0; | ||
139 | clear: both; | ||
140 | visibility: hidden; | ||
141 | } | ||
142 | |||
143 | |||
144 | </style> | ||
145 | |||
146 | |||
147 | </head> | ||
148 | <body> | ||
149 | <div id="example-root"> | ||
150 | |||
151 | |||
152 | |||
153 | <div class="main"> | ||
154 | <section class="feed-reader-container container"> | ||
155 | <div> | ||
156 | <h1>Top Stories Around you</h1> | ||
157 | <form> | ||
158 | Feed URL: <input type="url" size="100" value="http://news.google.com/news?ned=us&topic=h&output=rss" id="feed-url" required /> | ||
159 | <input type="button" id="btn-go" class="btn primary" value="OK"></button> | ||
160 | </form> | ||
161 | </div> | ||
162 | <div class="feed-reader" id="feed-reader"></div> | ||
163 | </section> | ||
164 | |||
165 | <section class="map-container"> | ||
166 | <div> | ||
167 | <h1>Find your way</h1> | ||
168 | <form> | ||
169 | Location: <input type="text" value="Paris, France" id="map-center" required /> | ||
170 | <input type="button" id="btn-map" class="btn primary" value="OK"></button> | ||
171 | </form> | ||
172 | </div> | ||
173 | <div id="map">Map</div> | ||
174 | </section> | ||
175 | |||
176 | <div class="clearfix" /> | ||
177 | |||
178 | </div> | ||
179 | |||
180 | |||
181 | </div> | ||
182 | |||
183 | </body> | ||
184 | </html> | ||