demo(splitView): splitView demo

src/components/nav-pane/nav-pane.js

@@ -21,8 +21,8 @@ export class NavPane {
     @Optional() @Parent() viewportNav: NavViewport,
     @Optional() @Parent() viewportTab: Tab
   ) {
-    this.loader = loader
-    this.location = location
+    this._loader = loader
+    this._location = location
     this.viewport = viewportTab || viewportNav
     this.domElement = element.domElement
   }
@@ -32,7 +32,7 @@ export class NavPane {
     this.initialized = true;
     this.Class = navItem.Class;
 
-    this.loader.load(navItem.Class, this.location).then(instance => {
+    this._loader.load(navItem.Class, this._location).then(instance => {
       this.instance = instance
       navItem.finishSetup(this, instance)
     })
@@ -58,23 +58,4 @@ export class NavPane {
 }
 
 /*
-beforePush()
-beforePop()
-beforeReenter()
-beforePushedOut()
-
-beforeEnter()
-afterEnter()
-beforeLeave()
-afterLeave()
-
-splitView:
-
- beforeEnter: setup this view as the side view, next view in main area.
-
- - any time a push happens in this view, bring the new component into the main view.
- - any time a pop happens in this view, actually pop the stack (if we can).
-
- any time a push happens in the main view, act normally.
- the main view thinks it is the first component in the stack (does it have its own nav-viewport?)
- */
+ Ideal API: inject a tN

src/components/nav-viewport/nav-viewport.js

@@ -1,17 +1,37 @@
-import {Component, Template, For, NgElement} from 'angular2/angular2'
+import {Component, Template, For, NgElement, bind} from 'angular2/angular2'
 import {ComponentConfig} from 'ionic2/config/component-config'
 import {NavPane} from 'ionic2/components/nav-pane/nav-pane'
 import * as util from 'ionic2/util'
 
+class NavStack {
+  constructor(navViewport: NavViewport) {
+    this._viewport = navViewport
+  }
+  push(Class, opts = {}) {
+    return this._viewport.push(Class, opts)
+  }
+  pop(opts = {}) {
+    return this._viewport.pop(Class, opts)
+  }
+  popTo(index, opts = {}) {
+    return this._viewport.popTo(index, opts)
+  }
+  size()  {
+    return this._viewport._stack.length
+  }
+}
+
 @Component({
   selector: 'ion-nav-viewport',
   bind: {
     initial: 'initial'
-  }
+  },
+  services: [
+    NavStack
+  ]
 })
 @Template({
   inline: `
-
   <header class="toolbar-container">
     <!-- COLLECTION OF TOOLBARS FOR EACH OF ITS VIEWS WITHIN THIS NAV-VIEWPORT -->
     <!-- TOOLBARS FOR EACH VIEW SHOULD HAVE THE SAME CONTEXT AS ITS VIEW -->
@@ -20,9 +40,8 @@ import * as util from 'ionic2/util'
   <div class="nav-pane-container">
     <!-- COLLECTION OF PANES WITHIN THIS NAV-VIEWPORT, EACH PANE AS ONE VIEW -->
     <!-- EACH VIEW HAS A TOOLBAR WHICH NEEDS TO HAVE THE SAME CONTEXT -->
-    <section class="nav-pane" *for="#item of getRawNavStack()" [item]="item"></section>
+    <section class="nav-pane" *for="#item of _ngForLoopArray" [item]="item"></section>
   </div>
-
   `,
   directives: [NavPane, For]
 })
@@ -32,7 +51,8 @@ export class NavViewport {
   ) {
     this.domElement = element.domElement
     this.domElement.classList.add('nav-viewport')
-    // stack is our sane stack of items. This is synchronous and says an item
+
+    // this is our sane stack of items. This is synchronous and says an item
     // is removed even if it's still animating out.
     this._stack = []
 
@@ -41,10 +61,6 @@ export class NavViewport {
     this._ngForLoopArray = []
   }
 
-  getRawNavStack() {
-    return this._ngForLoopArray
-  }
-
   containsClass(Class) {
     for (let i = 0; i < this._stack.length; i++) {
       if (this._stack[i].Class === Class) {

src/components/split-view/split-view.js

@@ -1,7 +1,7 @@
 import {Component, Parent, Decorator, Template, NgElement} from 'angular2/angular2'
 import {NavViewport} from 'ionic2/components/nav-viewport/nav-viewport'
 import {View} from 'ionic2/components/view/view'
-import {NavView} from 'ionic2/components/nav-pane/nav-pane'
+import {NavPane} from 'ionic2/components/nav-pane/nav-pane'
 import * as util from 'ionic2/util'
 
 // TODO consider more explicit API, a la tabs
@@ -48,9 +48,11 @@ ion-split-view > .view.split-view {
   max-width: 300px;
   border-right: 1px solid black;
   z-index: 1;
+  background: white;
 }
-ion-split-view > ion-nav-viewport[split-viewport] {
-  flex: 1;
+ion-split-view > [split-viewport] {
+  left: 300px !important;
+  width: calc(100% - 300px);
 }
 
 </style>

src/components/split-view/test/settings/groups/general.js

@@ -12,5 +12,5 @@ import {View} from 'ionic2/components'
   `,
   directives: [View]
 })
-export class SettingsGeneral {
+export class GeneralPage {
 }

src/components/split-view/test/settings/groups/privacy.js

@@ -1,5 +1,5 @@
 import {Component, Template} from 'angular2/angular2'
-import {View, NavView} from 'ionic2/components'
+import {View, NavPane} from 'ionic2/components'
 
 @Component({ selector: 'privacy-settings' })
 @Template({
@@ -12,23 +12,25 @@ import {View, NavView} from 'ionic2/components'
 </ion-view>`,
   directives: [View]
 })
-export class SettingsPrivacy {
-  constructor(navView: NavView) {
-    this.navView = navView
+export class PrivacyPage {
+  constructor(navPane: NavPane) {
+    this.navPane = navPane
   }
   next() {
-    this.navView.push(PrivacyP1)
+    this.navPane.push(PrivacyP1)
   }
 }
 
 @Component({ selector: 'privp1' })
 @Template({
   inline: `
-<ion-view view-title="Privacy Page 1">
+<ion-view nav-title="Privacy Page 1">
 This is page 1
+<br/>
 <button class="button button-primary" (click)="next()">
   Next
 </button>
+<br/>
 <button class="button" (click)="pop()">
   Back
 </button>
@@ -37,34 +39,36 @@ This is page 1
   directives: [View]
 })
 class PrivacyP1 {
-  constructor(navView: NavView) {
-    this.navView = navView
+  constructor(navPane: NavPane) {
+    this.navPane = navPane
   }
   next() {
-    this.navView.push(PrivacyP2)
+    this.navPane.push(PrivacyP2)
   }
   pop() {
-    this.navView.pop()
+    this.navPane.pop()
   }
 }
 
 @Component({ selector: 'privp2' })
 @Template({
   inline: `
-<ion-view view-title="Privacy Page 2">
+<ion-view nav-title="Privacy Page 2">
 Page 2 here
+<br/>
 <button class="button" (click)="pop()">
   Back
 </button>
+<br/>
 </ion-view>
 `,
   directives: [View]
 })
 class PrivacyP2 {
-  constructor(navView: NavView) {
-    this.navView = navView
+  constructor(navPane: NavPane) {
+    this.navPane = navPane
   }
   pop() {
-    this.navView.pop()
+    this.navPane.pop()
   }
 }

src/components/tabs/tab.js

@@ -24,7 +24,7 @@ import {IonicComponent} from 'ionic2/config/component'
     <div class="nav-pane-container">
       <!-- COLLECTION OF PANES WITHIN THIS NAV-VIEWPORT, EACH PANE AS ONE VIEW -->
       <!-- EACH VIEW HAS A TOOLBAR WHICH NEEDS TO HAVE THE SAME CONTEXT -->
-      <section class="nav-pane" *for="#item of getRawNavStack()" [item]="item"></section>
+      <section class="nav-pane" *for="#item of _ngForLoopArray" [item]="item"></section>
     </div>
   `,
   directives: [For, NavPane]