javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(core): fix lint errors and update el to consistent names

Browse Source
This commit is contained in:
Brandy Carney
2018-01-11 13:19:18 -05:00
parent 9080cc8e3f
commit 342a81e64d
50 changed files with 245 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/core/src/components/action-sheet/animations/ios.enter.ts
View File

@ -3,21 +3,21 @@ import { Animation } from '../../../index';
/**
* iOS Action Sheet Enter Animation
*/
export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.action-sheet-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.action-sheet-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.action-sheet-wrapper'));
wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
backdropAnimation.fromTo('opacity', 0.01, 0.4);
wrapperAnimation.fromTo('translateY', '100%', '0%');
const ani = baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(400)
.add(backdropAnimation)

8
packages/core/src/components/action-sheet/animations/ios.leave.ts
View File

@ -3,21 +3,21 @@ import { Animation } from '../../../index';
/**
* iOS Action Sheet Leave Animation
*/
export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.action-sheet-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.action-sheet-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.action-sheet-wrapper'));
wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
backdropAnimation.fromTo('opacity', 0.4, 0);
wrapperAnimation.fromTo('translateY', '0%', '100%');
const ani = baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(450)
.add(backdropAnimation)

8
packages/core/src/components/action-sheet/animations/md.enter.ts
View File

@ -4,20 +4,20 @@ import { Animation } from '../../../index';
/**
* MD Action Sheet Enter Animation
*/
export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.action-sheet-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.action-sheet-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.action-sheet-wrapper'));
wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
backdropAnimation.fromTo('opacity', 0.01, 0.26);
wrapperAnimation.fromTo('translateY', '100%', '0%');
const ani = baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(400)
.add(backdropAnimation)

8
packages/core/src/components/action-sheet/animations/md.leave.ts
View File

@ -3,20 +3,20 @@ import { Animation } from '../../../index';
/**
* MD Action Sheet Leave Animation
*/
export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.action-sheet-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.action-sheet-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.action-sheet-wrapper'));
wrapperAnimation.addElement(baseEl.querySelector('.action-sheet-wrapper'));
backdropAnimation.fromTo('opacity', 0.26, 0);
wrapperAnimation.fromTo('translateY', '0%', '100%');
const ani = baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(450)
.add(backdropAnimation)

8
packages/core/src/components/alert/animations/ios.enter.ts
View File

@ -3,21 +3,21 @@ import { Animation } from '../../../index';
/**
* iOS Alert Enter Animation
*/
export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.alert-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.alert-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.alert-wrapper'));
wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
backdropAnimation.fromTo('opacity', 0.01, 0.3);
wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
const ani = baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('ease-in-out')
.duration(200)
.add(backdropAnimation)

8
packages/core/src/components/alert/animations/ios.leave.ts
View File

@ -3,21 +3,21 @@ import { Animation } from '../../../index';
/**
* iOS Alert Leave Animation
*/
export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.alert-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.alert-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.alert-wrapper'));
wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
backdropAnimation.fromTo('opacity', 0.3, 0);
wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
const ani = baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('ease-in-out')
.duration(200)
.add(backdropAnimation)

8
packages/core/src/components/alert/animations/md.enter.ts
View File

@ -3,21 +3,21 @@ import { Animation } from '../../../index';
/**
* Md Alert Enter Animation
*/
export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.alert-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.alert-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.alert-wrapper'));
wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
backdropAnimation.fromTo('opacity', 0.01, 0.5);
wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
return Promise.resolve(baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('ease-in-out')
.duration(200)
.add(backdropAnimation)

8
packages/core/src/components/alert/animations/md.leave.ts
View File

@ -3,21 +3,21 @@ import { Animation } from '../../../index';
/**
* Md Alert Leave Animation
*/
export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.alert-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.alert-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.alert-wrapper'));
wrapperAnimation.addElement(baseEl.querySelector('.alert-wrapper'));
backdropAnimation.fromTo('opacity', 0.5, 0);
wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
return Promise.resolve(baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('ease-in-out')
.duration(200)
.add(backdropAnimation)

4
packages/core/src/components/animation-controller/animation-controller.tsx
View File

@ -9,9 +9,9 @@ import { Animator } from './animator';
export class AnimationControllerImpl implements AnimationController {
@Method()
create(animationBuilder?: AnimationBuilder, baseElm?: any, opts?: any): Promise<Animation> {
create(animationBuilder?: AnimationBuilder, baseEl?: any, opts?: any): Promise<Animation> {
if (animationBuilder) {
return animationBuilder(Animator as any, baseElm, opts);
return animationBuilder(Animator as any, baseEl, opts);
}
return Promise.resolve(new Animator() as any);
}

8
packages/core/src/components/animation-controller/animation-interface.tsx
View File

@ -1,12 +1,12 @@
export interface AnimationController {
create(animationBuilder?: AnimationBuilder, baseElm?: any, opts?: any): Promise<Animation>;
create(animationBuilder?: AnimationBuilder, baseEl?: any, opts?: any): Promise<Animation>;
}
export interface Animation {
new (): Animation;
new (): any;
parent: Animation;
hasChildren: boolean;
addElement(elm: Node|Node[]|NodeList): Animation;
addElement(el: Node|Node[]|NodeList): Animation;
add(childAnimation: Animation): Animation;
duration(milliseconds: number): Animation;
easing(name: string): Animation;
@ -42,7 +42,7 @@ export interface Animation {
export interface AnimationBuilder {
(Animation: Animation, baseElm?: HTMLElement, opts?: any): Promise<Animation>;
(Animation: Animation, baseEl?: HTMLElement, opts?: any): Promise<Animation>;
}

38
packages/core/src/components/animation-controller/animator.tsx
View File

@ -38,15 +38,15 @@ export class Animator {
isPlaying = false;
hasCompleted = false;
addElement(elm: Node|Node[]|NodeList): Animator {
if (elm) {
if ((elm as NodeList).length) {
for (let i = 0; i < (elm as NodeList).length; i++) {
this._addElm((elm as any)[i]);
addElement(el: Node|Node[]|NodeList): Animator {
if (el) {
if ((el as NodeList).length) {
for (let i = 0; i < (el as NodeList).length; i++) {
this._addEl((el as any)[i]);
}
} else {
this._addElm(elm);
this._addEl(el);
}
}
@ -56,9 +56,9 @@ export class Animator {
/**
* NO DOM
*/
private _addElm(elm: any) {
if (elm.nodeType === 1) {
this._elementTotal = (this._elements = this._elements || []).push(elm);
private _addEl(el: any) {
if (el.nodeType === 1) {
this._elementTotal = (this._elements = this._elements || []).push(el);
}
}
@ -774,12 +774,12 @@ export class Animator {
const addClasses = this._beforeAddClasses;
const removeClasses = this._beforeRemoveClasses;
let elm: HTMLElement;
let el: HTMLElement;
let elementClassList: DOMTokenList;
let prop: string;
for (i = 0; i < this._elementTotal; i++) {
elm = this._elements[i];
elementClassList = elm.classList;
el = this._elements[i];
elementClassList = el.classList;
// css classes to add before the animation
if (addClasses) {
@ -801,7 +801,7 @@ export class Animator {
if (this._beforeStyles) {
for (prop in this._beforeStyles) {
// ******** DOM WRITE ****************
(elm as any).style[prop] = this._beforeStyles[prop];
(el as any).style[prop] = this._beforeStyles[prop];
}
}
}
@ -856,18 +856,18 @@ export class Animator {
*/
_setAfterStyles() {
let i: number, j: number;
let elm: HTMLElement;
let el: HTMLElement;
let elementClassList: DOMTokenList;
const elements = this._elements;
let prop: string;
for (i = 0; i < this._elementTotal; i++) {
elm = elements[i];
elementClassList = elm.classList;
el = elements[i];
elementClassList = el.classList;
// remove the transition duration/easing
// ******** DOM WRITE ****************
(elm as any).style[CSS_PROP.transitionDurationProp] = (elm as any).style[CSS_PROP.transitionTimingFnProp] = '';
(el as any).style[CSS_PROP.transitionDurationProp] = (el as any).style[CSS_PROP.transitionTimingFnProp] = '';
if (this._isReverse) {
// finished in reverse direction
@ -892,7 +892,7 @@ export class Animator {
if (this._beforeStyles) {
for (prop in this._beforeStyles) {
// ******** DOM WRITE ****************
(elm as any).style[prop] = '';
(el as any).style[prop] = '';
}
}
@ -919,7 +919,7 @@ export class Animator {
if (this._afterStyles) {
for (prop in this._afterStyles) {
// ******** DOM WRITE ****************
(elm as any).style[prop] = this._afterStyles[prop];
(el as any).style[prop] = this._afterStyles[prop];
}
}
}

14
packages/core/src/components/animation-controller/transition-end.ts
View File

@ -1,6 +1,6 @@
export function transitionEnd(elm: HTMLElement, callback: {(ev?: TransitionEvent): void}) {
export function transitionEnd(el: HTMLElement, callback: {(ev?: TransitionEvent): void}) {
let unRegTrans: Function;
let unRegWKTrans: Function;
const opts: any = { passive: true };
@ -11,21 +11,21 @@ export function transitionEnd(elm: HTMLElement, callback: {(ev?: TransitionEvent
}
function onTransitionEnd(ev: TransitionEvent) {
if (elm === ev.target) {
if (el === ev.target) {
unregister();
callback(ev);
}
}
if (elm) {
elm.addEventListener('webkitTransitionEnd', onTransitionEnd, opts);
if (el) {
el.addEventListener('webkitTransitionEnd', onTransitionEnd, opts);
unRegWKTrans = function() {
elm.removeEventListener('webkitTransitionEnd', onTransitionEnd, opts);
el.removeEventListener('webkitTransitionEnd', onTransitionEnd, opts);
};
elm.addEventListener('transitionend', onTransitionEnd, opts);
el.addEventListener('transitionend', onTransitionEnd, opts);
unRegTrans = function() {
elm.removeEventListener('transitionend', onTransitionEnd, opts);
el.removeEventListener('transitionend', onTransitionEnd, opts);
};
}

2
packages/core/src/components/button/button.tsx
View File

@ -75,7 +75,7 @@ export class Button {
*/
@Prop() mode: 'ios' | 'md';
/**
/**
* Emitted when the button has focus.
*/
@Event() ionFocus: EventEmitter<FocusEvent>;

13
packages/core/src/components/datetime/datetime-util.ts
View File

@ -47,7 +47,9 @@ export function renderTextFormat(format: string, value: any, date: DatetimeData,
return (locale.dayShortNames ? locale.dayShortNames : DAY_SHORT_NAMES)[value];
} catch (e) {}
} catch (e) {
// ignore
}
return '';
}
@ -248,12 +250,9 @@ export function updateDate(existingData: DatetimeData, newData: any): boolean {
// do some magic for 12-hour values
if (newData.ampm && newData.hour) {
if (newData.ampm.value === 'pm') {
newData.hour.value = (newData.hour.value === 12 ? 12 : newData.hour.value + 12);
} else {
newData.hour.value = (newData.hour.value === 12 ? 0 : newData.hour.value);
}
newData.hour.value = (newData.ampm.value === 'pm')
? (newData.hour.value === 12 ? 12 : newData.hour.value + 12)
: (newData.hour.value === 12 ? 0 : newData.hour.value);
}
// merge new values from the picker's selection

13
packages/core/src/components/datetime/datetime.tsx
View File

@ -314,14 +314,11 @@ export class Datetime {
const key = convertFormatToKey(format);
let values: any[];
// first see if they have exact values to use for this input
if (this[key + 'Values']) {
// user provide exact values for this date part
values = convertToArrayOfNumbers(this[key + 'Values'], key);
} else {
// use the default date part values
values = dateValueRange(format, this.datetimeMin, this.datetimeMax);
}
// check if they have exact values to use for this date part
// otherwise use the default date part values
values = this[key + 'Values']
? convertToArrayOfNumbers(this[key + 'Values'], key)
: dateValueRange(format, this.datetimeMin, this.datetimeMax);
const column: PickerColumn = {
name: key,

2
packages/core/src/components/fab-button/fab-button.tsx
View File

@ -39,7 +39,7 @@ export class FabButton {
@Prop() translucent = false;
@Prop() activated = false;
@Prop() toggleActive: Function = () => {};
@Prop() toggleActive: Function;
@Prop() show = false;

4
packages/core/src/components/gesture/gesture.tsx
View File

@ -273,7 +273,9 @@ export class Gesture {
// move pointer to position measured 100ms ago
for (;
startPos > 0 && positions[startPos] > timeRange;
startPos -= 3) { }
startPos -= 3) {
// TODO why is this empty?
}
if (startPos > 1) {
// compute relative movement between these two points

22
packages/core/src/components/infinite-scroll/infinite-scroll.tsx
View File

@ -128,16 +128,11 @@ export class InfiniteScroll {
const height = this.scrollEl.offsetHeight;
const threshold = this.thrPc ? (height * this.thrPc) : this.thrPx;
let distanceFromInfinite: number;
const distanceFromInfinite = (this.position === Position.Bottom)
? scrollHeight - infiniteHeight - scrollTop - threshold - height
: scrollTop - infiniteHeight - threshold;
if (this.position === Position.Bottom) {
distanceFromInfinite = scrollHeight - infiniteHeight - scrollTop - threshold - height;
} else {
// assert(this.position === Position.Top, '_position should be top');
distanceFromInfinite = scrollTop - infiniteHeight - threshold;
}
if (distanceFromInfinite < 0) {
if (distanceFromInfinite < 0) {
if (!this.didFire) {
this.isLoading = true;
this.didFire = true;
@ -177,7 +172,8 @@ export class InfiniteScroll {
this.isLoading = false;
if (this.position === Position.Top) {
/** New content is being added at the top, but the scrollTop position stays the same,
/**
* New content is being added at the top, but the scrollTop position stays the same,
* which causes a scroll jump visually. This algorithm makes sure to prevent this.
* (Frame 1)
* - complete() is called, but the UI hasn't had time to update yet.
@ -217,9 +213,9 @@ export class InfiniteScroll {
}
/**
* Pass a promise inside `waitFor()` within the `infinite` output event handler in order to
* change state of infiniteScroll to "complete"
*/
* Pass a promise inside `waitFor()` within the `infinite` output event handler in order to
* change state of infiniteScroll to "complete"
*/
waitFor(action: Promise<any>) {
const enable = this.complete.bind(this);
action.then(enable, enable);

4
packages/core/src/components/input/input.tsx
View File

@ -269,8 +269,8 @@ export class Input implements InputComponent {
/**
* Check if we need to clear the text input if clearOnEdit is enabled
*/
* Check if we need to clear the text input if clearOnEdit is enabled
*/
checkClearOnEdit(ev: any) {
if (!this.clearOnEdit) {
return;

8
packages/core/src/components/loading/animations/ios.enter.ts
View File

@ -4,14 +4,14 @@ import { Animation } from '../../../index';
/**
* iOS Loading Enter Animation
*/
export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.loading-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.loading-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.loading-wrapper'));
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
backdropAnimation.fromTo('opacity', 0.01, 0.3);
@ -19,7 +19,7 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
.fromTo('scale', 1.1, 1);
return Promise.resolve(baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('ease-in-out')
.duration(200)
.add(backdropAnimation)

8
packages/core/src/components/loading/animations/ios.leave.ts
View File

@ -4,14 +4,14 @@ import { Animation } from '../../../index';
/**
* iOS Loading Leave Animation
*/
export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.loading-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.loading-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.loading-wrapper'));
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
backdropAnimation.fromTo('opacity', 0.3, 0);
@ -20,7 +20,7 @@ export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLEle
return Promise.resolve(baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('ease-in-out')
.duration(200)
.add(backdropAnimation)

8
packages/core/src/components/loading/animations/md.enter.ts
View File

@ -3,21 +3,21 @@ import { Animation } from '../../../index';
/**
* Md Loading Enter Animation
*/
export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.loading-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.loading-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.loading-wrapper'));
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
backdropAnimation.fromTo('opacity', 0.01, 0.5);
wrapperAnimation.fromTo('opacity', 0.01, 1).fromTo('scale', 1.1, 1);
return Promise.resolve(baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('ease-in-out')
.duration(200)
.add(backdropAnimation)

8
packages/core/src/components/loading/animations/md.leave.ts
View File

@ -3,21 +3,21 @@ import { Animation } from '../../../index';
/**
* Md Loading Leave Animation
*/
export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.loading-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.loading-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.loading-wrapper'));
wrapperAnimation.addElement(baseEl.querySelector('.loading-wrapper'));
backdropAnimation.fromTo('opacity', 0.5, 0);
wrapperAnimation.fromTo('opacity', 0.99, 0).fromTo('scale', 1, 0.9);
return Promise.resolve(baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('ease-in-out')
.duration(200)
.add(backdropAnimation)

10
packages/core/src/components/modal/animations/ios.enter.ts
View File

@ -4,14 +4,14 @@ import { Animation } from '../../../index';
/**
* iOS Modal Enter Animation
*/
export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.modal-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.modal-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.modal-wrapper'));
wrapperAnimation.addElement(baseEl.querySelector('.modal-wrapper'));
wrapperAnimation.beforeStyles({ 'opacity': 1 })
.fromTo('translateY', '100%', '0%');
@ -19,7 +19,7 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
backdropAnimation.fromTo('opacity', 0.01, 0.4);
return Promise.resolve(baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('cubic-bezier(0.36,0.66,0.04,1)')
.duration(400)
.beforeAddClass('show-modal')
@ -30,7 +30,7 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
/**
* Animations for modals
*/
// export function modalSlideIn(rootElm: HTMLElement) {
// export function modalSlideIn(rootEl: HTMLElement) {
// }

14
packages/core/src/components/modal/animations/ios.leave.ts
View File

@ -4,24 +4,24 @@ import { Animation } from '../../../index';
/**
* iOS Modal Leave Animation
*/
export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.modal-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.modal-backdrop'));
const wrapperAnimation = new Animation();
const wrapperElm = baseElm.querySelector('.modal-wrapper');
wrapperAnimation.addElement(wrapperElm);
const wrapperElmRect = wrapperElm.getBoundingClientRect();
const wrapperEl = baseEl.querySelector('.modal-wrapper');
wrapperAnimation.addElement(wrapperEl);
const wrapperElRect = wrapperEl.getBoundingClientRect();
wrapperAnimation.beforeStyles({ 'opacity': 1 })
.fromTo('translateY', '0%', `${window.innerHeight - wrapperElmRect.top}px`);
.fromTo('translateY', '0%', `${window.innerHeight - wrapperElRect.top}px`);
backdropAnimation.fromTo('opacity', 0.4, 0.0);
return Promise.resolve(baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('ease-out')
.duration(250)
.add(backdropAnimation)

8
packages/core/src/components/modal/animations/md.enter.ts
View File

@ -3,14 +3,14 @@ import { Animation } from '../../../index';
/**
* Md Modal Enter Animation
*/
export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.modal-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.modal-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.modal-wrapper'));
wrapperAnimation.addElement(baseEl.querySelector('.modal-wrapper'));
wrapperAnimation
.fromTo('opacity', 0.01, 1)
@ -19,7 +19,7 @@ export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElem
backdropAnimation.fromTo('opacity', 0.01, 0.4);
return Promise.resolve(baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('cubic-bezier(0.36,0.66,0.04,1)')
.duration(280)
.beforeAddClass('show-modal')

10
packages/core/src/components/modal/animations/md.leave.ts
View File

@ -3,15 +3,15 @@ import { Animation } from '../../../index';
/**
* Md Modal Leave Animation
*/
export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.modal-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.modal-backdrop'));
const wrapperAnimation = new Animation();
const wrapperElm = baseElm.querySelector('.modal-wrapper');
wrapperAnimation.addElement(wrapperElm);
const wrapperEl = baseEl.querySelector('.modal-wrapper');
wrapperAnimation.addElement(wrapperEl);
wrapperAnimation
.fromTo('opacity', 0.99, 0)
@ -20,7 +20,7 @@ export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElem
backdropAnimation.fromTo('opacity', 0.4, 0.0);
return Promise.resolve(baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('cubic-bezier(0.47,0,0.745,0.715)')
.duration(200)
.add(backdropAnimation)

4
packages/core/src/components/nav/nav.tsx
View File

@ -871,7 +871,9 @@ export function updateNavStacks(enteringView: ViewController, leavingView: ViewC
}).then(() => {
// set which animation it should use if it wasn't set yet
if (ti.requiresTransition && !ti.opts.animation) {
ti.opts.animation = isDef(ti.removeStart) ? (leavingView || enteringView).getTransitionName(ti.opts.direction) : (enteringView || leavingView).getTransitionName(ti.opts.direction);
ti.opts.animation = isDef(ti.removeStart)
? (leavingView || enteringView).getTransitionName(ti.opts.direction)
: (enteringView || leavingView).getTransitionName(ti.opts.direction);
}
});
}

4
packages/core/src/components/picker-column/picker-column.tsx
View File

@ -48,10 +48,10 @@ export class PickerColumnCmp {
componentDidLoad() {
// get the scrollable element within the column
const colEle = this.el.querySelector('.picker-opts');
const colEl = this.el.querySelector('.picker-opts');
// get the height of one option
this.optHeight = (colEle.firstElementChild ? colEle.firstElementChild.clientHeight : 0);
this.optHeight = (colEl.firstElementChild ? colEl.firstElementChild.clientHeight : 0);
// TODO block goback-swipe and menu-swipe
// this.activeBlock = 'goback-swipe menu-swipe';

8
packages/core/src/components/picker/animations/ios.enter.ts
View File

@ -4,21 +4,21 @@ import { Animation } from '../../../index';
/**
* iOS Picker Enter Animation
*/
export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.picker-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.picker-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.picker-wrapper'));
wrapperAnimation.addElement(baseEl.querySelector('.picker-wrapper'));
backdropAnimation.fromTo('opacity', 0.01, 0.26);
wrapperAnimation.fromTo('translateY', '100%', '0%');
return Promise.resolve(baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(400)
.add(backdropAnimation)

8
packages/core/src/components/picker/animations/ios.leave.ts
View File

@ -4,21 +4,21 @@ import { Animation } from '../../../index';
/**
* iOS Picker Leave Animation
*/
export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.picker-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.picker-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.picker-wrapper'));
wrapperAnimation.addElement(baseEl.querySelector('.picker-wrapper'));
backdropAnimation.fromTo('opacity', 0.26, 0.01);
wrapperAnimation.fromTo('translateY', '0%', '100%');
return Promise.resolve(baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(400)
.add(backdropAnimation)

14
packages/core/src/components/popover/animations/ios.enter.ts
View File

@ -3,11 +3,11 @@ import { Animation } from '../../../index';
/**
* iOS Popover Enter Animation
*/
export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement, ev?: Event): Promise<Animation> {
export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement, ev?: Event): Promise<Animation> {
let originY = 'top';
let originX = 'left';
const contentEl = baseElm.querySelector('.popover-content') as HTMLElement;
const contentEl = baseEl.querySelector('.popover-content') as HTMLElement;
const contentDimentions = contentEl.getBoundingClientRect();
const contentWidth = contentDimentions.width;
const contentHeight = contentDimentions.height;
@ -28,7 +28,7 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
const targetWidth = (targetDim && targetDim.width) || 0;
const targetHeight = (targetDim && targetDim.height) || 0;
const arrowEl = baseElm.querySelector('.popover-arrow') as HTMLElement;
const arrowEl = baseEl.querySelector('.popover-arrow') as HTMLElement;
const arrowDim = arrowEl.getBoundingClientRect();
const arrowWidth = arrowDim.width;
@ -82,7 +82,7 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
) {
arrowCSS.top = targetTop - (arrowHeight + 1);
popoverCSS.top = targetTop - contentHeight - (arrowHeight - 1);
baseElm.className = baseElm.className + ' popover-bottom';
baseEl.className = baseEl.className + ' popover-bottom';
originY = 'bottom';
// If there isn't room for it to pop up above the target cut it off
} else if (targetTop + targetHeight + contentHeight > bodyHeight) {
@ -116,15 +116,15 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.popover-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.popover-backdrop'));
backdropAnimation.fromTo('opacity', 0.01, 0.08);
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.popover-wrapper'));
wrapperAnimation.addElement(baseEl.querySelector('.popover-wrapper'));
wrapperAnimation.fromTo('opacity', 0.01, 1);
return Promise.resolve(baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('ease')
.duration(100)
.add(backdropAnimation)

8
packages/core/src/components/popover/animations/ios.leave.ts
View File

@ -3,20 +3,20 @@ import { Animation } from '../../../index';
/**
* iOS Popover Leave Animation
*/
export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.popover-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.popover-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.popover-wrapper'));
wrapperAnimation.addElement(baseEl.querySelector('.popover-wrapper'));
wrapperAnimation.fromTo('opacity', 0.99, 0);
backdropAnimation.fromTo('opacity', 0.08, 0);
return Promise.resolve(baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('ease')
.duration(500)
.add(backdropAnimation)

16
packages/core/src/components/popover/animations/md.enter.ts
View File

@ -3,11 +3,11 @@ import { Animation } from '../../../index';
/**
* Md Popover Enter Animation
*/
export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement, ev?: Event): Promise<Animation> {
export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement, ev?: Event): Promise<Animation> {
let originY = 'top';
let originX = 'left';
const contentEl = baseElm.querySelector('.popover-content') as HTMLElement;
const contentEl = baseEl.querySelector('.popover-content') as HTMLElement;
const contentDimentions = contentEl.getBoundingClientRect();
const contentWidth = contentDimentions.width;
const contentHeight = contentDimentions.height;
@ -56,7 +56,7 @@ export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElem
targetTop - contentHeight > 0
) {
popoverCSS.top = targetTop - contentHeight;
baseElm.className = baseElm.className + ' popover-bottom';
baseEl.className = baseEl.className + ' popover-bottom';
originY = 'bottom';
// If there isn't room for it to pop up above the target cut it off
} else if (targetTop + targetHeight + contentHeight > bodyHeight) {
@ -70,23 +70,23 @@ export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElem
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.popover-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.popover-backdrop'));
backdropAnimation.fromTo('opacity', 0.01, 0.08);
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.popover-wrapper'));
wrapperAnimation.addElement(baseEl.querySelector('.popover-wrapper'));
wrapperAnimation.fromTo('opacity', 0.01, 1);
const contentAnimation = new Animation();
contentAnimation.addElement(baseElm.querySelector('.popover-content'));
contentAnimation.addElement(baseEl.querySelector('.popover-content'));
contentAnimation.fromTo('scale', 0.001, 1);
const viewportAnimation = new Animation();
viewportAnimation.addElement(baseElm.querySelector('.popover-viewport'));
viewportAnimation.addElement(baseEl.querySelector('.popover-viewport'));
viewportAnimation.fromTo('opacity', 0.01, 1);
return Promise.resolve(baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('cubic-bezier(0.36,0.66,0.04,1)')
.duration(300)
.add(backdropAnimation)

8
packages/core/src/components/popover/animations/md.leave.ts
View File

@ -3,20 +3,20 @@ import { Animation } from '../../../index';
/**
* Md Popover Leave Animation
*/
export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise<Animation> {
export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise<Animation> {
const baseAnimation = new Animation();
const backdropAnimation = new Animation();
backdropAnimation.addElement(baseElm.querySelector('.popover-backdrop'));
backdropAnimation.addElement(baseEl.querySelector('.popover-backdrop'));
const wrapperAnimation = new Animation();
wrapperAnimation.addElement(baseElm.querySelector('.popover-wrapper'));
wrapperAnimation.addElement(baseEl.querySelector('.popover-wrapper'));
wrapperAnimation.fromTo('opacity', 0.99, 0);
backdropAnimation.fromTo('opacity', 0.08, 0);
return Promise.resolve(baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('ease')
.duration(500)
.add(backdropAnimation)

2
packages/core/src/components/popover/popover.tsx
View File

@ -115,7 +115,7 @@ export class Popover {
return this.delegate.attachViewToDom(userComponentParent, this.component, this.data, cssClasses)
.then((mountingData) => {
this.usersComponentElement = mountingData.element;
return domControllerAsync(this.dom.raf, () => { })
return domControllerAsync(this.dom.raf)
.then(() => this.animationCtrl.create(animationBuilder, this.el, this.ev));
})
.then((animation) => {

4
packages/core/src/components/range/range.tsx
View File

@ -337,7 +337,7 @@ export class Range implements BaseInputComponent {
keyChng(ev: RangeEvent) {
const step = this.step;
if (ev.detail.knob === 'knobB') {
if (!!ev.detail.isIncrease) {
if (ev.detail.isIncrease) {
this.valB += step;
} else {
this.valB -= step;
@ -345,7 +345,7 @@ export class Range implements BaseInputComponent {
this.valB = clamp(this.min, this.valB, this.max);
this.ratioB = this.valueToRatio(this.valB);
} else {
if (!!ev.detail.isIncrease) {
if (ev.detail.isIncrease) {
this.valA += step;
} else {
this.valA -= step;

8
packages/core/src/components/route/test/router-utils.spec.ts
View File

@ -234,8 +234,8 @@ describe('breadthFirstSearch', () => {
});
});
describe('readNavState', () => {
it('should read state', () => {
// describe('readNavState', () => {
// it('should read state', () => {
});
});
// });
// });

28
packages/core/src/components/searchbar/searchbar.tsx
View File

@ -167,13 +167,13 @@ export class Searchbar {
}
inputUpdated() {
// const inputEle = this.el.querySelector('.searchbar-input') as HTMLInputElement;
// const inputEl = this.el.querySelector('.searchbar-input') as HTMLInputElment;
// It is important not to re-assign the value if it is the same, because,
// otherwise, the caret is moved to the end of the input
// if (inputEle && inputEle.value !== this.value) {
// // inputEle.value = this.value;
// this.value = inputEle.value;
// if (inputEl && inputEl.value !== this.value) {
// // inputEl.value = this.value;
// this.value = inputEl.value;
// }
this.positionElements();
@ -184,12 +184,12 @@ export class Searchbar {
* based on whether there is a value in the searchbar or not.
*/
inputBlurred() {
const inputEle = this.el.querySelector('.searchbar-input') as HTMLInputElement;
const inputEl = this.el.querySelector('.searchbar-input') as HTMLInputElement;
// _shouldBlur determines if it should blur
// if we are clearing the input we still want to stay focused in the input
if (this._shouldBlur === false) {
inputEle.focus();
inputEl.focus();
this._shouldBlur = true;
this.ionBlur.emit({this: this});
this.inputUpdated();
@ -240,12 +240,12 @@ export class Searchbar {
*/
positionPlaceholder() {
const isRTL = document.dir === 'rtl';
const inputEle = this.el.querySelector('.searchbar-input') as HTMLInputElement;
const iconEle = this.el.querySelector('.searchbar-search-icon') as HTMLElement;
const inputEl = this.el.querySelector('.searchbar-input') as HTMLInputElement;
const iconEl = this.el.querySelector('.searchbar-search-icon') as HTMLElement;
if (this._shouldAlignLeft) {
inputEle.removeAttribute('style');
iconEle.removeAttribute('style');
inputEl.removeAttribute('style');
iconEl.removeAttribute('style');
} else {
// Create a dummy span to get the placeholder width
@ -265,11 +265,11 @@ export class Searchbar {
// Set the input padding start and icon margin start
if (isRTL) {
inputEle.style.paddingRight = inputLeft;
iconEle.style.marginRight = iconLeft;
inputEl.style.paddingRight = inputLeft;
iconEl.style.marginRight = iconLeft;
} else {
inputEle.style.paddingLeft = inputLeft;
iconEle.style.marginLeft = iconLeft;
inputEl.style.paddingLeft = inputLeft;
iconEl.style.marginLeft = iconLeft;
}
}
}

11
packages/core/src/components/spinner/spinner.tsx
View File

@ -91,17 +91,14 @@ export class Spinner {
const svgs: any[] = [];
let i = 0;
let l = 0;
if (spinner.circles) {
for (i = 0, l = spinner.circles; i < l; i++) {
svgs.push(buildCircle(spinner, duration, i, l));
for (let i = 0; i < spinner.circles; i++) {
svgs.push(buildCircle(spinner, duration, i, spinner.circles));
}
} else if (spinner.lines) {
for (i = 0, l = spinner.lines; i < l; i++) {
svgs.push(buildLine(spinner, duration, i, l));
for (let i = 0; i < spinner.lines; i++) {
svgs.push(buildLine(spinner, duration, i, spinner.lines));
}
}

4
packages/core/src/components/textarea/textarea.tsx
View File

@ -209,8 +209,8 @@ export class Textarea implements TextareaComponent {
}
/**
* Check if we need to clear the text input if clearOnEdit is enabled
*/
* Check if we need to clear the text input if clearOnEdit is enabled
*/
checkClearOnEdit(ev: any) {
if (!this.clearOnEdit) {
return;

8
packages/core/src/components/toast/animations/ios.enter.ts
View File

@ -3,11 +3,11 @@ import { Animation } from '../../../index';
/**
* iOS Toast Enter Animation
*/
export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement, position: string): Promise<Animation> {
export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
const baseAnimation = new Animation();
const wrapperAnimation = new Animation();
const wrapperEle = baseElm.querySelector('.toast-wrapper') as HTMLElement;
const wrapperEle = baseEl.querySelector('.toast-wrapper') as HTMLElement;
wrapperAnimation.addElement(wrapperEle);
switch (position) {
@ -16,7 +16,7 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
break;
case 'middle':
const topPosition = Math.floor(
baseElm.clientHeight / 2 - wrapperEle.clientHeight / 2
baseEl.clientHeight / 2 - wrapperEle.clientHeight / 2
);
wrapperEle.style.top = `${topPosition}px`;
wrapperAnimation.fromTo('opacity', 0.01, 1);
@ -26,7 +26,7 @@ export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLEle
break;
}
return Promise.resolve(baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('cubic-bezier(.155,1.105,.295,1.12)')
.duration(400)
.add(wrapperAnimation));

6
packages/core/src/components/toast/animations/ios.leave.ts
View File

@ -3,11 +3,11 @@ import { Animation } from '../../../index';
/**
* iOS Toast Leave Animation
*/
export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement, position: string): Promise<Animation> {
export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
const baseAnimation = new Animation();
const wrapperAnimation = new Animation();
const wrapperEle = baseElm.querySelector('.toast-wrapper') as HTMLElement;
const wrapperEle = baseEl.querySelector('.toast-wrapper') as HTMLElement;
wrapperAnimation.addElement(wrapperEle);
switch (position) {
case 'top':
@ -21,7 +21,7 @@ export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLEle
break;
}
return Promise.resolve(baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(300)
.add(wrapperAnimation));

8
packages/core/src/components/toast/animations/md.enter.ts
View File

@ -3,11 +3,11 @@ import { Animation } from '../../../index';
/**
* MD Toast Enter Animation
*/
export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement, position: string): Promise<Animation> {
export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
const baseAnimation = new Animation();
const wrapperAnimation = new Animation();
const wrapperEle = baseElm.querySelector('.toast-wrapper') as HTMLElement;
const wrapperEle = baseEl.querySelector('.toast-wrapper') as HTMLElement;
wrapperAnimation.addElement(wrapperEle);
switch (position) {
@ -16,7 +16,7 @@ export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElem
break;
case 'middle':
const topPosition = Math.floor(
baseElm.clientHeight / 2 - wrapperEle.clientHeight / 2
baseEl.clientHeight / 2 - wrapperEle.clientHeight / 2
);
wrapperEle.style.top = `${topPosition}px`;
wrapperAnimation.fromTo('opacity', 0.01, 1);
@ -26,7 +26,7 @@ export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElem
break;
}
return Promise.resolve(baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(400)
.add(wrapperAnimation));

6
packages/core/src/components/toast/animations/md.leave.ts
View File

@ -3,11 +3,11 @@ import { Animation } from '../../../index';
/**
* md Toast Leave Animation
*/
export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement, position: string): Promise<Animation> {
export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
const baseAnimation = new Animation();
const wrapperAnimation = new Animation();
const wrapperEle = baseElm.querySelector('.toast-wrapper') as HTMLElement;
const wrapperEle = baseEl.querySelector('.toast-wrapper') as HTMLElement;
wrapperAnimation.addElement(wrapperEle);
switch (position) {
@ -22,7 +22,7 @@ export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElem
break;
}
return Promise.resolve(baseAnimation
.addElement(baseElm)
.addElement(baseEl)
.easing('cubic-bezier(.36,.66,.04,1)')
.duration(300)
.add(wrapperAnimation));

5
packages/core/src/components/toast/toast.tsx
View File

@ -180,9 +180,10 @@ export class Toast {
}
render() {
let userCssClass = 'toast-content';
if (this.cssClass) {
userCssClass += ' ' + this.cssClass;
this.cssClass.split(' ').forEach(cssClass => {
if (cssClass.trim() !== '') this.el.classList.add(cssClass);
});
}
return (

30
packages/core/src/global/test/dom-controller.spec.ts
View File

@ -1,4 +1,4 @@
import { DomController, createDomControllerClient } from '../dom-controller';
// import { DomController, createDomControllerClient } from '../dom-controller';
describe('DomController', () => {
it('should schedule reads then writes', () => {
@ -25,18 +25,18 @@ describe('DomController', () => {
// expect(stack).toEqual(['r1', 'r2', 'r3', 'w1', 'w2', 'w3']);
});
let win: any;
let dom: DomController;
beforeEach(() => {
win = {
requestAnimationFrame: (cb: any) => {
this.cb = cb;
},
doRAF: (time: number) => {
this.cb(time);
}
} as any as Window;
const now = () => 1;
dom = createDomControllerClient(win, now, false);
});
// let win: any;
// let dom: DomController;
// beforeEach(() => {
// win = {
// requestAnimationFrame: (cb: any) => {
// this.cb = cb;
// },
// doRAF: (time: number) => {
// this.cb(time);
// }
// } as any as Window;
// const now = () => 1;
// dom = createDomControllerClient(win, now, false);
// });
});

32
packages/core/src/utils/helpers.ts
View File

@ -53,8 +53,6 @@ export function toDashCase(str: string) {
return str.replace(/([A-Z])/g, (g) => '-' + g[0].toLowerCase());
}
export function noop() {}
export function pointerCoordX(ev: any): number {
// get X coordinates for either a mouse click
// or a touch depending on the given event
@ -107,33 +105,33 @@ export function pointerCoordY(ev: any): number {
export type ElementRef = 'child' | 'parent' | 'body' | 'document' | 'window';
export function getElementReference(elm: any, ref: ElementRef) {
export function getElementReference(el: any, ref: ElementRef) {
if (ref === 'child') {
return elm.firstElementChild;
return el.firstElementChild;
}
if (ref === 'parent') {
return getParentElement(elm) || elm;
return getParentElement(el) || el;
}
if (ref === 'body') {
return elm.ownerDocument.body;
return el.ownerDocument.body;
}
if (ref === 'document') {
return elm.ownerDocument;
return el.ownerDocument;
}
if (ref === 'window') {
return elm.ownerDocument.defaultView;
return el.ownerDocument.defaultView;
}
return elm;
return el;
}
export function getParentElement(elm: any) {
if (elm.parentElement ) {
export function getParentElement(el: any) {
if (el.parentElement ) {
// normal element with a parent element
return elm.parentElement;
return el.parentElement;
}
if (elm.parentNode && elm.parentNode.host) {
if (el.parentNode && el.parentNode.host) {
// shadow dom's document fragment
return elm.parentNode.host;
return el.parentNode.host;
}
return null;
}
@ -150,12 +148,12 @@ export function getPageElement(el: HTMLElement) {
return getParentElement(el);
}
export function applyStyles(elm: HTMLElement, styles: {[styleProp: string]: string|number}) {
export function applyStyles(el: HTMLElement, styles: {[styleProp: string]: string|number}) {
const styleProps = Object.keys(styles);
if (elm) {
if (el) {
for (let i = 0; i < styleProps.length; i++) {
(elm.style as any)[styleProps[i]] = styles[styleProps[i]];
(el.style as any)[styleProps[i]] = styles[styleProps[i]];
}
}
}