toolbar refactor wip

ionic/components/ion.ts

@@ -56,15 +56,15 @@ export class Ion {
   }
 
   getDimensions() {
-    return dom.getDimensions(this.elementRef.nativeElement);
+    return dom.getDimensions(this);
   }
 
   width() {
-    return this.getDimensions().width;
+    return this.getDimensions().w;
   }
 
   height() {
-    return this.getDimensions().height;
+    return this.getDimensions().h;
   }
 
 }

ionic/components/menu/menu-toggle.ts

@@ -1,5 +1,6 @@
-import {Directive, Optional} from 'angular2/angular2';
+import {Directive, ElementRef, Optional} from 'angular2/angular2';
 
+import {Ion} from '../ion';
 import {IonicApp} from '../app/app';
 import {ViewItem} from '../view/view-item';
 import {Navbar} from '../nav-bar/nav-bar';
@@ -18,9 +19,15 @@ import {Navbar} from '../nav-bar/nav-bar';
     '[hidden]': 'isHidden'
   }
 })
-export class MenuToggle {
+export class MenuToggle extends Ion {
 
-  constructor(app: IonicApp, @Optional() item: ViewItem, @Optional() navbar: Navbar) {
+  constructor(
+    app: IonicApp,
+    elementRef: ElementRef,
+    @Optional() item: ViewItem,
+    @Optional() navbar: Navbar
+  ) {
+    super(elementRef, null);
     this.app = app;
     this.item = item;
     this.withinNavbar = !!navbar;

ionic/components/nav-bar/nav-bar.scss

@@ -3,11 +3,11 @@
 // --------------------------------------------------
 
 
-.navbar.toolbar {
+ion-navbar.toolbar {
   position: absolute;
 }
 
-.navbar {
+ion-navbar {
   transform: translate3d(100%, 0px, 0px);
 
   &.show-navbar {

ionic/components/nav-bar/nav-bar.ts

@@ -1,134 +1,110 @@
-import {Directive, View, Host, Optional, ElementRef, forwardRef} from 'angular2/angular2';
+import {Component, Directive, View, Host, Optional, ElementRef, TemplateRef, Query, QueryList, ViewQuery} from 'angular2/angular2';
-import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
 
-import {TemplateRef} 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 {IonicComponent, IonicView} from '../../config/annotations';
+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'
 
 
-@IonicComponent({
+@Directive({
-  selector: 'ion-navbar',
+  selector: '.back-button-text'
-  host: {
-    'class': 'toolbar'
-  }
 })
-@IonicView({
+class BackButtonText extends Ion {
-  template: `
+  constructor(elementRef: ElementRef) {
-    <div class="toolbar-inner">
+    super(elementRef, null);
-      <button class="back-button">
-        <icon class="back-button-icon" [name]="bbClass"></icon>
-        <span class="back-button-text">
-          <span class="back-default" [text-content]="bbDefault"></span>
-          <span class="back-title" [text-content]="bbText"></span>
-        </span>
-      </button>
-      <ng-content select="[menu-toggle]"></ng-content>
-      <div class="toolbar-title">
-        <div class="toolbar-inner-title">
-          <ng-content select="ion-title"></ng-content>
-        </div>
-      </div>
-      <div class="toolbar-item toolbar-primary-item">
-        <ng-content select="[primary]"></ng-content>
-      </div>
-      <div class="toolbar-item toolbar-secondary-item">
-        <ng-content select="[secondary]"></ng-content>
-      </div>
-    </div>
-  `,
-  directives: [
-    forwardRef(() => BackButton),
-    forwardRef(() => BackButtonText),
-    forwardRef(() => Title),
-    forwardRef(() => NavbarItem)
-  ]
-})
-export class Navbar extends ToolbarBase {
-  constructor(
-    elementRef: ElementRef,
-    config: IonicConfig,
-    app: IonicApp,
-    @Optional() item: ViewItem
-  ) {
-    super(elementRef, config);
-
-    this.app = app;
-    item && item.navbarView(this);
-
-    this.bbClass = config.setting('backButtonIcon');
-    this.bbDefault = config.setting('backButtonText');
-    this.bbText = '';
   }
-
-  backButtonElement(eleRef) {
-    if (arguments.length) {
-      this._bbEle = eleRef;
-    }
-    return this._bbEle;
-  }
-
-  backButtonTextElement(eleRef) {
-    if (arguments.length) {
-      this._bbTxEle = eleRef;
-    }
-    return this._bbTxEle;
-  }
-
-  didEnter() {
-    const titleEle = this._ttEle || (this._ttEle = this.getNativeElement().querySelector('ion-title'));
-    titleEle && this.app.title(titleEle.textContent);
-  }
-
 }
 
+
 @Directive({
   selector: '.back-button',
   host: {
     '(click)': 'goBack($event)'
   }
 })
-class BackButton {
+class BackButton extends Ion {
-  constructor(@Host() navbar: Navbar, @Optional() item: ViewItem, elementRef: ElementRef) {
+  constructor(
-    this.item = item;
+    @Optional() viewCtrl: ViewController,
-    navbar.backButtonElement(elementRef);
+    elementRef: ElementRef,
+    @Query(BackButtonText) bbtQry: QueryList<BackButtonText>
+  ) {
+    super(elementRef, null);
+    this.viewCtrl = viewCtrl;
+    this.bbtQry = bbtQry;
   }
 
   goBack(ev) {
     ev.stopPropagation();
     ev.preventDefault();
-    this.item && this.item.viewCtrl.pop();
+    this.viewCtrl && this.viewCtrl.pop();
+  }
+
+  getTextRef() {
+    return this.bbtQry.first.elementRef;
   }
 }
 
-@Directive({
-  selector: '.back-button-text'
-})
-class BackButtonText {
-  constructor(@Host() navbar: Navbar, elementRef: ElementRef) {
-    navbar.backButtonTextElement(elementRef);
-  }
-}
 
-@Directive({
-  selector: '.toolbar-title'
-})
-class Title {
-  constructor(@Host() toolbar: Navbar, elementRef: ElementRef) {
-    toolbar.titleElement(elementRef);
-  }
-}
 
-@Directive({
+@Component({
-  selector: '.toolbar-item'
+  selector: 'ion-navbar',
-})
+  host: {
-class NavbarItem {
+    'class': 'toolbar'
-  constructor(@Host() toolbar: Navbar, elementRef: ElementRef) {
-    toolbar.itemElements(elementRef);
   }
+})
+@IonicView({
+  template:
+    '<div class="toolbar-inner">' +
+      '<button class="back-button">' +
+        '<icon class="back-button-icon" [name]="bbIcon"></icon>' +
+        '<span class="back-button-text">' +
+          '<span class="back-default">{{bbDefault}}</span>' +
+        '</span>' +
+      '</button>' +
+      '<ng-content select="[menu-toggle]"></ng-content>' +
+      '<ng-content select="ion-title"></ng-content>' +
+      '<ng-content select="ion-nav-items[primary]"></ng-content>' +
+      '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
+    '</div>',
+  directives: [BackButton, BackButtonText]
+})
+export class Navbar extends ToolbarBase {
+  constructor(
+    app: IonicApp,
+    @Optional() item: ViewItem,
+    elementRef: ElementRef,
+    config: IonicConfig,
+    @Query(ToolbarTitle) titleQry: QueryList<ToolbarTitle>,
+    @Query(ToolbarItem) itemQry: QueryList<ToolbarItem>,
+    @ViewQuery(BackButton) bbQry: QueryList<BackButton>
+  ) {
+    super(elementRef, config, titleQry, itemQry);
+
+    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();
+  }
+
+  getBackButtonTextRef() {
+    return this.bbQry.first.getTextRef();
+  }
+
+  didEnter() {
+    // const titleEle = this._ttEle || (this._ttEle = this.getNativeElement().querySelector('ion-title'));
+    // titleEle && this.app.title(titleEle.textContent);
+  }
+
 }
 
 

ionic/components/toolbar/modes/ios.scss

@@ -20,53 +20,11 @@ $toolbar-ios-title-font-size:               1.7rem !default;
   border-bottom-style: solid;
   min-height: $toolbar-ios-height;
 
-  .toolbar-title {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    padding: 0px 72px;
-    pointer-events: none;
-  }
-
-  .toolbar-primary-item {
-    flex: 1;
-    order: map-get($toolbar-order-ios, primary);
-  }
-
-  .toolbar-secondary-item {
-    flex: 1;
-    text-align: right;
-    order: map-get($toolbar-order-ios, secondary);
-  }
-
   [menu-toggle] {
     order: map-get($toolbar-order-ios, 'menu-toggle');
     cursor: pointer;
   }
 
-  ion-title {
-    font-size: $toolbar-ios-title-font-size;
-    font-weight: 500;
-    text-align: center;
-    pointer-events: auto;
-  }
-
-  .back-button {
-    margin: 0 4px;
-    min-height: 3.2rem;
-    line-height: 1;
-    order: map-get($toolbar-order-ios, 'back-button');
-    overflow: inherit;
-  }
-
-  .back-button-icon {
-    display: inherit;
-    min-width: 20px;
-    font-size: 3.2rem;
-  }
-
   button,
   [button] {
     margin-top: 0;
@@ -87,6 +45,47 @@ $toolbar-ios-title-font-size:               1.7rem !default;
     min-width: 28px;
   }
 
+  .back-button {
+    margin: 0 4px;
+    min-height: 3.2rem;
+    line-height: 1;
+    order: map-get($toolbar-order-ios, 'back-button');
+    overflow: inherit;
+  }
+
+  .back-button-icon {
+    display: inherit;
+    min-width: 20px;
+    font-size: 3.2rem;
+  }
+
+}
+
+ion-title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0px 90px;
+  pointer-events: none;
+}
+
+.toolbar-title {
+  font-size: $toolbar-ios-title-font-size;
+  font-weight: 500;
+  text-align: center;
+  pointer-events: auto;
+}
+
+ion-nav-items {
+  flex: 1;
+  order: map-get($toolbar-order-ios, primary);
+}
+
+ion-nav-items[secondary] {
+  text-align: right;
+  order: map-get($toolbar-order-ios, secondary);
 }
 
 &.hairlines .toolbar {

ionic/components/toolbar/modes/material.scss

@@ -10,19 +10,6 @@ $toolbar-md-button-font-size:        1.4rem !default;
 .toolbar {
   min-height: $toolbar-md-height;
 
-  .toolbar-inner-title {
-    padding: 0px 12px;
-  }
-
-  ion-title {
-    font-size: $toolbar-md-title-font-size;
-    font-weight: 500;
-  }
-
-  .toolbar-primary-item button:first-child {
-    margin-left: 0;
-  }
-
   button,
   [button],
   button.activated,
@@ -48,9 +35,7 @@ $toolbar-md-button-font-size:        1.4rem !default;
 
   [menu-toggle],
   [menu-toggle].activated {
-    margin: ($toolbar-padding * -1) 0 ($toolbar-padding * -1) ($toolbar-padding * -1);
     padding: 0 10px;
-    height: $toolbar-md-height;
     min-width: 60px;
 
     icon {
@@ -59,3 +44,12 @@ $toolbar-md-button-font-size:        1.4rem !default;
   }
 
 }
+
+ion-title {
+  font-size: $toolbar-md-title-font-size;
+  font-weight: 500;
+}
+
+ion-nav-items[primary] button:first-child {
+  margin-left: 0;
+}

ionic/components/toolbar/toolbar.scss

@@ -55,23 +55,17 @@ $toolbar-order: (
   width: 100%;
 }
 
-.toolbar-title {
+ion-title {
   flex: 1;
   order: map-get($toolbar-order, title);
-
   display: flex;
   align-items: center;
-
   transform: translateZ(0px);
 }
 
-.toolbar-inner-title {
+.toolbar-title {
-  width: 100%;
-  padding: 0 1.5rem;
-}
-
-ion-title {
   display: block;
+  width: 100%;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -93,20 +87,15 @@ ion-title {
   font-size: 2.8rem;
 }
 
-.toolbar-item {
-  transform: translateZ(0px);
-}
-
 ion-nav-items {
   display: block;
   margin: 0 0.2rem;
-}
+  transform: translateZ(0px);
-
+  pointer-events: none;
-.toolbar-primary-item {
   order: map-get($toolbar-order, primary);
 }
 
-.toolbar-secondary-item {
+ion-nav-items[secondary] {
   order: map-get($toolbar-order, secondary);
 }
 

ionic/components/toolbar/toolbar.ts

@@ -1,102 +1,80 @@
-import {Directive, View, Host, ElementRef, forwardRef} from 'angular2/angular2';
+import {Component, Directive, View, Host, ElementRef, forwardRef, Query, QueryList} from 'angular2/angular2';
 
 import {Ion} from '../ion';
 import {IonicConfig} from '../../config/config';
-import {IonicComponent} from '../../config/annotations';
+import {IonicView} from '../../config/annotations';
+import {MenuToggle} from '../menu/menu-toggle';
+
+
+@Component({
+  selector: 'ion-title'
+})
+@View({
+  template:
+    '<div class="toolbar-title">' +
+      '<ng-content></ng-content>' +
+    '</div>'
+})
+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);
+  }
+}
+
 
 /**
  * TODO
  */
 export class ToolbarBase extends Ion  {
 
-  constructor(elementRef: ElementRef, config: IonicConfig) {
+  constructor(
+    elementRef: ElementRef,
+    config: IonicConfig,
+    titleQry: QueryList<ToolbarTitle>,
+    itemQry: QueryList<ToolbarItem>
+  ) {
     super(elementRef, config);
-    this.titleAlign = config.setting('navTitleAlign');
+    this.titleQry = titleQry;
-    this.itemEles = [];
+    this.itemQry = itemQry;
   }
 
   /**
    * TODO
-   * @param {TODO} eleRef  TODO
    * @returns {TODO} TODO
    */
-  titleElement(eleRef) {
+  getTitle() {
-    if (arguments.length) {
+    return this.titleQry.first;
-      this._nbTlEle = eleRef;
-    }
-    return this._nbTlEle;
   }
 
   /**
    * TODO
-   * @param {TODO} eleRef  TODO
    * @returns {TODO} TODO
    */
-  itemElements(eleRef) {
+  getTitleRef() {
-    if (arguments.length) {
+    return this.titleQry.first && this.titleQry.first.elementRef;
-      this.itemEles.push(eleRef);
-    }
-    return this.itemEles;
   }
 
   /**
-   * TODO
+   * A toolbar items include the left and right side `ion-nav-items`,
-   * @param {TODO} eleRef  TODO
+   * and every `menu-toggle`. It does not include the `ion-title`.
-   * @returns {TODO} TODO
+   * @returns {TODO} Array of this toolbar's item ElementRefs.
    */
-  titleText(eleRef) {
+  getItemRefs() {
-    if (arguments.length) {
+    let refs = [];
-      this._ttTxt.push(eleRef);
+    this.itemQry.map(function(itm) {
-    }
+      refs.push(itm.getElementRef());
-    return this._ttTxt;
+    });
-  }
+    return refs;
-
-  afterViewChecked() {
-    // if (this._queueAlign) {
-    //   this._queueAlign = false;
-    //   this._alignTitle();
-    // }
-  }
-
-  /**
-   * TODO
-   */
-  alignTitle() {
-    //this._queueAlign = (this.titleAlign === 'center');
-  }
-
-  _alignTitle() {
-    // don't bother if we're not trying to center align the title
-    if (this.aligned) return;
-
-    // called after the navbar/title has had a moment to
-    // finish rendering in their correct locations
-    const toolbarEle = this.getNativeElement();
-    const titleEle = toolbarEle.querySelector('ion-title');
-
-    // don't bother if there's no title element
-    if (!titleEle) return;
-
-    // get all the dimensions
-    const titleOffsetLeft = titleEle.offsetLeft;
-    const titleOffsetRight = toolbarEle.offsetWidth - (titleOffsetLeft + titleEle.offsetWidth);
-
-    let marginLeft = 0;
-    let marginRight = 0;
-    if (titleOffsetLeft < titleOffsetRight) {
-      marginLeft = (titleOffsetRight - titleOffsetLeft) + 5;
-
-    } else if (titleOffsetLeft > titleOffsetRight) {
-      marginRight = (titleOffsetLeft - titleOffsetRight) - 5;
-    }
-
-    if (marginLeft || marginRight) {
-      // only do an update if it has to
-      const innerTitleEle = toolbarEle.querySelector('.toolbar-inner-title');
-      innerTitleEle.style.margin = `0 ${marginRight}px 0 ${marginLeft}px`;
-    }
-
-    this.aligned = true;
   }
 
 }
@@ -104,69 +82,30 @@ export class ToolbarBase extends Ion  {
 /**
  * TODO
  */
-@IonicComponent({
+@Component({
-  selector: 'ion-toolbar'
+  selector: 'ion-toolbar',
+  host: {
+    'class': 'toolbar'
+  }
 })
-@View({
+@IonicView({
-  template: `
+  template:
-    <div class="toolbar-inner">
+    '<div class="toolbar-inner">' +
-      <ng-content select="[menu-toggle]"></ng-content>
+      '<ng-content select="[menu-toggle]"></ng-content>' +
-      <div class="toolbar-title">
+      '<ng-content select="ion-title"></ng-content>' +
-        <div class="toolbar-inner-title">
+      '<ng-content select="ion-nav-items[primary]"></ng-content>' +
-          <ng-content select="ion-title"></ng-content>
+      '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
-        </div>
+    '</div>'
-      </div>
-      <div class="toolbar-item toolbar-primary-item">
-        <ng-content select="[primary]"></ng-content>
-      </div>
-      <div class="toolbar-item toolbar-secondary-item">
-        <ng-content select="[secondary]"></ng-content>
-      </div>
-    </div>
-  `,
-  directives: [
-    forwardRef(() => ToolbarTitle),
-    forwardRef(() => ToolbarItem)
-  ]
 })
 export class Toolbar extends ToolbarBase {
-  constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
-    super(elementRef, ionicConfig);
-    this.itemEles = [];
-  }
 
-  onInit() {
+  constructor(
-    super.onInit();
+    elementRef: ElementRef ,
-
+    config: IonicConfig,
-    // TODO: THIS IS HORRIBLE, FIX
+    @Query(ToolbarTitle) titleQry: QueryList<ToolbarTitle>,
-    // setTimeout(() => {
+    @Query(ToolbarItem) itemQry: QueryList<ToolbarItem>
-    //   this.alignTitle();
+  ) {
-
+    super(elementRef, config, titleQry, itemQry);
-    //   setTimeout(() => {
-    //     this.alignTitle()
-    //   }, 64);
-
-    // }, 32);
   }
 
 }
-
-
-@Directive({
-  selector: '.toolbar-title'
-})
-class ToolbarTitle {
-  constructor(@Host() toolbar: Toolbar, elementRef: ElementRef) {
-    toolbar.titleElement(elementRef);
-  }
-}
-
-
-@Directive({
-  selector: '.toolbar-item'
-})
-class ToolbarItem {
-  constructor(@Host() toolbar: Toolbar, elementRef: ElementRef) {
-    toolbar.itemElements(elementRef);
-  }
-}

ionic/components/view/view-item.ts

@@ -275,7 +275,7 @@ export class ViewItem {
    * TODO
    * @returns {TODO} TODO
    */
-  navbarElement() {
+  navbarRef() {
     let navbarView = this.navbarView();
     if (navbarView) {
       return navbarView.getElementRef();
@@ -286,10 +286,10 @@ export class ViewItem {
    * TODO
    * @returns {TODO} TODO
    */
-  titleElement() {
+  titleRef() {
     let navbarView = this.navbarView();
     if (navbarView) {
-      return navbarView.titleElement();
+      return navbarView.getTitleRef();
     }
   }
 
@@ -297,10 +297,10 @@ export class ViewItem {
    * TODO
    * @returns {TODO} TODO
    */
-  backButtonElement() {
+  navbarItemRefs() {
     let navbarView = this.navbarView();
     if (navbarView) {
-      return navbarView.backButtonElement();
+      return navbarView.getItemRefs();
     }
   }
 
@@ -308,10 +308,10 @@ export class ViewItem {
    * TODO
    * @returns {TODO} TODO
    */
-  backButtonTextElement() {
+  backBtnRef() {
     let navbarView = this.navbarView();
     if (navbarView) {
-      return navbarView.backButtonTextElement();
+      return navbarView.getBackButtonRef();
     }
   }
 
@@ -319,10 +319,10 @@ export class ViewItem {
    * TODO
    * @returns {TODO} TODO
    */
-  navbarItemElements() {
+  backBtnTextRef() {
     let navbarView = this.navbarView();
     if (navbarView) {
-      return navbarView.itemElements();
+      return navbarView.getBackButtonTextRef();
     }
   }
 
@@ -333,10 +333,6 @@ export class ViewItem {
   postRender() {
     // the elements are in the DOM and the browser
     // has rendered them in their correct locations
-    let navbarView = this.navbarView();
-    if (navbarView) {
-      navbarView.alignTitle();
-    }
   }
 
 

ionic/config/annotations.ts

@@ -8,7 +8,7 @@ import {
   Slides, Slide, SlideLazy,
   Tabs, Tab,
   Card, List, ListHeader, Item, ItemGroup, ItemGroupTitle,
-  Toolbar,
+  Toolbar, ToolbarTitle, ToolbarItem,
   Icon,
   Checkbox, Switch,
   TextInput, TextInputElement, Label,
@@ -58,7 +58,11 @@ export const IonicDirectives = [
   // Tabs
   forwardRef(() => Tabs),
   forwardRef(() => Tab),
+
+  // Toolbar
   forwardRef(() => Toolbar),
+  forwardRef(() => ToolbarTitle),
+  forwardRef(() => ToolbarItem),
 
   // Media
   forwardRef(() => Icon),

ionic/config/modes.ts

@@ -16,7 +16,6 @@ IonicConfig.modeConfig('ios', {
   forwardIcon: 'ion-ios-arrow-forward',
   iconMode: 'ios',
 
-  navTitleAlign: 'center',
   tabBarPlacement: 'bottom',
   viewTransition: 'ios',
 
@@ -37,7 +36,6 @@ IonicConfig.modeConfig('md', {
   forwardIcon: '',
   iconMode: 'md',
 
-  navTitleAlign: 'left',
   tabBarPlacement: 'top',
   viewTransition: 'md',
 

ionic/transitions/ios-transition.ts

@@ -66,7 +66,7 @@ class IOSTransition extends Transition {
         .to(OPACITY, 0);
 
       if (this.leaving.enableBack() && this.viewWidth() > 200) {
-        let leavingBackButtonText = new Animation(this.leaving.backButtonTextElement());
+        let leavingBackButtonText = new Animation(this.leaving.backBtnTextRef());
         leavingBackButtonText.fromTo(TRANSLATEX, CENTER, (this.viewWidth() / 2) + 'px');
         this.leavingNavbar.add(leavingBackButtonText);
       }
@@ -93,7 +93,7 @@ class IOSTransition extends Transition {
         .to(OPACITY, 0);
 
       if (this.entering.enableBack() && this.viewWidth() > 200) {
-        let enteringBackButtonText = new Animation(this.entering.backButtonTextElement());
+        let enteringBackButtonText = new Animation(this.entering.backBtnTextRef());
         enteringBackButtonText.fromTo(TRANSLATEX, (this.viewWidth() / 2) + 'px', CENTER);
         this.enteringNavbar.add(enteringBackButtonText);
       }

ionic/transitions/transition.ts

@@ -29,23 +29,23 @@ export class Transition extends Animation {
 
     if (opts.navbar !== false) {
 
-      let enteringNavbar = this.enteringNavbar = new Animation(enteringItem.navbarElement());
+      let enteringNavbar = this.enteringNavbar = new Animation(enteringItem.navbarRef());
       enteringNavbar.before.addClass(SHOW_NAVBAR_CSS);
 
       if (enteringItem.enableBack()) {
         // only animate in the back button if the entering view has it enabled
-        let enteringBackButton = this.enteringBackButton = new Animation(enteringItem.backButtonElement());
+        let enteringBackButton = this.enteringBackButton = new Animation(enteringItem.backBtnRef());
         enteringBackButton
           .before.addClass(SHOW_BACK_BUTTON)
           .fadeIn();
         enteringNavbar.add(enteringBackButton);
       }
 
-      this.enteringTitle = new Animation(enteringItem.titleElement());
+      this.enteringTitle = new Animation(enteringItem.titleRef());
       enteringNavbar.add(this.enteringTitle);
       this.add(enteringNavbar);
 
-      this.enteringNavbarItems = new Animation(enteringItem.navbarItemElements())
+      this.enteringNavbarItems = new Animation(enteringItem.navbarItemRefs());
       this.enteringNavbarItems.fadeIn();
       enteringNavbar.add(this.enteringNavbarItems);
     }
@@ -56,19 +56,19 @@ export class Transition extends Animation {
       this.leavingView = new Animation(leavingItem.viewElementRef());
       this.leavingView.after.removeClass(SHOW_VIEW_CSS);
 
-      let leavingNavbar = this.leavingNavbar = new Animation(leavingItem.navbarElement());
+      let leavingNavbar = this.leavingNavbar = new Animation(leavingItem.navbarRef());
       leavingNavbar.after.removeClass(SHOW_NAVBAR_CSS);
 
-      let leavingBackButton = this.leavingBackButton = new Animation(leavingItem.backButtonElement());
+      let leavingBackButton = this.leavingBackButton = new Animation(leavingItem.backBtnRef());
       leavingBackButton
         .after.removeClass(SHOW_BACK_BUTTON)
         .fadeOut();
       leavingNavbar.add(leavingBackButton);
 
-      this.leavingTitle = new Animation(leavingItem.titleElement());
+      this.leavingTitle = new Animation(leavingItem.titleRef());
       leavingNavbar.add(this.leavingTitle);
 
-      this.leavingNavbarItems = new Animation(leavingItem.navbarItemElements());
+      this.leavingNavbarItems = new Animation(leavingItem.navbarItemRefs());
       this.leavingNavbarItems.fadeOut();
       leavingNavbar.add(this.leavingNavbarItems);
 

ionic/util/dom.ts

@@ -225,20 +225,21 @@ export function closest(el, selector) {
  * to reduce DOM reads. Cache is cleared on a window resize.
  * @param {TODO} ele  TODO
  */
-export function getDimensions(ele) {
+export function getDimensions(ion) {
-  if (!ele.ionicId) {
+  if (!ion._dimId) {
-    ele.ionicId = ++ionicElementIds;
+    ion._dimId = ++dimensionIds;
-    if (ele.ionicId % 100 === 0) {
+    if (ion._dimId % 100 === 0) {
       // periodically flush dimensions
       flushDimensionCache();
     }
   }
 
-  let dimensions = elementDimensions[ele.ionicId];
+  let dimensions = dimensionCache[ion._dimId];
   if (!dimensions) {
-    dimensions = elementDimensions[ele.ionicId] = {
+    let ele = ion.getNativeElement();
-      width: ele.offsetWidth,
+    dimensions = dimensionCache[ion._dimId] = {
-      height: ele.offsetHeight
+      w: ele.offsetWidth,
+      h: ele.offsetHeight
     };
   }
 
@@ -246,18 +247,18 @@ export function getDimensions(ele) {
 }
 
 export function windowDimensions() {
-  if (!elementDimensions.win) {
+  if (!dimensionCache.win) {
-    elementDimensions.win = {
+    dimensionCache.win = {
       width: window.innerWidth,
       height: window.innerHeight
     };
   }
-  return elementDimensions.win;
+  return dimensionCache.win;
 }
 
 export function flushDimensionCache() {
-  elementDimensions = {};
+  dimensionCache = {};
 }
 
-let elementDimensions = {};
+let dimensionCache = {};
-let ionicElementIds = 0;
+let dimensionIds = 0;