diff --git a/packages/core/scripts/theme-builder/src/components/app-preview/app-preview.tsx b/packages/core/scripts/theme-builder/src/components/app-preview/app-preview.tsx index 4e863fa564..8cd3092027 100644 --- a/packages/core/scripts/theme-builder/src/components/app-preview/app-preview.tsx +++ b/packages/core/scripts/theme-builder/src/components/app-preview/app-preview.tsx @@ -45,7 +45,7 @@ export class AppPreview { return [
- +
]; } diff --git a/packages/core/src/components/action-sheet/animations/ios.enter.ts b/packages/core/src/components/action-sheet/animations/ios.enter.ts index 85477c911a..3c41698b35 100644 --- a/packages/core/src/components/action-sheet/animations/ios.enter.ts +++ b/packages/core/src/components/action-sheet/animations/ios.enter.ts @@ -3,21 +3,21 @@ import { Animation } from '../../../index'; /** * iOS Action Sheet Enter Animation */ -export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise { +export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise { 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) diff --git a/packages/core/src/components/action-sheet/animations/ios.leave.ts b/packages/core/src/components/action-sheet/animations/ios.leave.ts index 4de937c74f..6c9ed010d6 100644 --- a/packages/core/src/components/action-sheet/animations/ios.leave.ts +++ b/packages/core/src/components/action-sheet/animations/ios.leave.ts @@ -3,21 +3,21 @@ import { Animation } from '../../../index'; /** * iOS Action Sheet Leave Animation */ -export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise { +export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise { 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) diff --git a/packages/core/src/components/action-sheet/animations/md.enter.ts b/packages/core/src/components/action-sheet/animations/md.enter.ts index b5a544564f..8fa81f3113 100644 --- a/packages/core/src/components/action-sheet/animations/md.enter.ts +++ b/packages/core/src/components/action-sheet/animations/md.enter.ts @@ -4,20 +4,20 @@ import { Animation } from '../../../index'; /** * MD Action Sheet Enter Animation */ -export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise { +export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise { 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) diff --git a/packages/core/src/components/action-sheet/animations/md.leave.ts b/packages/core/src/components/action-sheet/animations/md.leave.ts index 8f65aee52c..ec6da1178b 100644 --- a/packages/core/src/components/action-sheet/animations/md.leave.ts +++ b/packages/core/src/components/action-sheet/animations/md.leave.ts @@ -3,20 +3,20 @@ import { Animation } from '../../../index'; /** * MD Action Sheet Leave Animation */ -export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise { +export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise { 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) diff --git a/packages/core/src/components/alert/animations/ios.enter.ts b/packages/core/src/components/alert/animations/ios.enter.ts index 23fbb25a3e..a1dd2266e9 100644 --- a/packages/core/src/components/alert/animations/ios.enter.ts +++ b/packages/core/src/components/alert/animations/ios.enter.ts @@ -3,21 +3,21 @@ import { Animation } from '../../../index'; /** * iOS Alert Enter Animation */ -export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise { +export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise { 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) diff --git a/packages/core/src/components/alert/animations/ios.leave.ts b/packages/core/src/components/alert/animations/ios.leave.ts index f40d41b6a4..c68e2d0340 100644 --- a/packages/core/src/components/alert/animations/ios.leave.ts +++ b/packages/core/src/components/alert/animations/ios.leave.ts @@ -3,21 +3,21 @@ import { Animation } from '../../../index'; /** * iOS Alert Leave Animation */ -export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise { +export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise { 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) diff --git a/packages/core/src/components/alert/animations/md.enter.ts b/packages/core/src/components/alert/animations/md.enter.ts index fbe6cec3f4..c7376069fe 100644 --- a/packages/core/src/components/alert/animations/md.enter.ts +++ b/packages/core/src/components/alert/animations/md.enter.ts @@ -3,21 +3,21 @@ import { Animation } from '../../../index'; /** * Md Alert Enter Animation */ -export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise { +export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise { 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) diff --git a/packages/core/src/components/alert/animations/md.leave.ts b/packages/core/src/components/alert/animations/md.leave.ts index 095d78c880..924fb3f4bb 100644 --- a/packages/core/src/components/alert/animations/md.leave.ts +++ b/packages/core/src/components/alert/animations/md.leave.ts @@ -3,21 +3,21 @@ import { Animation } from '../../../index'; /** * Md Alert Leave Animation */ -export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise { +export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise { 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) diff --git a/packages/core/src/components/animation-controller/animation-controller.tsx b/packages/core/src/components/animation-controller/animation-controller.tsx index e9187d1f91..6891e0c2d9 100644 --- a/packages/core/src/components/animation-controller/animation-controller.tsx +++ b/packages/core/src/components/animation-controller/animation-controller.tsx @@ -9,9 +9,9 @@ import { Animator } from './animator'; export class AnimationControllerImpl implements AnimationController { @Method() - create(animationBuilder?: AnimationBuilder, baseElm?: any, opts?: any): Promise { + create(animationBuilder?: AnimationBuilder, baseEl?: any, opts?: any): Promise { if (animationBuilder) { - return animationBuilder(Animator as any, baseElm, opts); + return animationBuilder(Animator as any, baseEl, opts); } return Promise.resolve(new Animator() as any); } diff --git a/packages/core/src/components/animation-controller/animation-interface.tsx b/packages/core/src/components/animation-controller/animation-interface.tsx index f0181de282..933c80d83c 100644 --- a/packages/core/src/components/animation-controller/animation-interface.tsx +++ b/packages/core/src/components/animation-controller/animation-interface.tsx @@ -1,12 +1,12 @@ export interface AnimationController { - create(animationBuilder?: AnimationBuilder, baseElm?: any, opts?: any): Promise; + create(animationBuilder?: AnimationBuilder, baseEl?: any, opts?: any): Promise; } 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, baseEl?: HTMLElement, opts?: any): Promise; } diff --git a/packages/core/src/components/animation-controller/animator.tsx b/packages/core/src/components/animation-controller/animator.tsx index cd3e532ae6..3ec42daad0 100644 --- a/packages/core/src/components/animation-controller/animator.tsx +++ b/packages/core/src/components/animation-controller/animator.tsx @@ -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]; } } } diff --git a/packages/core/src/components/animation-controller/transition-end.ts b/packages/core/src/components/animation-controller/transition-end.ts index 49df59db4d..fbeea6b546 100644 --- a/packages/core/src/components/animation-controller/transition-end.ts +++ b/packages/core/src/components/animation-controller/transition-end.ts @@ -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); }; } diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx index 67bee80ea8..4f31616c84 100644 --- a/packages/core/src/components/button/button.tsx +++ b/packages/core/src/components/button/button.tsx @@ -75,7 +75,7 @@ export class Button { */ @Prop() mode: 'ios' | 'md'; - /** + /** * Emitted when the button has focus. */ @Event() ionFocus: EventEmitter; diff --git a/packages/core/src/components/datetime/datetime-util.ts b/packages/core/src/components/datetime/datetime-util.ts index b77bd71b65..c01bc82c1b 100644 --- a/packages/core/src/components/datetime/datetime-util.ts +++ b/packages/core/src/components/datetime/datetime-util.ts @@ -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 diff --git a/packages/core/src/components/datetime/datetime.tsx b/packages/core/src/components/datetime/datetime.tsx index 50f5310d35..30b152ab53 100644 --- a/packages/core/src/components/datetime/datetime.tsx +++ b/packages/core/src/components/datetime/datetime.tsx @@ -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, diff --git a/packages/core/src/components/fab-button/fab-button.tsx b/packages/core/src/components/fab-button/fab-button.tsx index 2a47a25656..fbf6082d9b 100755 --- a/packages/core/src/components/fab-button/fab-button.tsx +++ b/packages/core/src/components/fab-button/fab-button.tsx @@ -39,7 +39,7 @@ export class FabButton { @Prop() translucent = false; @Prop() activated = false; - @Prop() toggleActive: Function = () => {}; + @Prop() toggleActive: Function; @Prop() show = false; diff --git a/packages/core/src/components/gesture/gesture.tsx b/packages/core/src/components/gesture/gesture.tsx index 564a42e6ef..9b1b743b3d 100644 --- a/packages/core/src/components/gesture/gesture.tsx +++ b/packages/core/src/components/gesture/gesture.tsx @@ -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 diff --git a/packages/core/src/components/infinite-scroll/infinite-scroll.tsx b/packages/core/src/components/infinite-scroll/infinite-scroll.tsx index b0524f0655..089f1125e8 100644 --- a/packages/core/src/components/infinite-scroll/infinite-scroll.tsx +++ b/packages/core/src/components/infinite-scroll/infinite-scroll.tsx @@ -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) { const enable = this.complete.bind(this); action.then(enable, enable); diff --git a/packages/core/src/components/input/input.tsx b/packages/core/src/components/input/input.tsx index 668424c6b4..35770080c5 100644 --- a/packages/core/src/components/input/input.tsx +++ b/packages/core/src/components/input/input.tsx @@ -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; diff --git a/packages/core/src/components/loading/animations/ios.enter.ts b/packages/core/src/components/loading/animations/ios.enter.ts index 9f1d2d1f1c..d2dd02a7c5 100644 --- a/packages/core/src/components/loading/animations/ios.enter.ts +++ b/packages/core/src/components/loading/animations/ios.enter.ts @@ -4,14 +4,14 @@ import { Animation } from '../../../index'; /** * iOS Loading Enter Animation */ -export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise { +export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise { 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) diff --git a/packages/core/src/components/loading/animations/ios.leave.ts b/packages/core/src/components/loading/animations/ios.leave.ts index 60997524f7..8f1298201f 100644 --- a/packages/core/src/components/loading/animations/ios.leave.ts +++ b/packages/core/src/components/loading/animations/ios.leave.ts @@ -4,14 +4,14 @@ import { Animation } from '../../../index'; /** * iOS Loading Leave Animation */ -export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise { +export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise { 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) diff --git a/packages/core/src/components/loading/animations/md.enter.ts b/packages/core/src/components/loading/animations/md.enter.ts index 283b727c1b..e7bc14334a 100644 --- a/packages/core/src/components/loading/animations/md.enter.ts +++ b/packages/core/src/components/loading/animations/md.enter.ts @@ -3,21 +3,21 @@ import { Animation } from '../../../index'; /** * Md Loading Enter Animation */ -export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise { +export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise { 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) diff --git a/packages/core/src/components/loading/animations/md.leave.ts b/packages/core/src/components/loading/animations/md.leave.ts index 0d2079dab1..f911fccc38 100644 --- a/packages/core/src/components/loading/animations/md.leave.ts +++ b/packages/core/src/components/loading/animations/md.leave.ts @@ -3,21 +3,21 @@ import { Animation } from '../../../index'; /** * Md Loading Leave Animation */ -export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise { +export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise { 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) diff --git a/packages/core/src/components/modal/animations/ios.enter.ts b/packages/core/src/components/modal/animations/ios.enter.ts index 6b2b57c1ac..97699d932d 100644 --- a/packages/core/src/components/modal/animations/ios.enter.ts +++ b/packages/core/src/components/modal/animations/ios.enter.ts @@ -4,14 +4,14 @@ import { Animation } from '../../../index'; /** * iOS Modal Enter Animation */ -export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise { +export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise { 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) { // } diff --git a/packages/core/src/components/modal/animations/ios.leave.ts b/packages/core/src/components/modal/animations/ios.leave.ts index 52359f32de..3446d18dc9 100644 --- a/packages/core/src/components/modal/animations/ios.leave.ts +++ b/packages/core/src/components/modal/animations/ios.leave.ts @@ -4,24 +4,24 @@ import { Animation } from '../../../index'; /** * iOS Modal Leave Animation */ -export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise { +export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise { 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) diff --git a/packages/core/src/components/modal/animations/md.enter.ts b/packages/core/src/components/modal/animations/md.enter.ts index d00f2b119f..e586c0f3ff 100644 --- a/packages/core/src/components/modal/animations/md.enter.ts +++ b/packages/core/src/components/modal/animations/md.enter.ts @@ -3,14 +3,14 @@ import { Animation } from '../../../index'; /** * Md Modal Enter Animation */ -export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise { +export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise { 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') diff --git a/packages/core/src/components/modal/animations/md.leave.ts b/packages/core/src/components/modal/animations/md.leave.ts index ab4421acb1..78ba15bb60 100644 --- a/packages/core/src/components/modal/animations/md.leave.ts +++ b/packages/core/src/components/modal/animations/md.leave.ts @@ -3,15 +3,15 @@ import { Animation } from '../../../index'; /** * Md Modal Leave Animation */ -export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise { +export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise { 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) diff --git a/packages/core/src/components/nav/nav.tsx b/packages/core/src/components/nav/nav.tsx index bc9c8a32a1..604fd24f77 100644 --- a/packages/core/src/components/nav/nav.tsx +++ b/packages/core/src/components/nav/nav.tsx @@ -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); } }); } diff --git a/packages/core/src/components/picker-column/picker-column.tsx b/packages/core/src/components/picker-column/picker-column.tsx index c4304e53dd..f51acc54cf 100644 --- a/packages/core/src/components/picker-column/picker-column.tsx +++ b/packages/core/src/components/picker-column/picker-column.tsx @@ -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'; diff --git a/packages/core/src/components/picker/animations/ios.enter.ts b/packages/core/src/components/picker/animations/ios.enter.ts index 227b0231c0..afe4a2059d 100644 --- a/packages/core/src/components/picker/animations/ios.enter.ts +++ b/packages/core/src/components/picker/animations/ios.enter.ts @@ -4,21 +4,21 @@ import { Animation } from '../../../index'; /** * iOS Picker Enter Animation */ -export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement): Promise { +export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement): Promise { 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) diff --git a/packages/core/src/components/picker/animations/ios.leave.ts b/packages/core/src/components/picker/animations/ios.leave.ts index 7b7dbad527..88adc103ba 100644 --- a/packages/core/src/components/picker/animations/ios.leave.ts +++ b/packages/core/src/components/picker/animations/ios.leave.ts @@ -4,21 +4,21 @@ import { Animation } from '../../../index'; /** * iOS Picker Leave Animation */ -export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise { +export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise { 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) diff --git a/packages/core/src/components/popover/animations/ios.enter.ts b/packages/core/src/components/popover/animations/ios.enter.ts index 7f6990bf1a..53af5547bf 100644 --- a/packages/core/src/components/popover/animations/ios.enter.ts +++ b/packages/core/src/components/popover/animations/ios.enter.ts @@ -3,11 +3,11 @@ import { Animation } from '../../../index'; /** * iOS Popover Enter Animation */ -export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement, ev?: Event): Promise { +export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement, ev?: Event): Promise { 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) diff --git a/packages/core/src/components/popover/animations/ios.leave.ts b/packages/core/src/components/popover/animations/ios.leave.ts index c8961a2ca0..a150a0b9bf 100644 --- a/packages/core/src/components/popover/animations/ios.leave.ts +++ b/packages/core/src/components/popover/animations/ios.leave.ts @@ -3,20 +3,20 @@ import { Animation } from '../../../index'; /** * iOS Popover Leave Animation */ -export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise { +export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise { 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) diff --git a/packages/core/src/components/popover/animations/md.enter.ts b/packages/core/src/components/popover/animations/md.enter.ts index 0ef4b3ef4a..e16e3eb938 100644 --- a/packages/core/src/components/popover/animations/md.enter.ts +++ b/packages/core/src/components/popover/animations/md.enter.ts @@ -3,11 +3,11 @@ import { Animation } from '../../../index'; /** * Md Popover Enter Animation */ -export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement, ev?: Event): Promise { +export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement, ev?: Event): Promise { 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) diff --git a/packages/core/src/components/popover/animations/md.leave.ts b/packages/core/src/components/popover/animations/md.leave.ts index 491d184767..36dd03eed8 100644 --- a/packages/core/src/components/popover/animations/md.leave.ts +++ b/packages/core/src/components/popover/animations/md.leave.ts @@ -3,20 +3,20 @@ import { Animation } from '../../../index'; /** * Md Popover Leave Animation */ -export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement): Promise { +export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement): Promise { 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) diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx index da91e57b00..35f69cf0f1 100644 --- a/packages/core/src/components/popover/popover.tsx +++ b/packages/core/src/components/popover/popover.tsx @@ -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) => { diff --git a/packages/core/src/components/range/range.tsx b/packages/core/src/components/range/range.tsx index 5c47d9dbd2..c0569f6da6 100644 --- a/packages/core/src/components/range/range.tsx +++ b/packages/core/src/components/range/range.tsx @@ -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; diff --git a/packages/core/src/components/route/test/router-utils.spec.ts b/packages/core/src/components/route/test/router-utils.spec.ts index 762c961105..dbf7ab7c2e 100644 --- a/packages/core/src/components/route/test/router-utils.spec.ts +++ b/packages/core/src/components/route/test/router-utils.spec.ts @@ -234,8 +234,8 @@ describe('breadthFirstSearch', () => { }); }); -describe('readNavState', () => { - it('should read state', () => { +// describe('readNavState', () => { +// it('should read state', () => { - }); -}); +// }); +// }); diff --git a/packages/core/src/components/searchbar/searchbar.tsx b/packages/core/src/components/searchbar/searchbar.tsx index ba1b242630..9535575abd 100644 --- a/packages/core/src/components/searchbar/searchbar.tsx +++ b/packages/core/src/components/searchbar/searchbar.tsx @@ -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; } } } diff --git a/packages/core/src/components/spinner/spinner.tsx b/packages/core/src/components/spinner/spinner.tsx index 2e65fc372e..b45bd919af 100644 --- a/packages/core/src/components/spinner/spinner.tsx +++ b/packages/core/src/components/spinner/spinner.tsx @@ -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)); } } diff --git a/packages/core/src/components/textarea/textarea.tsx b/packages/core/src/components/textarea/textarea.tsx index cde3952e1f..1278e03f29 100644 --- a/packages/core/src/components/textarea/textarea.tsx +++ b/packages/core/src/components/textarea/textarea.tsx @@ -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; diff --git a/packages/core/src/components/toast/animations/ios.enter.ts b/packages/core/src/components/toast/animations/ios.enter.ts index 3b67376bc3..1d5b6f7de9 100644 --- a/packages/core/src/components/toast/animations/ios.enter.ts +++ b/packages/core/src/components/toast/animations/ios.enter.ts @@ -3,11 +3,11 @@ import { Animation } from '../../../index'; /** * iOS Toast Enter Animation */ -export default function iosEnterAnimation(Animation: Animation, baseElm: HTMLElement, position: string): Promise { +export default function iosEnterAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise { 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)); diff --git a/packages/core/src/components/toast/animations/ios.leave.ts b/packages/core/src/components/toast/animations/ios.leave.ts index 0bcba2ef18..9b7a89e344 100644 --- a/packages/core/src/components/toast/animations/ios.leave.ts +++ b/packages/core/src/components/toast/animations/ios.leave.ts @@ -3,11 +3,11 @@ import { Animation } from '../../../index'; /** * iOS Toast Leave Animation */ -export default function iosLeaveAnimation(Animation: Animation, baseElm: HTMLElement, position: string): Promise { +export default function iosLeaveAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise { 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)); diff --git a/packages/core/src/components/toast/animations/md.enter.ts b/packages/core/src/components/toast/animations/md.enter.ts index 62d4b5011a..8919adfed7 100644 --- a/packages/core/src/components/toast/animations/md.enter.ts +++ b/packages/core/src/components/toast/animations/md.enter.ts @@ -3,11 +3,11 @@ import { Animation } from '../../../index'; /** * MD Toast Enter Animation */ -export default function mdEnterAnimation(Animation: Animation, baseElm: HTMLElement, position: string): Promise { +export default function mdEnterAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise { 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)); diff --git a/packages/core/src/components/toast/animations/md.leave.ts b/packages/core/src/components/toast/animations/md.leave.ts index 4330c4d934..7866708f88 100644 --- a/packages/core/src/components/toast/animations/md.leave.ts +++ b/packages/core/src/components/toast/animations/md.leave.ts @@ -3,11 +3,11 @@ import { Animation } from '../../../index'; /** * md Toast Leave Animation */ -export default function mdLeaveAnimation(Animation: Animation, baseElm: HTMLElement, position: string): Promise { +export default function mdLeaveAnimation(Animation: Animation, baseEl: HTMLElement, position: string): Promise { 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)); diff --git a/packages/core/src/components/toast/toast.tsx b/packages/core/src/components/toast/toast.tsx index b9df7b0d00..d8814f5bcf 100644 --- a/packages/core/src/components/toast/toast.tsx +++ b/packages/core/src/components/toast/toast.tsx @@ -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 ( diff --git a/packages/core/src/global/test/dom-controller.spec.ts b/packages/core/src/global/test/dom-controller.spec.ts index 6a06b589ce..a456cda2e3 100644 --- a/packages/core/src/global/test/dom-controller.spec.ts +++ b/packages/core/src/global/test/dom-controller.spec.ts @@ -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); + // }); }); diff --git a/packages/core/src/utils/helpers.ts b/packages/core/src/utils/helpers.ts index cc2e285549..37feee5d0d 100644 --- a/packages/core/src/utils/helpers.ts +++ b/packages/core/src/utils/helpers.ts @@ -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]]; } } } diff --git a/packages/core/tslint.json b/packages/core/tslint.json index aa8b53d98c..b10afaf672 100644 --- a/packages/core/tslint.json +++ b/packages/core/tslint.json @@ -1,3 +1,8 @@ { - "extends": "tslint-ionic-rules" + "extends": "tslint-ionic-rules", + "rules": { + "no-conditional-assignment": false, + "no-unnecessary-type-assertion": false, + "prefer-for-of": false + } }