tab mega wip

ionic/components/app/structure.scss

@@ -24,35 +24,6 @@ ion-app {
   padding: 0;
 }
 
-ion-tabs {
-  display: flex;
-  flex-direction: column;
-
-  overflow: hidden;
-  height: 100%;
-  max-width: 100%;
-  max-height: 100%;
-  margin: 0;
-  padding: 0;
-}
-
-ion-tab {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  flex-direction: column;
-
-  display: none;
-  &.show-tab {
-    display: flex;
-  }
-}
-
 ion-nav-pane {
   position: absolute;
   top: 0;

ionic/components/nav/nav-item.js

@@ -5,7 +5,7 @@ import {bind} from 'angular2/di';
 import * as util from 'ionic/util';
 import {NavController} from './nav-controller';
 import {Nav} from './nav';
-import {NavPane, NavPaneSection} from './nav';
+import {TabPane, NavPane, NavPaneSection} from './nav';
 
 
 export class NavItem {
@@ -37,8 +37,8 @@ export class NavItem {
   }
 
   render() {
-
     if (this.instance) {
+      // already compiled this view
       return Promise.resolve();
     }
 
@@ -50,10 +50,10 @@ export class NavItem {
 
       // figure out the sturcture of this Component
       // does it have a navbar? Is it tabs? Should it not have a navbar or any toolbars?
-      let itemStructure = this.getStructure(componentProtoViewRef);
+      let itemStructure = getProtoViewStructure(componentProtoViewRef);
 
       // get the appropriate NavPane which this NavItem will fit into
-      this.nav.getNavPane(itemStructure).then(navPane => {
+      this.nav.getPane(itemStructure).then(navPane => {
 
         // create a new injector just for this NavItem
         let injector = this.nav.injector.resolveAndCreateChild([
@@ -84,8 +84,8 @@ export class NavItem {
         };
 
         // add only the sections it needs
-        if (itemStructure.navbar) {
-          let navbarViewContainer = navPane.sections.navbar.viewContainerRef;
+        let navbarViewContainer = navPane.sections.navbar.viewContainerRef;
+        if (navbarViewContainer && itemStructure.navbar && this.protos.navbar) {
           this.navbarView = navbarViewContainer.create(this.protos.navbar, -1, context, injector);
 
           this.disposals.push(() => {
@@ -103,18 +103,6 @@ export class NavItem {
     return promise;
   }
 
-  getStructure(componentProtoViewRef) {
-    // navbar - toolbar - toolbar - content - toolbar - tabbar
-    let itemStructure = {
-      navbar: true,
-      tabbar: false,
-      toolbars: [],
-      key: 'c'
-    };
-
-    return itemStructure;
-  }
-
   cache() {
     this.didCache();
   }
@@ -255,3 +243,36 @@ export class NavParams {
     util.extend(this, params);
   }
 }
+
+function getProtoViewStructure(componentProtoViewRef) {
+  let navbar = true;
+  let tabs = false;
+  let toolbars = [];
+  let key = '_';
+
+  // componentProtoViewRef._protoView.elementBinders.forEach(rootElementBinder => {
+  //   if (!rootElementBinder.componentDirective || !rootElementBinder.nestedProtoView) return;
+
+  //   rootElementBinder.nestedProtoView.elementBinders.forEach(nestedElementBinder => {
+  //     let componentDirective = nestedElementBinder.componentDirective;
+  //     if (componentDirective && componentDirective.metadata.id == 'Tab') {
+  //       navbar = tabs = true;
+  //     }
+  //   });
+  // });
+
+  if (navbar) {
+    key += 'n'
+  }
+
+  if (toolbars.length) {
+    key += 'b' + toolbars.length;
+  }
+
+  return {
+    navbar: navbar,
+    tabs: tabs,
+    toolbars: toolbars,
+    key: key
+  };
+}

ionic/components/nav/nav.js

@@ -10,6 +10,7 @@ import {bind} from 'angular2/di';
 
 import {NavController} from './nav-controller';
 import {NavItem, NavParams} from './nav-item';
+import {Tabs} from '../tabs/tabs';
 import {nav} from './nav-base';
 import {SwipeHandle} from './swipe-handle';
 import {IonicComponent} from '../../config/component';
@@ -48,7 +49,7 @@ export class Nav {
     this.navPanes = {};
   }
 
-  getNavPane(itemStructure) {
+  getPane(itemStructure) {
     // this gets or creates the NavPane which similar nav items live in
     // Nav items with just a navbar/content would all use the same NavPane
     // Tabs and view's without a navbar would get a different NavPanes
@@ -100,7 +101,7 @@ export class Nav {
     return promise;
   }
 
-  addNavPane(navPane) {
+  addPane(navPane) {
     for (let np in this.navPanes) {
       if (this.navPanes[np] === null) {
         this.navPanes[np] = navPane;
@@ -510,11 +511,11 @@ class NavPaneAnchor {
   `,
   directives: [NavPaneSectionAnchor, NavPaneContentAnchor]
 })
-class NavPane {
+export class NavPane {
   constructor(@Parent() nav: Nav, viewContainerRef: ViewContainerRef) {
     this.viewContainerRef = viewContainerRef;
     this.sections = {};
-    nav.addNavPane(this);
+    nav.addPane(this);
   }
   addSection(sectionName, instance) {
     this.sections[sectionName] = instance;
@@ -522,6 +523,50 @@ class NavPane {
 }
 
 
+
+@Component({selector:'ion-tab-pane'})
+@View({
+  template: `
+    <div class="navbar-container">
+      <template navbar-anchor></template>
+    </div>
+    <div class="tabbar-container">
+      <template tabbar-anchor></template>
+    </div>
+    <template content-anchor></template>
+  `,
+  directives: [TabPaneContentAnchor, TabPaneSectionAnchor]
+})
+export class TabPane extends NavPane {
+  constructor(@Parent() nav: Nav, viewContainerRef: ViewContainerRef) {
+    super(nav, viewContainerRef);
+  }
+}
+
+
+@Directive({
+  selector: 'template[content-anchor]'
+})
+class TabPaneContentAnchor {
+  constructor(@Parent() tabPane: TabPane, viewContainerRef: ViewContainerRef) {
+    tabPane.contentContainerRef = viewContainerRef;
+  }
+}
+
+
+// Used to dynamically create new sections for a NavPane
+// This is simply a reference point to create new sections
+// Navbar, toolbar, and tabbar sections would be created next to this
+@Directive({
+  selector: 'template[section-anchor]'
+})
+class TabSectionAnchor {
+  constructor(@Parent() tabPane: TabPane, elementRef: ElementRef) {
+    tabPane.sectionAnchorElementRef = elementRef;
+  }
+}
+
+
 // Used to dynamically create new sections for a NavPane
 // This is simply a reference point to create new sections
 // Navbar, toolbar, and tabbar sections would be created next to this

ionic/components/tabs/tab-bar.js

@@ -0,0 +1,28 @@
+import {Parent} from 'angular2/src/core/annotations_impl/visibility';
+import {Component} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+import {NgFor} from 'angular2/angular2';
+
+import {TabButton} from './tab-button';
+import {Icon} from '../icon/icon';
+
+
+@Component({
+  selector: 'ion-tab-bar'
+})
+@View({
+  template: `
+    <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>
+    </div>
+  `,
+  directives: [NgFor, TabButton, Icon]
+})
+export class TabBar {
+  constructor(@Parent() tabs: Tabs) {
+    console.log('TabBar constructor', this.id);
+  }
+}

ionic/components/tabs/tab.js

@@ -2,16 +2,12 @@ import {Parent} from 'angular2/src/core/annotations_impl/visibility';
 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';
 
 import {Tabs} from './tabs';
 import {Content} from '../content/content';
 import {IonicComponent} from 'ionic/config/component';
 
 
-let tabId = -1;
-
 @Component({
   selector: 'ion-tab',
   properties: [
@@ -31,36 +27,26 @@ let tabId = -1;
 })
 @View({
   template: `
-    <template content-anchor></template>
+    <template tab-anchor></template>
     <content></content>
   `,
-  directives: [ContentAnchor]
+  directives: [TabAnchor]
 })
 export class Tab {
-  constructor(
-    @Parent() tabs: Tabs,
-    elementRef: ElementRef,
-    loader: DynamicComponentLoader,
-    injector: Injector
-  ) {
-    this.navBase = new NavBase(elementRef, loader, injector);
-
-    this.navBase.navbarContainerRef = tabs.navbarContainerRef;
-
+  constructor(@Parent() tabs: Tabs, elementRef: ElementRef) {
     this.domElement = elementRef.domElement;
 
-    this.id = ++tabId;
+    tabs.addTab(this);
     this.panelId = 'tab-panel-' + this.id;
     this.labeledBy = 'tab-button-' + this.id;
 
-    tabs.addTab(this);
-    console.log('Tab constructor')
+    console.log('Tab constructor', this.id);
   }
 
   onInit() {
     if (this.initial) {
-      console.log('Tab onInit')
-      this.navBase.push(this.initial);
+      // console.log('Tab onInit')
+      // this.navBase.push(this.initial);
     }
   }
 
@@ -73,10 +59,10 @@ export class Tab {
 
 
 @Directive({
-  selector: '[content-anchor]'
+  selector: 'template[tab-anchor]'
 })
-class ContentAnchor {
+class TabAnchor {
   constructor(@Parent() tab: Tab, elementRef: ElementRef) {
-    tab.navBase.contentElementRef = elementRef;
+    console.log('TabAnchor constructor', tab.id)
   }
 }

ionic/components/tabs/tabs.js

@@ -1,4 +1,5 @@
-import {Parent} from 'angular2/src/core/annotations_impl/visibility';
+import {Ancestor, Parent} from 'angular2/src/core/annotations_impl/visibility';
+import {Optional} from 'angular2/src/di/annotations_impl'
 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';
@@ -11,8 +12,12 @@ import {IonicComponent} from '../../config/component';
 import {Tab} from './tab';
 import {TabButton} from './tab-button';
 import {Icon} from '../icon/icon';
+import {Nav, NavPane} from '../nav/nav';
+import {NavItem} from '../nav/nav-item';
 
 
+let tabsId = -1;
+
 @Component({
   selector: 'ion-tabs',
   properties: [
@@ -23,9 +28,6 @@ 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" role="tablist">
         <button *ng-for="#t of tabs" [tab]="t" class="tab-button" role="tab">
@@ -38,22 +40,28 @@ import {Icon} from '../icon/icon';
       <content></content>
     </section>
   `,
-  directives: [NgFor, TabButton, Icon, NavbarAnchor]
+  directives: [NgFor, TabButton, Icon]
 })
 export class Tabs {
-  constructor(elementRef: ElementRef, loader: DynamicComponentLoader, injector: Injector) {
+  constructor(elementRef: ElementRef) {
+    this.id = ++tabsId;
+    this.tabIds = 0;
+    this.tabs = [];
+
     this.domElement = elementRef.domElement;
     this.config = Tabs.config.invoke(this);
-    this.tabs = [];
+
+    console.log('Tabs constructor', this.id);
   }
 
   onInit() {
     if (this.tabs.length > 0) {
-      this.selectTab(this.tabs[0]);
+      //this.selectTab(this.tabs[0]);
     }
   }
 
   addTab(tab) {
+    tab.id = this.id + '' + (++this.tabIds);
     this.tabs.push(tab);
   }
 
@@ -78,7 +86,6 @@ export class Tabs {
   }
 
 }
-
 new IonicComponent(Tabs, {
   properties: {
     tabBarPlacement: {
@@ -97,14 +104,3 @@ 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/tabs.scss

@@ -9,6 +9,46 @@ $tab-button-min-width:             80px !default;
 $tab-button-max-width:             160px !default;
 
 
+ion-tabs-view {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: white;
+}
+
+ion-tabs {
+  display: flex;
+  flex-direction: column;
+
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+ion-tab {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  flex-direction: column;
+
+  display: none;
+  &.show-tab {
+    display: flex;
+  }
+}
+
 .tab-bar-container {
   order: $flex-order-tab-bar-bottom;
 }

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

@@ -5,7 +5,7 @@ import {Tabs, Tab, NavController, NavbarTemplate, Navbar, Content} from 'ionic/i
 
 
 @Component({
-  selector: 'tabs-page'
+  selector: 'ion-tabs-view'
 })
 @View({
   templateUrl: './pages/tabs.html',