possible to pass elementRef to Animation

This commit is contained in:
Adam Bradley
2015-06-27 12:36:38 -05:00
parent 504ab46eb3
commit 6bb2035e55
2 changed files with 46 additions and 29 deletions

View File

@ -25,7 +25,7 @@ let AnimationRegistry = {};
export class Animation { export class Animation {
constructor(el) { constructor(ele) {
this._el = []; this._el = [];
this._chld = []; this._chld = [];
this._ani = []; this._ani = [];
@ -39,27 +39,44 @@ export class Animation {
this._plays = []; this._plays = [];
this._finishes = []; this._finishes = [];
this.elements(el); this.elements(ele);
} }
elements(el) { elements(ele) {
if (el) { if (ele) {
if (typeof el === 'string') { if (typeof ele === 'string') {
el = document.querySelectorAll(el); // string query selector
ele = document.querySelectorAll(ele);
} }
if (el.length) { if (ele.length) {
for (let i = 0; i < el.length; i++) { // array of elements
this._el.push(el[i]); for (let i = 0; i < ele.length; i++) {
this.addElement(ele[i]);
} }
} else if (el.nodeType) { } else {
this._el.push(el); // single element
this.addElement(ele);
} }
} }
return this; return this;
} }
addElement(ele) {
// ensure only HTML Element nodes
if (ele) {
if (ele.nativeElement) {
// angular ElementRef
ele = ele.nativeElement;
}
if (ele.nodeType === 1) {
this._el.push(ele);
}
}
}
parent(parentAnimation) { parent(parentAnimation) {
this._parent = parentAnimation; this._parent = parentAnimation;
return this; return this;

View File

@ -39,7 +39,7 @@ import * as dom from '../../util/dom';
}) })
export class Navbar { export class Navbar {
constructor(item: ViewItem, elementRef: ElementRef) { constructor(item: ViewItem, elementRef: ElementRef) {
this.ele = elementRef.nativeElement; this.eleRef = elementRef;
this.itemEles = []; this.itemEles = [];
item.navbarView(this); item.navbarView(this);
@ -48,40 +48,40 @@ export class Navbar {
} }
element() { element() {
return this.ele; return this.eleRef;
} }
backButtonElement(ele) { backButtonElement(eleRef) {
if (arguments.length) { if (arguments.length) {
this._bbEle = ele; this._bbEle = eleRef;
} }
return this._bbEle; return this._bbEle;
} }
backButtonTextElement(ele) { backButtonTextElement(eleRef) {
if (arguments.length) { if (arguments.length) {
this._bbTxEle = ele; this._bbTxEle = eleRef;
} }
return this._bbTxEle; return this._bbTxEle;
} }
titleElement(ele) { titleElement(eleRef) {
if (arguments.length) { if (arguments.length) {
this._nbTlEle = ele; this._nbTlEle = eleRef;
} }
return this._nbTlEle; return this._nbTlEle;
} }
itemElements(ele) { itemElements(eleRef) {
if (arguments.length) { if (arguments.length) {
this.itemEles.push(ele); this.itemEles.push(eleRef);
} }
return this.itemEles; return this.itemEles;
} }
titleText(ele) { titleText(eleRef) {
if (arguments.length) { if (arguments.length) {
this._ttTxt.push(ele); this._ttTxt.push(eleRef);
} }
return this._ttTxt; return this._ttTxt;
} }
@ -89,7 +89,7 @@ export class Navbar {
alignTitle() { alignTitle() {
// called after the navbar/title has had a moment to // called after the navbar/title has had a moment to
// finish rendering in their correct locations // finish rendering in their correct locations
const navbarEle = this.ele; const navbarEle = this.eleRef.nativeElement;
const titleEle = this._ttEle || (this._ttEle = navbarEle.querySelector('ion-title')); const titleEle = this._ttEle || (this._ttEle = navbarEle.querySelector('ion-title'));
// don't bother if there's no title element // don't bother if there's no title element
@ -125,7 +125,7 @@ export class Navbar {
didEnter() { didEnter() {
setTimeout(() => { setTimeout(() => {
const titleEle = this._ttEle || (this._ttEle = this.ele.querySelector('ion-title')); const titleEle = this._ttEle || (this._ttEle = this.eleRef.nativeElement.querySelector('ion-title'));
//this.titleText((titleEle && titleEle.textContent) || ''); //this.titleText((titleEle && titleEle.textContent) || '');
}, 32); }, 32);
} }
@ -140,7 +140,7 @@ export class Navbar {
class BackButton { class BackButton {
constructor(@Parent() navbar: Navbar, item: ViewItem, elementRef: ElementRef) { constructor(@Parent() navbar: Navbar, item: ViewItem, elementRef: ElementRef) {
this.item = item; this.item = item;
navbar.backButtonElement(elementRef.nativeElement); navbar.backButtonElement(elementRef);
} }
goBack(ev) { goBack(ev) {
@ -155,7 +155,7 @@ class BackButton {
}) })
class BackButtonText { class BackButtonText {
constructor(@Parent() navbar: Navbar, elementRef: ElementRef) { constructor(@Parent() navbar: Navbar, elementRef: ElementRef) {
navbar.backButtonTextElement(elementRef.nativeElement); navbar.backButtonTextElement(elementRef);
} }
} }
@ -164,7 +164,7 @@ class BackButtonText {
}) })
class Title { class Title {
constructor(@Parent() navbar: Navbar, elementRef: ElementRef) { constructor(@Parent() navbar: Navbar, elementRef: ElementRef) {
navbar.titleElement(elementRef.nativeElement); navbar.titleElement(elementRef);
} }
} }
@ -173,7 +173,7 @@ class Title {
}) })
class NavbarItem { class NavbarItem {
constructor(@Parent() navbar: Navbar, elementRef: ElementRef) { constructor(@Parent() navbar: Navbar, elementRef: ElementRef) {
navbar.itemElements(elementRef.nativeElement); navbar.itemElements(elementRef);
} }
} }