From 639f55b33d4982ba19652a991dc3c3bf1a7e1068 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 28 Aug 2015 08:51:14 -0500 Subject: [PATCH] fix nav.setItems() / nav.setRoot() --- ionic/components/aside/aside-toggle.ts | 13 +++---- ionic/components/aside/test/basic/index.ts | 33 +++++++++++----- ionic/components/aside/test/basic/main.html | 39 ++++++++++--------- .../test/basic/{home-page.html => page1.html} | 2 +- ionic/components/aside/test/basic/page2.html | 24 ++++++++++++ ionic/components/view/view-controller.ts | 19 ++++++--- 6 files changed, 87 insertions(+), 43 deletions(-) rename ionic/components/aside/test/basic/{home-page.html => page1.html} (95%) create mode 100644 ionic/components/aside/test/basic/page2.html diff --git a/ionic/components/aside/aside-toggle.ts b/ionic/components/aside/aside-toggle.ts index 30a6194333..80938fc962 100644 --- a/ionic/components/aside/aside-toggle.ts +++ b/ionic/components/aside/aside-toggle.ts @@ -1,24 +1,23 @@ -import {forwardRef, Component, Host, View, EventEmitter, ElementRef} from 'angular2/angular2'; +import {Directive} from 'angular2/angular2'; -import {Ion} from '../ion'; import {IonicApp} from '../app/app'; -import {Button} from '../ion/components/button'; -import {IonicConfig} from '../../config/config'; -import {IonicDirective} from '../../config/annotations'; -@IonicDirective({ + +@Directive({ selector: '[aside-toggle]', host: { '(^click)': 'toggle($event)' } }) export class AsideToggle { + constructor(app: IonicApp) { //TODO(mlynch): don't hard code this, evaluate with ref system this.aside = app.getComponent('menu'); } + toggle(event) { - console.log('Toggling', this.aside) this.aside && this.aside.toggle(); } + } diff --git a/ionic/components/aside/test/basic/index.ts b/ionic/components/aside/test/basic/index.ts index d7fdbe6f3b..126d3a0ffa 100644 --- a/ionic/components/aside/test/basic/index.ts +++ b/ionic/components/aside/test/basic/index.ts @@ -1,14 +1,12 @@ -import {App, IonicApp, IonicView, NavController} from 'ionic/ionic'; +import {App, IonicApp, IonicView} from 'ionic/ionic'; -@IonicView({ - templateUrl: 'home-page.html' -}) -class HomePage { - constructor(app: IonicApp) { - this.app = app; - } -} +@IonicView({templateUrl: 'page1.html'}) +class Page1 {} + + +@IonicView({templateUrl: 'page2.html'}) +class Page2 {} @App({ @@ -18,6 +16,21 @@ class E2EApp { constructor(app: IonicApp) { this.app = app; - this.rootView = HomePage; + this.rootView = Page1; + + this.pages = [ + { title: 'Page 1', component: Page1 }, + { title: 'Page 2', component: Page2 }, + ]; + } + + openPage(aside, page) { + // close the menu when clicking a link from the aside + aside.close(); + + // Reset the content nav to have just this page + // we wouldn't want the back button to show in this scenario + let nav = this.app.getComponent('nav'); + nav.setRoot(page.component); } } diff --git a/ionic/components/aside/test/basic/main.html b/ionic/components/aside/test/basic/main.html index 93e13e4a5d..bd5f04c7ab 100644 --- a/ionic/components/aside/test/basic/main.html +++ b/ionic/components/aside/test/basic/main.html @@ -1,26 +1,27 @@ - + + Left Menu - - - About - - - Specials - - - Beer - - - Potatoes - - - Close Menu - - + + + + + + + {{p.title}} + + + + Close Menu + + + + + + - + diff --git a/ionic/components/aside/test/basic/home-page.html b/ionic/components/aside/test/basic/page1.html similarity index 95% rename from ionic/components/aside/test/basic/home-page.html rename to ionic/components/aside/test/basic/page1.html index dfa20e5fb7..e82a220637 100644 --- a/ionic/components/aside/test/basic/home-page.html +++ b/ionic/components/aside/test/basic/page1.html @@ -15,7 +15,7 @@ -

Content

+

Page 1

diff --git a/ionic/components/aside/test/basic/page2.html b/ionic/components/aside/test/basic/page2.html new file mode 100644 index 0000000000..9746b7f93f --- /dev/null +++ b/ionic/components/aside/test/basic/page2.html @@ -0,0 +1,24 @@ + + + + + + + + + Aside + + + + + + +

Page 2

+ +

+ +

+ +
diff --git a/ionic/components/view/view-controller.ts b/ionic/components/view/view-controller.ts index af22013f9e..e9ee4f3a36 100644 --- a/ionic/components/view/view-controller.ts +++ b/ionic/components/view/view-controller.ts @@ -163,7 +163,8 @@ export class ViewController extends Ion { } } - let component = null; + let componentObj = null; + let componentType = null; let viewItem = null; // create the ViewItems that go before the new active ViewItem in the stack @@ -171,9 +172,14 @@ export class ViewController extends Ion { if (components.length > 1) { let newBeforeItems = components.slice(0, components.length - 1); for (let j = 0; j < newBeforeItems.length; j++) { - component = newBeforeItems[j]; - if (component) { - viewItem = new ViewItem(this, component.component || component, component.params); + componentObj = newBeforeItems[j]; + + if (componentObj) { + + // could be an object with a componentType property, or it is a componentType + componentType = componentObj.componentType || componentObj; + + viewItem = new ViewItem(this, componentType, componentObj.params); viewItem.state = CACHED_STATE; viewItem.shouldDestroy = false; viewItem.shouldCache = false; @@ -186,10 +192,11 @@ export class ViewController extends Ion { // get the component that will become the active item // it'll be the last one in the given components array - component = components[ components.length - 1 ]; + componentObj = components[ components.length - 1 ]; + componentType = componentObj.componentType || componentObj; // transition the leaving and entering - return this.push((component && component.component) || component, (component && component.params), opts); + return this.push(componentType, componentObj.params, opts); } setRoot(componentType, params = {}, opts = {}) {