fix(gestures): adds hybrid disable scroll assistance

fixes ionic-team#9130 fixes ionic-team#9052 fixes ionic-team#7444
manucorporat · Nov 15, 2016 · bfd244f · bfd244f
1 parent 2348d22
commit bfd244f
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 14 deletions.
diff --git a/src/components/app/app-root.ts b/src/components/app/app-root.ts
@@ -5,6 +5,7 @@ import { Config } from '../../config/config';
 import { Ion } from '../ion';
 import { OverlayPortal } from '../nav/overlay-portal';
 import { Platform } from '../../platform/platform';
+import { rafFrames } from '../../util/dom';
 
 export const AppRootToken = new OpaqueToken('USERROOT');
 
@@ -23,6 +24,7 @@ export const AppRootToken = new OpaqueToken('USERROOT');
 })
 export class IonicApp extends Ion implements OnInit {
 
+  private _stopScrollPlugin: any;
   @ViewChild('viewport', {read: ViewContainerRef}) _viewport: ViewContainerRef;
 
   @ViewChild('modalPortal', { read: OverlayPortal }) _modalPortal: OverlayPortal;
@@ -45,6 +47,7 @@ export class IonicApp extends Ion implements OnInit {
     super(config, elementRef, renderer);
     // register with App that this is Ionic's appRoot component. tada!
     app._appRoot = this;
+    this._stopScrollPlugin = window['IonicStopScroll'];
   }
 
   ngOnInit() {
@@ -109,7 +112,25 @@ export class IonicApp extends Ion implements OnInit {
    * @private
    */
   _disableScroll(shouldDisableScroll: boolean) {
-    this.setElementClass('disable-scroll', shouldDisableScroll);
+    console.log('App Root: Scroll Disable Assist', shouldDisableScroll);
+
+    if (shouldDisableScroll) {
+      this.stopScroll().then(() => {
+        rafFrames(2, () => this.setElementClass('disable-scroll', true));
+      });
+    } else {
+      rafFrames(2, () => this.setElementClass('disable-scroll', false));
+    }
+  }
+
+  stopScroll(): Promise<boolean> {
+    if (this._stopScrollPlugin) {
+      return new Promise((resolve, reject) => {
+        this._stopScrollPlugin.stop(() => resolve(true));
+      });
+    } else {
+      return Promise.resolve(false);
+    }
   }
 
 }

diff --git a/src/components/app/app.ts b/src/components/app/app.ts
@@ -22,7 +22,7 @@ export class App {
   private _title: string = '';
   private _titleSrv: Title = new Title();
   private _rootNav: NavController = null;
-  private _canDisableScroll: boolean;
+  private _disableScrollAssist: boolean;
 
   /**
    * @private
@@ -71,7 +71,7 @@ export class App {
     // listen for hardware back button events
     // register this back button action with a default priority
     _platform.registerBackButtonAction(this.navPop.bind(this));
-    this._canDisableScroll = _config.get('canDisableScroll', false);
+    this._disableScrollAssist = _config.getBoolean('disableScrollAssist', false);
   }
 
   /**
@@ -124,7 +124,7 @@ export class App {
    * scrolling is enabled. When set to `true`, scrolling is disabled.
    */
   setScrollDisabled(disableScroll: boolean) {
-    if (this._canDisableScroll) {
+    if (this._disableScrollAssist) {
       this._appRoot._disableScroll(disableScroll);
     }
   }

diff --git a/src/components/content/content.scss b/src/components/content/content.scss
@@ -51,7 +51,7 @@ ion-content.js-scroll > .scroll-content {
   will-change: initial;
 }
 
-.disable-scroll .ion-page .scroll-content {
+.disable-scroll .ion-page {
   pointer-events: none;
 }
 

diff --git a/src/components/item/item-sliding-gesture.ts b/src/components/item/item-sliding-gesture.ts
@@ -1,7 +1,7 @@
 import { ItemSliding } from './item-sliding';
 import { List } from '../list/list';
 
-import { GesturePriority } from '../../gestures/gesture-controller';
+import { GesturePriority, DisableScroll } from '../../gestures/gesture-controller';
 import { PanGesture } from '../../gestures/drag-gesture';
 import { pointerCoord } from '../../util/dom';
 import { NativeRafDebouncer } from '../../util/debouncer';
@@ -25,6 +25,7 @@ export class ItemSlidingGesture extends PanGesture {
       debouncer: new NativeRafDebouncer(),
       gesture: list._gestureCtrl.create('item-sliding', {
         priority: GesturePriority.SlidingItem,
+        disableScroll: DisableScroll.DuringCapture
       })
     });
   }

diff --git a/src/components/menu/menu-gestures.ts b/src/components/menu/menu-gestures.ts
@@ -2,7 +2,7 @@ import { Menu } from './menu';
 import { SlideEdgeGesture } from '../../gestures/slide-edge-gesture';
 import { SlideData } from '../../gestures/slide-gesture';
 import { assign } from '../../util/util';
-import { GestureController, GesturePriority } from '../../gestures/gesture-controller';
+import { GestureController, GesturePriority, DisableScroll } from '../../gestures/gesture-controller';
 import { NativeRafDebouncer } from '../../util/debouncer';
 
 /**
@@ -25,6 +25,7 @@ export class MenuContentGesture extends SlideEdgeGesture {
       debouncer: new NativeRafDebouncer(),
       gesture: gestureCtrl.create('menu-swipe', {
         priority: GesturePriority.MenuSwipe,
+        disableScroll: DisableScroll.DuringCapture
       })
     }, options));
   }
@@ -52,13 +53,6 @@ export class MenuContentGesture extends SlideEdgeGesture {
     let z = (this.menu.side === 'right' ? slide.min : slide.max);
     let stepValue = (slide.distance / z);
 
-    console.debug('menu gesture, onSlide', this.menu.side,
-      'distance', slide.distance,
-      'min', slide.min,
-      'max', slide.max,
-      'z', z,
-      'stepValue', stepValue);
-
     this.menu.swipeProgress(stepValue);
   }
 

diff --git a/src/platform/platform-registry.ts b/src/platform/platform-registry.ts
@@ -110,6 +110,7 @@ export const PLATFORM_CONFIGS: {[key: string]: PlatformConfig} = {
       swipeBackThreshold: 40,
       tapPolyfill: isIOSDevice,
       virtualScrollEventAssist: !(window.indexedDB),
+      disableScrollAssist: isIOSDevice,
     },
     isMatch(p: Platform) {
       return p.isPlatformMatch('ios', ['iphone', 'ipad', 'ipod'], ['windows phone']);