From ff1f1984ece918a2c6d3dfa3ea955513c209bd3b Mon Sep 17 00:00:00 2001 From: Andrew Date: Mon, 13 Apr 2015 07:47:41 -0600 Subject: [PATCH] demo(splitView): splitView demo --- src/components/nav-pane/nav-pane.js | 27 +++----------- src/components/nav-viewport/nav-viewport.js | 36 +++++++++++++------ src/components/split-view/split-view.js | 8 +++-- .../test/settings/groups/general.js | 2 +- .../test/settings/groups/privacy.js | 32 +++++++++-------- src/components/tabs/tab.js | 2 +- 6 files changed, 55 insertions(+), 52 deletions(-) diff --git a/src/components/nav-pane/nav-pane.js b/src/components/nav-pane/nav-pane.js index 37164f05ea..01eb2a160c 100644 --- a/src/components/nav-pane/nav-pane.js +++ b/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 diff --git a/src/components/nav-viewport/nav-viewport.js b/src/components/nav-viewport/nav-viewport.js index bf0821cfa1..0c379cc926 100644 --- a/src/components/nav-viewport/nav-viewport.js +++ b/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: ` -
@@ -20,9 +40,8 @@ import * as util from 'ionic2/util'
-
+
- `, 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) { diff --git a/src/components/split-view/split-view.js b/src/components/split-view/split-view.js index a44d18e2de..58e0e6895a 100644 --- a/src/components/split-view/split-view.js +++ b/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); } diff --git a/src/components/split-view/test/settings/groups/general.js b/src/components/split-view/test/settings/groups/general.js index 8119c09c2c..11c2a24b32 100644 --- a/src/components/split-view/test/settings/groups/general.js +++ b/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 { } diff --git a/src/components/split-view/test/settings/groups/privacy.js b/src/components/split-view/test/settings/groups/privacy.js index 6dcb036f02..e918bdd688 100644 --- a/src/components/split-view/test/settings/groups/privacy.js +++ b/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' `, 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: ` - + This is page 1 +
+
@@ -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: ` - + Page 2 here +
+
 `, directives: [View] }) class PrivacyP2 { - constructor(navView: NavView) { - this.navView = navView + constructor(navPane: NavPane) { + this.navPane = navPane } pop() { - this.navView.pop() + this.navPane.pop() } } diff --git a/src/components/tabs/tab.js b/src/components/tabs/tab.js index 7dd3de2315..574cb57cfb 100644 --- a/src/components/tabs/tab.js +++ b/src/components/tabs/tab.js @@ -24,7 +24,7 @@ import {IonicComponent} from 'ionic2/config/component'
-
+
`, directives: [For, NavPane]