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

Commit 1ba3218

Browse files
committed
feat(components): implement css encapsulation for transcluding components
* Extract ComponentCssLoader so it can be shared by ShadowDomComponentFactory and TranscludingComponentFactory * Provide a built-in implementation of WebPlatformShim using css_shim * Implement a CSS transformer similar to the one provided by Platform.JS * Rename EventHandler into ShadowBoundary
1 parent ff46fb7 commit 1ba3218

25 files changed

+1368
-395
lines changed
+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
part of angular.core.dom_internal;
2+
3+
class ComponentCssLoader {
4+
final Http _http;
5+
final TemplateCache _templateCache;
6+
final WebPlatformShim _platformShim;
7+
final ComponentCssRewriter _componentCssRewriter;
8+
final dom.NodeTreeSanitizer _treeSanitizer;
9+
final ResourceUrlResolver _resourceResolver;
10+
final Map<_ComponentAssetKey, async.Future<dom.StyleElement>> _styleElementCache;
11+
12+
ComponentCssLoader(this._http, this._templateCache, this._platformShim,
13+
this._componentCssRewriter, this._treeSanitizer,
14+
this._styleElementCache, this._resourceResolver);
15+
16+
async.Future<List<dom.StyleElement>> call(String tag, List<String> cssUrls, {Type type}) =>
17+
async.Future.wait(cssUrls.map((url) => _styleElement(tag, url, type)));
18+
19+
async.Future<dom.StyleElement> _styleElement(String tag, String cssUrl, Type type) {
20+
if (type != null) cssUrl = _resourceResolver.combineWithType(type, cssUrl);
21+
final element = _styleElementCache.putIfAbsent(
22+
new _ComponentAssetKey(tag, cssUrl),
23+
() => _loadNewCss(tag, cssUrl));
24+
return element;
25+
}
26+
27+
async.Future _loadNewCss(String tag, String cssUrl) {
28+
return _fetch(cssUrl)
29+
.then((css) => _resourceResolver.resolveCssText(css, Uri.parse(cssUrl)))
30+
.then((css) => _shim(css, tag, cssUrl))
31+
.then(_buildStyleElement);
32+
}
33+
34+
async.Future<String> _fetch(String cssUrl) {
35+
return _http.get(cssUrl, cache: _templateCache)
36+
.then((resp) => resp.responseText, onError: (e) => '/* $e */');
37+
}
38+
39+
String _shim(String css, String tag, String cssUrl) {
40+
final shimmed = _platformShim.shimCss(css, selector: tag, cssUrl: cssUrl);
41+
return _componentCssRewriter(shimmed, selector: tag, cssUrl: cssUrl);
42+
}
43+
44+
dom.StyleElement _buildStyleElement(String css) {
45+
var styleElement = new dom.StyleElement()..appendText(css);
46+
_treeSanitizer.sanitizeTree(styleElement);
47+
return styleElement;
48+
}
49+
}
50+
51+
class _ComponentAssetKey {
52+
final String tag;
53+
final String assetUrl;
54+
55+
final String _key;
56+
57+
_ComponentAssetKey(String tag, String assetUrl)
58+
: _key = "$tag|$assetUrl", tag = tag, assetUrl = assetUrl;
59+
60+
@override
61+
String toString() => _key;
62+
63+
@override
64+
int get hashCode => _key.hashCode;
65+
66+
bool operator ==(key) =>
67+
key is _ComponentAssetKey && tag == key.tag && assetUrl == key.assetUrl;
68+
}

0 commit comments

Comments
 (0)