feat(gesture-controller): disable/enable scrolling

Author: manucorporat

src/components/alert/test/basic/index.ts

@@ -304,6 +304,7 @@ class E2EPage {
     </ion-header>
     <ion-content padding>
       Hi, I'm Bob, and I'm a modal.
+      <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
     </ion-content>
   `
 })

src/components/app/app.ts

@@ -31,6 +31,11 @@ export class App {
    */
   clickBlock: ClickBlock;
 
+  /**
+   * @private
+   */
+  appRoot: AppRoot;
+
   viewDidLoad: EventEmitter<any> = new EventEmitter();
   viewWillEnter: EventEmitter<any> = new EventEmitter();
   viewDidEnter: EventEmitter<any> = new EventEmitter();
@@ -86,6 +91,17 @@ export class App {
     }
   }
 
+  /**
+   * @private
+   */
+  setScrollDisabled(disabled: boolean) {
+    if (!this.appRoot) {
+      console.error('appRoot is missing, scrolling can not be enabled/disabled');
+      return;
+    }
+    this.appRoot.disableScroll = disabled;
+  }
+
   /**
    * @private
    * Boolean if the app is actively enabled or not.
@@ -282,9 +298,13 @@ export class AppRoot {
   @ViewChild('anchor', {read: ViewContainerRef}) private _viewport: ViewContainerRef;
 
   constructor(
-      private _cmp: UserComponent,
-      private _cr: ComponentResolver,
-      private _renderer: Renderer) {}
+    private _cmp: UserComponent,
+    private _cr: ComponentResolver,
+    private _renderer: Renderer,
+    app: App
+  ) {
+    app.appRoot = this;
+  }
 
   ngAfterViewInit() {
     // load the user app's root component

src/components/backdrop/backdrop.ts

@@ -1,6 +1,6 @@
 import { Directive, ElementRef, Input } from '@angular/core';
 
-import { AppRoot } from '../app/app';
+import { DisableScroll, GestureController, GestureDelegate } from '../../gestures/gesture-controller';
 import { isTrueProperty } from '../../util/util';
 
 
@@ -16,41 +16,21 @@ import { isTrueProperty } from '../../util/util';
   },
 })
 export class Backdrop {
-  private static nuBackDrops: number = 0;
-
-  private static push(appRoot: AppRoot) {
-    if (this.nuBackDrops === 0) {
-      appRoot.disableScroll = true;
-    }
-    this.nuBackDrops++;
-  }
-
-  private static pop(appRoot: AppRoot) {
-    if (this.nuBackDrops > 0) {
-      this.nuBackDrops--;
-
-      if (this.nuBackDrops === 0) {
-        appRoot.disableScroll = false;
-      }
-    }
-  }
-
-  private pushed: boolean = false;
+  private _gestureID: number = null;
   @Input() disableScroll = true;
 
-  constructor(private _appRoot: AppRoot, private _elementRef: ElementRef) {}
+  constructor(private _gestureCtrl: GestureController, private _elementRef: ElementRef) {}
 
   ngOnInit() {
     if (isTrueProperty(this.disableScroll)) {
-      Backdrop.push(this._appRoot);
-      this.pushed = true;
+      this._gestureID = this._gestureCtrl.newID();
+      this._gestureCtrl.disableScroll(this._gestureID);
     }
   }
 
   ngOnDestroy() {
-    if (this.pushed) {
-      Backdrop.pop(this._appRoot);
-      this.pushed = false;
+    if (this._gestureID) {
+      this._gestureCtrl.enableScroll(this._gestureID);
     }
   }
 

src/config/providers.ts

@@ -65,6 +65,7 @@ export function ionicProviders(customProviders?: Array<any>, config?: any): any[
     provide(Events, {useValue: events}),
     provide(FeatureDetect, {useValue: featureDetect}),
     Form,
+    GestureController,
     HTTP_PROVIDERS,
     Keyboard,
     LoadingController,
@@ -78,7 +79,6 @@ export function ionicProviders(customProviders?: Array<any>, config?: any): any[
     TapClick,
     ToastController,
     Translate,
-    GestureController,
   ];
 
   if (isPresent(customProviders)) {

src/gestures/gesture-controller.ts

@@ -1,6 +1,5 @@
 
-import { Injectable } from '@angular/core';
-
+import { forwardRef, Inject, Injectable } from '@angular/core';
 import { App } from '../components/app/app';
 
 export const enum GesturePriority {
@@ -30,12 +29,17 @@ export class GestureController {
   private requestedStart: { [eventId: number]: number } = {};
   private disabledGestures: { [eventName: string]: Set<number> } = {};
   private disabledScroll: Set<number> = new Set<number>();
-  private appRoot: App;
   private capturedID: number = null;
 
+  constructor(@Inject(forwardRef(() => App)) private _app: App) { }
+
   create(name: string, opts: GestureOptions = {}): GestureDelegate {
+    return new GestureDelegate(name, this.newID(), this, opts);
+  }
+
+  newID(): number {
     let id = this.id; this.id++;
-    return new GestureDelegate(name, id, this, opts);
+    return id;
   }
 
   start(gestureName: string, id: number, priority: number): boolean {
@@ -94,16 +98,18 @@ export class GestureController {
   disableScroll(id: number) {
     let isEnabled = !this.isScrollDisabled();
     this.disabledScroll.add(id);
-    if (isEnabled && this.isScrollDisabled()) {
-      // this.appRoot.disableScroll = true;
+    if (this._app && isEnabled && this.isScrollDisabled()) {
+      console.debug('GestureController: Disabling scrolling');
+      this._app.setScrollDisabled(true);
     }
   }
 
   enableScroll(id: number) {
     let isDisabled = this.isScrollDisabled();
     this.disabledScroll.delete(id);
-    if (isDisabled && !this.isScrollDisabled()) {
-      // this.appRoot.disableScroll = false;
+    if (this._app && isDisabled && !this.isScrollDisabled()) {
+      console.debug('GestureController: Enabling scrolling');
+      this._app.setScrollDisabled(false);
     }
   }