Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit f7963e1

Browse files
rkirovrkirov
committed
fix(shadowdom): allow conditional content tags.
Distribution is triggered on the host element injector after each new view creation.
1 parent a82e208 commit f7963e1

File tree

5 files changed

+53
-46
lines changed

5 files changed

+53
-46
lines changed

‎modules/angular2/src/core/compiler/element_injector.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {Injector, Key, Dependency, bind, Binding, NoProviderError, ProviderError
55
import {Parent, Ancestor} from 'angular2/src/core/annotations/visibility';
66
import {EventEmitter, PropertySetter} from 'angular2/src/core/annotations/di';
77
import * as viewModule from 'angular2/src/core/compiler/view';
8-
import {LightDom, SourceLightDom, DestinationLightDom} from 'angular2/src/core/compiler/shadow_dom_emulation/light_dom';
8+
import {LightDom, DestinationLightDom} from 'angular2/src/core/compiler/shadow_dom_emulation/light_dom';
99
import {ViewContainer} from 'angular2/src/core/compiler/view_container';
1010
import {NgElement} from 'angular2/src/core/dom/element';
1111
import {Directive, onChange, onDestroy} from 'angular2/src/core/annotations/annotations'
@@ -25,7 +25,7 @@ class StaticKeys {
2525
ngElementId:number;
2626
viewContainerId:number;
2727
destinationLightDomId:number;
28-
sourceLightDomId:number;
28+
lightDomId:number;
2929
bindingPropagationConfigId:number;
3030

3131
constructor() {
@@ -34,7 +34,7 @@ class StaticKeys {
3434
this.ngElementId = Key.get(NgElement).id;
3535
this.viewContainerId = Key.get(ViewContainer).id;
3636
this.destinationLightDomId = Key.get(DestinationLightDom).id;
37-
this.sourceLightDomId = Key.get(SourceLightDom).id;
37+
this.lightDomId = Key.get(LightDom).id;
3838
this.bindingPropagationConfigId = Key.get(BindingPropagationConfig).id;
3939
}
4040

@@ -581,8 +581,8 @@ export class ElementInjector extends TreeNode {
581581
var p:ElementInjector = this.directParent();
582582
return isPresent(p) ? p._preBuiltObjects.lightDom : null;
583583
}
584-
if (keyId === staticKeys.sourceLightDomId) {
585-
return this._host._preBuiltObjects.lightDom;
584+
if (keyId === staticKeys.lightDomId) {
585+
return this._preBuiltObjects.lightDom;
586586
}
587587

588588
//TODO add other objects as needed

‎modules/angular2/src/core/compiler/shadow_dom_emulation/light_dom.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {ElementInjector} from '../element_injector';
77
import {ViewContainer} from '../view_container';
88
import {Content} from './content_tag';
99

10-
export class SourceLightDom {}
1110
export class DestinationLightDom {}
1211

1312

@@ -21,7 +20,7 @@ class _Root {
2120
}
2221
}
2322

24-
// TODO: LightDom should implement SourceLightDom and DestinationLightDom
23+
// TODO: LightDom should implement DestinationLightDom
2524
// once interfaces are supported
2625
export class LightDom {
2726
// The light DOM of the element is enclosed inside the lightDomView

‎modules/angular2/src/core/compiler/view_container.js‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,19 @@ import {Injector} from 'angular2/di';
66
import * as eiModule from 'angular2/src/core/compiler/element_injector';
77
import {isPresent, isBlank} from 'angular2/src/facade/lang';
88
import {EventManager} from 'angular2/src/core/events/event_manager';
9+
import * as ldModule from './shadow_dom_emulation/light_dom';
910

1011
export class ViewContainer {
1112
parentView: viewModule.View;
1213
templateElement;
1314
defaultProtoView: viewModule.ProtoView;
1415
_views: List<viewModule.View>;
15-
_lightDom: any;
16+
_lightDom: ldModule.LightDom;
1617
_eventManager: EventManager;
1718
elementInjector: eiModule.ElementInjector;
1819
appInjector: Injector;
1920
hostElementInjector: eiModule.ElementInjector;
21+
hostLightDom: ldModule.LightDom;
2022

2123
constructor(parentView: viewModule.View,
2224
templateElement,
@@ -34,17 +36,20 @@ export class ViewContainer {
3436
this._views = [];
3537
this.appInjector = null;
3638
this.hostElementInjector = null;
39+
this.hostLightDom = null;
3740
this._eventManager = eventManager;
3841
}
3942

4043
hydrate(appInjector: Injector, hostElementInjector: eiModule.ElementInjector) {
4144
this.appInjector = appInjector;
4245
this.hostElementInjector = hostElementInjector;
46+
this.hostLightDom = isPresent(hostElementInjector) ? hostElementInjector.get(ldModule.LightDom) : null;
4347
}
4448

4549
dehydrate() {
4650
this.appInjector = null;
4751
this.hostElementInjector = null;
52+
this.hostLightDom = null;
4853
this.clear();
4954
}
5055

@@ -81,6 +86,11 @@ export class ViewContainer {
8186
// insertion must come before hydration so that element injector trees are attached.
8287
this.insert(newView, atIndex);
8388
newView.hydrate(this.appInjector, this.hostElementInjector, this.parentView.context);
89+
90+
// new content tags might have appeared, we need to redistrubute.
91+
if (isPresent(this.hostLightDom)) {
92+
this.hostLightDom.redistribute();
93+
}
8494
return newView;
8595
}
8696

@@ -94,6 +104,7 @@ export class ViewContainer {
94104
}
95105
this.parentView.changeDetector.addChild(view.changeDetector);
96106
this._linkElementInjectors(view);
107+
97108
return view;
98109
}
99110

@@ -119,6 +130,10 @@ export class ViewContainer {
119130
} else {
120131
this._lightDom.redistribute();
121132
}
133+
// content tags might have disappeared we need to do redistribution.
134+
if (isPresent(this.hostLightDom)) {
135+
this.hostLightDom.redistribute();
136+
}
122137
detachedView.changeDetector.remove();
123138
this._unlinkElementInjectors(detachedView);
124139
return detachedView;

‎modules/angular2/test/core/compiler/element_injector_spec.js‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {Optional, Injector, Inject, bind} from 'angular2/di';
99
import {ProtoView, View} from 'angular2/src/core/compiler/view';
1010
import {ViewContainer} from 'angular2/src/core/compiler/view_container';
1111
import {NgElement} from 'angular2/src/core/dom/element';
12-
import {LightDom, SourceLightDom, DestinationLightDom} from 'angular2/src/core/compiler/shadow_dom_emulation/light_dom';
12+
import {LightDom, DestinationLightDom} from 'angular2/src/core/compiler/shadow_dom_emulation/light_dom';
1313
import {Directive} from 'angular2/src/core/annotations/annotations';
1414
import {BindingPropagationConfig} from 'angular2/src/core/compiler/binding_propagation_config';
1515
import {DynamicProtoChangeDetector} from 'angular2/change_detection';
@@ -455,23 +455,17 @@ export function main() {
455455
parentPreBuiltObjects = new PreBuiltObjects(null, null, null, lightDom, null);
456456
});
457457

458-
it("should return destination light DOM from the parent's injector", function () {
459-
var child = parentChildInjectors([], [], parentPreBuiltObjects);
458+
it("should return light DOM from the current injector", function () {
459+
var inj = injector([], null, null, parentPreBuiltObjects);
460460

461-
expect(child.get(DestinationLightDom)).toEqual(lightDom);
461+
expect(inj.get(LightDom)).toEqual(lightDom);
462462
});
463463

464464
it("should return null when parent's injector is a component boundary", function () {
465465
var child = hostShadowInjectors([], [], parentPreBuiltObjects);
466466

467467
expect(child.get(DestinationLightDom)).toBeNull();
468468
});
469-
470-
it("should return source light DOM from the closest component boundary", function () {
471-
var child = hostShadowInjectors([], [], parentPreBuiltObjects);
472-
473-
expect(child.get(SourceLightDom)).toEqual(lightDom);
474-
});
475469
});
476470
});
477471

‎modules/angular2/test/core/compiler/shadow_dom/shadow_dom_emulation_integration_spec.js‎

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -188,33 +188,32 @@ export function main() {
188188
});
189189
});
190190

191-
// Enable once dom-write queue is implemented and onDehydrate is implemented
192-
//it('should redistribute when the shadow dom changes', (done) => {
193-
// var temp = '<conditional-content>' +
194-
// '<div class="left">A</div>' +
195-
// '<div>B</div>' +
196-
// '<div>C</div>' +
197-
// '</conditional-content>';
198-
//
199-
//
200-
// compile(temp, (view, lc) => {
201-
// var cmp = view.elementInjectors[0].get(ConditionalContentComponent);
202-
//
203-
// expect(view.nodes).toHaveText('(, ABC)');
204-
//
205-
// cmp.showLeft();
206-
// lc.tick();
207-
//
208-
// expect(view.nodes).toHaveText('(A, BC)');
209-
//
210-
// cmp.hideLeft()
211-
// lc.tick();
212-
//
213-
// expect(view.nodes).toHaveText('(, ABC)');
214-
//
215-
// done();
216-
// });
217-
//});
191+
it('should redistribute when the shadow dom changes', (done) => {
192+
var temp = '<conditional-content>' +
193+
'<div class="left">A</div>' +
194+
'<div>B</div>' +
195+
'<div>C</div>' +
196+
'</conditional-content>';
197+
198+
199+
compile(temp, [ConditionalContentComponent, AutoViewportDirective], (view, lc) => {
200+
var cmp = view.elementInjectors[0].get(ConditionalContentComponent);
201+
202+
expect(view.nodes).toHaveText('(, ABC)');
203+
204+
cmp.showLeft();
205+
lc.tick();
206+
207+
expect(view.nodes).toHaveText('(A, BC)');
208+
209+
cmp.hideLeft();
210+
lc.tick();
211+
212+
expect(view.nodes).toHaveText('(, ABC)');
213+
214+
done();
215+
});
216+
});
218217

219218
//Implement once NgElement support changing a class
220219
//it("should redistribute when a class has been added or removed");
@@ -300,7 +299,7 @@ class MultipleContentTagsComponent {
300299

301300
@Component({selector: 'conditional-content'})
302301
@Template({
303-
inline: '<div>(<div template="auto: cond"><content select=".left"></content></div>, <content></content>)</div>',
302+
inline: '<div>(<div *auto="cond"><content select=".left"></content></div>, <content></content>)</div>',
304303
directives: [AutoViewportDirective]
305304
})
306305
class ConditionalContentComponent {

0 commit comments

Comments
 (0)