diff options
Diffstat (limited to 'node_modules/montage/examples/feed-reader')
-rw-r--r-- | node_modules/montage/examples/feed-reader/images/47-fuel.png | bin | 0 -> 3091 bytes | |||
-rw-r--r-- | node_modules/montage/examples/feed-reader/images/80-shopping-cart.png | bin | 0 -> 2963 bytes | |||
-rw-r--r-- | node_modules/montage/examples/feed-reader/images/88-beer-mug.png | bin | 0 -> 3087 bytes | |||
-rw-r--r-- | node_modules/montage/examples/feed-reader/main.reel/main.html | 96 | ||||
-rw-r--r-- | node_modules/montage/examples/feed-reader/main.reel/main.js | 10 |
5 files changed, 103 insertions, 3 deletions
diff --git a/node_modules/montage/examples/feed-reader/images/47-fuel.png b/node_modules/montage/examples/feed-reader/images/47-fuel.png new file mode 100644 index 00000000..617d7640 --- /dev/null +++ b/node_modules/montage/examples/feed-reader/images/47-fuel.png | |||
Binary files differ | |||
diff --git a/node_modules/montage/examples/feed-reader/images/80-shopping-cart.png b/node_modules/montage/examples/feed-reader/images/80-shopping-cart.png new file mode 100644 index 00000000..51a5f86f --- /dev/null +++ b/node_modules/montage/examples/feed-reader/images/80-shopping-cart.png | |||
Binary files differ | |||
diff --git a/node_modules/montage/examples/feed-reader/images/88-beer-mug.png b/node_modules/montage/examples/feed-reader/images/88-beer-mug.png new file mode 100644 index 00000000..b0fdd99a --- /dev/null +++ b/node_modules/montage/examples/feed-reader/images/88-beer-mug.png | |||
Binary files differ | |||
diff --git a/node_modules/montage/examples/feed-reader/main.reel/main.html b/node_modules/montage/examples/feed-reader/main.reel/main.html index 8ea9a79b..1313219f 100644 --- a/node_modules/montage/examples/feed-reader/main.reel/main.html +++ b/node_modules/montage/examples/feed-reader/main.reel/main.html | |||
@@ -44,7 +44,9 @@ | |||
44 | "module": "montage/ui/feed-reader/feed-reader.reel", | 44 | "module": "montage/ui/feed-reader/feed-reader.reel", |
45 | "name": "FeedReader", | 45 | "name": "FeedReader", |
46 | "properties": { | 46 | "properties": { |
47 | "element": {"#": "feed-reader"} | 47 | "element": {"#": "feed-reader"}, |
48 | "feedDisplayMode": "animation", | ||
49 | "interval": "3" | ||
48 | } | 50 | } |
49 | }, | 51 | }, |
50 | 52 | ||
@@ -76,9 +78,29 @@ | |||
76 | "map": { | 78 | "map": { |
77 | "prototype": "montage/ui/map.reel", | 79 | "prototype": "montage/ui/map.reel", |
78 | "properties": { | 80 | "properties": { |
79 | "element": {"#": "map"} | 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"} | ||
80 | } | 96 | } |
81 | }, | 97 | }, |
98 | "traffic": { | ||
99 | "prototype": "montage/ui/checkbox.reel", | ||
100 | "properties": { | ||
101 | "element": {"#": "traffic"} | ||
102 | } | ||
103 | }, | ||
82 | 104 | ||
83 | "owner": { | 105 | "owner": { |
84 | "module": "main.reel", | 106 | "module": "main.reel", |
@@ -92,6 +114,10 @@ | |||
92 | "mapCenter": { | 114 | "mapCenter": { |
93 | "boundObject": {"@": "mapCenter"}, | 115 | "boundObject": {"@": "mapCenter"}, |
94 | "boundObjectPropertyPath": "value" | 116 | "boundObjectPropertyPath": "value" |
117 | }, | ||
118 | "mapCategory": { | ||
119 | "boundObject": {"@": "types"}, | ||
120 | "boundObjectPropertyPath": "value" | ||
95 | } | 121 | } |
96 | } | 122 | } |
97 | } | 123 | } |
@@ -140,7 +166,59 @@ | |||
140 | visibility: hidden; | 166 | visibility: hidden; |
141 | } | 167 | } |
142 | 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); | ||
219 | } | ||
143 | 220 | ||
221 | |||
144 | </style> | 222 | </style> |
145 | 223 | ||
146 | 224 | ||
@@ -159,7 +237,7 @@ | |||
159 | <input type="button" id="btn-go" class="btn primary" value="OK"></button> | 237 | <input type="button" id="btn-go" class="btn primary" value="OK"></button> |
160 | </form> | 238 | </form> |
161 | </div> | 239 | </div> |
162 | <div class="feed-reader" id="feed-reader"></div> | 240 | <div class="feed-reader rotateWithAlphaAnimation" id="feed-reader" ></div> |
163 | </section> | 241 | </section> |
164 | 242 | ||
165 | <section class="map-container"> | 243 | <section class="map-container"> |
@@ -168,6 +246,18 @@ | |||
168 | <form> | 246 | <form> |
169 | Location: <input type="text" value="Paris, France" id="map-center" required /> | 247 | Location: <input type="text" value="Paris, France" id="map-center" required /> |
170 | <input type="button" id="btn-map" class="btn primary" value="OK"></button> | 248 | <input type="button" id="btn-map" class="btn primary" value="OK"></button> |
249 | <div> | ||
250 | Show: | ||
251 | <select data-montage-id="types"> | ||
252 | <option value=''>Select a Category</option> | ||
253 | <option value='grocery_or_supermarket'>Groceries/Supermarkets</option> | ||
254 | <option value='hospital'>Hospitals</option> | ||
255 | <option value='restaurant'>Restaurants</option> | ||
256 | <option value='bar'>Bars</option> | ||
257 | <option value='gas_station'>Gas Stations</option> | ||
258 | </select> | ||
259 | </div> | ||
260 | <input type="checkbox" id="traffic">Show Traffic</input> | ||
171 | </form> | 261 | </form> |
172 | </div> | 262 | </div> |
173 | <div id="map">Map</div> | 263 | <div id="map">Map</div> |
diff --git a/node_modules/montage/examples/feed-reader/main.reel/main.js b/node_modules/montage/examples/feed-reader/main.reel/main.js index bea5f91a..06d8fdba 100644 --- a/node_modules/montage/examples/feed-reader/main.reel/main.js +++ b/node_modules/montage/examples/feed-reader/main.reel/main.js | |||
@@ -13,6 +13,16 @@ exports.Main = Montage.create(Component, { | |||
13 | distinct: true | 13 | distinct: true |
14 | }, | 14 | }, |
15 | 15 | ||
16 | mapCategory: { | ||
17 | get: function() { | ||
18 | return this._mapCategory; | ||
19 | }, | ||
20 | set: function(value) { | ||
21 | this._mapCategory = value; | ||
22 | this.map.category = value; | ||
23 | } | ||
24 | }, | ||
25 | |||
16 | feedReader: {value: null}, | 26 | feedReader: {value: null}, |
17 | 27 | ||
18 | map: {value: null}, | 28 | map: {value: null}, |