tabs advanced wip

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()
+  }
 }