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 ++++
 .../ui/feed-reader/feed-entry.reel/feed-entry.html |   1 -
 .../feed-reader/feed-reader.reel/feed-reader.html  |  26 +++++++++--
 .../ui/feed-reader/feed-reader.reel/feed-reader.js |  51 +++++++++++++++++++++
 node_modules/montage/ui/map.reel/map.html          |  31 ++-----------
 node_modules/montage/ui/map.reel/map.js            |  41 +++++------------
 10 files changed, 125 insertions(+), 61 deletions(-)
 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

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},
diff --git a/node_modules/montage/ui/feed-reader/feed-entry.reel/feed-entry.html b/node_modules/montage/ui/feed-reader/feed-entry.reel/feed-entry.html
index 213b4602..6c3a5298 100644
--- a/node_modules/montage/ui/feed-reader/feed-entry.reel/feed-entry.html
+++ b/node_modules/montage/ui/feed-reader/feed-entry.reel/feed-entry.html
@@ -61,7 +61,6 @@
        .feed-entry {
            padding: 10px;
            margin: 3px 0;
-           border: 1px solid #aaa;
        }
        .feed-entry h2 {
            font-size: 24px;
diff --git a/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html
index a3523001..646fd01e 100644
--- a/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html
+++ b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.html
@@ -53,7 +53,15 @@
         "module": "montage/ui/feed-reader/feed-reader.reel",
         "name": "FeedReader",
         "properties": {
-            "element": {"#": "feed-reader"}
+            "element": {"#": "feed-reader"},
+            "repetition": {"@": "repetition"}
+        },
+        "bindings": {
+            "items": {
+                "boundObject": {"@": "repetition"},
+                "boundObjectPropertyPath": "objects",
+                "oneway": true
+            }
         }
     }
     
@@ -61,8 +69,20 @@
     </script>
 
     <style>
-       .feed-reader {
-           padding: 10px;
+       div.feed-reader  {
+           padding: 10px;          
+       }
+       
+       .feed-entry {
+           display: none;
+       }
+       
+       .montage-hidden {
+           display: none;
+       }
+       
+       .active {
+           display: block;
        }
        
     </style>
diff --git a/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js
index 838a957d..d5c9ca17 100644
--- a/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js
+++ b/node_modules/montage/ui/feed-reader/feed-reader.reel/feed-reader.js
@@ -40,7 +40,13 @@ exports.FeedReader = Montage.create(Component, {
             this._fetchFeed();
         }
     },
+    
+    // time in ms between slides
+    interval: {value: 3000, distinct: true},
+    
+    repetition: {enumerable: false, value: null},
 
+    maxEntries: {value: 10, distinct: true},
     entries: {value: null},
 
 
@@ -55,6 +61,51 @@ exports.FeedReader = Montage.create(Component, {
             //Notifier.hide();
         }
     },
+    
+    
+    feedEntryTimer: {enumerable: false, value: null},
+    _items: {
+        value: null
+    },
+    items: {
+        get: function() {
+            return this._items;
+        },
+        set: function(value) {
+            this._items = value;
+            // reset the counter
+            console.log('got items');
+            this.activeIndex = 0;
+            
+            if(this.feedEntryTimer) {
+                window.clearInterval(this.feedEntryTimer);
+            }
+            var self = this, maxEntries = self.maxEntries;
+            
+            this.feedEntryTimer = setInterval(function() {
+                var index = self.activeIndex + 1;
+                if(index > maxEntries) {
+                    index = 0;
+                }
+                if(index < 0) {
+                    index = 0;
+                }
+                self.activeIndex = index;
+                
+            }, this.interval);
+        }
+    },
+    
+    _activeIndex: {value: null},
+    activeIndex: {
+        get: function() {
+            return this._activeIndex || 0;
+        },
+        set: function(value) {
+            this._activeIndex = value;
+            this.repetition.activeIndexes = [value];
+        }
+    },
 
     _fetchFeed: {
         value: function() {
diff --git a/node_modules/montage/ui/map.reel/map.html b/node_modules/montage/ui/map.reel/map.html
index 5cd3a5b5..b255ac1e 100644
--- a/node_modules/montage/ui/map.reel/map.html
+++ b/node_modules/montage/ui/map.reel/map.html
@@ -13,24 +13,13 @@
 
     <script type="text/montage-serialization">
     {
-        "types": {
-            "prototype": "montage/ui/select-input.reel",
-            "properties": {
-                "element": {"#": "types"}
-            }
-        },
+        
         "owner": {
             "prototype": "montage/ui/map.reel",
             "properties": {
                 "element": {"#": "map-container"},
                 "mapEl": {"#": "map"}
-            },
-            "bindings": {
-                "category": {
-                    "boundObject": {"@": "types"},
-                    "boundObjectPropertyPath": "value"
-                }
-            }
+            }            
         }
     }
     </script>
@@ -49,20 +38,8 @@
 </head>
 <body>
     
-    <div data-montage-id="map-container">
-        <div>
-            Show: 
-            <select data-montage-id="types">
-                <option value=''>Select a Category</option>
-                <option value='cafe'>Coffee</option>
-                <option value='hospital'>Hospitals</option>
-                <option value='museum'>Museums</option>
-                <option value='restaurant'>Restaurants</option>
-                
-            </select>
-        </div>
-        <div data-montage-id="map" id="map" class="montage-google-map">MAP</div>
-        
+    <div data-montage-id="map-container">        
+        <div data-montage-id="map" id="map" class="montage-google-map">MAP</div>        
     </div>
 
 </body>
diff --git a/node_modules/montage/ui/map.reel/map.js b/node_modules/montage/ui/map.reel/map.js
index c03d51c5..305ae181 100644
--- a/node_modules/montage/ui/map.reel/map.js
+++ b/node_modules/montage/ui/map.reel/map.js
@@ -42,34 +42,7 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
         enumerable: false,
         value: false
     },
-    _latitude: {
-        enumerable: false,
-        value: -34.397
-    },
-    latitude: {
-        enumerable: false,
-        set: function(value) {
-            this._latitude = value;
-            this.needsDraw = true;
-        },
-        get: function() {
-            return this._latitude;
-        }
-    },
-    _longitude: {
-        enumerable: false,
-        value: -34.397
-    },
-    longitude: {
-        enumerable: false,
-        set: function(value) {
-            this._longitude = value;
-            this.needsDraw = true;
-        },
-        get: function() {
-            return this._longitude;
-        }
-    },
+   
     
     defaultLatLng: {
         value: {lat: -34.397, lng: 150.644}
@@ -132,6 +105,7 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
             return this._category;
         },
         set: function(value) {
+            console.log('category set: ' + value);
             if(value) {
                 this._category = value;
                 this._getPlaces(this._category);
@@ -170,6 +144,7 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
             }
             var service = new google.maps.places.PlacesService(this._map);
             service.search(request, function(results, status) {
+                console.log('got places for ', self.category, status, results);
                 if (status == google.maps.places.PlacesServiceStatus.OK) {
                     self._places = results;
                 } else {
@@ -192,12 +167,18 @@ var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/
                 case 'hospital':
                 icon = '10-medical.png';
                 break;
-                case 'cafe':
-                icon = '34-coffee.png';
+                case 'bar':
+                icon = '88-beer-mug.png';
+                break;
+                case 'grocery_or_supermarket':
+                icon = '80-shopping-cart.png';
                 break;
                 case 'museum':
                 icon = '41-picture-frame.png';
                 break;
+                case 'gas_station':
+                icon = '47-fuel.png';                
+                break;
             };
             if(icon) {
                 image = new google.maps.MarkerImage('images/' + icon);
-- 
cgit v1.2.3