fix overlays

ionic/components/app/app.ts

@@ -1,6 +1,4 @@
-import {Component, View, bootstrap, Compiler, ElementRef, NgZone, bind, ViewRef, DynamicComponentLoader, Injector} from 'angular2/angular2';
+import {Component, View, bootstrap, ElementRef, NgZone, bind, DynamicComponentLoader, Injector} from 'angular2/angular2';
-import {AppViewManager} from 'angular2/src/core/compiler/view_manager';
-import {NgZone} from 'angular2/src/core/zone/ng_zone';
 
 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) {
+  appendComponent(componentType: Type, context=null) {
-    let loader = this.injector.get(DynamicComponentLoader);
+    return this.rootAnchor.append(componentType);
-    let rootComponentRef = this.ref()._hostComponent;
-
-    let bindings = this.injector._proto._strategy.bindings;
-
-    return loader.loadNextToLocation(component, rootComponentRef.location)
-              .catch(err => {
-                console.error('appendComponent:', err);
-              });
   }
 
   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
+        // Adding a anchor to add overlays off of...huh??
-        if (config.setting('keyboardScrollAssist')) {
+        let elementRefs = appRef._hostComponent.hostView._view.elementRefs;
-          app.appendComponent(FocusHolder).then(ref => {
+        let lastElementRef = elementRefs[1];
-            app.focusHolder(ref.instance);
+        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

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;

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;
 

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;
 

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.config = config;
-    this.clsMode = this.ionicConfig.setting('mode');
+    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;

ionic/components/nav/nav.ts

@@ -27,8 +27,7 @@ export class Nav extends ViewController {
     super(ancestorViewCtrl, injector, elementRef);
   }
 
-  onInit() {
+  onIonInit() {
-    super.onInit();
 
     if (this.root) {
       this.push(this.root);

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.mode,
-          'mode': this.ionicConfig.setting('mode')
+          'class': overlayType
         }
       });
-      let overlayComponent = DirectiveBinding.createFromType(ComponentType, annotation);
+      let overlayComponentType = DirectiveBinding.createFromType(componentType, annotation);
 
-      app.appendComponent(overlayComponent, context).then(ref => {
+      // create a unique token that works as a cache key
-        let overlayRef = new OverlayRef(app, overlayType, opts, ref);
+      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;

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);

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) {
+    if (this.register && this.registerId) {
-      return;
+      this.app.register(this.registerId, this.register);
     }
-    this.app.register(this.registerId, this.register);
   }
+
 }