From abff83a20664dbf15e1f21ddaa799dcbc1e55e38 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 16 Sep 2015 00:42:22 -0500 Subject: [PATCH] toolbar refactor wip --- ionic/components/ion.ts | 6 +- ionic/components/menu/menu-toggle.ts | 13 +- ionic/components/nav-bar/nav-bar.scss | 4 +- ionic/components/nav-bar/nav-bar.ts | 184 ++++++++--------- ionic/components/toolbar/modes/ios.scss | 83 ++++---- ionic/components/toolbar/modes/material.scss | 24 +-- ionic/components/toolbar/toolbar.scss | 23 +-- ionic/components/toolbar/toolbar.ts | 203 +++++++------------ ionic/components/view/view-item.ts | 22 +- ionic/config/annotations.ts | 6 +- ionic/config/modes.ts | 2 - ionic/transitions/ios-transition.ts | 4 +- ionic/transitions/transition.ts | 16 +- ionic/util/dom.ts | 29 +-- 14 files changed, 261 insertions(+), 358 deletions(-) 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;