diff --git a/ionic/components/app/app.ts b/ionic/components/app/app.ts index 78097455db..390c1ad94b 100644 --- a/ionic/components/app/app.ts +++ b/ionic/components/app/app.ts @@ -1,6 +1,4 @@ -import {Component, View, bootstrap, Compiler, ElementRef, NgZone, bind, ViewRef, DynamicComponentLoader, Injector} from 'angular2/angular2'; -import {AppViewManager} from 'angular2/src/core/compiler/view_manager'; -import {NgZone} from 'angular2/src/core/zone/ng_zone'; +import {Component, View, bootstrap, ElementRef, NgZone, bind, DynamicComponentLoader, Injector} from 'angular2/angular2'; import {IonicRouter} from '../../routing/router'; import {IonicConfig} from '../../config/config'; @@ -28,7 +26,7 @@ export class IonicApp { load(appRef) { this.ref(appRef); - this._zone = this.injector.get(NgZone); + this._zone = appRef.injector.get(NgZone); } focusHolder(val) { @@ -49,7 +47,7 @@ export class IonicApp { return this._ref; } - get injector { + get injector() { return this._ref.injector; } @@ -73,7 +71,6 @@ export class IonicApp { */ register(key, component) { this.components[key] = component; - console.log('App: Registered component', key, component); // TODO(mlynch): We need to track the lifecycle of this component to remove it onDehydrate } @@ -91,16 +88,8 @@ export class IonicApp { * @param Component the component to create and insert * @return Promise that resolves with the ContainerRef created */ - appendComponent(component: Type, context=null) { - let loader = this.injector.get(DynamicComponentLoader); - let rootComponentRef = this.ref()._hostComponent; - - let bindings = this.injector._proto._strategy.bindings; - - return loader.loadNextToLocation(component, rootComponentRef.location) - .catch(err => { - console.error('appendComponent:', err); - }); + appendComponent(componentType: Type, context=null) { + return this.rootAnchor.append(componentType); } applyBodyCss(bodyEle, platform, config) { @@ -151,7 +140,27 @@ function initApp(window, document, config) { return app; } -export function ionicBootstrap(component, config, router) { +@Component({ + selector: 'root-anchor' +}) +@View({ + template: '' +}) +class RootAnchor { + constructor(app: IonicApp, elementRef: ElementRef, loader: DynamicComponentLoader) { + this.elementRef = elementRef; + this.loader = loader; + app.rootAnchor = this; + } + + append(componentType) { + return this.loader.loadNextToLocation(componentType, this.elementRef).catch(err => { + console.error(err) + }); + } +} + +export function ionicBootstrap(rootComponentType, config, router) { return new Promise(resolve => { try { // get the user config, or create one if wasn't passed in @@ -188,7 +197,7 @@ export function ionicBootstrap(component, config, router) { let popup = new Popup(app, config); // add injectables that will be available to all child components - app.bindings = Injector.resolve([ + let appBindings = Injector.resolve([ bind(IonicApp).toValue(app), bind(IonicConfig).toValue(config), bind(IonicRouter).toValue(router), @@ -197,15 +206,24 @@ export function ionicBootstrap(component, config, router) { bind(Popup).toValue(popup) ]); - bootstrap(component, app.bindings).then(appRef => { + bootstrap(rootComponentType, appBindings).then(appRef => { app.load(appRef); - // append the focus holder if its needed - if (config.setting('keyboardScrollAssist')) { - app.appendComponent(FocusHolder).then(ref => { - app.focusHolder(ref.instance); - }); - } + // Adding a anchor to add overlays off of...huh?? + let elementRefs = appRef._hostComponent.hostView._view.elementRefs; + let lastElementRef = elementRefs[1]; + let injector = lastElementRef.parentView._view.rootElementInjectors[0]._injector; + let loader = injector.get(DynamicComponentLoader); + loader.loadNextToLocation(RootAnchor, lastElementRef).then(() => { + // append the focus holder if its needed + if (config.setting('keyboardScrollAssist')) { + app.appendComponent(FocusHolder).then(ref => { + app.focusHolder(ref.instance); + }); + } + }).catch(err => { + console.error(err) + }); router.load(window, app, config).then(() => { // resolve that the app has loaded diff --git a/ionic/components/app/extensions/material.scss b/ionic/components/app/extensions/material.scss index bf78ed90a8..10889adafe 100644 --- a/ionic/components/app/extensions/material.scss +++ b/ionic/components/app/extensions/material.scss @@ -1,10 +1,10 @@ .mode-md { - ion-app, .ion-app { + ion-app { font-family: 'RobotoDraft','Roboto',-apple-system,'Helvetica Neue',sans-serif; } $content-padding: 16px; - + .padding, .padding > .scroll-content { padding: $content-padding; diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss index 95b0a6683c..b22c2e8d59 100644 --- a/ionic/components/app/structure.scss +++ b/ionic/components/app/structure.scss @@ -30,8 +30,7 @@ body { @include user-select-none(); } -ion-app, -.ion-app { +ion-app { display: flex; flex-direction: column; diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss index 0164451d03..286f34559d 100644 --- a/ionic/components/app/typography.scss +++ b/ionic/components/app/typography.scss @@ -26,8 +26,7 @@ html { } -ion-app, -.ion-app { +ion-app { font-size: $font-size-base; font-family: $font-family-base; diff --git a/ionic/components/ion.ts b/ionic/components/ion.ts index f2537a124e..05f8565b4c 100644 --- a/ionic/components/ion.ts +++ b/ionic/components/ion.ts @@ -8,16 +8,16 @@ import * as util from 'ionic/util'; * sending/receiving app-level events. */ export class Ion { - constructor(elementRef: ElementRef, ionicConfig: IonicConfig) { + constructor(elementRef: ElementRef, config: IonicConfig) { this.elementRef = elementRef; - this.ionicConfig = ionicConfig; - this.clsMode = this.ionicConfig.setting('mode'); + this.config = config; + this.clsMode = config.setting('mode'); } onInit() { let cls = this.constructor; - if (cls.defaultProperties && this.ionicConfig) { + if (cls.defaultProperties && this.config) { for (let prop in cls.defaultProperties) { // Priority: // --------- @@ -35,7 +35,7 @@ export class Ion { } // get the property values from a global user/platform config - let configVal = this.ionicConfig.setting(prop); + let configVal = this.config.setting(prop); if (configVal) { this[prop] = configVal; continue; diff --git a/ionic/components/nav/nav.ts b/ionic/components/nav/nav.ts index 7de1de0676..f01bfd3a3a 100644 --- a/ionic/components/nav/nav.ts +++ b/ionic/components/nav/nav.ts @@ -27,8 +27,7 @@ export class Nav extends ViewController { super(ancestorViewCtrl, injector, elementRef); } - onInit() { - super.onInit(); + onIonInit() { if (this.root) { this.push(this.root); diff --git a/ionic/components/overlay/overlay.ts b/ionic/components/overlay/overlay.ts index adadef7341..2a9095d9be 100644 --- a/ionic/components/overlay/overlay.ts +++ b/ionic/components/overlay/overlay.ts @@ -9,12 +9,12 @@ import * as util from 'ionic/util'; export class Overlay { - constructor(app: IonicApp, ionicConfig: IonicConfig) { + constructor(app: IonicApp, config: IonicConfig) { this.app = app; - this.ionicConfig = ionicConfig; + this.mode = config.setting('mode'); } - create(overlayType, ComponentType: Type, opts={}, context=null) { + create(overlayType, componentType: Type, opts={}, context=null) { return new Promise((resolve, reject) => { let app = this.app; @@ -22,14 +22,17 @@ export class Overlay { selector: 'ion-' + overlayType, host: { '[style.z-index]': 'zIndex', - 'class': overlayType + ' ion-app', - 'mode': this.ionicConfig.setting('mode') + 'mode': this.mode, + 'class': overlayType } }); - let overlayComponent = DirectiveBinding.createFromType(ComponentType, annotation); + let overlayComponentType = DirectiveBinding.createFromType(componentType, annotation); - app.appendComponent(overlayComponent, context).then(ref => { - let overlayRef = new OverlayRef(app, overlayType, opts, ref); + // create a unique token that works as a cache key + overlayComponentType.token = overlayType + componentType.name; + + app.appendComponent(overlayComponentType).then(ref => { + let overlayRef = new OverlayRef(app, overlayType, opts, ref, context); overlayRef._open(opts).then(() => { resolve(overlayRef); }); @@ -70,10 +73,13 @@ export class Overlay { } export class OverlayRef { - constructor(app, overlayType, opts, ref) { + constructor(app, overlayType, opts, ref, context) { let overlayInstance = (ref && ref.instance); if (!overlayInstance) return; + if (context) { + util.extend(ref.instance, context); + } this._instance = overlayInstance; overlayInstance.viewLoaded && overlayInstance.viewLoaded(); @@ -90,7 +96,7 @@ export class OverlayRef { this.close(instanceOpts); }; - this._elementRef = ref.elementRef; + this._elementRef = ref.location; this._type = overlayType; this._opts = opts; this._handle = opts.handle || this.zIndex; diff --git a/ionic/components/view/view-item.ts b/ionic/components/view/view-item.ts index 4e72813948..cc6e33d448 100644 --- a/ionic/components/view/view-item.ts +++ b/ionic/components/view/view-item.ts @@ -6,9 +6,9 @@ import {NavParams} from '../nav/nav-controller'; export class ViewItem { - constructor(viewCtrl, component, params = {}) { + constructor(viewCtrl, componentType, params = {}) { this.viewCtrl = viewCtrl; - this.component = component; + this.componentType = componentType; this.params = new NavParams(params); this.instance = null; this.state = 0; @@ -43,10 +43,14 @@ export class ViewItem { 'class': 'nav-item' } }); - let viewComponent = DirectiveBinding.createFromType(this.component, annotation); + + let ionViewComponentType = DirectiveBinding.createFromType(this.componentType, annotation); + + // create a unique token that works as a cache key + ionViewComponentType.token = 'ionView' + this.componentType.name; // compile the Component - viewCtrl.compiler.compileInHost(viewComponent).then(hostProtoViewRef => { + viewCtrl.compiler.compileInHost(ionViewComponentType).then(hostProtoViewRef => { // figure out the sturcture of this Component // does it have a navbar? Is it tabs? Should it not have a navbar or any toolbars? @@ -69,7 +73,7 @@ export class ViewItem { var hostViewRef = contentContainer.createHostView(hostProtoViewRef, -1, bindings); var newLocation = viewCtrl.viewMngr.getHostElement(hostViewRef); - var component = viewCtrl.viewMngr.getComponent(newLocation); + var newComponent = viewCtrl.viewMngr.getComponent(newLocation); var dispose = () => { var index = contentContainer.indexOf(hostViewRef); @@ -78,7 +82,7 @@ export class ViewItem { } }; this.disposals.push(dispose); - var viewComponetRef = new ComponentRef(newLocation, component, dispose); + var viewComponetRef = new ComponentRef(newLocation, newComponent, dispose); // get the component's instance, and set it to the this ViewItem this.setInstance(viewComponetRef.instance); diff --git a/ionic/registry.ts b/ionic/registry.ts index 3cd22fbc84..d9a4b4e917 100644 --- a/ionic/registry.ts +++ b/ionic/registry.ts @@ -1,4 +1,4 @@ -import {onInit, Directive} from 'angular2/angular2'; +import {Directive} from 'angular2/angular2'; import {IonicApp} from 'ionic/ionic' @@ -11,17 +11,18 @@ import {IonicApp} from 'ionic/ionic' ], host: { 'this.register-id': 'registerId' - }, - lifecycle: [onInit] + } }) export class Register { + constructor(app: IonicApp) { this.app = app; } + onInit() { - if(!this.register || !this.registerId) { - return; + if (this.register && this.registerId) { + this.app.register(this.registerId, this.register); } - this.app.register(this.registerId, this.register); } + }