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

Commit

Permalink
feat(components): implement css encapsulation for transcluding compon…
Browse files Browse the repository at this point in the history
…ents

* 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
  • Loading branch information
vsavkin committed Sep 10, 2014
1 parent ff46fb7 commit ad194a0
Show file tree
Hide file tree
Showing 25 changed files with 1,370 additions and 395 deletions.
68 changes: 68 additions & 0 deletions lib/core_dom/component_css_loader.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
part of angular.core.dom_internal;

class ComponentCssLoader {
final Http _http;
final TemplateCache _templateCache;
final WebPlatformShim _platformShim;
final ComponentCssRewriter _componentCssRewriter;
final dom.NodeTreeSanitizer _treeSanitizer;
final ResourceUrlResolver _resourceResolver;
final Map<_ComponentAssetKey, async.Future<dom.StyleElement>> _styleElementCache;

ComponentCssLoader(this._http, this._templateCache, this._platformShim,
this._componentCssRewriter, this._treeSanitizer,
this._styleElementCache, this._resourceResolver);

async.Future<List<dom.StyleElement>> call(String tag, List<String> cssUrls, {Type type}) =>
async.Future.wait(cssUrls.map((url) => _styleElement(tag, url, type)));

async.Future<dom.StyleElement> _styleElement(String tag, String cssUrl, Type type) {
if (type != null) cssUrl = _resourceResolver.combineWithType(type, cssUrl);
final element = _styleElementCache.putIfAbsent(
new _ComponentAssetKey(tag, cssUrl),
() => _loadNewCss(tag, cssUrl));
return element;
}

async.Future _loadNewCss(String tag, String cssUrl) {
return _fetch(cssUrl)
.then((css) => _resourceResolver.resolveCssText(css, Uri.parse(cssUrl)))
.then((css) => _shim(css, tag, cssUrl))
.then(_buildStyleElement);
}

async.Future<String> _fetch(String cssUrl) {
return _http.get(cssUrl, cache: _templateCache)
.then((resp) => resp.responseText, onError: (e) => '/* $e */');
}

String _shim(String css, String tag, String cssUrl) {
final shimmed = _platformShim.shimCss(css, selector: tag, cssUrl: cssUrl);
return _componentCssRewriter(shimmed, selector: tag, cssUrl: cssUrl);
}

dom.StyleElement _buildStyleElement(String css) {
var styleElement = new dom.StyleElement()..appendText(css);
_treeSanitizer.sanitizeTree(styleElement);
return styleElement;
}
}

class _ComponentAssetKey {
final String tag;
final String assetUrl;

final String _key;

_ComponentAssetKey(String tag, String assetUrl)
: _key = "$tag|$assetUrl", tag = tag, assetUrl = assetUrl;

@override
String toString() => _key;

@override
int get hashCode => _key.hashCode;

bool operator ==(key) =>
key is _ComponentAssetKey && tag == key.tag && assetUrl == key.assetUrl;
}
Loading

0 comments on commit ad194a0

Please sign in to comment.