fix(gestures): adds hybrid disable scroll assistance

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

Hide file tree

Showing 5 changed files with 30 additions and 17 deletions.
diff --git a/src/components/app/app-root.ts b/src/components/app/app-root.ts
@@ -5,7 +5,7 @@ import { Config } from '../../config/config';
 import { Ion } from '../ion';
 import { OverlayPortal } from '../nav/overlay-portal';
 import { Platform } from '../../platform/platform';
-
+import { UIEventManager } from '../../util/ui-event-manager';
 export const AppRootToken = new OpaqueToken('USERROOT');
 
 /**
@@ -23,6 +23,8 @@ export const AppRootToken = new OpaqueToken('USERROOT');
 })
 export class IonicApp extends Ion implements OnInit {
 
+  private _stopScrollPlugin: any;
+  private _events: UIEventManager = new UIEventManager(false);
   @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,26 @@ export class IonicApp extends Ion implements OnInit {
    * @private
    */
   _disableScroll(shouldDisableScroll: boolean) {
-    this.setElementClass('disable-scroll', shouldDisableScroll);
+    this._events.unlistenAll();
+
+    if (shouldDisableScroll) {
+      var callback = function (e) { e.preventDefault(); };
+      var pages = this.getNativeElement().querySelectorAll('.ion-page');
+      for (var i = 0; i < pages.length; ++i) {
+        this._events.listen(pages[i], 'touchstart', callback, true);
+      }
+      this.stopScroll().then();
+    }
+  }
+
+  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,10 +51,6 @@ ion-content.js-scroll > .scroll-content {
   will-change: initial;
 }
 
-.disable-scroll .ion-page .scroll-content {
-  pointer-events: none;
-}
-
 
 // Fixed Content (ion-fixed and ion-fab)
 // --------------------------------------------------

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']);