aboutsummaryrefslogtreecommitdiff
path: root/node_modules/montage/examples/feed-reader/main.reel/main.html
diff options
context:
space:
mode:
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.html274
1 files changed, 274 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..1313219f
--- /dev/null
+++ b/node_modules/montage/examples/feed-reader/main.reel/main.html
@@ -0,0 +1,274 @@
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 "feedDisplayMode": "animation",
49 "interval": "3"
50 }
51 },
52
53 "mapCenter": {
54 "module": "montage/ui/textfield.reel",
55 "name": "Textfield",
56 "properties": {
57 "element": {"#": "map-center"}
58 }
59 },
60
61 "mapButton": {
62 "module": "montage/ui/button.reel",
63 "name": "Button",
64 "properties": {
65 "element": {
66 "#": "btn-map"
67 },
68 "identifier": "mapButton"
69 },
70 "listeners": [
71 {
72 "type": "action",
73 "listener": {"@": "owner"}
74 }
75 ]
76 },
77
78 "map": {
79 "prototype": "montage/ui/map.reel",
80 "properties": {
81 "element": {"#": "map"},
82 "traffic": false
83 },
84 "bindings": {
85 "traffic": {
86 "boundObject": {"@": "traffic"},
87 "boundObjectPropertyPath": "checked"
88 }
89 }
90 },
91
92 "types": {
93 "prototype": "montage/ui/select-input.reel",
94 "properties": {
95 "element": {"#": "types"}
96 }
97 },
98 "traffic": {
99 "prototype": "montage/ui/checkbox.reel",
100 "properties": {
101 "element": {"#": "traffic"}
102 }
103 },
104
105 "owner": {
106 "module": "main.reel",
107 "name": "Main",
108 "properties": {
109 "element": {"#": "example-root"},
110 "feedReader": {"@": "feedReader"},
111 "map": {"@": "map"}
112 },
113 "bindings": {
114 "mapCenter": {
115 "boundObject": {"@": "mapCenter"},
116 "boundObjectPropertyPath": "value"
117 },
118 "mapCategory": {
119 "boundObject": {"@": "types"},
120 "boundObjectPropertyPath": "value"
121 }
122 }
123 }
124}
125 </script>
126
127 <style>
128
129 #feed-url, #map-center {
130 width: 60%;
131 }
132
133
134 .feed-reader-container {
135 float: left;
136 margin-right: 10px;
137 width: 500px;
138
139 }
140
141 .main {
142
143
144 }
145
146 .container {
147 }
148
149 .map-container {
150
151 float: left;
152 }
153
154 .montage-google-map {
155 margin: 0;
156 padding: 0;
157 width: 600px;
158 height: 700px;
159 }
160
161 .clearfix {
162 content: ".";
163 display: block;
164 height: 0;
165 clear: both;
166 visibility: hidden;
167 }
168
169 #map, #feed-reader {
170 margin-top: 10px;
171 }
172
173
174 /*
175 .feed-reader .feed-entry {
176 visibility:hidden;
177 opacity:0;
178 transition:visibility 0s linear 0.5s,opacity 0.5s linear;
179 }
180 .feed-reader .feed-entry .active {
181 visibility:visible;
182 opacity:1;
183 transition-delay:0s;
184 }
185 */
186
187 @-webkit-keyframes rotateWithAlphaKeyframes {
188 0% {
189 opacity: 0;
190 -webkit-transform: perspective(1000) rotateY(95deg);
191 }
192 1% {
193 opacity: 0;
194 -webkit-transform: perspective(1000) rotateY(-90deg);
195 }
196 15% {
197 opacity: 1;
198 -webkit-transform: perspective(1000) rotateY(0deg);
199 }
200 85% {
201 opacity: 1;
202 -webkit-transform: perspective(1000) rotateY(0deg);
203 }
204 100% {
205 opacity: 0;
206 -webkit-transform: perspective(1000) rotateY(95deg);
207 }
208 }
209
210 .rotateWithAlphaAnimation {
211 -webkit-animation-name: rotateWithAlphaKeyframes;
212 -webkit-animation-duration: 5s;
213 -webkit-animation-iteration-count: infinite;
214 -webkit-animation-direction: normal;
215 -webkit-animation-timing-function: ease-out;
216 -webkit-transform-origin: 200% 50%;
217 -webkit-transform-style: preserve-3d;
218 -webkit-transform: perspective(1000);