perf(scroll): watchdog + simplification

packages/core/src/components.d.ts

@@ -42,20 +42,16 @@ import {
   GestureCallback,
   GestureDetail,
 } from './components/gesture/gesture';
-import {
-  App,
-  FrameworkDelegate as FrameworkDelegate2,
-} from '.';
 import {
   PickerButton,
   PickerColumn as PickerColumn2,
 } from './components/picker/picker';
-import {
-  ScrollCallback,
-} from './components/scroll/scroll';
 import {
   SelectPopoverOption,
 } from './components/select-popover/select-popover';
+import {
+  FrameworkDelegate as FrameworkDelegate2,
+} from '.';
 import {
   DomRenderFn,
   HeaderFn,
@@ -770,6 +766,7 @@ declare global {
     export interface IonContentAttributes extends HTMLAttributes {
       forceOverscroll?: boolean;
       fullscreen?: boolean;
+      scrollEvents?: boolean;
     }
   }
 }
@@ -1240,7 +1237,7 @@ declare global {
   }
   namespace JSXElements {
     export interface IonInputShimsAttributes extends HTMLAttributes {
-      app?: App;
+
     }
   }
 }
@@ -2706,9 +2703,7 @@ declare global {
     export interface IonScrollAttributes extends HTMLAttributes {
       forceOverscroll?: boolean;
       mode?: string;
-      onionScroll?: ScrollCallback;
-      onionScrollEnd?: ScrollCallback;
-      onionScrollStart?: ScrollCallback;
+      scrollEvents?: boolean;
     }
   }
 }

packages/core/src/components/app/app.tsx

@@ -4,7 +4,6 @@ import { Config, NavEvent, OverlayController, PublicNav, PublicViewController }
 import { getOrAppendElement } from '../../utils/helpers';
 
 const rootNavs = new Map<number, HTMLIonNavElement>();
-const ACTIVE_SCROLLING_TIME = 100;
 let backButtonActions: BackButtonAction[] = [];
 
 @Component({
@@ -21,11 +20,9 @@ export class App {
 
   private isDevice = false;
   private deviceHacks = false;
-  private scrollTime = 0;
 
   externalNavPromise: void | Promise<any> = null;
   externalNavOccuring = false;
-  didScroll = false;
 
   @Element() element: HTMLElement;
   @Event() exitApp: EventEmitter<ExitAppEventDetail>;
@@ -102,29 +99,6 @@ export class App {
     return true;
   }
 
-  /**
-   * Boolean if the app is actively scrolling or not.
-   * @return {boolean} returns true or false
-   */
-  @Method()
-  isScrolling(): boolean {
-    const scrollTime = this.scrollTime;
-    if (scrollTime === 0) {
-      return false;
-    }
-    if (scrollTime < Date.now()) {
-      this.scrollTime = 0;
-      return false;
-    }
-    return true;
-  }
-
-  @Method()
-  setScrolling() {
-    this.scrollTime = Date.now() + ACTIVE_SCROLLING_TIME;
-    this.didScroll = true;
-  }
-
   @Method()
   getTopNavs(rootNavId = -1): PublicNav[] {
     return getTopNavsImpl(rootNavId);
@@ -142,7 +116,6 @@ export class App {
     return null;
   }
 
-
   /**
    * The back button event is triggered when the user presses the native
    * platform's back button, also referred to as the "hardware" back button.
@@ -244,7 +217,7 @@ export class App {
   render() {
     return [
       <ion-platform />,
-      this.deviceHacks && <ion-input-shims app={this} />,
+      this.deviceHacks && <ion-input-shims />,
       this.isDevice && <ion-tap-click />,
       this.isDevice && <ion-status-tap />,
       <slot></slot>

packages/core/src/components/app/readme.md

@@ -42,11 +42,6 @@ Returns an array of top level Navs
 Returns whether the application is enabled or not
 
 
-#### isScrolling()
-
-Boolean if the app is actively scrolling or not.
-
-
 #### registerBackButtonAction()
 
 The back button event is triggered when the user presses the native
@@ -69,9 +64,6 @@ This API is not meant for public usage and could
 change at any time
 
 
-#### setScrolling()
-
-
 #### updateExternalNavOccuring()
 
 Updates whether an external navigation event is occuring

packages/core/src/components/content/content.tsx

@@ -35,6 +35,9 @@ export class Content {
    */
   @Prop() forceOverscroll: boolean;
 
+
+  @Prop() scrollEvents = false;
+
   @Listen('body:ionNavChanged')
   onNavChanged() {
     this.resize();
@@ -128,7 +131,10 @@ export class Content {
     this.resize();
 
     return [
-      <ion-scroll mode={this.mode} forceOverscroll={this.forceOverscroll}>
+      <ion-scroll
+        mode={this.mode}
+        scrollEvents={this.scrollEvents}
+        forceOverscroll={this.forceOverscroll}>
         <slot></slot>
       </ion-scroll>,
       <slot name='fixed'></slot>

packages/core/src/components/content/readme.md

@@ -34,6 +34,11 @@ and footers. This effect can easily be seen by setting the toolbar
 to transparent.
 
 
+#### scrollEvents
+
+boolean
+
+
 ## Attributes
 
 #### force-overscroll
@@ -54,6 +59,11 @@ and footers. This effect can easily be seen by setting the toolbar
 to transparent.
 
 
+#### scroll-events
+
+boolean
+
+
 ## Methods
 
 #### scrollByPoint()

packages/core/src/components/content/test/basic/index.html

@@ -69,6 +69,13 @@
       </ion-footer>
 
     <script>
+      const content = document.getElementById('content');
+      content.scrollEvents = true;
+      content.addEventListener('ionScrollStart', () => console.log('scroll start'));
+      content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
+      content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
+
+
       function toggleFullscreen() {
         const content = document.getElementById('content');
         content.fullscreen = !content.fullscreen;

packages/core/src/components/infinite-scroll/infinite-scroll.tsx

@@ -1,5 +1,5 @@
 import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, State, Watch } from '@stencil/core';
-import { DomController, ScrollDetail } from '../../index';
+import { DomController } from '../../index';
 
 const enum Position {
   Top = 'top',
@@ -106,10 +106,9 @@ export class InfiniteScroll {
     this.scrollEl = null;
   }
 
-  @Listen('ionScroll', {enabled: false})
-  protected onScroll(ev: CustomEvent) {
+  @Listen('scroll', {enabled: false})
+  protected onScroll() {
     const scrollEl = this.scrollEl;
-    const detail = ev.detail as ScrollDetail;
     if (!scrollEl || !this.canStart()) {
       return 1;
     }
@@ -119,7 +118,7 @@ export class InfiniteScroll {
       // if there is no height of this element then do nothing
       return 2;
     }
-    const scrollTop = detail.scrollTop;
+    const scrollTop = scrollEl.scrollTop;
     const scrollHeight = scrollEl.scrollHeight;
     const height = scrollEl.offsetHeight;
     const threshold = this.thrPc ? (height * this.thrPc) : this.thrPx;
@@ -128,7 +127,7 @@ export class InfiniteScroll {
       ? scrollHeight - infiniteHeight - scrollTop - threshold - height
       : scrollTop - infiniteHeight - threshold;
 
-      if (distanceFromInfinite < 0) {
+    if (distanceFromInfinite < 0) {
       if (!this.didFire) {
         this.isLoading = true;
         this.didFire = true;
@@ -221,7 +220,7 @@ export class InfiniteScroll {
 
   private enableScrollEvents(shouldListen: boolean) {
     if (this.scrollEl) {
-      this.enableListener(this, 'ionScroll', shouldListen, this.scrollEl);
+      this.enableListener(this, 'scroll', shouldListen, this.scrollEl);
     }
   }
 

packages/core/src/components/input-shims/hacks/input-blurring.ts

@@ -1,20 +1,24 @@
-import { App } from '../../..';
 
 const SKIP_BLURRING = ['INPUT', 'TEXTAREA', 'ION-INPUT', 'ION-TEXTAREA'];
 
-export default function enableInputBlurring(app: App) {
+export default function enableInputBlurring() {
   console.debug('Input: enableInputBlurring');
 
   let focused = true;
+  let didScroll = false;
+
+  function onScroll() {
+    didScroll = true;
+  }
 
   function onFocusin() {
     focused = true;
   }
 
   function onTouchend(ev: any) {
     // if app did scroll return early
-    if (app.didScroll) {
-      app.didScroll = false;
+    if (didScroll) {
+      didScroll = false;
       return;
     }
     const active = document.activeElement as HTMLElement;
@@ -49,10 +53,12 @@ export default function enableInputBlurring(app: App) {
     }, 50);
   }
 
+  document.addEventListener('ionScrollStart', onScroll);
   document.addEventListener('focusin', onFocusin, true);
   document.addEventListener('touchend', onTouchend, false);
 
   return () => {
+    document.removeEventListener('ionScrollStart', onScroll, true);
     document.removeEventListener('focusin', onFocusin, true);
     document.removeEventListener('touchend', onTouchend, false);
   };

packages/core/src/components/input-shims/input-shims.tsx

@@ -1,5 +1,5 @@
 import { Component, Listen, Prop } from '@stencil/core';
-import { App, Config } from '../..';
+import { Config } from '../..';
 
 import enableHideCaretOnScroll from './hacks/hide-caret';
 import enableInputBlurring from './hacks/input-blurring';
@@ -24,7 +24,6 @@ export class InputShims {
   private scrollAssistMap = new WeakMap<HTMLElement, Function>();
 
   @Prop({context: 'config'}) config: Config;
-  @Prop() app: App;
 
   componentDidLoad() {
     this.keyboardHeight = this.config.getNumber('keyboardHeight', 290);
@@ -33,7 +32,7 @@ export class InputShims {
 
     const inputBlurring = this.config.getBoolean('inputBlurring', true);
     if (inputBlurring && INPUT_BLURRING) {
-      enableInputBlurring(this.app);
+      enableInputBlurring();
     }
 
     const scrollPadding = this.config.getBoolean('scrollPadding', true);

packages/core/src/components/input-shims/readme.md

@@ -5,20 +5,6 @@
 <!-- Auto Generated Below -->
 
 
-## Properties
-
-#### app
-
-
-
-
-## Attributes
-
-#### app
-
-
-
-
 
 ----------------------------------------------
 

packages/core/src/components/scroll/readme.md

@@ -21,19 +21,9 @@ Note, the does not disable the system bounce on iOS. That is an OS level setting
 string
 
 
-#### onionScroll
-
-
-
-
-#### onionScrollEnd
-
-
-
-
-#### onionScrollStart
-
+#### scrollEvents
 
+boolean
 
 
 ## Attributes
@@ -52,26 +42,17 @@ Note, the does not disable the system bounce on iOS. That is an OS level setting
 string
 
 
-#### onion-scroll
-
-
-
-
-#### onion-scroll-end
-
-
-
-
-#### onion-scroll-start
-
+#### scroll-events
 
+boolean
 
 
 ## Events
 
 #### ionScroll
 
-Emitted while scrolling.
+Emitted while scrolling. This event is disabled by default.
+Look at the property: `scrollEvents`
 
 
 #### ionScrollEnd

packages/core/src/components/scroll/scroll.scss

@@ -14,9 +14,6 @@ ion-scroll {
 
   contain: size style layout;
 
-  margin: 0 !important; // scss-lint:disable all
-  padding: 0 !important; // scss-lint:disable all
-
   .focus-input {
     @include margin(0);
     @include padding(0);