diff --git a/example/web/index.html b/example/web/index.html index e1216686a..54b0803ec 100644 --- a/example/web/index.html +++ b/example/web/index.html @@ -8,6 +8,7 @@
  • shadow_dom_components.html
  • paper.html
  • form.html
    • +
  • maps.html
    • diff --git a/example/web/maps.dart b/example/web/maps.dart new file mode 100644 index 000000000..0cabbb478 --- /dev/null +++ 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: '
    ' +) +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 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": "
    ", + "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 new file mode 100644 index 000000000..ff6077c92 --- /dev/null +++ b/example/web/maps.html @@ -0,0 +1,22 @@ + + + + + + + + + + + + + Hello from {{someText}} + + + Open InfoWindow: + Enter text: + +