nav wip

gulpfile.js

@@ -18,9 +18,6 @@ var watch = require('gulp-watch');
 var exec = require('child_process').exec;
 
 
-// !!! TEMP HACK !!!
-// first run ./update-angular.sh
-
 gulp.task('build', function() {
   runSequence(
     'clean',

ionic/components/nav/nav-item.js

@@ -19,10 +19,11 @@ export class NavItem {
     let injector = null;
 
 
-    this.nav.loader.loadIntoExistingLocation(this.Class, this.nav.itemContent.elementRef, injector)
+    this.nav.loader.loadNextToExistingLocation(this.Class, this.nav.itemContent.elementRef, injector)
                    .then((componentRef) => {
 
-      console.log('Component loadIntoExistingLocation completed')
+      this.component = componentRef;
+      this.domElement = componentRef.location.domElement;
 
       resolve();
     });

ionic/components/nav/nav.js

@@ -17,13 +17,13 @@ import {ToolbarContainer} from 'ionic/components/toolbar/toolbar';
 })
 @View({
   template: `
-  <header class="toolbar-container">
+  <header class="toolbar-container" style="display:none">
     <header-container></header-container>
   </header>
   <section class="nav-item-container">
     <content-container></content-container>
   </section>
-  <footer class="toolbar-container">
+  <footer class="toolbar-container" style="display:none">
     <footer-container></footer-container>
   </footer>
   `,
@@ -44,17 +44,19 @@ export class Nav extends NavBase {
 }
 
 
-@Directive({
+@Component({
   selector: 'header-container'
 })
 class HeaderContainer {
-  constructor(@Ancestor() nav: Nav) {
-    nav.itemHeader = this;
+  constructor(@Ancestor() nav: Nav, elementRef: ElementRef) {
+    nav.itemHeader = {
+      elementRef: elementRef
+    };
   }
 }
 
 
-@Directive({
+@Component({
   selector: 'content-container'
 })
 class ContentContainer {
@@ -66,11 +68,13 @@ class ContentContainer {
 }
 
 
-@Directive({
+@Component({
   selector: 'footer-container'
 })
 class FooterContainer {
-  constructor(@Ancestor() nav: Nav) {
-    nav.footerContainer = this;
+  constructor(@Ancestor() nav: Nav, elementRef: ElementRef) {
+    nav.footerContainer = {
+      elementRef: elementRef
+    };
   }
 }

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

@@ -7,14 +7,13 @@ import {SecondPage} from './second-page'
 
 @Component()
 @View({
-  templateUrl: 'pages/first-page.html',
-  directives: []
+  templateUrl: 'pages/first-page.html'
 })
 export class FirstPage {
   constructor(
-    nav: NavController
+    //nav: NavController
   ) {
-    this.nav = nav;
+    //this.nav = nav;
   }
 
   push() {

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

@@ -1,7 +1,7 @@
 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} from 'ionic/ionic';
 
 
 @Component()

ionic/transitions/none-transition.js

@@ -10,12 +10,12 @@ class NoneTransition {
     let leavingItem = navCtrl.getStagedLeavingItem();
 
     // show the entering item
-    enteringItem.navItem.domElement.style.display = 'block';
-    enteringItem.navItem.domElement.style.transform = 'translateX(0%)';
+    enteringItem.domElement.style.display = 'block';
+    enteringItem.domElement.style.transform = 'translateX(0%)';
 
     // hide the leaving item
-    if (leavingItem && leavingItem.navItem) {
-      leavingItem.navItem.domElement.style.display = '';
+    if (leavingItem && leavingItem.domElement) {
+      leavingItem.domElement.style.display = '';
     }
   }