NavItem renamed to ViewItem

ionic/components.js

@@ -16,7 +16,7 @@ export * from 'ionic/components/list/list'
 export * from 'ionic/components/modal/modal'
 export * from 'ionic/components/nav/nav'
 export * from 'ionic/components/nav/nav-controller'
-export * from 'ionic/components/nav/nav-item'
+export * from 'ionic/components/nav/nav-params'
 export * from 'ionic/components/nav-bar/nav-bar'
 export * from 'ionic/components/slides/slides'
 export * from 'ionic/components/radio/radio'

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

@@ -3,13 +3,16 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 import {ElementRef} from 'angular2/src/core/compiler/element_ref';
 
 import {IonicComponent} from 'ionic/config/component';
-import {NavItem} from '../nav/nav-item';
+import {ViewItem} from '../view/view-item';
 
 
 @Component({
   selector: 'back-button',
+  hostProperties: {
+    '!item.enableBack': 'hidden'
+  },
   hostListeners: {
-    '^click': 'onClick($event)'
+    '^click': 'goBack($event)'
   },
 })
 @View({
@@ -21,8 +24,8 @@ import {NavItem} from '../nav/nav-item';
     </span>`
 })
 export class BackButton {
-  constructor(navItem: NavItem, @ElementRef() element:ElementRef) {
-    this.navItem = navItem;
+  constructor(item: ViewItem, @ElementRef() element: ElementRef) {
+    this.item = item;
     this.domElement = element.domElement;
 
     setTimeout(() => {
@@ -31,12 +34,12 @@ export class BackButton {
     });
   }
 
-  onClick(ev) {
+  goBack(ev) {
     ev.stopPropagation();
     ev.preventDefault();
 
-    let navItem = this.navItem;
-    navItem && navItem.nav && navItem.nav.pop();
+    let item = this.item;
+    item && item.viewController && item.viewController.pop();
   }
 }
 

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

@@ -6,7 +6,7 @@ import {NgZone} from 'angular2/src/core/zone/ng_zone';
 
 import * as dom from '../../util/dom';
 import {Platform} from 'ionic/platform/platform';
-import {NavItem} from '../nav/nav-item';
+import {ViewItem} from '../view/view-item';
 import {BackButton} from './back-button';
 
 
@@ -16,7 +16,7 @@ import {BackButton} from './back-button';
 @View({
   template: `
     <div class="navbar-inner">
-      <back-button class="button navbar-item" [hidden]="!navItem.enableBack"></back-button>
+      <back-button class="button navbar-item"></back-button>
       <div class="navbar-title">
         <div class="navbar-inner-title navbar-title-hide">
           <content select="ion-title"></content>
@@ -34,8 +34,8 @@ import {BackButton} from './back-button';
   lifecycle: [onInit]
 })
 export class Navbar {
-  constructor(navItem:NavItem, elementRef:ElementRef, ngZone:NgZone) {
-    this.navItem = navItem;
+  constructor(item: ViewItem, elementRef:ElementRef, ngZone:NgZone) {
+    this.item = item;
     this.domElement = elementRef.domElement;
     this.zone = ngZone;
   }
@@ -106,7 +106,7 @@ export class Navbar {
   selector: 'template[navbar]'
 })
 export class NavbarTemplate {
-  constructor(navItem: NavItem, protoViewRef: ProtoViewRef) {
-    navItem.addProtoViewRef('navbar', protoViewRef)
+  constructor(item: ViewItem, protoViewRef: ProtoViewRef) {
+    item.addProtoViewRef('navbar', protoViewRef);
   }
 }

ionic/components/nav/nav-params.js

@@ -0,0 +1,9 @@
+
+import * as util from 'ionic/util';
+
+
+export class NavParams {
+  constructor(params) {
+    util.extend(this, params);
+  }
+}

ionic/components/nav/nav.js

@@ -52,6 +52,6 @@ new IonicComponent(Nav, {});
 })
 class NavPaneAnchor {
   constructor(@Parent() nav: Nav, elementRef: ElementRef) {
-    nav.setPaneAnchor(elementRef);
+    nav.panes.setAnchor(elementRef);
   }
 }

ionic/components/nav/pane.js

@@ -3,12 +3,97 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 import {Parent} from 'angular2/src/core/annotations_impl/visibility';
 import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 import {ElementRef} from 'angular2/src/core/compiler/element_ref';
+import {bind} from 'angular2/di';
 
 import {ViewController} from '../view/view-controller';
 import {Nav} from './nav';
 import {SwipeHandle} from './swipe-handle';
 
 
+export class PaneController {
+  constructor(viewController: ViewController) {
+    this.panes = {};
+    this.viewController = viewController;
+  }
+
+  get(itemStructure, callback) {
+    // this gets or creates the Pane which similar nav items live in
+    // Nav items with just a navbar/content would all use the same Pane
+    // Tabs and view's without a navbar would get a different Panes
+
+    let key = itemStructure.key;
+    let viewController = this.viewController;
+    let pane = this.panes[key];
+
+    if (pane) {
+      // nav pane which the entering component already exists
+      callback(pane);
+
+    } else {
+      // create a new nav pane
+      this.panes[key] = null;
+
+      let injector = viewController.injector.resolveAndCreateChild([
+        bind(ViewController).toValue(viewController)
+      ]);
+
+      // add a Pane element
+      // when the Pane is added, it'll also add its reference to the panes object
+      viewController.loader.loadNextToExistingLocation(Pane, this.anchor, injector).then(() => {
+
+        // get the pane reference by name
+        pane = this.panes[key];
+        let sectionAnchorElementRef = pane && pane.sectionAnchorElementRef;
+        if (!sectionAnchorElementRef) {
+          return callback();
+        }
+
+        let promises = [];
+        let sectionsToAdd = [];
+
+        // decide which sections should be added to this Pane, ie: nav bars, footers, etc.
+        // add only the sections it needs
+        if (itemStructure.navbar) {
+          sectionsToAdd.push(NavBarContainer);
+        }
+
+        // add the sections which this type of Pane requires
+        sectionsToAdd.forEach(SectionClass => {
+          // as each section is compiled and added to the Pane
+          // the section will add a reference to itself in the Pane's sections object
+          promises.push(
+            viewController.loader.loadNextToExistingLocation(SectionClass, sectionAnchorElementRef)
+          );
+        });
+
+        // wait for all of the sections to resolve
+        Promise.all(promises).then(() => {
+          callback(pane);
+        });
+
+      });
+
+    }
+  }
+
+  setAnchor(elementRef) {
+    this.anchor = elementRef;
+  }
+
+  add(pane) {
+    for (let np in this.panes) {
+      if (this.panes[np] === null) {
+        this.panes[np] = pane;
+        return;
+      }
+    }
+    this.panes['_n'] = pane;
+  }
+
+}
+
+
+
 @Component({selector:'ion-pane'})
 @View({
   template: `
@@ -20,11 +105,10 @@ import {SwipeHandle} from './swipe-handle';
   `,
   directives: [PaneAnchor, PaneContentAnchor, SwipeHandle]
 })
-export class Pane {
+class Pane {
   constructor(@Parent() nav: Nav, viewContainerRef: ViewContainerRef) {
-    this.viewContainerRef = viewContainerRef;
     this.sections = {};
-    nav.addPane(this);
+    nav.panes.add(this);
   }
   addSection(sectionName, instance) {
     this.sections[sectionName] = instance;
@@ -32,9 +116,7 @@ export class Pane {
 }
 
 
-@Directive({
-  selector: 'template[pane-anchor]'
-})
+@Directive({selector: 'template[pane-anchor]'})
 class PaneAnchor {
   constructor(@Parent() pane: Pane, elementRef: ElementRef) {
     pane.sectionAnchorElementRef = elementRef;
@@ -42,9 +124,7 @@ class PaneAnchor {
 }
 
 
-@Directive({
-  selector: 'template[content-anchor]'
-})
+@Directive({selector: 'template[content-anchor]'})
 class PaneContentAnchor {
   constructor(@Parent() pane: Pane, viewContainerRef: ViewContainerRef) {
     pane.contentContainerRef = viewContainerRef;
@@ -61,7 +141,7 @@ class PaneContentAnchor {
   template: `<template navbar-anchor></template>`,
   directives: [NavBarAnchor]
 })
-export class NavBarContainer {}
+class NavBarContainer {}
 
 
 // Reference point of where individual view navbars will go next to

ionic/components/tabs/tab.js

@@ -10,7 +10,7 @@ import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 
 import {ViewController} from '../view/view-controller';
 import {Tabs} from './tabs';
-import {NavItem} from '../nav/nav-item';
+import {ViewItem} from '../view/view-item';
 import {Content} from '../content/content';
 import {IonicComponent} from '../../config/component';
 
@@ -53,14 +53,14 @@ export class Tab extends ViewController {
     super(tabs, compiler, elementRef, loader, injector);
     this.tabs = tabs;
 
-    this.item = new NavItem(tabs.parent);
-    this.item.setInstance(this);
-    this.item.setViewElement(elementRef.domElement);
-    this.panes['_n'] = this;
+    let item = this.item = new ViewItem(tabs.parent);
+    item.setInstance(this);
+    item.setViewElement(elementRef.domElement);
+    this.panes.add(this)
     tabs.addTab(this.item);
 
-    this.panelId = 'tab-panel-' + this.item.id;
-    this.labeledBy = 'tab-button-' + this.item.id;
+    this.panelId = 'tab-panel-' + item.id;
+    this.labeledBy = 'tab-button-' + item.id;
   }
 
   onInit() {

ionic/components/tabs/tabs.js

@@ -10,9 +10,9 @@ import {NgFor} from 'angular2/angular2';
 import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 
 import {ViewController} from '../view/view-controller';
+import {ViewItem} from '../view/view-item';
 import {TabButton} from './tab-button';
 import {Icon} from '../icon/icon';
-import {NavItem} from '../nav/nav-item';
 import {IonicComponent} from '../../config/component';
 
 
@@ -43,14 +43,14 @@ export class Tabs extends ViewController {
 
   constructor(
     @Optional() viewController: ViewController,
-    @Optional() navItem: NavItem,
+    @Optional() item: ViewItem,
     compiler: Compiler,
     elementRef: ElementRef,
     loader: DynamicComponentLoader,
     injector: Injector
   ) {
     super(viewController, compiler, elementRef, loader, injector);
-    this.item = navItem;
+    this.item = item;
 
     this.domElement = elementRef.domElement;
     this.config = Tabs.config.invoke(this);
@@ -82,7 +82,7 @@ export class Tabs extends ViewController {
         animate: false
       };
 
-      let leavingItem = this.getActive() || new NavItem();
+      let leavingItem = this.getActive() || new ViewItem();
       leavingItem.shouldDestroy = false;
       leavingItem.shouldCache = true;
       leavingItem.willCache();

ionic/components/toolbar/toolbar.js

@@ -4,9 +4,9 @@ import {ElementRef} from 'angular2/src/core/compiler/element_ref';
 import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
 import {NgZone} from 'angular2/src/core/zone/ng_zone';
 
-import * as dom from '../../util/dom';
 import {IonicComponent} from 'ionic/config/component'
 import {Platform} from 'ionic/platform/platform';
+import * as dom from '../../util/dom';
 
 
 @Component({
@@ -95,7 +95,7 @@ new IonicComponent(Toolbar, {
   selector: 'template[toolbar]'
 })
 export class ToolbarTemplate {
-  constructor(navItem: NavItem, protoViewRef: ProtoViewRef) {
-    navItem.toolbarProto(protoViewRef);
+  constructor(item: ViewItem, protoViewRef: ProtoViewRef) {
+    item.addProtoViewRef('toolbar', protoViewRef);
   }
 }

ionic/components/view/view-controller.js

@@ -9,9 +9,10 @@ import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 import {Compiler} from 'angular2/angular2';
 import {bind} from 'angular2/di';
 
+import {ViewItem} from './view-item';
 import {NavController} from '../nav/nav-controller';
-import {NavItem, NavParams} from '../nav/nav-item';
-import {Pane, NavBarContainer} from '../nav/pane';
+import {PaneController} from '../nav/pane';
+import {NavParams} from '../nav/nav-item';
 import {Transition} from '../../transitions/transition';
 import {ClickBlock} from '../../util/click-block';
 import * as util from 'ionic/util';
@@ -30,85 +31,20 @@ export class ViewController {
     this.parent = parent;
     this.compiler = compiler;
     this.elementRef = elementRef;
-    this.domElement = elementRef.domElement;
     this.loader = loader;
     this.injector = injector;
 
     this.items = [];
     this.navCtrl = new NavController(this);
+    this.panes = new PaneController(this);
+
     this.sbTransition = null;
     this.sbActive = false;
-    this.panes = {};
 
     this.id = ++itemIds;
     this.childIds = -1;
   }
 
-  setPaneAnchor(elementRef) {
-    this.anchorElementRef = elementRef;
-  }
-
-  getPane(itemStructure, callback) {
-    // this gets or creates the Pane which similar nav items live in
-    // Nav items with just a navbar/content would all use the same Pane
-    // Tabs and view's without a navbar would get a different Panes
-
-    if (this.panes[itemStructure.key]) {
-      // nav pane which the entering component already exists
-      callback(this.panes[itemStructure.key]);
-
-    } else {
-      // create a new nav pane
-      this.panes[itemStructure.key] = null;
-
-      let injector = this.injector.resolveAndCreateChild([
-        bind(ViewController).toValue(this)
-      ]);
-
-      // add a Pane element
-      // when the Pane is added, it'll also add its reference to the panes object
-      this.loader.loadNextToExistingLocation(Pane, this.anchorElementRef, injector).then(() => {
-
-        // get the pane reference by name
-        let pane = this.panes[itemStructure.key];
-
-        // get the element inside the Pane to add sections to
-        let sectionViewContainerRef = pane.sectionAnchorElementRef;
-        let promises = [];
-        let sectionsToAdd = []
-
-        // decide which sections should be added to this Pane, ie: nav bars, tab bars, etc.
-        // add only the sections it needs
-        if (itemStructure.navbar) {
-          sectionsToAdd.push(NavBarContainer);
-        }
-
-        // add the sections which this type of Pane requires
-        sectionsToAdd.forEach(SectionClass => {
-          // as each section is compiled and added to the Pane
-          // the section will add a reference to itself in the Pane's sections object
-          promises.push( this.loader.loadNextToExistingLocation(SectionClass, sectionViewContainerRef, null) );
-        });
-
-        // wait for all of the sections to resolve
-        Promise.all(promises).then(() => {
-          callback(pane);
-        });
-
-      });
-
-    }
-  }
-
-  addPane(pane) {
-    for (let np in this.panes) {
-      if (this.panes[np] === null) {
-        this.panes[np] = pane;
-        return;
-      }
-    }
-  }
-
   push(ComponentClass, params = {}, opts = {}) {
     if (!ComponentClass || this.isTransitioning()) {
       return Promise.reject();
@@ -126,13 +62,13 @@ export class ViewController {
     opts.direction = opts.direction || 'forward';
 
     // the active item is going to be the leaving one (if one exists)
-    let leavingItem = this.getActive() || new NavItem();
+    let leavingItem = this.getActive() || new ViewItem();
     leavingItem.shouldDestroy = false;
     leavingItem.shouldCache = true;
     leavingItem.willCache();
 
     // create a new NavStackItem
-    let enteringItem = new NavItem(this, ComponentClass, params);
+    let enteringItem = new ViewItem(this, ComponentClass, params);
 
     // add the item to the stack
     this.add(enteringItem);
@@ -158,7 +94,7 @@ export class ViewController {
 
     // 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();
+    let leavingItem = this.getActive() || new ViewItem();
     leavingItem.shouldDestroy = true;
     leavingItem.shouldCache = false;
     leavingItem.willUnload();
@@ -259,7 +195,7 @@ export class ViewController {
 
     // 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();
+    let leavingItem = this.getActive() || new ViewItem();
     leavingItem.shouldDestroy = true;
     leavingItem.shouldCache = false;
     leavingItem.willLeave();
@@ -377,7 +313,7 @@ export class ViewController {
     if (opts.animate) {
       // block possible clicks during transition
       ClickBlock(true, 520);
-      this.getNavElement().classList.add('transitioning');
+      this.getContainerElement().classList.add('transitioning');
     }
   }
 
@@ -396,7 +332,7 @@ export class ViewController {
       }
     });
 
-    this.getNavElement().classList.remove('transitioning');
+    this.getContainerElement().classList.remove('transitioning');
 
     // allow clicks again
     ClickBlock(false);
@@ -468,8 +404,8 @@ export class ViewController {
     return null;
   }
 
-  getNavElement() {
-    return this.domElement;
+  getContainerElement() {
+    return this.elementRef.domElement;
   }
 
   navbarViewContainer(nbContainer) {
@@ -526,7 +462,7 @@ export class ViewController {
   }
 
   width() {
-    return this.domElement.offsetWidth;
+    return this.getContainerElement().offsetWidth;
   }
 
 }

ionic/components/view/view-item.js

@@ -3,16 +3,16 @@ import {ElementRef} from 'angular2/src/core/compiler/element_ref';
 import {bind} from 'angular2/di';
 
 import {ViewController} from '../view/view-controller';
-import {NavController} from './nav-controller';
-import * as util from 'ionic/util';
+import {NavController} from '../nav/nav-controller';
+import {NavParams} from '../nav/nav-params';
 
 
-export class NavItem {
+export class ViewItem {
 
   constructor(viewController, ComponentClass, params = {}) {
     this.viewController = viewController;
     this.ComponentClass = ComponentClass;
-    this.params = params;
+    this.params = new NavParams(this.params);
     this.instance = null;
     this.state = 0;
 
@@ -48,15 +48,15 @@ export class NavItem {
       // does it have a navbar? Is it tabs? Should it not have a navbar or any toolbars?
       let itemStructure = getProtoViewStructure(componentProtoViewRef);
 
-      // get the appropriate Pane which this NavItem will fit into
-      viewController.getPane(itemStructure, pane => {
+      // get the appropriate Pane which this ViewItem will fit into
+      viewController.panes.get(itemStructure, pane => {
 
-        // create a new injector just for this NavItem
+        // create a new injector just for this ViewItem
         let injector = viewController.injector.resolveAndCreateChild([
           bind(ViewController).toValue(viewController),
           bind(NavController).toValue(viewController.navCtrl),
-          bind(NavParams).toValue(new NavParams(this.params)),
-          bind(NavItem).toValue(this)
+          bind(NavParams).toValue(this.params),
+          bind(ViewItem).toValue(this)
         ]);
 
         // add the content of the view to the content area
@@ -103,6 +103,7 @@ export class NavItem {
         // all done, fire the callback
         if (this._wait) {
           this._waitCallback = callback;
+
         } else {
           callback();
         }
@@ -268,11 +269,6 @@ export class NavItem {
 
 }
 
-export class NavParams {
-  constructor(params) {
-    util.extend(this, params);
-  }
-}
 
 function getProtoViewStructure(componentProtoViewRef) {
   let navbar = true;