diff --git a/ionic/components/nav-bar/extensions/ios.scss b/ionic/components/nav-bar/extensions/ios.scss index a87e25d94b..aa9dccc07f 100644 --- a/ionic/components/nav-bar/extensions/ios.scss +++ b/ionic/components/nav-bar/extensions/ios.scss @@ -54,6 +54,7 @@ $navbar-ios-button-background-color: transparent !default; .back-button { order: map-get($navbar-order-ios, 'back-button'); + overflow: inherit; } .button { diff --git a/ionic/components/nav-bar/nav-bar.js b/ionic/components/nav-bar/nav-bar.js index 0906bb6b13..4d39f4887d 100644 --- a/ionic/components/nav-bar/nav-bar.js +++ b/ionic/components/nav-bar/nav-bar.js @@ -18,8 +18,8 @@ import * as dom from '../../util/dom'; `, - directives: [BackButton, Title, NavbarItem] + directives: [BackButton, BackButtonText, Title, NavbarItem] }) export class Navbar { constructor(item: ViewItem, elementRef: ElementRef) { this._ele = elementRef.domElement; this._itmEles = []; item.navbarView(this); + + this.bbDefault = 'Back'; + this.bbText = ''; } element() { @@ -55,6 +58,13 @@ export class Navbar { return this._bbEle; } + backButtonTextElement() { + if (arguments.length) { + this._bbTxEle = arguments[0]; + } + return this._bbTxEle; + } + titleElement() { if (arguments.length) { this._nbTlEle = arguments[0]; @@ -69,6 +79,13 @@ export class Navbar { return this._itmEles; } + titleText() { + if (arguments.length) { + this._ttTxt.push(arguments[0]); + } + return this._ttTxt; + } + alignTitle() { // called after the navbar/title has had a moment to // finish rendering in their correct locations @@ -105,6 +122,13 @@ export class Navbar { innerTitleEle.style.margin = this._ttMargin = margin; } } + + didEnter() { + setTimeout(() => { + const titleEle = this._ttEle || (this._ttEle = this._ele.querySelector('ion-title')); + //this.titleText((titleEle && titleEle.textContent) || ''); + }, 32); + } } @Directive({ @@ -126,10 +150,19 @@ class BackButton { } } +@Directive({ + selector: '.back-button-text' +}) +class BackButtonText { + constructor(@Parent() navbar: Navbar, elementRef: ElementRef) { + navbar.backButtonTextElement(elementRef.domElement); + } +} + @Directive({ selector: '.navbar-title' }) -export class Title { +class Title { constructor(@Parent() navbar: Navbar, elementRef: ElementRef) { navbar.titleElement(elementRef.domElement); } @@ -138,7 +171,7 @@ export class Title { @Directive({ selector: '.navbar-item' }) -export class NavbarItem { +class NavbarItem { constructor(@Parent() navbar: Navbar, elementRef: ElementRef) { navbar.itemElements(elementRef.domElement); } diff --git a/ionic/components/view/view-item.js b/ionic/components/view/view-item.js index 2108ffde0d..ff4cd4b4b4 100644 --- a/ionic/components/view/view-item.js +++ b/ionic/components/view/view-item.js @@ -213,6 +213,13 @@ export class ViewItem { } } + backButtonTextElement() { + let navbarView = this.navbarView(); + if (navbarView) { + return navbarView.backButtonTextElement(); + } + } + navbarItemElements() { let navbarView = this.navbarView(); if (navbarView) { @@ -254,6 +261,10 @@ export class ViewItem { */ didEnter() { this.pane && this.pane.showPane(true); + let navbarView = this.navbarView(); + if (navbarView) { + navbarView.didEnter(); + } this.instance && this.instance.viewDidEnter && this.instance.viewDidEnter(); } diff --git a/ionic/transitions/ios-transition.js b/ionic/transitions/ios-transition.js index ed9cbd2401..34b5d40f47 100644 --- a/ionic/transitions/ios-transition.js +++ b/ionic/transitions/ios-transition.js @@ -60,6 +60,12 @@ class IOSTransition extends Transition { .to(TRANSLATEX, OFF_RIGHT) .to(OPACITY, 0); + if (this.leaving.enableBack() && this.viewWidth() > 200) { + let leavingBackButtonText = new Animation(this.leaving.backButtonTextElement()); + leavingBackButtonText.fromTo(TRANSLATEX, CENTER, (this.viewWidth() / 2) + 'px'); + this.leavingNavbar.add(leavingBackButtonText); + } + } else { // forward direction this.enteringView @@ -76,6 +82,12 @@ class IOSTransition extends Transition { this.leavingTitle .to(TRANSLATEX, OFF_LEFT) .to(OPACITY, 0); + + if (this.entering.enableBack() && this.viewWidth() > 200) { + let enteringBackButtonText = new Animation(this.entering.backButtonTextElement()); + enteringBackButtonText.fromTo(TRANSLATEX, (this.viewWidth() / 2) + 'px', CENTER); + this.enteringNavbar.add(enteringBackButtonText); + } } } diff --git a/ionic/transitions/transition.js b/ionic/transitions/transition.js index cf636c4755..89f247849f 100644 --- a/ionic/transitions/transition.js +++ b/ionic/transitions/transition.js @@ -76,6 +76,9 @@ export class Transition extends Animation { } + viewWidth() { + return this._w || (this._w = this.leaving && this.leaving.viewElement().offsetWidth); + } /* STATIC CLASSES