nav toolbar

ionic/components/nav/nav-item.js

@@ -12,6 +12,7 @@ export class NavItem {
     this.Class = ComponentClass;
     this.params = params;
     this.id = util.nextUid();
+    this.headers = [];
     this.created = false;
   }
 
@@ -53,10 +54,17 @@ export class NavItem {
     return promise;
   }
 
+  addToolbar(position, toolbar) {
+    headers.push(toolbar);
+  }
+
   destroy() {
     this.component && this.component._dispose && this.component._dispose();
 
-    this.domElement = this.component = this.params = this.nav = null;
+    // just to help prevent possible large memory leaks
+    for (let prop in this) {
+      this[prop] = null;
+    }
   }
 
 }

ionic/components/nav/nav.js

@@ -24,11 +24,8 @@ import {ToolbarContainer} from 'ionic/components/toolbar/toolbar';
   <section class="nav-item-container">
     <content-container></content-container>
   </section>
-  <footer class="toolbar-container" style="display:none">
-    <footer-container></footer-container>
-  </footer>
   `,
-  directives: [HeaderContainer, ContentContainer, FooterContainer]
+  directives: [HeaderContainer, ContentContainer]
 })
 export class Nav extends NavBase {
 
@@ -69,15 +66,3 @@ class ContentContainer {
     };
   }
 }
-
-
-@Component({
-  selector: 'footer-container'
-})
-class FooterContainer {
-  constructor(@Ancestor() nav: Nav, elementRef: ElementRef) {
-    nav.footerContainer = {
-      elementRef: elementRef
-    };
-  }
-}

ionic/components/nav/test/basic/pages/first-page.js

@@ -1,13 +1,14 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NavController} from 'ionic/ionic';
+import {NavController, Toolbar} from 'ionic/ionic';
 import {SecondPage} from './second-page';
 
 
 @Component({selector: 'ion-view'})
 @View({
-  templateUrl: 'pages/first-page.html'
+  templateUrl: 'pages/first-page.html',
+  directives: [Toolbar]
 })
 export class FirstPage {
   constructor(

ionic/components/nav/test/basic/pages/second-page.js

@@ -1,14 +1,14 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NavController, NavParams} from 'ionic/ionic';
+import {NavController, NavParams, Toolbar} from 'ionic/ionic';
 import {ThirdPage} from './third-page';
 
 
 @Component()
 @View({
   templateUrl: 'pages/second-page.html',
-  directives: []
+  directives: [Toolbar]
 })
 export class SecondPage {
   constructor(

ionic/components/nav/test/basic/pages/third-page.js

@@ -1,13 +1,13 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NavController} from 'ionic/ionic';
+import {NavController, Toolbar} from 'ionic/ionic';
 
 
 @Component()
 @View({
   templateUrl: 'pages/third-page.html',
-  directives: []
+  directives: [Toolbar]
 })
 export class ThirdPage {
   constructor(

ionic/components/toolbar/toolbar.js

@@ -1,28 +1,14 @@
-import {
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-  NgElement,
+import {ElementRef} from 'angular2/src/core/compiler/element_ref';
-  Component,
+import {ViewContainerRef} from 'angular2/angular2';
-  Decorator,
+
-  Viewport,
-  View,
-  ViewContainerRef,
-  //ProtoViewRef,
-  onDestroy,
-  Ancestor,
-  ElementRef,
-  onChange,
-} from 'angular2/angular2';
-import {BackButton} from 'ionic/components/toolbar/back-button';
-import {IonicComponent} from 'ionic/config/component';
-import {NavController} from 'ionic/components/nav/nav-item';
 import * as dom from 'ionic/util/dom'
+import {IonicComponent} from 'ionic/config/component';
+import {NavItem} from 'ionic/ionic';
 import {Platform} from 'ionic/platform/platform';
 
-// FYI for later:
-// https://github.com/angular/angular/commit/3aac2fefd7f93c74abfa5ee58aa0ea8d4840b519
 
-
+@Directive({
-
-@Viewport({
   selector: '[ion-toolbar]',
   properties: {
     placement: 'placement'
@@ -32,39 +18,35 @@ export class Toolbar {
 
   constructor(
     viewContainer: ViewContainerRef,
-    //protoViewRef: ProtoViewRef,
     elementRef: ElementRef,
-    @Ancestor() navCtrl: NavController,
+    navItem: NavItem
-    element: NgElement
-    // context: Object TODO wait for angular to implement this
   ) {
     this.viewContainer = viewContainer;
     this.elementRef = elementRef;
-    this.navCtrl = navCtrl;
+    this.navItem = navItem;
 
     console.log('Toolbar!');
 
     // TODO use config to add these classes
-    dom.addClass(this.viewContainer.domElement, 'toolbar', `toolbar-${Platform.getMode()}`);
+    this.elementRef.domElement.classList.add('toolbar');
+    this.elementRef.domElement.classList.add(`toolbar-${Platform.getMode()}`);
 
     // TODO Make a better way than this
-    if (/header/i.test(this.viewContainer.domElement.tagName)) {
+    if (/footer/i.test(this.elementRef.domElement.tagName)) {
-       this.placement = 'top';
-    } else {
       this.placement = 'bottom';
+    } else {
+      this.placement = 'top';
     }
   }
 
   set placement(pos) {
-    this.viewContainer.domElement.classList.add(`toolbar-${pos}`);
+    this.elementRef.domElement.classList.add(`toolbar-${pos}`);
+    this.elementRef.domElement.setAttribute('placement', pos);
+
     this._placement = pos;
-    this.navCtrl.addToolbar(this._placement, this);
+    this.navItem.addToolbar(this._placement, this);
-    this.viewContainer.domElement.setAttribute('placement', pos);
   }
 
-  onDestroy() {
-    this.navCtrl.removeToolbar(this);
-  }
 }