feat(examples): Add a compelling Shadow DOM example

jbdeboer · jbdeboer · commit 028b23730ef9 · 2014-08-25T11:44:39.000-07:00
Conflicts: example/web/index.html Closes #1377
diff --git a/example/web/index.html b/example/web/index.html
@@ -8,6 +8,7 @@
       <li><a href="shadow_dom_components.html">shadow_dom_components.html</a></li>
       <li><a href="paper.html">paper.html</a></li>
       <li><a href="form.html">form.html</a></li>
+      <li><a href="maps.html">maps.html</a></li>
     </ul>
   </body>
 </html>
diff --git a/example/web/maps.dart b/example/web/maps.dart
@@ -0,0 +1,56 @@
+import 'package:angular/angular.dart';
+import 'package:angular/application_factory.dart';
+
+import 'dart:html';
+import 'dart:js';
+
+/**
+ * A component with a simple template which the Javascript Google Maps API
+ * will use to install a map inside the ShadowRoot.
+ */
+@Component(
+  selector: 'x-google-map',
+  template: '<div style="height: 300px; width: 300px"></div>'
+)
+class XGoogleMaps implements ShadowRootAware {
+  var map, infowindow;
+
+  onShadowRoot(root) {
+    // From https://code.google.com/p/dart/source/browse/branches/bleeding_edge/dart/samples/google_maps/web/index.dart
+    final gmaps = context['google']['maps'];
+    var london = new JsObject(gmaps['LatLng'], [51.5, 0.125]);
+    var mapOptions = new JsObject.jsify({
+        "center": london,
+        "zoom": 8,
+    });
+
+    map = new JsObject(gmaps['Map'], [root.querySelector('div'), mapOptions]);
+
+    // The <content> tag is the exciting part of this component.  Instead
+    // of passing a string of HTML to the component, we use Shadow DOM to
+    // punch a hole into the Shadow DOM allowing consumers to use parts of
+    // their 'light DOM'
+    infowindow = new JsObject(gmaps['InfoWindow'], [new JsObject.jsify({
+      "content": "<div style='height: 2em; width: 10em'><content></content></div>",
+      "position": london
+    })]);
+  }
+
+  @NgOneWay('info')
+  set infoWindow(value) {
+    if (value) {
+      infowindow.callMethod('open', [map]);
+    } else {
+      infowindow.callMethod('close');
+    }
+  }
+}
+
+main() {
+  var module = new Module()
+    ..bind(XGoogleMaps);
+
+  var injector = applicationFactory().addModule(module)
+      .run();
+  var scope = injector.get(Scope);
+}
diff --git a/example/web/maps.html b/example/web/maps.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="viewport"
+          content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <script type="text/javascript"
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCYWvwtZy5UZ_O_0mG4V-sq-fQ2_yy84-Y">
+    </script>
+    <script type="application/dart" src="maps.dart"></script>
+    <script src="packages/browser/dart.js"></script>
+    
+  </head>
+  <body ng-app>
+
+  <x-google-map bind-info="openInfo">
+     Hello from {{someText}}
+  </x-google-map>
+
+  Open InfoWindow: <input type="checkbox" ng-model="openInfo"></input>
+  Enter text: <input type="text" ng-model="someText"></input>
+  </body>
+</html>
