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;
-  }
+    this.domElement = elementRef.domElement;
-
-  set initial(Component) {
-    if (!this._init && Component) {
-      this._init = true;
-      this.push(Component);
-    }
   }
 
   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,6 +57,7 @@ export class NavItem {
         this.viewEle = componentRef.location.domElement;
         this.viewEle.classList.add('ion-view');
 
+        if (this._navbarProto) {
           let context = {
             boundElementIndex: 0,
             parentView: {
@@ -65,6 +67,7 @@ export class NavItem {
 
           let atIndex = -1;
 
+          console.log('nav-item navbarContainer.create', this._navbarProto)
           this._navbarView = navbarContainer.create(this._navbarProto, atIndex, context, injector);
 
           if (this._navbarView) {
@@ -73,6 +76,7 @@ export class NavItem {
             });
           }
         }
+      }
 
       console.log('created view', this.id);
       resolve();
@@ -101,6 +105,7 @@ export class NavItem {
   }
 
   navbarProto(navbarProtoView) {
+    console.log('nav-item navbarProto')
     this._navbarProto = navbarProtoView;
   }
 
@@ -109,8 +114,10 @@ export class NavItem {
   }
 
   navbarElement() {
+    if (this._navbarView && this._navbarView._view) {
       return this._navbarView._view.render._view.rootNodes[0];
     }
+  }
 
   contentElement() {
     return this.viewEle.querySelector('ion-content');

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.navBase = new NavBase(elementRef, loader, injector);
-    this.elementRef = elementRef;
+
     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) {
+  onInit() {
-    this.nav.contentElementRef = ref;
+    if (this.initial) {
+      console.log('Tab onInit')
+      this.navBase.push(this.initial);
     }
-
-  set initial(value) {
-    this.nav.initial = value;
   }
 
   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">
+      <div class="tab-bar" role="tablist">
-        <button *ng-for="#t of tabs" [tab]="t" class="tab-button">
+        <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 {
+import {Tabs, Tab, NavController, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
-  Tabs,
-  Tab,
-  Content,
-  NavController,
-} from 'ionic/ionic';
-import {Toolbar, ToolbarTitle} from 'ionic/components/toolbar/toolbar';
 
 
 @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(
+  constructor(nav: NavController) {
-    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: `
+  template: '' +
-  <header *ion-toolbar>
+    '<ion-navbar *navbar>' +
-    <h1 class="toolbar-title">Tabs 1 Page 1</h1>
+      '<ion-title>Tabs 1 Page 1</ion-title>' +
-  </header>
+    '</ion-navbar>' +
-  <ion-content class="padding">
+    '<ion-content class="padding">' +
-    <p>Tab 1 Page 1.</p>
+      '<p><button class="button" (click)="push()">Go to Tab 1, Page 2</button></p>' +
-    <button class="button button-primary" (click)="next()">
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-      Go to Tab 1, Page 2 (push)
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-    </button>
+    '</ion-content>',
-    <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+  directives: [NavbarTemplate, Navbar, Content]
-  </ion-content>`,
-  directives: [Content, Toolbar, ToolbarTitle]
 })
-class Tab1Page1 {
+export class Tab1Page1 {
-  // TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
   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: `
+  template: '' +
-  <header *ion-toolbar>
+    '<ion-navbar *navbar>' +
-    <h1 class="toolbar-title">Tabs 1 Page 2</h1>
+      '<ion-title>Tabs 1 Page 2</ion-title>' +
-  </header>
+    '</ion-navbar>' +
-  <ion-content class="padding">
+    '<ion-content class="padding">' +
-    <p>Tab 1 Page 2.</p>
+      '<p><button class="button" (click)="pop()">Back to Tab 1, Page 1</button></p>' +
-    <button class="button button-primary" (click)="pop()">
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-      Back to Tab 1, Page 1 (pop)
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-    </button>
+    '</ion-content>',
-    <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+  directives: [NavbarTemplate, Navbar, Content]
-  </ion-content>`,
-  directives: [Content]
 })
-class Tab1Page2 {
+export class Tab1Page2 {
-  // TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
   constructor(nav: NavController) {
     this.nav = nav;
   }
-  pop() { this.nav.pop(); }
+
+  pop() {
+    this.nav.push()
+  }
 }