diff --git a/ionic/components/nav-bar/nav-bar.ts b/ionic/components/nav-bar/nav-bar.ts index 483139a27a..001cbea74a 100644 --- a/ionic/components/nav-bar/nav-bar.ts +++ b/ionic/components/nav-bar/nav-bar.ts @@ -1,23 +1,12 @@ -import {Component, Directive, View, Host, Optional, ElementRef, TemplateRef, Query, QueryList, ViewQuery} from 'angular2/angular2'; +import {Component, Directive, View, Optional, ElementRef, TemplateRef, forwardRef, Inject} from 'angular2/angular2'; import {Ion} from '../ion'; -import {ToolbarBase, ToolbarTitle, ToolbarItem} from '../toolbar/toolbar'; +import {ToolbarBase} from '../toolbar/toolbar'; import {IonicConfig} from '../../config/config'; import {IonicView} from '../../config/annotations'; import {IonicApp} from '../app/app'; import {ViewItem} from '../view/view-item'; import {ViewController} from '../view/view-controller'; -import {MenuToggle} from '../menu/menu-toggle' - - -@Directive({ - selector: '.back-button-text' -}) -class BackButtonText extends Ion { - constructor(elementRef: ElementRef) { - super(elementRef, null); - } -} @Directive({ @@ -30,11 +19,11 @@ class BackButton extends Ion { constructor( @Optional() viewCtrl: ViewController, elementRef: ElementRef, - @Query(BackButtonText) bbtQry: QueryList + @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar ) { super(elementRef, null); this.viewCtrl = viewCtrl; - this.bbtQry = bbtQry; + navbar && navbar.setBackButtonRef(elementRef); } goBack(ev) { @@ -42,13 +31,22 @@ class BackButton extends Ion { ev.preventDefault(); this.viewCtrl && this.viewCtrl.pop(); } - - getTextRef() { - return this.bbtQry.first.elementRef; - } } +@Directive({ + selector: '.back-button-text' +}) +class BackButtonText extends Ion { + constructor( + elementRef: ElementRef, + @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar + ) { + super(elementRef, null); + navbar && navbar.setBackButtonTextRef(elementRef); + } +} + @Component({ selector: 'ion-navbar', @@ -77,27 +75,31 @@ export class Navbar extends ToolbarBase { app: IonicApp, @Optional() item: ViewItem, elementRef: ElementRef, - config: IonicConfig, - @Query(ToolbarTitle) titleQry: QueryList, - @Query(ToolbarItem) itemQry: QueryList, - @ViewQuery(BackButton) bbQry: QueryList + config: IonicConfig ) { - super(elementRef, config, titleQry, itemQry); + super(elementRef, config); this.app = app; item && item.navbarView(this); - this.bbQry = bbQry; this.bbIcon = config.setting('backButtonIcon'); this.bbDefault = config.setting('backButtonText'); } getBackButtonRef() { - return this.bbQry.first.getElementRef(); + return this.bbRef; + } + + setBackButtonRef(backButtonElementRef) { + this.bbtRef = backButtonElementRef; } getBackButtonTextRef() { - return this.bbQry.first.getTextRef(); + return this.bbRef; + } + + setBackButtonTextRef(backButtonTextElementRef) { + this.bbtRef = backButtonTextElementRef; } didEnter() { diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts index d989c4abf2..837304606d 100644 --- a/ionic/components/toolbar/toolbar.ts +++ b/ionic/components/toolbar/toolbar.ts @@ -1,35 +1,10 @@ -import {Component, Directive, View, Host, ElementRef, forwardRef, Query, QueryList} from 'angular2/angular2'; +import {Component, Directive, View, Host, ElementRef, Optional, forwardRef, Inject} from 'angular2/angular2'; import {Ion} from '../ion'; import {IonicConfig} from '../../config/config'; import {IonicView} from '../../config/annotations'; import {MenuToggle} from '../menu/menu-toggle'; - - -@Component({ - selector: 'ion-title' -}) -@View({ - template: - '
' + - '' + - '
' -}) -export class ToolbarTitle extends Ion { - constructor(elementRef: ElementRef) { - super(elementRef, null); - } -} - - -@Directive({ - selector: 'ion-nav-items,[menu-toggle]' -}) -export class ToolbarItem extends Ion { - constructor(elementRef: ElementRef) { - super(elementRef, null); - } -} +import {Navbar} from '../nav-bar/nav-bar'; /** @@ -39,21 +14,11 @@ export class ToolbarBase extends Ion { constructor( elementRef: ElementRef, - config: IonicConfig, - titleQry: QueryList, - itemQry: QueryList + config: IonicConfig ) { super(elementRef, config); - this.titleQry = titleQry; - this.itemQry = itemQry; - } - - /** - * TODO - * @returns {TODO} TODO - */ - getTitle() { - return this.titleQry.first; + this.itemRefs = []; + this.titleRef = null; } /** @@ -61,7 +26,11 @@ export class ToolbarBase extends Ion { * @returns {TODO} TODO */ getTitleRef() { - return this.titleQry.first && this.titleQry.first.elementRef; + return this.titleRef; + } + + setTitleRef(titleElementRef) { + this.titleRef = titleElementRef; } /** @@ -70,15 +39,16 @@ export class ToolbarBase extends Ion { * @returns {TODO} Array of this toolbar's item ElementRefs. */ getItemRefs() { - let refs = []; - this.itemQry.map(function(itm) { - refs.push(itm.getElementRef()); - }); - return refs; + return this.itemRefs; + } + + addItemRef(itemElementRef) { + this.itemRefs.push(itemElementRef); } } + /** * TODO */ @@ -98,14 +68,49 @@ export class ToolbarBase extends Ion { '' }) export class Toolbar extends ToolbarBase { - constructor( - elementRef: ElementRef , - config: IonicConfig, - @Query(ToolbarTitle) titleQry: QueryList, - @Query(ToolbarItem) itemQry: QueryList + elementRef: ElementRef, + config: IonicConfig ) { - super(elementRef, config, titleQry, itemQry); + super(elementRef, config); } } + + +@Component({ + selector: 'ion-title' +}) +@View({ + template: + '
' + + '' + + '
' +}) +export class ToolbarTitle extends Ion { + constructor( + elementRef: ElementRef, + @Optional() toolbar: Toolbar, + @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar + ) { + super(elementRef, null); + toolbar && toolbar.setTitleRef(elementRef); + navbar && navbar.setTitleRef(elementRef); + } +} + + +@Directive({ + selector: 'ion-nav-items,[menu-toggle]' +}) +export class ToolbarItem extends Ion { + constructor( + elementRef: ElementRef, + @Optional() toolbar: Toolbar, + @Optional() @Inject(forwardRef(() => Navbar)) navbar: Navbar + ) { + super(elementRef, null); + toolbar && toolbar.addItemRef(elementRef); + navbar && navbar.addItemRef(elementRef); + } +} diff --git a/ionic/components/view/view-controller.ts b/ionic/components/view/view-controller.ts index e409e664f1..206201e261 100644 --- a/ionic/components/view/view-controller.ts +++ b/ionic/components/view/view-controller.ts @@ -10,6 +10,7 @@ import {NavController} from '../nav/nav-controller'; import {PaneController} from '../nav/pane'; import {Transition} from '../../transitions/transition'; import {ClickBlock} from '../../util/click-block'; +import {SlideEdgeGesture} from 'ionic/gestures/slide-edge-gesture'; import * as util from 'ionic/util'; /** @@ -449,6 +450,10 @@ export class ViewController extends Ion { return false; } + runSwipeBack() { + if (!this.canSwipeBack()) return; + } + /** * TODO */ @@ -478,6 +483,8 @@ export class ViewController extends Ion { if (this.items.length === 1) { this.elementRef.nativeElement.classList.add('has-views'); } + + this.runSwipeBack(); } /**