Skip to content
This repository was archived by the owner on Feb 22, 2018. It is now read-only.

feat(examples): Add a compelling Shadow DOM example #1377

Closed
wants to merge 1 commit into from
Closed

feat(examples): Add a compelling Shadow DOM example #1377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions example/web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<li><a href="todo.html">todo.html</a></li>
<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="maps.html">maps.html</a></li>
</ul>
</body>
</html>
56 changes: 56 additions & 0 deletions example/web/maps.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;

void 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) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

void for all functions / methods

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);
}
22 changes: 22 additions & 0 deletions example/web/maps.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>

<label>Display InfoWindow: <input type="checkbox" ng-model="openInfo"></input></label>
Enter text: <input type="text" ng-model="someText"></input>
</body>
</html>