tabs navbar wip

ionic/components/nav/nav-base.js

@@ -11,7 +11,7 @@ import {bind} from 'angular2/di';
 
 import {NavController} from './nav-controller';
 import {NavItem, NavParams} from './nav-item';
-import {Pane, NavBarSection} from './pane';
+import {Pane, NavBarContainer} from './pane';
 import {Transition} from '../../transitions/transition';
 import {ClickBlock} from '../../util/click-block';
 import * as util from 'ionic/util';
@@ -80,7 +80,7 @@ export class NavBase {
         // decide which sections should be added to this Pane, ie: nav bars, tab bars, etc.
         // add only the sections it needs
         if (itemStructure.navbar) {
-          sectionsToAdd.push(NavBarSection);
+          sectionsToAdd.push(NavBarContainer);
         }
 
         // add the sections which this type of Pane requires
@@ -476,6 +476,18 @@ export class NavBase {
     return this.domElement;
   }
 
+  navbarViewContainer(nbContainer) {
+    if (nbContainer) {
+      this._nbContainer = nbContainer;
+    }
+    if (this._nbContainer) {
+      return this._nbContainer;
+    }
+    if (this.parent) {
+      return this.parent.navbarViewContainer();
+    }
+  }
+
   add(item) {
     item.id = this.id + '' + (++this.childIds);
     this.items.push(item);

ionic/components/nav/nav-item.js

@@ -31,28 +31,30 @@ export class NavItem {
   }
 
   stage(callback) {
-    // update if it's possible to go back from this nav item
-    this.enableBack = this.nav && !!this.nav.getPrevious(this);
+    let nav = this.nav;
 
-    if (this.instance) {
+    // update if it's possible to go back from this nav item
+    this.enableBack = nav && !!nav.getPrevious(this);
+
+    if (this.instance || !nav) {
       // already compiled this view
       return callback();
     }
 
     // compile the Component
-    this.nav.compiler.compileInHost(this.ComponentClass).then(componentProtoViewRef => {
+    nav.compiler.compileInHost(this.ComponentClass).then(componentProtoViewRef => {
 
       // figure out the sturcture of this Component
       // does it have a navbar? Is it tabs? Should it not have a navbar or any toolbars?
       let itemStructure = getProtoViewStructure(componentProtoViewRef);
 
       // get the appropriate Pane which this NavItem will fit into
-      this.nav.getPane(itemStructure, pane => {
+      nav.getPane(itemStructure, pane => {
 
         // create a new injector just for this NavItem
-        let injector = this.nav.injector.resolveAndCreateChild([
+        let injector = nav.injector.resolveAndCreateChild([
           bind(NavBase).toValue(this.nav),
-          bind(NavController).toValue(this.nav.navCtrl),
+          bind(NavController).toValue(nav.navCtrl),
           bind(NavParams).toValue(new NavParams(this.params)),
           bind(NavItem).toValue(this)
         ]);
@@ -63,13 +65,15 @@ export class NavItem {
 
         let newLocation = new ElementRef(hostViewRef, 0);
 
-        this.setInstance( this.nav.loader._viewManager.getComponent(newLocation) );
+        this.setInstance( nav.loader._viewManager.getComponent(newLocation) );
         this.setViewElement( hostViewRef._view.render._view.rootNodes[0] );
 
         this.disposals.push(() => {
           viewContainer.remove( viewContainer.indexOf(hostViewRef) );
         });
 
+        // get the view's context so when creating the navbar
+        // it uses the same context as the content
         let context = {
           boundElementIndex: 0,
           parentView: {
@@ -77,18 +81,26 @@ export class NavItem {
           }
         };
 
-        // add only the sections it needs
-        let navbarViewContainer = pane.sections.navbar.viewContainerRef;
-        if (navbarViewContainer && itemStructure.navbar && this.protos.navbar) {
-          this.navbarView = navbarViewContainer.create(this.protos.navbar, -1, context, injector);
+        // get the item container's nav bar
+        let navbarViewContainer = nav.navbarViewContainer();
+
+        // get the item's navbar protoview
+        let navbarProtoView = this.protos.navbar;
+
+        // add a navbar view if the pane has a navbar container, and the
+        // item's instance has a navbar protoview to go to inside of it
+        if (navbarViewContainer && navbarProtoView) {
+          this.navbarView = navbarViewContainer.create(navbarProtoView, -1, context, injector);
 
           this.disposals.push(() => {
             navbarViewContainer.remove( navbarViewContainer.indexOf(this.navbarView) );
           });
         }
 
+        // this item has finished loading
         this.loaded();
 
+        // all done, fire the callback
         callback();
       });
 
@@ -128,8 +140,9 @@ export class NavItem {
   }
 
   navbarElement() {
-    if (this.navbarView && this.navbarView._view) {
-      return this.navbarView._view.render._view.rootNodes[0];
+    let navbarView = this.navbarView;
+    if (navbarView && navbarView._view) {
+      return navbarView._view.render._view.rootNodes[0];
     }
   }
 

ionic/components/nav/pane.js

@@ -5,6 +5,7 @@ import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 import {ElementRef} from 'angular2/src/core/compiler/element_ref';
 
 import {Nav} from './nav';
+import {NavBase} from './nav-base';
 import {SwipeHandle} from './swipe-handle';
 
 
@@ -57,25 +58,18 @@ class PaneContentAnchor {
   }
 })
 @View({
-  template: `
-    <template section-anchor></template>
-  `,
-  directives: [PaneSectionAnchor]
+  template: `<template navbar-anchor></template>`,
+  directives: [NavBarAnchor]
 })
-export class NavBarSection {
-  constructor(@Parent() pane: Pane, viewContainerRef: ViewContainerRef, elementRef: ElementRef) {
-    this.pane = pane;
-    pane.addSection('navbar', this);
-  }
-}
+export class NavBarContainer {}
 
 
-// Reference point of where the guts of the NavBar should go next to
+// Reference point of where individual view navbars will go next to
 @Directive({
-  selector: 'template[section-anchor]'
+  selector: 'template[navbar-anchor]'
 })
-class PaneSectionAnchor {
-  constructor(@Parent() navBarSection: NavBarSection, viewContainerRef: ViewContainerRef) {
-    navBarSection.viewContainerRef = viewContainerRef;
+class NavBarAnchor {
+  constructor(nav: NavBase, viewContainerRef: ViewContainerRef) {
+    nav.navbarViewContainer(viewContainerRef);
   }
 }

ionic/components/tabs/tab.js

@@ -55,7 +55,7 @@ export class Tab extends NavBase {
       this.sections = tabs.parent.panes['_n'].sections;
     }
 
-    this.item = new NavItem(this);
+    this.item = new NavItem(tabs.parent);
     this.item.setInstance(this);
     this.item.setViewElement(elementRef.domElement);
     tabs.addTab(this.item);
@@ -85,6 +85,7 @@ export class Tab extends NavBase {
         callback && callback();
       });
       this._loaded = true;
+
     } else {
       callback && callback();
     }