diff --git a/packages/core/src/components/gesture/gesture.tsx b/packages/core/src/components/gesture/gesture.tsx index 66778dd121..4ae2f723a0 100644 --- a/packages/core/src/components/gesture/gesture.tsx +++ b/packages/core/src/components/gesture/gesture.tsx @@ -272,10 +272,8 @@ export class Gesture { let startPos = positions.length - 1; // move pointer to position measured 100ms ago - for (; - startPos > 0 && positions[startPos] > timeRange; - startPos -= 3) { - // TODO why is this empty? + while (startPos > 0 && positions[startPos] > timeRange) { + startPos -= 3; } if (startPos > 1) { diff --git a/packages/core/src/components/infinite-scroll/infinite-scroll.tsx b/packages/core/src/components/infinite-scroll/infinite-scroll.tsx index 4ab9581edd..05a317e998 100644 --- a/packages/core/src/components/infinite-scroll/infinite-scroll.tsx +++ b/packages/core/src/components/infinite-scroll/infinite-scroll.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State, Watch } from '@stencil/core'; +import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, State, Watch } from '@stencil/core'; import { DomController, ScrollDetail, StencilElement } from '../../index'; const enum Position { @@ -14,7 +14,7 @@ const enum Position { export class InfiniteScroll { private thrPx = 0; - private thrPc = 0.15; + private thrPc = 0; private scrollEl: HTMLIonScrollElement; private didFire = false; private isBusy = false; @@ -24,7 +24,7 @@ export class InfiniteScroll { @State() isLoading = false; @Prop({ context: 'dom' }) dom: DomController; - @Prop({ context: 'enableListener' }) enableListener: any; + @Prop({ context: 'enableListener' }) enableListener: EventListenerEnable; /** * @input {string} The threshold distance from the bottom @@ -142,14 +142,6 @@ export class InfiniteScroll { return 4; } - private canStart(): boolean { - return ( - !this.disabled && - !this.isBusy && - this.scrollEl && - !this.isLoading); - } - /** * Call `complete()` within the `infinite` output event handler when * your async operation has completed. For example, the `loading` @@ -212,11 +204,20 @@ export class InfiniteScroll { * Pass a promise inside `waitFor()` within the `infinite` output event handler in order to * change state of infiniteScroll to "complete" */ + @Method() waitFor(action: Promise) { const enable = this.complete.bind(this); action.then(enable, enable); } + private canStart(): boolean { + return ( + !this.disabled && + !this.isBusy && + this.scrollEl && + !this.isLoading); + } + private enableScrollEvents(shouldListen: boolean) { this.enableListener(this, 'ionScroll', shouldListen, this.scrollEl); } diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx index 812c5a88e4..9f979a57a3 100644 --- a/packages/core/src/components/modal/modal.tsx +++ b/packages/core/src/components/modal/modal.tsx @@ -66,8 +66,20 @@ export class Modal { @Prop({ context: 'config' }) config: Config; @Prop({ context: 'dom' }) dom: DomController; - @Prop() mode: string; + /** + * @input {string} The color to use from your Sass `$colors` map. + * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. + * For more information, see [Theming your App](/docs/theming/theming-your-app). + */ @Prop() color: string; + + /** + * @input {string} The mode determines which platform styles to use. + * Possible values are: `"ios"` or `"md"`. + * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). + */ + @Prop() mode: 'ios' | 'md'; + @Prop() component: any; @Prop() data: any = {}; @Prop() cssClass: string; diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx index 35f69cf0f1..639ac87d5c 100644 --- a/packages/core/src/components/popover/popover.tsx +++ b/packages/core/src/components/popover/popover.tsx @@ -67,8 +67,20 @@ export class Popover { @Prop({ context: 'config' }) config: Config; @Prop({ context: 'dom' }) dom: DomController; - @Prop() mode: string; + /** + * @input {string} The color to use from your Sass `$colors` map. + * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`. + * For more information, see [Theming your App](/docs/theming/theming-your-app). + */ @Prop() color: string; + + /** + * @input {string} The mode determines which platform styles to use. + * Possible values are: `"ios"` or `"md"`. + * For more information, see [Platform Styles](/docs/theming/platform-specific-styles). + */ + @Prop() mode: 'ios' | 'md'; + @Prop() component: string; @Prop() data: any = {}; @Prop() cssClass: string; diff --git a/packages/core/src/components/reorder-group/reorder-group.tsx b/packages/core/src/components/reorder-group/reorder-group.tsx index 5e26800358..56e705c9b9 100644 --- a/packages/core/src/components/reorder-group/reorder-group.tsx +++ b/packages/core/src/components/reorder-group/reorder-group.tsx @@ -49,9 +49,6 @@ export class ReorderGroup { @Prop() disabled = true; - /** - * @input {string} Which side of the view the ion-reorder should be placed. Default `"end"`. - */ @Watch('disabled') protected disabledChanged(disabled: boolean) { if (!disabled) { diff --git a/packages/core/src/components/scroll/scroll.tsx b/packages/core/src/components/scroll/scroll.tsx index 08b12921b0..37492a2996 100644 --- a/packages/core/src/components/scroll/scroll.tsx +++ b/packages/core/src/components/scroll/scroll.tsx @@ -15,9 +15,8 @@ export class Scroll { private tmr: any; private queued = false; private app: HTMLIonAppElement; - - isScrolling = false; - detail: ScrollDetail = {}; + private isScrolling = false; + private detail: ScrollDetail = {}; @Element() private el: HTMLElement; @@ -197,6 +196,7 @@ export class Scroll { // ******** DOM READ **************** detail.scrollLeft = el.scrollLeft; + if (!this.isScrolling) { // currently not scrolling, so this is a scroll start this.isScrolling = true; @@ -214,34 +214,33 @@ export class Scroll { } this.ionScrollStart.emit(detail); } + detail.deltaY = (detail.scrollTop - detail.startY); + detail.deltaX = (detail.scrollLeft - detail.startX); // actively scrolling positions.push(detail.scrollTop, detail.scrollLeft, detail.timeStamp); - if (positions.length > 3) { - // we've gotten at least 2 scroll events so far - detail.deltaY = (detail.scrollTop - detail.startY); - detail.deltaX = (detail.scrollLeft - detail.startX); + // move pointer to position measured 100ms ago + const timeRange = timeStamp - 100; + let startPos = positions.length - 1; - const endPos = (positions.length - 1); - let startPos = endPos; - const timeRange = (detail.timeStamp - 100); + while (startPos > 0 && positions[startPos] > timeRange) { + startPos -= 3; + } - // move pointer to position measured 100ms ago - for (let i = endPos; i > 0 && positions[i] > timeRange; i -= 3) { - startPos = i; - } + if (startPos > 3) { + // compute relative movement between these two points + const frequency = 1 / (positions[startPos] - timeStamp); + const movedY = positions[startPos - 1] - detail.scrollLeft; + const movedX = positions[startPos - 2] - detail.scrollTop; - if (startPos !== endPos) { - // compute relative movement between these two points - const deltaY = (positions[startPos - 2] - positions[endPos - 2]); - const deltaX = (positions[startPos - 1] - positions[endPos - 1]); - const factor = 1 / (positions[startPos] - positions[endPos]); - - // based on XXms compute the movement to apply for each render step - detail.velocityY = deltaY * factor; - detail.velocityX = deltaX * factor; - } + // based on XXms compute the movement to apply for each render step + // velocity = space/time = s*(1/t) = s*frequency + detail.velocityX = movedX * frequency; + detail.velocityY = movedY * frequency; + } else { + detail.velocityX = 0; + detail.velocityY = 0; } clearTimeout(this.tmr);