tabs advanced wip

ionic/components/nav-bar/nav-bar.js

@@ -1,4 +1,4 @@
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 import {ElementRef} from 'angular2/src/core/compiler/element_ref';
 import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
@@ -30,14 +30,18 @@ import {BackButton} from './back-button';
       </div>
     </div>
   `,
-  directives: [BackButton]
+  directives: [BackButton],
+  lifecycle: [onInit]
 })
 export class Navbar {
   constructor(navItem:NavItem, elementRef:ElementRef, ngZone:NgZone) {
     this.navItem = navItem;
     this.domElement = elementRef.domElement;
+    this.zone = ngZone;
+  }
 
-    ngZone.runOutsideAngular(() => {
+  onInit() {
+    this.zone.runOutsideAngular(() => {
       setTimeout(() => {
         this.alignTitle();
       }, 32);
@@ -103,6 +107,7 @@ export class Navbar {
 })
 export class NavbarTemplate {
   constructor(navItem: NavItem, protoViewRef: ProtoViewRef) {
+    console.log('NavbarTemplate', protoViewRef)
     navItem.navbarProto(protoViewRef);
   }
 }

ionic/components/nav/nav-base.js

@@ -15,20 +15,15 @@ const CACHED_STATE = 'cached';
 
 export class NavBase {
 
-  constructor(loader, injector) {
+  constructor(elementRef, loader, injector) {
+    this.elementRef = elementRef;
     this.loader = loader;
     this.injector = injector;
     this.items = [];
     this.navCtrl = new NavController(this);
     this.sbTransition = null;
     this.sbActive = false;
-  }
-
-  set initial(Component) {
-    if (!this._init && Component) {
-      this._init = true;
-      this.push(Component);
-    }
+    this.domElement = elementRef.domElement;
   }
 
   clear() {

ionic/components/nav/nav-item.js

@@ -30,6 +30,7 @@ export class NavItem {
   }
 
   render() {
+    console.log('nav-item render')
     if (this.created) {
       console.log('showed existing view', this.id);
       return Promise.resolve();
@@ -47,7 +48,7 @@ export class NavItem {
     ]);
 
     this.nav.loader.loadNextToExistingLocation(this.Component, this.nav.contentElementRef, injector).then((componentRef) => {
-
+      console.log('nav-item loadNextToExistingLocation', this.nav.contentElementRef)
       let navbarContainer = this.nav.navbarContainerRef;
 
       if (componentRef && componentRef.dispose && navbarContainer) {
@@ -56,21 +57,24 @@ export class NavItem {
         this.viewEle = componentRef.location.domElement;
         this.viewEle.classList.add('ion-view');
 
-        let context = {
-          boundElementIndex: 0,
-          parentView: {
-            _view: componentRef.location.parentView._view.componentChildViews[0]
+        if (this._navbarProto) {
+          let context = {
+            boundElementIndex: 0,
+            parentView: {
+              _view: componentRef.location.parentView._view.componentChildViews[0]
+            }
+          };
+
+          let atIndex = -1;
+
+          console.log('nav-item navbarContainer.create', this._navbarProto)
+          this._navbarView = navbarContainer.create(this._navbarProto, atIndex, context, injector);
+
+          if (this._navbarView) {
+            this.disposals.push(() => {
+              navbarContainer.remove( navbarContainer.indexOf(this._navbarView) );
+            });
           }
-        };
-
-        let atIndex = -1;
-
-        this._navbarView = navbarContainer.create(this._navbarProto, atIndex, context, injector);
-
-        if (this._navbarView) {
-          this.disposals.push(() => {
-            navbarContainer.remove( navbarContainer.indexOf(this._navbarView) );
-          });
         }
       }
 
@@ -101,6 +105,7 @@ export class NavItem {
   }
 
   navbarProto(navbarProtoView) {
+    console.log('nav-item navbarProto')
     this._navbarProto = navbarProtoView;
   }
 
@@ -109,7 +114,9 @@ export class NavItem {
   }
 
   navbarElement() {
-    return this._navbarView._view.render._view.rootNodes[0];
+    if (this._navbarView && this._navbarView._view) {
+      return this._navbarView._view.render._view.rootNodes[0];
+    }
   }
 
   contentElement() {

ionic/components/nav/nav.js

@@ -1,5 +1,5 @@
 import {Parent} from 'angular2/src/core/annotations_impl/visibility';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 import {ElementRef} from 'angular2/src/core/compiler/element_ref';
 import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
@@ -15,7 +15,8 @@ import {IonicComponent} from '../../config/component';
   selector: 'ion-nav',
   properties: [
     'initial'
-  ]
+  ],
+  lifecycle: [onInit]
 })
 @View({
   template: `
@@ -29,20 +30,26 @@ import {IonicComponent} from '../../config/component';
   `,
   directives: [NavbarAnchor, ContentAnchor, SwipeHandle]
 })
-export class Nav extends NavBase {
+export class Nav {
   constructor(elementRef: ElementRef, loader: DynamicComponentLoader, injector: Injector) {
-    super(loader, injector);
-    this.elementRef = elementRef;
+    this.navBase = new NavBase(elementRef, loader, injector);
+
     this.domElement = elementRef.domElement;
     this.config = Nav.config.invoke(this);
   }
 
+  onInit() {
+    if (this.initial) {
+      this.navBase.push(this.initial);
+    }
+  }
+
   width() {
     return this.domElement.offsetWidth;
   }
 
   get swipeBackEnabled() {
-    let activeItem = this.getActive();
+    let activeItem = this.navBase.getActive();
     if (activeItem) {
       return activeItem.enableBack;
     }
@@ -57,7 +64,7 @@ new IonicComponent(Nav, {});
 })
 class NavbarAnchor {
   constructor(@Parent() nav: Nav, viewContainerRef: ViewContainerRef) {
-    nav.navbarContainerRef = viewContainerRef;
+    nav.navBase.navbarContainerRef = viewContainerRef;
   }
 }
 
@@ -67,6 +74,6 @@ class NavbarAnchor {
 })
 class ContentAnchor {
   constructor(@Parent() nav: Nav, elementRef: ElementRef) {
-    nav.contentElementRef = elementRef;
+    nav.navBase.contentElementRef = elementRef;
   }
 }

ionic/components/tabs/tab-button.js

@@ -13,9 +13,6 @@ import {Tabs} from './tabs';
     'panelId': 'attr.aria-controls',
     'tab.isSelected': 'attr.aria-selected'
   },
-  hostAttributes: {
-    'role': 'tab'
-  },
   hostListeners: {
     '^click': 'onClick($event)'
   },

ionic/components/tabs/tab.js

@@ -1,5 +1,6 @@
 import {Parent} from 'angular2/src/core/annotations_impl/visibility';
-import {Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Directive, Component} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
 import {ElementRef} from 'angular2/src/core/compiler/element_ref';
 import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
 import {Injector} from 'angular2/di';
@@ -9,9 +10,10 @@ import {Content} from '../content/content';
 import {IonicComponent} from 'ionic/config/component';
 import {NavBase} from '../nav/nav-base';
 
+
 let tabId = -1;
 
-@Directive({
+@Component({
   selector: 'ion-tab',
   properties: [
     'initial',
@@ -28,6 +30,13 @@ let tabId = -1;
     'role': 'tabpanel'
   }
 })
+@View({
+  template: `
+    <template content-anchor></template>
+    <content></content>
+  `,
+  directives: [ContentAnchor]
+})
 export class Tab {
   constructor(
     @Parent() tabs: Tabs,
@@ -35,7 +44,10 @@ export class Tab {
     loader: DynamicComponentLoader,
     injector: Injector
   ) {
-    this.nav = new NavBase(loader, injector);
+    this.navBase = new NavBase(elementRef, loader, injector);
+
+    this.navBase.navbarContainerRef = tabs.navbarContainerRef;
+
     this.domElement = elementRef.domElement;
 
     this.id = ++tabId;
@@ -43,14 +55,14 @@ export class Tab {
     this.labeledBy = 'tab-button-' + this.id;
 
     tabs.addTab(this);
+    console.log('Tab constructor')
   }
 
-  setRef(ref) {
-    this.nav.contentElementRef = ref;
-  }
-
-  set initial(value) {
-    this.nav.initial = value;
+  onInit() {
+    if (this.initial) {
+      console.log('Tab onInit')
+      this.navBase.push(this.initial);
+    }
   }
 
   select(isSelected) {
@@ -59,3 +71,13 @@ export class Tab {
   }
 
 }
+
+
+@Directive({
+  selector: '[content-anchor]'
+})
+class ContentAnchor {
+  constructor(@Parent() tab: Tab, elementRef: ElementRef) {
+    tab.navBase.contentElementRef = elementRef;
+  }
+}

ionic/components/tabs/tabs.js

@@ -1,9 +1,11 @@
-import {Component, onInit} from 'angular2/src/core/annotations_impl/annotations';
+import {Parent} from 'angular2/src/core/annotations_impl/visibility';
+import {Directive, Component, onInit} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 import {ElementRef} from 'angular2/src/core/compiler/element_ref';
 import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
 import {Injector} from 'angular2/di';
 import {NgFor} from 'angular2/angular2';
+import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 
 import {IonicComponent} from '../../config/component';
 import {Tab} from './tab';
@@ -21,9 +23,12 @@ import {Icon} from '../icon/icon';
 })
 @View({
   template: `
+    <header class="navbar-container">
+      <template navbar-anchor></template>
+    </header>
     <nav class="navbar-container tab-bar-container">
-      <div class="tab-bar">
-        <button *ng-for="#t of tabs" [tab]="t" class="tab-button">
+      <div class="tab-bar" role="tablist">
+        <button *ng-for="#t of tabs" [tab]="t" class="tab-button" role="tab">
           <icon [name]="t.tabIcon" class="tab-button-icon"></icon>
           <span class="tab-button-text">{{t.tabTitle}}</span>
         </button>
@@ -33,7 +38,7 @@ import {Icon} from '../icon/icon';
       <content></content>
     </section>
   `,
-  directives: [NgFor, TabButton, Icon]
+  directives: [NgFor, TabButton, Icon, NavbarAnchor]
 })
 export class Tabs {
   constructor(elementRef: ElementRef, loader: DynamicComponentLoader, injector: Injector) {
@@ -92,3 +97,14 @@ new IonicComponent(Tabs, {
     }
   }
 });
+
+
+@Directive({
+  selector: '[navbar-anchor]'
+})
+class NavbarAnchor {
+  constructor(@Parent() tabs: Tabs, viewContainerRef: ViewContainerRef) {
+    console.log('Tabs NavbarAnchor', viewContainerRef)
+    tabs.navbarContainerRef = viewContainerRef;
+  }
+}

ionic/components/tabs/test/advanced/index.js

@@ -2,7 +2,7 @@ import {bootstrap} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Nav} from 'ionic/ionic';
+import {Nav, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
 import {SignInPage} from './pages/sign-in';
 
 
@@ -11,7 +11,7 @@ import {SignInPage} from './pages/sign-in';
 })
 @View({
   templateUrl: 'main.html',
-  directives: [Nav]
+  directives: [Nav, NavbarTemplate, Navbar, Content]
 })
 class IonicApp {
   constructor() {

ionic/components/tabs/test/advanced/pages/tabs.html

@@ -4,7 +4,4 @@
   <ion-tab [initial]="tab1Initial" tab-title="Tab 1">
   </ion-tab>
 
-  <ion-tab [initial]="tab2Initial" tab-title="Tab 2">
-  </ion-tab>
-
 </ion-tabs>

ionic/components/tabs/test/advanced/pages/tabs.js

@@ -1,13 +1,7 @@
 import {Component} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {
-  Tabs,
-  Tab,
-  Content,
-  NavController,
-} from 'ionic/ionic';
-import {Toolbar, ToolbarTitle} from 'ionic/components/toolbar/toolbar';
+import {Tabs, Tab, NavController, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
 
 
 @Component({
@@ -15,15 +9,13 @@ import {Toolbar, ToolbarTitle} from 'ionic/components/toolbar/toolbar';
 })
 @View({
   templateUrl: './pages/tabs.html',
-  directives: [Tabs, Tab, Content]
+  directives: [Tabs, Tab, Content, NavbarTemplate, Navbar]
 })
 
 export class TabsPage {
-  constructor(
-    nav: NavController
-  ) {
+  constructor(nav: NavController) {
     this.tab1Initial = Tab1Page1
-    this.tab2Initial = Tab2Page1
+    //this.tab2Initial = Tab2Page1
   }
 }
 
@@ -31,52 +23,51 @@ export class TabsPage {
 //
 // tab 1
 //
-@Component({ selector: 't1p1' })
+@Component({selector: 'ion-view'})
 @View({
-  template: `
-  <header *ion-toolbar>
-    <h1 class="toolbar-title">Tabs 1 Page 1</h1>
-  </header>
-  <ion-content class="padding">
-    <p>Tab 1 Page 1.</p>
-    <button class="button button-primary" (click)="next()">
-      Go to Tab 1, Page 2 (push)
-    </button>
-    <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-  </ion-content>`,
-  directives: [Content, Toolbar, ToolbarTitle]
+  template: '' +
+    '<ion-navbar *navbar>' +
+      '<ion-title>Tabs 1 Page 1</ion-title>' +
+    '</ion-navbar>' +
+    '<ion-content class="padding">' +
+      '<p><button class="button" (click)="push()">Go to Tab 1, Page 2</button></p>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+    '</ion-content>',
+  directives: [NavbarTemplate, Navbar, Content]
 })
-class Tab1Page1 {
-  // TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
+export class Tab1Page1 {
   constructor(nav: NavController) {
     this.nav = nav;
+    console.log('Tab1Page1 onInit')
   }
-  next() {
+
+  push() {
     this.nav.push(Tab1Page2)
   }
 }
 
-@Component({ selector: 't1p2' })
+@Component({selector: 'ion-view'})
 @View({
-  template: `
-  <header *ion-toolbar>
-    <h1 class="toolbar-title">Tabs 1 Page 2</h1>
-  </header>
-  <ion-content class="padding">
-    <p>Tab 1 Page 2.</p>
-    <button class="button button-primary" (click)="pop()">
-      Back to Tab 1, Page 1 (pop)
-    </button>
-    <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-  </ion-content>`,
-  directives: [Content]
+  template: '' +
+    '<ion-navbar *navbar>' +
+      '<ion-title>Tabs 1 Page 2</ion-title>' +
+    '</ion-navbar>' +
+    '<ion-content class="padding">' +
+      '<p><button class="button" (click)="pop()">Back to Tab 1, Page 1</button></p>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
+    '</ion-content>',
+  directives: [NavbarTemplate, Navbar, Content]
 })
-class Tab1Page2 {
-  // TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
+export class Tab1Page2 {
   constructor(nav: NavController) {
     this.nav = nav;
   }
-  pop() { this.nav.pop(); }
+
+  pop() {
+    this.nav.push()
+  }
 }