From 1927cb8bb141d6a61340edc9e3d632ab0b58e0c2 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Mon, 29 Jun 2015 22:36:19 -0500 Subject: [PATCH] router wip --- ionic/components/app/app.js | 10 +-- .../nav/test/basic/pages/first-page.js | 14 ++-- .../nav/test/basic/pages/second-page.js | 8 +- .../nav/test/basic/pages/third-page.js | 9 +- ionic/components/view/view-controller.js | 11 +++ ionic/config/annotations.js | 3 +- ionic/routing/router.js | 82 ++++++++++++------- 7 files changed, 83 insertions(+), 54 deletions(-) diff --git a/ionic/components/app/app.js b/ionic/components/app/app.js index 7e519af989..981e730133 100644 --- a/ionic/components/app/app.js +++ b/ionic/components/app/app.js @@ -45,11 +45,8 @@ export class IonicApp { return this._zone; } - stateChange(activeView) { - console.log('stage change', activeView); - - - + stateChange(activeView, viewCtrl) { + this.router.stateChange(activeView, viewCtrl); } /** @@ -183,6 +180,9 @@ export function ionicBootstrap(ComponentType, config, router) { router = router || new IonicRouter(); router.app(app); + // TODO: don't wire these together + app.router = router; + // add injectables that will be available to all child components let injectableBindings = [ bind(IonicApp).toValue(app), diff --git a/ionic/components/nav/test/basic/pages/first-page.js b/ionic/components/nav/test/basic/pages/first-page.js index 39d213fe8f..c0f920c471 100644 --- a/ionic/components/nav/test/basic/pages/first-page.js +++ b/ionic/components/nav/test/basic/pages/first-page.js @@ -1,14 +1,11 @@ -import {IonicComponent, IonicView, IonicConfig, IonicApp} from 'ionic/ionic'; +import {IonicComponent, IonicView, IonicConfig, IonicApp, Routable} from 'ionic/ionic'; import {NavParams, NavController} from 'ionic/ionic'; import {SecondPage} from './second-page' @IonicComponent({ - selector: 'ion-view', - route: { - path: '/firstpage' - } + selector: 'ion-view' }) @IonicView({ template: '' + @@ -49,7 +46,6 @@ export class FirstPage { } viewLoaded() { - //this.router = FirstPage.router.invoke(this); console.log('viewLoaded first page'); } @@ -82,6 +78,6 @@ export class FirstPage { } } -// new Routable(FirstPage, { -// url: '/first-page' -// }) +new Routable(FirstPage, { + path: '/firstpage' +}); diff --git a/ionic/components/nav/test/basic/pages/second-page.js b/ionic/components/nav/test/basic/pages/second-page.js index 4ec528632b..d619217dc5 100644 --- a/ionic/components/nav/test/basic/pages/second-page.js +++ b/ionic/components/nav/test/basic/pages/second-page.js @@ -1,4 +1,4 @@ -import {IonicComponent, IonicView, NavController, NavParams} from 'ionic/ionic'; +import {IonicComponent, IonicView, Routable, NavController, NavParams} from 'ionic/ionic'; import {ThirdPage} from './third-page'; @@ -78,6 +78,6 @@ export class SecondPage { } -// new Routable(SecondPage, { -// url: '/second-page' -// }) +new Routable(SecondPage, { + path: '/secondpage' +}); diff --git a/ionic/components/nav/test/basic/pages/third-page.js b/ionic/components/nav/test/basic/pages/third-page.js index 9c1a68ef88..d7154e80eb 100644 --- a/ionic/components/nav/test/basic/pages/third-page.js +++ b/ionic/components/nav/test/basic/pages/third-page.js @@ -1,4 +1,4 @@ -import {IonicComponent, IonicView, NavController} from 'ionic/ionic'; +import {IonicComponent, IonicView, Routable, NavController} from 'ionic/ionic'; @IonicComponent({ @@ -59,7 +59,6 @@ export class ThirdPage { } - -// new Routable(ThirdPage, { -// url: '/third-page' -// }) +new Routable(ThirdPage, { + path: '/thirdpage' +}); diff --git a/ionic/components/view/view-controller.js b/ionic/components/view/view-controller.js index 9508770898..7b90d12592 100644 --- a/ionic/components/view/view-controller.js +++ b/ionic/components/view/view-controller.js @@ -4,6 +4,7 @@ import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_compone import {AppViewManager} from 'angular2/src/core/compiler/view_manager'; import {Injector, bind} from 'angular2/di'; +import {IonicApp} from '../app/app'; import {IonicRouter} from '../../routing/router'; import {ViewItem} from './view-item'; import {NavController} from '../nav/nav-controller'; @@ -26,6 +27,7 @@ export class ViewController { this.loader = injector.get(DynamicComponentLoader); this.viewMngr = injector.get(AppViewManager); this.router = injector.get(IonicRouter); + this.app = injector.get(IonicApp); this.router.addViewController(this); @@ -72,6 +74,9 @@ export class ViewController { // add the item to the stack this.add(enteringItem); + // notify app of the state change + this.app.stateChange(enteringItem, this); + // start the transition this.transition(enteringItem, leavingItem, opts, () => { resolve(); @@ -103,6 +108,9 @@ export class ViewController { // item on the history stack. let enteringItem = this.getPrevious(leavingItem); if (enteringItem) { + // notify app of the state change + this.app.stateChange(enteringItem, this); + // start the transition this.transition(enteringItem, leavingItem, opts, () => { // transition completed, destroy the leaving item @@ -229,6 +237,9 @@ export class ViewController { enteringItem.didEnter(); leavingItem.didLeave(); + // notify app of the state change + this.app.stateChange(enteringItem, this); + } else { // cancelled the swipe back, return items to original state leavingItem.state = ACTIVE_STATE; diff --git a/ionic/config/annotations.js b/ionic/config/annotations.js index a2575e0e52..380e6bbfda 100644 --- a/ionic/config/annotations.js +++ b/ionic/config/annotations.js @@ -1,5 +1,4 @@ -import {coreDirectives} from 'angular2/angular2'; -import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; +import {coreDirectives, Component, Directive} from 'angular2/angular2'; import {View} from 'angular2/src/core/annotations_impl/view'; import * as util from 'ionic/util'; diff --git a/ionic/routing/router.js b/ionic/routing/router.js index 92f6ac82ed..d514aa957a 100644 --- a/ionic/routing/router.js +++ b/ionic/routing/router.js @@ -10,6 +10,8 @@ export class IonicRouter { app(app) { this._app = app; + + } config(config) { @@ -20,7 +22,7 @@ export class IonicRouter { addRoute(name, routeConfig) { if (name && routeConfig && routeConfig.path) { - let route = new IonicRoute(name, routeConfig); + let route = new Route(name, routeConfig); this._routes.push(route); } } @@ -85,10 +87,25 @@ export class IonicRouter { } } - updateState(activeRoute) { - console.log('updateState', activeRoute); + stateChange(activeView) { + console.log('stateChange', activeView); - window.location.hash = activeRoute.path; + let routeConfig = activeView.ComponentType.route; + + let route = null; + for (let i = 0, ii = this._routes.length; i < ii; i++) { + route = this._routes[i]; + + if (route.path == routeConfig.path) { + return this.updateState(route); + } + } + } + + updateState(route) { + console.log('updateState', route); + + window.location.hash = route.path; } addViewController(viewCtrl) { @@ -113,7 +130,14 @@ export class IonicRouter { } -export class IonicRoute { +export class Routable { + constructor(cls, routeConfig) { + cls.route = routeConfig; + } +} + + +class Route { constructor(name, routeConfig) { this.name = name; this.cls = null; @@ -279,7 +303,7 @@ export class RouterController { } } -export class Route { +export class Route_OLD { constructor(url, handler) { this.url = url; this.handler = handler; @@ -339,34 +363,34 @@ export class Route { * This makes it easy to auto emit URLs for routables pushed * onto the stack. */ -export class Routable { - constructor(componentClass, routeInfo) { - this.componentClass = componentClass; - this.routeInfo = routeInfo; +// export class Routable { +// constructor(componentClass, routeInfo) { +// this.componentClass = componentClass; +// this.routeInfo = routeInfo; - //console.log('New routable', componentClass, routeInfo); - Router_OLD.on(this.routeInfo.url, (routeParams) => { - console.log('Routable matched', routeParams, this.componentClass); - Router_OLD.push(this.componentClass, routeParams); - }); +// //console.log('New routable', componentClass, routeInfo); +// Router_OLD.on(this.routeInfo.url, (routeParams) => { +// console.log('Routable matched', routeParams, this.componentClass); +// Router_OLD.push(this.componentClass, routeParams); +// }); - componentClass.router = this; - } - invoke(componentInstance) { - // Called on viewLoaded - this.componentInstance = componentInstance; +// componentClass.router = this; +// } +// invoke(componentInstance) { +// // Called on viewLoaded +// this.componentInstance = componentInstance; - // Bind some lifecycle events - componentInstance._viewWillEnter.observer({ - next: () => { - Router_OLD.emit(this.routeInfo.url); - } - }); +// // Bind some lifecycle events +// componentInstance._viewWillEnter.observer({ +// next: () => { +// Router_OLD.emit(this.routeInfo.url); +// } +// }); - return this; - } +// return this; +// } -} +// } export var Router_OLD = new RouterController();