wip iOS back btn transition

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 {

ionic/components/nav-bar/nav-bar.js

@@ -18,8 +18,8 @@ import * as dom from '../../util/dom';
       <button class="back-button button">
         <icon class="back-button-icon ion-ios-arrow-back"></icon>
         <span class="back-button-text">
-          <span class="back-default">Back</span>
-          <span class="back-title"></span>
+          <span class="back-default" [inner-text]="bbDefault"></span>
+          <span class="back-title" [inner-text]="bbText"></span>
         </span>
       </button>
       <div class="navbar-title">
@@ -35,13 +35,16 @@ import * as dom from '../../util/dom';
       </div>
     </div>
   `,
-  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);
   }

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();
   }
 

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);
+      }
     }
 
   }

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