nav/tabs wip

ionic/components/nav/nav-item.js

@@ -5,6 +5,7 @@ import {bind} from 'angular2/di';
 import * as util from 'ionic/util';
 import {NavController} from './nav-controller';
 import {Nav} from './nav';
+import {NavBase} from './nav-base';
 import {TabPane, NavPane, NavPaneSection} from './nav';
 
 
@@ -29,22 +30,15 @@ export class NavItem {
     this.protos[name] = protoViewRef;
   }
 
-  stage() {
+  stage(callback) {
     // update if it's possible to go back from this nav item
     //this.enableBack = !!this.nav.getPrevious(this);
 
-    return this.render();;
-  }
-
-  render() {
     if (this.instance) {
       // already compiled this view
-      return Promise.resolve();
+      return callback();
     }
 
-    let resolve;
-    let promise = new Promise((res) => { resolve = res; });
-
     // compile the Component
     this.nav.compiler.compileInHost(this.Component).then(componentProtoViewRef => {
 
@@ -53,10 +47,11 @@ export class NavItem {
       let itemStructure = getProtoViewStructure(componentProtoViewRef);
 
       // get the appropriate NavPane which this NavItem will fit into
-      this.nav.getPane(itemStructure).then(navPane => {
+      this.nav.getPane(itemStructure, navPane => {
 
         // create a new injector just for this NavItem
         let injector = this.nav.injector.resolveAndCreateChild([
+          bind(NavBase).toValue(this.navBase),
           bind(NavController).toValue(this.nav.navCtrl),
           bind(NavParams).toValue(new NavParams(this.params)),
           bind(NavItem).toValue(this)
@@ -95,12 +90,10 @@ export class NavItem {
 
         this.loaded();
 
-        resolve();
+        callback();
       });
 
     });
-
-    return promise;
   }
 
   cache() {

ionic/components/nav/nav.js

@@ -1,21 +1,16 @@
 import {Parent} from 'angular2/src/core/annotations_impl/visibility';
 import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
+import {Optional} from 'angular2/src/di/annotations_impl'
 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 {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 import {Compiler} from 'angular2/angular2';
-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 {NavBase} from './nav-base';
 import {SwipeHandle} from './swipe-handle';
 import {IonicComponent} from '../../config/component';
-import * as util from 'ionic/util';
-import {Transition, ClickBlock} from 'ionic/ionic';
 
 
 @Component({
@@ -27,480 +22,51 @@ import {Transition, ClickBlock} from 'ionic/ionic';
 })
 @View({
   template: `
-    <template nav-pane-anchor></template>
+    <template pane-anchor></template>
   `,
   directives: [NavPaneAnchor]
 })
 export class Nav {
 
-  constructor(compiler:Compiler, elementRef: ElementRef, loader: DynamicComponentLoader, injector: Injector, viewContainerRef: ViewContainerRef) {
-    this.compiler = compiler;
-    this.elementRef = elementRef;
-    this.loader = loader;
-    this.injector = injector;
-    this.viewContainerRef = viewContainerRef;
-    this.items = [];
-    this.navCtrl = new NavController(this);
-    this.sbTransition = null;
-    this.sbActive = false;
+  constructor(
+      @Optional() parentNavBase: NavBase,
+      compiler:Compiler,
+      elementRef: ElementRef,
+      loader: DynamicComponentLoader,
+      injector: Injector
+    ) {
+    this.navBase = new NavBase(parentNavBase, compiler, elementRef, loader, injector);
+
     this.domElement = elementRef.domElement;
     this.config = Nav.config.invoke(this);
-
-    this.navPanes = {};
-  }
-
-  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
-    let resolve;
-    let promise = new Promise((res) => { resolve = res; });
-
-    if (this.navPanes[itemStructure.key]) {
-      // nav pane which the entering component already exists
-      resolve(this.navPanes[itemStructure.key]);
-
-    } else {
-      // create a new nav pane
-      this.navPanes[itemStructure.key] = null;
-
-      // add a NavPane element
-      // when the NavPane is added, it'll also add its reference to the navPanes object
-      this.loader.loadNextToExistingLocation(NavPane, this.anchorElementRef, null).then(() => {
-
-        // get the navPane reference by name
-        let navPane = this.navPanes[itemStructure.key];
-
-        // get the element inside the NavPane to add sections to
-        let sectionViewContainerRef = navPane.sectionAnchorElementRef;
-        let promises = [];
-        let sectionsToAdd = []
-
-        // decide which sections should be added to this NavPane, ie: nav bars, tab bars, etc.
-        // add only the sections it needs
-        if (itemStructure.navbar) {
-          sectionsToAdd.push(NavBarSection);
-        }
-
-        // add the sections which this type of NavPane requires
-        sectionsToAdd.forEach(SectionClass => {
-          // as each section is compiled and added to the NavPane
-          // the section will add a reference to itself in the NavPane's sections object
-          promises.push( this.loader.loadNextToExistingLocation(SectionClass, sectionViewContainerRef, null) );
-        });
-
-        // wait for all of the sections to resolve
-        Promise.all(promises).then(() => {
-          resolve(navPane);
-        });
-
-      });
-
-    }
-
-    return promise;
-  }
-
-  addPane(navPane) {
-    for (let np in this.navPanes) {
-      if (this.navPanes[np] === null) {
-        this.navPanes[np] = navPane;
-      }
-    }
   }
 
   onInit() {
-    if (this.initial) {
-      this.push(this.initial);
-    }
+    this.navBase.initial(this.initial);
   }
 
-  push(Component, params = {}, opts = {}) {
-    if (this.isTransitioning()) {
-      return Promise.reject();
-    }
-
-    let resolve;
-    let promise = new Promise(res => { resolve = res; });
-
-    // default the direction to "forward"
-    opts.direction = opts.direction || 'forward';
-
-    if(opts.animate === false) {
-      opts.animation = 'none';
-    }
-
-    // do not animate if this is the first in the stack
-    if (!this.items.length) {
-      opts.animation = 'none';
-    }
-
-    // the active item is going to be the leaving one (if one exists)
-    let leavingItem = this.getActive() || new NavItem();
-    leavingItem.shouldDestroy = false;
-    leavingItem.shouldCache = true;
-    leavingItem.willCache();
-
-    // create a new NavStackItem
-    let enteringItem = new NavItem(this, Component, params);
-
-    // set that this item is staged (it's not ready to be animated in yet)
-    enteringItem.state = STAGED_STATE;
-
-    // add the item to the stack
-    this.items.push(enteringItem);
-
-    // start the transition
-    this.transition(enteringItem, leavingItem, opts).then(() => {
-      resolve();
-    });
-
-    return promise;
+  setPaneAnchor(elementRef) {
+    this.navBase.setPaneAnchor(elementRef);
   }
 
-  pop(opts = {}) {
-    if (this.isTransitioning() || this.items.length < 1) {
-      return Promise.reject();
-    }
-
-    if(opts.animate === false) {
-      opts.animation = 'none';
-    }
-
-    let resolve;
-    let promise = new Promise(res => { resolve = res; });
-
-    // default the direction to "back"
-    opts.direction = opts.direction || 'back';
-
-    // get the active item and set that it is staged to be leaving
-    // was probably the one popped from the stack
-    let leavingItem = this.getActive() || new NavItem();
-    leavingItem.shouldDestroy = true;
-    leavingItem.shouldCache = false;
-    leavingItem.willUnload();
-
-    // the entering item is now the new last item
-    // Note: we might not have an entering item if this is the only
-    // item on the history stack.
-    let enteringItem = this.getPrevious(leavingItem);
-    if(enteringItem) {
-      // start the transition
-      this.transition(enteringItem, leavingItem, opts).then(() => {
-        // transition completed, destroy the leaving item
-        resolve();
-      });
-
-    } else {
-      this.transitionComplete();
-      resolve();
-    }
-
-    return promise;
+  addPane(pane) {
+    this.navBase.addPane(pane);
   }
 
-  transition(enteringItem, leavingItem, opts) {
-    let resolve;
-    let promise = new Promise(res => { resolve = res; });
-
-    opts.isAnimated = (opts.animation !== 'none');
-
-    this.transitionStart(opts);
-
-    // wait for the new item to complete setup
-    enteringItem.stage().then(() => {
-
-      enteringItem.shouldDestroy = false;
-      enteringItem.shouldCache = false;
-      enteringItem.willEnter();
-      leavingItem.willLeave();
-
-      // set that the leaving item is stage to be leaving
-      leavingItem.state = STAGED_LEAVING_STATE;
-
-      // set that the new item pushed on the stack is staged to be entering
-      // setting staged state is important for the transition logic to find the correct item
-      enteringItem.state = STAGED_ENTERING_STATE;
-
-      // init the transition animation
-      let transAnimation = Transition.create(this, opts);
-
-      // wait for the items to be fully staged
-      transAnimation.stage().then(() => {
-
-        // update the state that the items are actively entering/leaving
-        enteringItem.state = ACTIVELY_ENTERING_STATE;
-        leavingItem.state = ACTIVELY_LEAVING_STATE;
-
-        // start the transition
-        transAnimation.play().then(() => {
-
-          // transition has completed, update each item's state
-          enteringItem.state = ACTIVE_STATE;
-          leavingItem.state = CACHED_STATE;
-
-          // dispose any items that shouldn't stay around
-          transAnimation.dispose();
-
-          enteringItem.didEnter();
-          leavingItem.didLeave();
-
-          // all done!
-          this.transitionComplete();
-
-          // resolve that this push has completed
-          resolve();
-        });
-
-      });
-
-    });
-
-    return promise;
-  }
-
-  swipeBackStart() {
-    if (this.isTransitioning() || this.items.length < 2) {
-      return;
-    }
-
-    this.sbActive = true;
-    this.sbResolve = null;
-
-    // default the direction to "back"
-    let opts = {
-      direction: 'back'
-    };
-
-    // get the active item and set that it is staged to be leaving
-    // was probably the one popped from the stack
-    let leavingItem = this.getActive() || new NavItem();
-    leavingItem.shouldDestroy = true;
-    leavingItem.shouldCache = false;
-    leavingItem.willLeave();
-    leavingItem.willUnload();
-
-    // the entering item is now the new last item
-    let enteringItem = this.getPrevious(leavingItem);
-    enteringItem.shouldDestroy = false;
-    enteringItem.shouldCache = false;
-    enteringItem.willEnter();
-
-    // start the transition
-    this.transitionStart({ isAnimated: true });
-
-    // wait for the new item to complete setup
-    enteringItem.stage().then(() => {
-
-      // set that the leaving item is stage to be leaving
-      leavingItem.state = STAGED_LEAVING_STATE;
-
-      // set that the new item pushed on the stack is staged to be entering
-      // setting staged state is important for the transition logic to find the correct item
-      enteringItem.state = STAGED_ENTERING_STATE;
-
-      // init the transition animation
-      this.sbTransition = Transition.create(this, opts);
-      this.sbTransition.easing('linear');
-
-      // wait for the items to be fully staged
-      this.sbTransition.stage().then(() => {
-
-        // update the state that the items are actively entering/leaving
-        enteringItem.state = ACTIVELY_ENTERING_STATE;
-        leavingItem.state = ACTIVELY_LEAVING_STATE;
-
-        let swipeBackPromise = new Promise(res => { this.sbResolve = res; });
-
-        swipeBackPromise.then((completeSwipeBack) => {
-
-          if (completeSwipeBack) {
-            // swipe back has completed, update each item's state
-            enteringItem.state = ACTIVE_STATE;
-            leavingItem.state = CACHED_STATE;
-
-            enteringItem.didEnter();
-            leavingItem.didLeave();
-
-          } else {
-            // cancelled the swipe back, return items to original state
-            leavingItem.state = ACTIVE_STATE;
-            enteringItem.state = CACHED_STATE;
-
-            leavingItem.willEnter();
-            leavingItem.didEnter();
-            enteringItem.didLeave();
-
-            leavingItem.shouldDestroy = false;
-            enteringItem.shouldDestroy = false;
-          }
-
-          // all done!
-          this.transitionComplete();
-
-        });
-
-      });
-
-    });
-
-  }
-
-  swipeBackEnd(completeSwipeBack, progress, playbackRate) {
-    // to reverse the animation use a negative playbackRate
-    if (this.sbTransition && this.sbActive) {
-      this.sbActive = false;
-
-      if (progress <= 0) {
-        this.swipeBackProgress(0.0001);
-      } else if (progress >= 1) {
-        this.swipeBackProgress(0.9999);
-      }
-
-      if (!completeSwipeBack) {
-        playbackRate = playbackRate * -1;
-      }
-
-      this.sbTransition.playbackRate(playbackRate);
-
-      this.sbTransition.play().then(() => {
-        this.sbResolve && this.sbResolve(completeSwipeBack);
-        this.sbTransition && this.sbTransition.dispose();
-        this.sbResolve = this.sbTransition = null;
-      });
-    }
-  }
-
-  swipeBackProgress(progress) {
-    if (this.sbTransition) {
-      ClickBlock(true, 4000);
-      this.sbTransition.progress( Math.min(1, Math.max(0, progress)) );
-    }
-  }
-
-  transitionStart(opts) {
-    if (opts.isAnimated) {
-      // block possible clicks during transition
-      ClickBlock(true, 520);
-      this.getNavElement().classList.add('transitioning');
-    }
-  }
-
-  transitionComplete() {
-
-    this.items.forEach((item) => {
-      if (item) {
-        if (item.shouldDestroy) {
-          this.remove(item);
-          item.destroy();
-
-        } else if (item.state === CACHED_STATE && item.shouldCache) {
-          item.cache();
-          item.shouldCache = false;
-        }
-      }
-    });
-
-    this.getNavElement().classList.remove('transitioning');
-
-    // allow clicks again
-    ClickBlock(false);
-  }
-
-  isTransitioning() {
-    let state;
-    for (let i = 0, ii = this.items.length; i < ii; i++) {
-      state = this.items[i].state;
-      if (state === ACTIVELY_ENTERING_STATE ||
-          state === ACTIVELY_LEAVING_STATE ||
-          state === STAGED_ENTERING_STATE ||
-          state === STAGED_LEAVING_STATE) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  clear() {
-    let pops = [];
-    for(let item of this.items) {
-      pops.push(this.pop({
-        animate: false
-      }));
-    }
-    return Promise.all(pops);
-  }
-
-  getActive() {
-    for (let i = 0, ii = this.items.length; i < ii; i++) {
-      if (this.items[i].state === ACTIVE_STATE) {
-        return this.items[i];
-      }
-    }
-    return null;
-  }
-
-  getPrevious(item) {
-    if (item) {
-      return this.items[ this.items.indexOf(item) - 1 ];
-    }
-    return null;
-  }
-
-  getStagedEnteringItem() {
-    for (let i = 0, ii = this.items.length; i < ii; i++) {
-      if (this.items[i].state === STAGED_ENTERING_STATE) {
-        return this.items[i];
-      }
-    }
-    return null;
-  }
-
-  getStagedLeavingItem() {
-    for (let i = 0, ii = this.items.length; i < ii; i++) {
-      if (this.items[i].state === STAGED_LEAVING_STATE) {
-        return this.items[i];
-      }
-    }
-    return null;
-  }
-
-  getNavElement() {
-    return this.domElement;
-  }
-
-  remove(itemOrIndex) {
-    util.array.remove(this.items, itemOrIndex);
-  }
-
-  width() {
-    return this.domElement.offsetWidth;
-  }
-
-  get swipeBackEnabled() {
-    // let activeItem = this.nav.getActive();
-    // if (activeItem) {
-    //   return activeItem.enableBack;
-    // }
-    return false;
-  }
 }
 new IonicComponent(Nav, {});
 
 
-// Used to dynamically place new NavPanes next to this
-// Which is inside of ion-nav
 @Directive({
-  selector: 'template[nav-pane-anchor]'
+  selector: 'template[pane-anchor]'
 })
 class NavPaneAnchor {
   constructor(@Parent() nav: Nav, elementRef: ElementRef) {
-    nav.anchorElementRef = elementRef;
+    nav.navBase.setPaneAnchor(elementRef);
   }
 }
 
 
-
 @Component({selector:'ion-nav-pane'})
 @View({
   template: `
@@ -523,50 +89,6 @@ export 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
@@ -605,7 +127,7 @@ class NavPaneContentAnchor {
   `,
   directives: [NavBarSectionAnchor]
 })
-class NavBarSection {
+export class NavBarSection {
   constructor(@Parent() navPane: NavPane, viewContainerRef: ViewContainerRef, elementRef: ElementRef) {
     this.navPane = navPane;
     navPane.addSection('navbar', this);
@@ -622,12 +144,3 @@ class NavBarSectionAnchor {
     navBarSection.viewContainerRef = viewContainerRef;
   }
 }
-
-
-const STAGED_STATE = 'staged';
-const STAGED_ENTERING_STATE = 'staged-enter';
-const STAGED_LEAVING_STATE = 'staged-leave';
-const ACTIVELY_ENTERING_STATE = 'entering';
-const ACTIVELY_LEAVING_STATE = 'leaving';
-const ACTIVE_STATE = 'active';
-const CACHED_STATE = 'cached';

ionic/components/tabs/tab.js

@@ -1,8 +1,16 @@
 import {Parent} from 'angular2/src/core/annotations_impl/visibility';
 import {Directive, Component} from 'angular2/src/core/annotations_impl/annotations';
+import {Optional} from 'angular2/src/di/annotations_impl'
 import {View} from 'angular2/src/core/annotations_impl/view';
 import {ElementRef} from 'angular2/src/core/compiler/element_ref';
+import {Compiler} from 'angular2/angular2';
+import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
+import {Injector} from 'angular2/di';
+import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 
+import {Nav} from '../nav/nav';
+import {NavBase} from '../nav/nav-base';
+import {NavItem} from '../nav/nav-item';
 import {Tabs} from './tabs';
 import {Content} from '../content/content';
 import {IonicComponent} from 'ionic/config/component';
@@ -33,9 +41,21 @@ import {IonicComponent} from 'ionic/config/component';
   directives: [TabAnchor]
 })
 export class Tab {
-  constructor(@Parent() tabs: Tabs, elementRef: ElementRef) {
-    this.domElement = elementRef.domElement;
+  constructor(
+      @Parent() tabs: Tabs,
+      @Optional() parentNavBase: NavBase,
+      compiler:Compiler,
+      elementRef: ElementRef,
+      loader: DynamicComponentLoader,
+      injector: Injector
+    ) {
+    this.navBase = new NavBase(parentNavBase, compiler, elementRef, loader, injector);
 
+    this.domElement = elementRef.domElement;
+    this.config = Nav.config.invoke(this);
+
+    this.isSelected = false;
+    this.ariaHidden = true;
     tabs.addTab(this);
     this.panelId = 'tab-panel-' + this.id;
     this.labeledBy = 'tab-button-' + this.id;
@@ -44,15 +64,23 @@ export class Tab {
   }
 
   onInit() {
-    if (this.initial) {
-      // console.log('Tab onInit')
-      // this.navBase.push(this.initial);
-    }
+    this.navBase.initial(this.initial);
   }
 
-  select(isSelected) {
-    this.isSelected = isSelected;
-    this.ariaHidden = !isSelected;
+  select(shouldSelect) {
+    if (shouldSelect && !this.isSelected) {
+      console.log('Select tab', this.id);
+
+    } else if (!shouldSelect && this.isSelected) {
+      console.log('Deselect tab', this.id);
+    }
+
+    this.isSelected = shouldSelect;
+    this.ariaHidden = !shouldSelect;
+  }
+
+  setPaneAnchor(elementRef) {
+    this.navBase.setPaneAnchor(elementRef);
   }
 
 }
@@ -63,6 +91,6 @@ export class Tab {
 })
 class TabAnchor {
   constructor(@Parent() tab: Tab, elementRef: ElementRef) {
-    console.log('TabAnchor constructor', tab.id)
+    tab.setPaneAnchor(elementRef);
   }
 }

ionic/components/tabs/tabs.js

@@ -56,7 +56,7 @@ export class Tabs {
 
   onInit() {
     if (this.tabs.length > 0) {
-      //this.selectTab(this.tabs[0]);
+      this.selectTab(this.tabs[0]);
     }
   }
 
@@ -75,13 +75,10 @@ export class Tabs {
     }
     if (!tabToSelect || this._selected === tabToSelect) return;
 
-    this.tabs.forEach(otherTab => {
-      if (otherTab !== tabToSelect) {
-        otherTab.select(false);
-      }
+    this.tabs.forEach(tab => {
+      tab.select( (tab === tabToSelect) );
     });
 
-    tabToSelect.select(true);
     this._selected = tabToSelect;
   }
 

ionic/transitions/transition.js

@@ -1,5 +1,5 @@
 import {Animation} from '../animations/animation';
-import {rafPromise} from '../util/dom';
+import {raf, rafPromise} from '../util/dom';
 
 const SHOW_NAVBAR_CSS = 'show-navbar';
 const SHOW_VIEW_CSS = 'show-view';
@@ -46,8 +46,12 @@ export class Transition extends Animation {
 
   }
 
-  stage() {
-    return rafPromise();
+  stage(callback) {
+    // if no callback was supplied then return a promise
+    if (!callback) {
+      return rafPromise();
+    }
+    raf(callback);
   }