|
| 1 | +import {Component, ElementRef, DynamicComponentLoader} from 'angular2/core'; |
| 2 | +import {Injector} from "angular2/core"; |
| 3 | +import {provide} from "angular2/core"; |
| 4 | +import {Input} from "angular2/core"; |
| 5 | +import {ComponentRef} from "angular2/core"; |
| 6 | +import {Type} from "angular2/core"; |
| 7 | + |
| 8 | +import {UIRouter} from "../router"; |
| 9 | +import {trace} from "../common/trace"; |
| 10 | +import {ViewConfig} from "../view/view"; |
| 11 | +import {Inject} from "angular2/core"; |
| 12 | +import {ViewContext} from "../view/interface"; |
| 13 | + |
| 14 | +let id = 0; |
| 15 | + |
| 16 | +const getProviders = (injector) => { |
| 17 | + let providers = [], parentInj = injector.parent; |
| 18 | + for (let i = 0; i < parentInj._proto.numberOfProviders; i++) { |
| 19 | + providers.push(parentInj._proto.getProviderAtIndex(i)); |
| 20 | + } |
| 21 | + return providers; |
| 22 | +}; |
| 23 | + |
| 24 | +@Component({ |
| 25 | + selector: 'ui-view, [ui-view]', |
| 26 | + styles: [` |
| 27 | + .done-true { |
| 28 | + text-decoration: line-through; |
| 29 | + color: grey; |
| 30 | + }` |
| 31 | + ], |
| 32 | + template: ` |
| 33 | + <div style="padding: 1em; border: 1px solid lightgrey;"> |
| 34 | +
|
| 35 | + <div #content style="color: lightgrey; font-size: smaller;"> |
| 36 | + <div>ui-view #{{uiViewData.id}} created by '{{ parentContext.name || "(root)" }}' state</div> |
| 37 | + <div>name: (absolute) '{{uiViewData.fqn}}' (contextual) '{{uiViewData.name}}@{{parentContext.name}}' </div> |
| 38 | + <div>currently filled by: '{{(uiViewData.config && uiViewData.config.context) || 'empty...'}}' |
| 39 | + </div> |
| 40 | +
|
| 41 | + </div> |
| 42 | + ` |
| 43 | +}) |
| 44 | +export class UiView { |
| 45 | + @Input() name: string; |
| 46 | + @Input() set 'ui-view'(val) { this.name = val; } |
| 47 | + |
| 48 | + componentRef: ComponentRef; |
| 49 | + deregister: Function; |
| 50 | + uiViewData: any = {}; |
| 51 | + |
| 52 | + static INJECT = { |
| 53 | + fqn: "UiView.parentFQN", |
| 54 | + context: "UiView.parentContext" |
| 55 | + }; |
| 56 | + |
| 57 | + constructor( |
| 58 | + public router: UIRouter, |
| 59 | + @Inject(UiView.INJECT.context) public parentContext: ViewContext, |
| 60 | + @Inject(UiView.INJECT.fqn) public parentFqn: string, |
| 61 | + public dcl: DynamicComponentLoader, |
| 62 | + public elementRef: ElementRef, |
| 63 | + public injector: Injector |
| 64 | + ) { } |
| 65 | + |
| 66 | + ngOnInit() { |
| 67 | + let parentFqn = this.parentFqn; |
| 68 | + let name = this.name || '$default'; |
| 69 | + console.log(`parentFqn: ${parentFqn}`); |
| 70 | + |
| 71 | + this.uiViewData = { |
| 72 | + id: id++, |
| 73 | + name: name, |
| 74 | + fqn: parentFqn ? parentFqn + "." + name : name, |
| 75 | + creationContext: this.parentContext, |
| 76 | + configUpdated: this.viewConfigUpdated.bind(this), |
| 77 | + config: undefined |
| 78 | + }; |
| 79 | + |
| 80 | + this.deregister = this.router.viewService.registerUiView(this.uiViewData); |
| 81 | + } |
| 82 | + |
| 83 | + disposeLast() { |
| 84 | + if (this.componentRef) this.componentRef.dispose(); |
| 85 | + } |
| 86 | + |
| 87 | + ngOnDestroy() { |
| 88 | + this.deregister(); |
| 89 | + this.disposeLast(); |
| 90 | + } |
| 91 | + |
| 92 | + viewConfigUpdated(config: ViewConfig) { |
| 93 | + let {uiViewData, injector, dcl, elementRef} = this; |
| 94 | + |
| 95 | + // The "new" viewconfig is already applied, so exit early |
| 96 | + if (uiViewData.config === config) return; |
| 97 | + // This is a new viewconfig. Destroy the old component |
| 98 | + this.disposeLast(); |
| 99 | + trace.traceUiViewConfigUpdated(uiViewData, config && config.context); |
| 100 | + uiViewData.config = config; |
| 101 | + // The config may be undefined if there is nothing state currently targeting this UiView. |
| 102 | + if (!config) return; |
| 103 | + |
| 104 | + // Do some magic |
| 105 | + let rc = config.node.resolveContext; |
| 106 | + let resolvables = rc.getResolvables(); |
| 107 | + let rawProviders = Object.keys(resolvables).map(key => provide(key, { useValue: resolvables[key].data })); |
| 108 | + rawProviders.push(provide(UiView.INJECT.context, { useValue: config.context })); |
| 109 | + rawProviders.push(provide(UiView.INJECT.fqn, { useValue: uiViewData.fqn })); |
| 110 | + let providers = Injector.resolve(rawProviders); |
| 111 | + |
| 112 | + let exclusions = [UiView.INJECT.context, UiView.INJECT.fqn]; |
| 113 | + providers = getProviders(injector).filter(x => exclusions.indexOf(x.key.displayName) === -1).concat(providers); |
| 114 | + |
| 115 | + // The 'controller' should be a Component class |
| 116 | + // TODO: pull from 'component' declaration, do not require template. |
| 117 | + let component = <Type> config.viewDeclarationObj.controller; |
| 118 | + dcl.loadIntoLocation(component, elementRef, "content", providers).then(ref => this.componentRef = ref); |
| 119 | + } |
| 120 | +} |
| 121 | + |
0 commit comments