diff --git a/ionic/components/ion.ts b/ionic/components/ion.ts
index 33cc78aeca..a0f0a478f6 100644
--- a/ionic/components/ion.ts
+++ b/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;
}
}
diff --git a/ionic/components/menu/menu-toggle.ts b/ionic/components/menu/menu-toggle.ts
index ce2000455f..e88dfdc5e8 100644
--- a/ionic/components/menu/menu-toggle.ts
+++ b/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;
diff --git a/ionic/components/nav-bar/nav-bar.scss b/ionic/components/nav-bar/nav-bar.scss
index 01049bd71e..eef5e1074d 100644
--- a/ionic/components/nav-bar/nav-bar.scss
+++ b/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 {
diff --git a/ionic/components/nav-bar/nav-bar.ts b/ionic/components/nav-bar/nav-bar.ts
index 9510c50494..483139a27a 100644
--- a/ionic/components/nav-bar/nav-bar.ts
+++ b/ionic/components/nav-bar/nav-bar.ts
@@ -1,134 +1,110 @@
-import {Directive, View, Host, Optional, ElementRef, forwardRef} from 'angular2/angular2';
-import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
+import {Component, Directive, View, Host, Optional, ElementRef, TemplateRef, Query, QueryList, ViewQuery} from 'angular2/angular2';
-import {TemplateRef} from 'angular2/angular2';
-
-import {ToolbarBase} from '../toolbar/toolbar';
+import {Ion} from '../ion';
+import {ToolbarBase, ToolbarTitle, ToolbarItem} 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({
- selector: 'ion-navbar',
- host: {
- 'class': 'toolbar'
- }
+@Directive({
+ selector: '.back-button-text'
})
-@IonicView({
- template: `
-
- `,
- 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 = '';
+class BackButtonText extends Ion {
+ constructor(elementRef: ElementRef) {
+ super(elementRef, null);
}
-
- 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 {
- constructor(@Host() navbar: Navbar, @Optional() item: ViewItem, elementRef: ElementRef) {
- this.item = item;
- navbar.backButtonElement(elementRef);
+class BackButton extends Ion {
+ constructor(
+ @Optional() viewCtrl: ViewController,
+ elementRef: ElementRef,
+ @Query(BackButtonText) bbtQry: QueryList
+ ) {
+ 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({
- selector: '.toolbar-item'
-})
-class NavbarItem {
- constructor(@Host() toolbar: Navbar, elementRef: ElementRef) {
- toolbar.itemElements(elementRef);
+@Component({
+ selector: 'ion-navbar',
+ host: {
+ 'class': 'toolbar'
}
+})
+@IonicView({
+ template:
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '
',
+ directives: [BackButton, BackButtonText]
+})
+export class Navbar extends ToolbarBase {
+ constructor(
+ app: IonicApp,
+ @Optional() item: ViewItem,
+ elementRef: ElementRef,
+ config: IonicConfig,
+ @Query(ToolbarTitle) titleQry: QueryList,
+ @Query(ToolbarItem) itemQry: QueryList,
+ @ViewQuery(BackButton) bbQry: QueryList
+ ) {
+ 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);
+ }
+
}
diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index 2d9b1aca45..05175cad78 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/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 {
diff --git a/ionic/components/toolbar/modes/material.scss b/ionic/components/toolbar/modes/material.scss
index 96601a572b..ab0900e915 100644
--- a/ionic/components/toolbar/modes/material.scss
+++ b/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;
+}
diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss
index f785ec9e7f..80d739c0dc 100644
--- a/ionic/components/toolbar/toolbar.scss
+++ b/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 {
- width: 100%;
- padding: 0 1.5rem;
-}
-
-ion-title {
+.toolbar-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;
-}
-
-.toolbar-primary-item {
+ transform: translateZ(0px);
+ pointer-events: none;
order: map-get($toolbar-order, primary);
}
-.toolbar-secondary-item {
+ion-nav-items[secondary] {
order: map-get($toolbar-order, secondary);
}
diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts
index 5e4e399aa7..d989c4abf2 100644
--- a/ionic/components/toolbar/toolbar.ts
+++ b/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:
+ '' +
+ '' +
+ '
'
+})
+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,
+ itemQry: QueryList
+ ) {
super(elementRef, config);
- this.titleAlign = config.setting('navTitleAlign');
- this.itemEles = [];
+ this.titleQry = titleQry;
+ this.itemQry = itemQry;
}
/**
* TODO
- * @param {TODO} eleRef TODO
* @returns {TODO} TODO
*/
- titleElement(eleRef) {
- if (arguments.length) {
- this._nbTlEle = eleRef;
- }
- return this._nbTlEle;
+ getTitle() {
+ return this.titleQry.first;
}
/**
* TODO
- * @param {TODO} eleRef TODO
* @returns {TODO} TODO
*/
- itemElements(eleRef) {
- if (arguments.length) {
- this.itemEles.push(eleRef);
- }
- return this.itemEles;
+ getTitleRef() {
+ return this.titleQry.first && this.titleQry.first.elementRef;
}
/**
- * TODO
- * @param {TODO} eleRef TODO
- * @returns {TODO} TODO
+ * A toolbar items include the left and right side `ion-nav-items`,
+ * and every `menu-toggle`. It does not include the `ion-title`.
+ * @returns {TODO} Array of this toolbar's item ElementRefs.
*/
- titleText(eleRef) {
- if (arguments.length) {
- this._ttTxt.push(eleRef);
- }
- return this._ttTxt;
- }
-
- 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;
+ getItemRefs() {
+ let refs = [];
+ this.itemQry.map(function(itm) {
+ refs.push(itm.getElementRef());
+ });
+ return refs;
}
}
@@ -104,69 +82,30 @@ export class ToolbarBase extends Ion {
/**
* TODO
*/
-@IonicComponent({
- selector: 'ion-toolbar'
+@Component({
+ selector: 'ion-toolbar',
+ host: {
+ 'class': 'toolbar'
+ }
})
-@View({
- template: `
-
- `,
- directives: [
- forwardRef(() => ToolbarTitle),
- forwardRef(() => ToolbarItem)
- ]
+@IonicView({
+ template:
+ '' +
+ '' +
+ '' +
+ '' +
+ '' +
+ '
'
})
export class Toolbar extends ToolbarBase {
- constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
- super(elementRef, ionicConfig);
- this.itemEles = [];
- }
- onInit() {
- super.onInit();
-
- // TODO: THIS IS HORRIBLE, FIX
- // setTimeout(() => {
- // this.alignTitle();
-
- // setTimeout(() => {
- // this.alignTitle()
- // }, 64);
-
- // }, 32);
+ constructor(
+ elementRef: ElementRef ,
+ config: IonicConfig,
+ @Query(ToolbarTitle) titleQry: QueryList,
+ @Query(ToolbarItem) itemQry: QueryList
+ ) {
+ super(elementRef, config, titleQry, itemQry);
}
}
-
-
-@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);
- }
-}
diff --git a/ionic/components/view/view-item.ts b/ionic/components/view/view-item.ts
index b0c18fec83..848d6f6f80 100644
--- a/ionic/components/view/view-item.ts
+++ b/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();
- }
}
diff --git a/ionic/config/annotations.ts b/ionic/config/annotations.ts
index 240285b846..dab036b4ec 100644
--- a/ionic/config/annotations.ts
+++ b/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),
diff --git a/ionic/config/modes.ts b/ionic/config/modes.ts
index 26019a0f7a..0519212eb1 100644
--- a/ionic/config/modes.ts
+++ b/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',
diff --git a/ionic/transitions/ios-transition.ts b/ionic/transitions/ios-transition.ts
index b4c5bed468..3fa991c6db 100644
--- a/ionic/transitions/ios-transition.ts
+++ b/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);
}
diff --git a/ionic/transitions/transition.ts b/ionic/transitions/transition.ts
index 96e8651f25..728b0a56db 100644
--- a/ionic/transitions/transition.ts
+++ b/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);
diff --git a/ionic/util/dom.ts b/ionic/util/dom.ts
index b762beddd3..e3b8b9de2a 100644
--- a/ionic/util/dom.ts
+++ b/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) {
- if (!ele.ionicId) {
- ele.ionicId = ++ionicElementIds;
- if (ele.ionicId % 100 === 0) {
+export function getDimensions(ion) {
+ if (!ion._dimId) {
+ ion._dimId = ++dimensionIds;
+ 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] = {
- width: ele.offsetWidth,
- height: ele.offsetHeight
+ let ele = ion.getNativeElement();
+ dimensions = dimensionCache[ion._dimId] = {
+ w: ele.offsetWidth,
+ h: ele.offsetHeight
};
}
@@ -246,18 +247,18 @@ export function getDimensions(ele) {
}
export function windowDimensions() {
- if (!elementDimensions.win) {
- elementDimensions.win = {
+ if (!dimensionCache.win) {
+ dimensionCache.win = {
width: window.innerWidth,
height: window.innerHeight
};
}
- return elementDimensions.win;
+ return dimensionCache.win;
}
export function flushDimensionCache() {
- elementDimensions = {};
+ dimensionCache = {};
}
-let elementDimensions = {};
-let ionicElementIds = 0;
+let dimensionCache = {};
+let dimensionIds = 0;