From 1d0efc758bc9404eebbc8b8d592de9dbb329899e Mon Sep 17 00:00:00 2001
From: François Frisch
Date: Sat, 17 Mar 2012 11:21:22 -0700
Subject: Adding feed reader and map

---
 .../examples/feed-reader/images/07-map-marker.png  | Bin 0 -> 3131 bytes
 .../examples/feed-reader/images/10-medical.png     | Bin 0 -> 2915 bytes
 .../examples/feed-reader/images/100-coffee.png     | Bin 0 -> 2958 bytes
 .../examples/feed-reader/images/107-widescreen.png | Bin 0 -> 2986 bytes
 .../examples/feed-reader/images/125-food.png       | Bin 0 -> 3038 bytes
 .../feed-reader/images/142-wine-bottle.png         | Bin 0 -> 187 bytes
 .../examples/feed-reader/images/34-coffee.png      | Bin 0 -> 3052 bytes
 .../examples/feed-reader/images/35-shopping.png    | Bin 0 -> 2970 bytes
 .../examples/feed-reader/images/38-airplane.png    | Bin 0 -> 3004 bytes
 .../feed-reader/images/41-picture-frame.png        | Bin 0 -> 2928 bytes
 .../feed-reader/images/48-fork-and-knife.png       | Bin 0 -> 2882 bytes
 .../examples/feed-reader/images/87-wine-glass.png  | Bin 0 -> 2983 bytes
 .../montage/examples/feed-reader/index.html        |  81 +++++++++
 .../examples/feed-reader/main.reel/main.html       | 184 +++++++++++++++++++++
 .../montage/examples/feed-reader/main.reel/main.js |  45 +++++
 .../examples/feed-reader/map-example.reel/main.css |   2 +
 .../feed-reader/map-example.reel/main.html         |  58 +++++++
 .../examples/feed-reader/map-example.reel/main.js  |  24 +++
 .../montage/examples/feed-reader/package.json      |  10 ++
 19 files changed, 404 insertions(+)
 create mode 100644 node_modules/montage/examples/feed-reader/images/07-map-marker.png
 create mode 100644 node_modules/montage/examples/feed-reader/images/10-medical.png
 create mode 100644 node_modules/montage/examples/feed-reader/images/100-coffee.png
 create mode 100644 node_modules/montage/examples/feed-reader/images/107-widescreen.png
 create mode 100644 node_modules/montage/examples/feed-reader/images/125-food.png
 create mode 100644 node_modules/montage/examples/feed-reader/images/142-wine-bottle.png
 create mode 100644 node_modules/montage/examples/feed-reader/images/34-coffee.png
 create mode 100644 node_modules/montage/examples/feed-reader/images/35-shopping.png
 create mode 100644 node_modules/montage/examples/feed-reader/images/38-airplane.png
 create mode 100644 node_modules/montage/examples/feed-reader/images/41-picture-frame.png
 create mode 100644 node_modules/montage/examples/feed-reader/images/48-fork-and-knife.png
 create mode 100644 node_modules/montage/examples/feed-reader/images/87-wine-glass.png
 create mode 100644 node_modules/montage/examples/feed-reader/index.html
 create mode 100644 node_modules/montage/examples/feed-reader/main.reel/main.html
 create mode 100644 node_modules/montage/examples/feed-reader/main.reel/main.js
 create mode 100644 node_modules/montage/examples/feed-reader/map-example.reel/main.css
 create mode 100644 node_modules/montage/examples/feed-reader/map-example.reel/main.html
 create mode 100644 node_modules/montage/examples/feed-reader/map-example.reel/main.js
 create mode 100644 node_modules/montage/examples/feed-reader/package.json

(limited to 'node_modules/montage/examples/feed-reader')

diff --git a/node_modules/montage/examples/feed-reader/images/07-map-marker.png b/node_modules/montage/examples/feed-reader/images/07-map-marker.png
new file mode 100644
index 00000000..a5d99d69
Binary files /dev/null and b/node_modules/montage/examples/feed-reader/images/07-map-marker.png differ
diff --git a/node_modules/montage/examples/feed-reader/images/10-medical.png b/node_modules/montage/examples/feed-reader/images/10-medical.png
new file mode 100644
index 00000000..ab78c783
Binary files /dev/null and b/node_modules/montage/examples/feed-reader/images/10-medical.png differ
diff --git a/node_modules/montage/examples/feed-reader/images/100-coffee.png b/node_modules/montage/examples/feed-reader/images/100-coffee.png
new file mode 100644
index 00000000..4e9c517a
Binary files /dev/null and b/node_modules/montage/examples/feed-reader/images/100-coffee.png differ
diff --git a/node_modules/montage/examples/feed-reader/images/107-widescreen.png b/node_modules/montage/examples/feed-reader/images/107-widescreen.png
new file mode 100644
index 00000000..2e5f1ba7
Binary files /dev/null and b/node_modules/montage/examples/feed-reader/images/107-widescreen.png differ
diff --git a/node_modules/montage/examples/feed-reader/images/125-food.png b/node_modules/montage/examples/feed-reader/images/125-food.png
new file mode 100644
index 00000000..81afd74a
Binary files /dev/null and b/node_modules/montage/examples/feed-reader/images/125-food.png differ
diff --git a/node_modules/montage/examples/feed-reader/images/142-wine-bottle.png b/node_modules/montage/examples/feed-reader/images/142-wine-bottle.png
new file mode 100644
index 00000000..a7df9e97
Binary files /dev/null and b/node_modules/montage/examples/feed-reader/images/142-wine-bottle.png differ
diff --git a/node_modules/montage/examples/feed-reader/images/34-coffee.png b/node_modules/montage/examples/feed-reader/images/34-coffee.png
new file mode 100644
index 00000000..4c4bedad
Binary files /dev/null and b/node_modules/montage/examples/feed-reader/images/34-coffee.png differ
diff --git a/node_modules/montage/examples/feed-reader/images/35-shopping.png b/node_modules/montage/examples/feed-reader/images/35-shopping.png
new file mode 100644
index 00000000..03689f99
Binary files /dev/null and b/node_modules/montage/examples/feed-reader/images/35-shopping.png differ
diff --git a/node_modules/montage/examples/feed-reader/images/38-airplane.png b/node_modules/montage/examples/feed-reader/images/38-airplane.png
new file mode 100644
index 00000000..dfcbbc78
Binary files /dev/null and b/node_modules/montage/examples/feed-reader/images/38-airplane.png differ
diff --git a/node_modules/montage/examples/feed-reader/images/41-picture-frame.png b/node_modules/montage/examples/feed-reader/images/41-picture-frame.png
new file mode 100644
index 00000000..6deee997
Binary files /dev/null and b/node_modules/montage/examples/feed-reader/images/41-picture-frame.png differ
diff --git a/node_modules/montage/examples/feed-reader/images/48-fork-and-knife.png b/node_modules/montage/examples/feed-reader/images/48-fork-and-knife.png
new file mode 100644
index 00000000..06d91088
Binary files /dev/null and b/node_modules/montage/examples/feed-reader/images/48-fork-and-knife.png differ
diff --git a/node_modules/montage/examples/feed-reader/images/87-wine-glass.png b/node_modules/montage/examples/feed-reader/images/87-wine-glass.png
new file mode 100644
index 00000000..b4d34474
Binary files /dev/null and b/node_modules/montage/examples/feed-reader/images/87-wine-glass.png differ
diff --git a/node_modules/montage/examples/feed-reader/index.html b/node_modules/montage/examples/feed-reader/index.html
new file mode 100644
index 00000000..3b5529b9
--- /dev/null
+++ b/node_modules/montage/examples/feed-reader/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>Montage Feed Reader</title>
+    
+    <script src="../../montage.js" data-package="."></script>
+
+    <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module": "montage/ui/loader.reel",
+                "name": "Loader"
+            }
+        }
+    </script>
+
+    <style type="text/css">
+    
+        html, body {
+          background-color: #eee;
+          font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+          font-size: 13px;
+          font-weight: normal;
+          line-height: 18px;
+          color: #404040;
+          
+        }
+
+        #montage-bootstrapper {
+            display: none;
+            color: red;
+        }
+
+        .montage-bootstrapping #montage-bootstrapper {
+            display: block;
+        }
+
+        #montage-loader {
+            color: green;
+            display: none;
+        }
+
+        .montage-loading #montage-loader {
+            display: block;
+        }
+
+        .main {
+            display: block;
+        }
+
+        .montage-loaded .main {
+            display: block;
+        }
+
+    </style>
+
+</head>
+<body>
+
+    <p>
+        <center>
+            <img src="montage-logo.png" />
+        </center>
+    </p>
+
+    <div id="montage-bootstrapper">
+        <p>This is the bootstrapper content which will now be shown for at least 1500ms.</p>
+    </div>
+    <div id="montage-loader">
+        <p>This is the loader content which will now be shown for at least 2000ms.</p>
+    </div>
+
+
+</body>
+</html>
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 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>Feed Reader Example</title>
+
+
+
+    <script type="text/montage-serialization">
+{
+
+    "goButton": {
+        "module": "montage/ui/button.reel",
+        "name": "Button",
+        "properties": {
+            "element": {
+                "#": "btn-go"
+            },
+            "identifier": "go"
+        },
+        "listeners": [
+            {
+                "type": "action",
+                "listener": {"@": "owner"}
+            }
+        ]
+    },
+
+    "feedURL": {
+        "module": "montage/ui/textfield.reel",
+        "name": "Textfield",
+        "properties": {
+            "element": {"#": "feed-url"}
+        },
+        "bindings": {
+            "value": {
+                "boundObject": {"@": "owner"},
+                "boundObjectPropertyPath": "feedURL"
+            }
+        }
+    },
+
+    "feedReader": {
+        "module": "montage/ui/feed-reader/feed-reader.reel",
+        "name": "FeedReader",
+        "properties": {
+            "element": {"#": "feed-reader"}
+        }
+    },
+    
+    "mapCenter": {
+        "module": "montage/ui/textfield.reel",
+        "name": "Textfield",
+        "properties": {
+            "element": {"#": "map-center"}
+        }        
+    },
+    
+    "mapButton": {
+        "module": "montage/ui/button.reel",
+        "name": "Button",
+        "properties": {
+            "element": {
+                "#": "btn-map"
+            },
+            "identifier": "mapButton"
+        },
+        "listeners": [
+            {
+                "type": "action",
+                "listener": {"@": "owner"}
+            }
+        ]
+    },
+    
+    "map": {
+        "prototype": "montage/ui/map.reel",
+        "properties": {
+            "element": {"#": "map"}
+        }
+    },
+
+    "owner": {
+        "module": "main.reel",
+        "name": "Main",
+        "properties": {
+            "element": {"#": "example-root"},
+            "feedReader": {"@": "feedReader"},
+            "map": {"@": "map"}
+        },
+        "bindings": {
+            "mapCenter": {
+                "boundObject": {"@": "mapCenter"},
+                "boundObjectPropertyPath": "value"
+            }
+        }
+    }
+}
+    </script>
+
+    <style>
+
+        #feed-url, #map-center {
+            width: 60%;
+        }
+    
+        
+        .feed-reader-container {
+            float: left;
+            margin-right: 10px;
+            width: 500px;
+
+        }
+
+        .main {
+            
+            
+        }
+        
+        .container {
+        }
+        
+        .map-container {
+            			
+			float: left;
+		}
+		
+		.montage-google-map {
+	        margin: 0;
+	        padding: 0;
+	        width: 600px;
+            height: 700px;
+		}
+		
+		.clearfix {
+            content: ".";
+            display: block;
+            height: 0;
+            clear: both;
+            visibility: hidden;
+        }
+        
+
+    </style>
+
+
+</head>
+<body>
+    <div id="example-root">
+
+        
+
+        <div class="main">
+            <section class="feed-reader-container container">
+                <div>
+                    <h1>Top Stories Around you</h1>
+                    <form>
+                        Feed URL: <input type="url" size="100" value="http://news.google.com/news?ned=us&topic=h&output=rss" id="feed-url" required />
+                        <input type="button" id="btn-go" class="btn primary" value="OK"></button>
+                    </form>
+                </div>
+                <div class="feed-reader" id="feed-reader"></div>
+            </section>
+            
+            <section class="map-container">
+                <div>
+                    <h1>Find your way</h1>
+                    <form>
+                        Location: <input type="text" value="Paris, France" id="map-center" required />
+                        <input type="button" id="btn-map" class="btn primary" value="OK"></button>
+                    </form>
+                </div>
+                <div id="map">Map</div>
+            </section>
+            
+            <div class="clearfix" />
+
+        </div>
+
+
+    </div>
+
+</body>
+</html>
diff --git a/node_modules/montage/examples/feed-reader/main.reel/main.js b/node_modules/montage/examples/feed-reader/main.reel/main.js
new file mode 100644
index 00000000..bea5f91a
--- /dev/null
+++ b/node_modules/montage/examples/feed-reader/main.reel/main.js
@@ -0,0 +1,45 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+var Montage = require("montage/core/core").Montage,
+    Component = require("montage/ui/component").Component;
+
+exports.Main = Montage.create(Component, {
+
+    feedURL: {
+        value: 'http://rss.cnn.com/rss/cnn_mostpopular.rss',
+        distinct: true
+    },
+    
+    feedReader: {value: null},
+    
+    map: {value: null},
+    
+    mapCenter: {value: null},
+    
+    handleGoAction: {
+        value: function(event) {
+            event.preventDefault();
+            this.feedReader.feedURL = this.feedURL;
+            
+        }
+    },
+    
+    handleMapButtonAction: {
+        value: function(event) {
+            event.preventDefault();            
+            this.map.center = this.mapCenter;            
+        }
+    },
+    
+    draw: {
+        value: function() {
+            if(this.mapCenter != null) {
+                this.map.center = this.mapCenter;
+            }
+        }
+    }
+    
+});
diff --git a/node_modules/montage/examples/feed-reader/map-example.reel/main.css b/node_modules/montage/examples/feed-reader/map-example.reel/main.css
new file mode 100644
index 00000000..139597f9
--- /dev/null
+++ b/node_modules/montage/examples/feed-reader/map-example.reel/main.css
@@ -0,0 +1,2 @@
+
+
diff --git a/node_modules/montage/examples/feed-reader/map-example.reel/main.html b/node_modules/montage/examples/feed-reader/map-example.reel/main.html
new file mode 100644
index 00000000..889ca8d6
--- /dev/null
+++ b/node_modules/montage/examples/feed-reader/map-example.reel/main.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!-- <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> -->
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>Main Component</title>
+
+    <style type="text/css">
+
+		.map-container {
+			width: 500px;
+			height: 500px;
+			position: relative;
+		}
+		
+		.montage-google-map {
+			position: relative;
+	        margin: 0;
+	        padding: 0;
+		}
+    </style>
+
+    <script type="text/montage-serialization">
+        {
+            "owner": {
+                "module": "main.reel",
+                "name": "Main",
+                "properties": {
+                    "element": {"#": "main"}
+                }
+            },
+
+            "map": {
+                "prototype": "montage/ui/google/map.reel",
+                "properties": {
+                    "element": {"#": "map"}
+                }
+            }
+        }
+    </script>
+
+</head>
+<body>
+
+    <div id="main" class="main">
+        <p>Main component of application</p>
+		<div class="map-container">
+        	<div id="map"></div>
+		</div>
+
+    </div>
+
+</body>
+</html>
diff --git a/node_modules/montage/examples/feed-reader/map-example.reel/main.js b/node_modules/montage/examples/feed-reader/map-example.reel/main.js
new file mode 100644
index 00000000..54b84425
--- /dev/null
+++ b/node_modules/montage/examples/feed-reader/map-example.reel/main.js
@@ -0,0 +1,24 @@
+/* <copyright>
+ This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
+ No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
+ (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
+ </copyright> */
+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")
+        }
+    },
+
+    prepareForDraw: {
+        value: function() {
+            //console.log("main prepareForDraw")
+        }
+    }
+
+});
diff --git a/node_modules/montage/examples/feed-reader/package.json b/node_modules/montage/examples/feed-reader/package.json
new file mode 100644
index 00000000..cbb9365f
--- /dev/null
+++ b/node_modules/montage/examples/feed-reader/package.json
@@ -0,0 +1,10 @@
+{
+    "name": "loader",
+    "version": "0.0.0",
+    "mappings": {
+        "montage": "../.."
+    },
+    "directories": {
+        "lib": ""
+    }
+}
-- 
cgit v1.2.3


From 9d364be255900e9bde02c4b254d145ec41fc78fb Mon Sep 17 00:00:00 2001
From: Kishore Subramanian
Date: Mon, 19 Mar 2012 10:36:49 -0700
Subject: Changes to the Demo

- Feed Reader now shows one entry at a time
- Category dropdown removed form the Map. It is included as part of the example code
- Changed the categories that do not return results
---
 .../examples/feed-reader/images/47-fuel.png        | Bin 0 -> 3091 bytes
 .../feed-reader/images/80-shopping-cart.png        | Bin 0 -> 2963 bytes
 .../examples/feed-reader/images/88-beer-mug.png    | Bin 0 -> 3087 bytes
 .../examples/feed-reader/main.reel/main.html       |  26 +++++++++++++++++++++
 .../montage/examples/feed-reader/main.reel/main.js |  10 ++++++++
 5 files changed, 36 insertions(+)
 create mode 100644 node_modules/montage/examples/feed-reader/images/47-fuel.png
 create mode 100644 node_modules/montage/examples/feed-reader/images/80-shopping-cart.png
 create mode 100644 node_modules/montage/examples/feed-reader/images/88-beer-mug.png

(limited to 'node_modules/montage/examples/feed-reader')

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
Binary files /dev/null and b/node_modules/montage/examples/feed-reader/images/47-fuel.png 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
Binary files /dev/null and b/node_modules/montage/examples/feed-reader/images/80-shopping-cart.png 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
Binary files /dev/null and b/node_modules/montage/examples/feed-reader/images/88-beer-mug.png 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..ef4fc92a 100644
--- a/node_modules/montage/examples/feed-reader/main.reel/main.html
+++ b/node_modules/montage/examples/feed-reader/main.reel/main.html
@@ -79,6 +79,13 @@
             "element": {"#": "map"}
         }
     },
+    
+    "types": {
+        "prototype": "montage/ui/select-input.reel",
+        "properties": {
+            "element": {"#": "types"}
+        }
+    },
 
     "owner": {
         "module": "main.reel",
@@ -92,6 +99,10 @@
             "mapCenter": {
                 "boundObject": {"@": "mapCenter"},
                 "boundObjectPropertyPath": "value"
+            },
+            "mapCategory": {
+                "boundObject": {"@": "types"},
+                "boundObjectPropertyPath": "value"
             }
         }
     }
@@ -140,6 +151,10 @@
             visibility: hidden;
         }
         
+        #map, #feed-reader {
+            margin-top: 10px;
+        }
+        
 
     </style>
 
@@ -168,6 +183,17 @@
                     <form>
                         Location: <input type="text" value="Paris, France" id="map-center" required />
                         <input type="button" id="btn-map" class="btn primary" value="OK"></button>
+                        <div>
+                            Show: 
+                            <select data-montage-id="types">
+                                <option value=''>Select a Category</option>
+                                <option value='grocery_or_supermarket'>Groceries/Supermarkets</option>
+                                <option value='hospital'>Hospitals</option>
+                                <option value='restaurant'>Restaurants</option>
+                                <option value='bar'>Bars</option>
+                                <option value='gas_station'>Gas Stations</option>
+                            </select>
+                        </div>
                     </form>
                 </div>
                 <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, {
         distinct: true
     },
     
+    mapCategory: {
+        get: function() {
+            return this._mapCategory;
+        },
+        set: function(value) {
+            this._mapCategory = value;
+            this.map.category = value;
+        }
+    },
+    
     feedReader: {value: null},
     
     map: {value: null},
-- 
cgit v1.2.3


From ec58642a7b31165890eb5bef7d95ce59dd0c34a0 Mon Sep 17 00:00:00 2001
From: Kishore Subramanian
Date: Mon, 19 Mar 2012 14:14:29 -0700
Subject: Changes to Map and FeedReader

- Added traffic property to Map
- Support for show/hide traffic in the example
- Changed FeedReader to use only one DIV. No longer uses Repetition
- Support multiple modes in the Feed reader - timed/animated---
 .../examples/feed-reader/main.reel/main.html       | 32 ++++++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

(limited to 'node_modules/montage/examples/feed-reader')

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 ef4fc92a..50bac601 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 @@
         "module": "montage/ui/feed-reader/feed-reader.reel",
         "name": "FeedReader",
         "properties": {
-            "element": {"#": "feed-reader"}
+            "element": {"#": "feed-reader"},
+            "feedDisplayMode": "timed",
+            "interval": "5"
         }
     },
     
@@ -76,7 +78,14 @@
     "map": {
         "prototype": "montage/ui/map.reel",
         "properties": {
-            "element": {"#": "map"}
+            "element": {"#": "map"},
+            "traffic": false
+        },
+        "bindings": {
+            "traffic": {
+                "boundObject": {"@": "traffic"},
+                "boundObjectPropertyPath": "checked"
+            }
         }
     },
     
@@ -86,6 +95,12 @@
             "element": {"#": "types"}
         }
     },
+    "traffic": {
+        "prototype": "montage/ui/checkbox.reel",
+        "properties": {
+            "element": {"#": "traffic"}
+        }        
+    },
 
     "owner": {
         "module": "main.reel",
@@ -155,6 +170,18 @@
             margin-top: 10px;
         }
         
+        /*
+        .feed-reader .feed-entry {
+            visibility:hidden;
+            opacity:0;
+            transition:visibility 0s linear 0.5s,opacity 0.5s linear;
+        }
+        .feed-reader .feed-entry .active {
+            visibility:visible;
+            opacity:1;
+            transition-delay:0s;
+        }
+        */
 
     </style>
 
@@ -194,6 +221,7 @@
                                 <option value='gas_station'>Gas Stations</option>
                             </select>
                         </div>
+                        <input type="checkbox" id="traffic">Show Traffic</input>
                     </form>
                 </div>
                 <div id="map">Map</div>
-- 
cgit v1.2.3


From 64f2a4b6c0ca9e47996ab9bcec05b51d1e1194e4 Mon Sep 17 00:00:00 2001
From: Kishore Subramanian
Date: Tue, 20 Mar 2012 09:42:29 -0700
Subject: Animation for the Feed reader

---
 .../examples/feed-reader/main.reel/main.html       | 42 ++++++++++++++++++++--
 1 file changed, 39 insertions(+), 3 deletions(-)

(limited to 'node_modules/montage/examples/feed-reader')

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 50bac601..1313219f 100644
--- a/node_modules/montage/examples/feed-reader/main.reel/main.html
+++ b/node_modules/montage/examples/feed-reader/main.reel/main.html
@@ -45,8 +45,8 @@
         "name": "FeedReader",
         "properties": {
             "element": {"#": "feed-reader"},
-            "feedDisplayMode": "timed",
-            "interval": "5"
+            "feedDisplayMode": "animation",
+            "interval": "3"
         }
     },
     
@@ -170,6 +170,7 @@
             margin-top: 10px;
         }
         
+        
         /*
         .feed-reader .feed-entry {
             visibility:hidden;
@@ -182,7 +183,42 @@
             transition-delay:0s;
         }
         */
+        
+        @-webkit-keyframes rotateWithAlphaKeyframes {
+            0% {
+                    opacity: 0;
+                    -webkit-transform: perspective(1000) rotateY(95deg);
+            }
+            1% {
+                    opacity: 0;
+                    -webkit-transform: perspective(1000) rotateY(-90deg);
+            }
+            15% {
+                    opacity: 1;
+                    -webkit-transform: perspective(1000) rotateY(0deg);
+            }
+            85% {
+                    opacity: 1;
+                    -webkit-transform: perspective(1000) rotateY(0deg);
+            }
+            100% {
+                    opacity: 0;
+                    -webkit-transform: perspective(1000) rotateY(95deg);
+            }
+        }
+        
+        .rotateWithAlphaAnimation {
+                -webkit-animation-name: rotateWithAlphaKeyframes;
+                -webkit-animation-duration: 5s;
+                -webkit-animation-iteration-count: infinite;
+                -webkit-animation-direction: normal;
+                -webkit-animation-timing-function: ease-out;
+                -webkit-transform-origin: 200% 50%;
+                -webkit-transform-style: preserve-3d;
+                -webkit-transform: perspective(1000);
+        }
 
+    
     </style>
 
 
@@ -201,7 +237,7 @@
                         <input type="button" id="btn-go" class="btn primary" value="OK"></button>
                     </form>
                 </div>
-                <div class="feed-reader" id="feed-reader"></div>
+                <div class="feed-reader rotateWithAlphaAnimation" id="feed-reader" ></div>
             </section>
             
             <section class="map-container">
-- 
cgit v1.2.3