diff --git a/ionic/components/app/test/barkpark/main.js b/ionic/components/app/test/barkpark/main.js index 3bd4fd53a5..bfd405b062 100644 --- a/ionic/components/app/test/barkpark/main.js +++ b/ionic/components/app/test/barkpark/main.js @@ -2,21 +2,23 @@ import {For, Component, View, Parent, bootstrap} from 'angular2/angular2' import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms'; import {Log} from 'ionic/util' -import {Router, List, Item, Nav, NavController, Toolbar, ToolbarTitle, - Button, Input, Tabs, Tab, Content, Aside} from 'ionic/ionic' -@Component({ - selector: 'login-page' -}) +import { + Router, Routable, List, Item, Nav, NavController, + Toolbar, ToolbarTitle, Button, Input, Tabs, + Tab, Content, Aside +} from 'ionic/ionic' + +@Component() @View({ templateUrl: 'pages/login.html', directives: [FormDirectives, Button, Input, Content, Toolbar, ToolbarTitle] }) export class LoginPage { - constructor( @Parent() viewport: NavController ) { //, fb: FormBuilder ) { + constructor( @Parent() viewport: NavController ) { this.viewport = viewport - Log.log('LOGIN PAGE') + Log.log('LOGIN PAGE', this) var fb = new FormBuilder() @@ -24,6 +26,7 @@ export class LoginPage { email: ['', Validators.required], password: ['', Validators.required], }); + } doLogin(event) { @@ -33,12 +36,17 @@ export class LoginPage { //this.viewport.push(SecondPage) } + doSignup(event) { this.viewport.push(SignupPage) - } } +new Routable(LoginPage, { + url: '/login', + tag: 'login' +}) + @Component({ selector: 'signup-page' }) diff --git a/ionic/components/toolbar/toolbar.js b/ionic/components/toolbar/toolbar.js index a6e8e80dfe..fb0bd91aaf 100644 --- a/ionic/components/toolbar/toolbar.js +++ b/ionic/components/toolbar/toolbar.js @@ -14,7 +14,7 @@ import { import {BackButton} from 'ionic/components/toolbar/back-button'; import {IonicComponent} from 'ionic/config/component'; import {NavController} from 'ionic/components/nav/nav-item'; -import {raf} from 'ionic/util/dom'; +import {dom} from 'ionic/util' import {Platform} from 'ionic/platform/platform'; // FYI for later: @@ -45,8 +45,8 @@ export class Toolbar { console.log('Toolbar!'); // TODO use config to add these classes - // this.viewContainer.domElement.classList.add('toolbar'); - // this.viewContainer.domElement.classList.add(`toolbar-${Platform.getMode()}`); + // dom.addClass(this.viewContainer.domElement, 'toolbar'); + // dom.addClass(this.viewContainer.domElement, `toolbar-${Platform.getMode()}`); // TODO Make a better way than this // if (/header/i.test(this.viewContainer.domElement.tagName)) { @@ -118,7 +118,7 @@ export class ToolbarTitle { titleElement.style.margin = `0 ${centerMargin}px 0 0`; - raf(() => { + dom.raf(() => { if (titleElement.offsetWidth < titleElement.scrollWidth) { this.titleElement.style.margin = '' this.titleElement.style.textAlign = 'left' diff --git a/ionic/routing/router.js b/ionic/routing/router.js index 58853e1322..db3c66b35d 100644 --- a/ionic/routing/router.js +++ b/ionic/routing/router.js @@ -1,8 +1,32 @@ -export class RouterSingleton { +/** + * The RouterController handles checking for matches of + * each registered route, and triggering callbacks, gathering + * route param data, etc. + */ +export class RouterController { constructor() { this.routes = [] } + // Build route params to send to the matching route. + _buildRouteParams(routeParams) { + routeParams._route = { + path: window.location.hash.slice(1) + } + return routeParams; + } + + // Called when there is no match + _noMatch() { + // otherwise()? + return {} + } + + /** + * Check the current hash/location for a match with + * registered routes. If a match is found, execute the + * first one and then return. + */ match() { let hash = window.location.hash; @@ -16,8 +40,14 @@ export class RouterSingleton { routeParams = route.match(path); if(routeParams !== false) { - route.exec(this.buildRouteParams(routeParams)); - this.emit(route.url); + route.exec(this._buildRouteParams(routeParams)); + + // If the route has a registered URL and isn't set to quiet mode, + // emit the new URL into the address bar + if(route.url && !route.quiet) { + this.emit(route.url); + } + return } } @@ -25,22 +55,20 @@ export class RouterSingleton { return this.noMatch(); } + /** + * Emit the current path to the address bar, either + * as part of the hash or pop/push state if using + * html5 routing style. + */ emit(path) { window.location.hash = path } - buildRouteParams(routeParams) { - routeParams._route = { - path: window.location.hash.slice(1) - } - return routeParams; - } - - noMatch() { - // otherwise()? - return {} - } - + /** + * Register a new route. + * @param path the path to watch for + * @param cb the callback to execute + */ on(path, cb) { let route = new Route(path, cb); this.routes.push(route); @@ -48,6 +76,11 @@ export class RouterSingleton { return route; } + + /** + * If no routes match, trigger the one that matches + * the "otherwise" condition. + */ otherwise(path) { let routeParams = {} for(let route of this.routes) { @@ -68,7 +101,7 @@ export class Route { match(path) { let routeParams = {} - // Either we have a direct string match, or + // Either we have a direct string match, or // we need to check the route more deeply // Example: /tab/home if(this.url == path) { @@ -106,7 +139,7 @@ export class Route { } else if(pp !== rp) { return false; } - + } return routeParams; } @@ -115,5 +148,20 @@ export class Route { } } -var Router = new RouterSingleton(); -export { Router }; +/** + * Routable is metadata added to routable things in Ionic. + * 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; + + componentClass._route = this; + } +} + +var Router = new RouterController(); + +export { Router, Route, Routable };