feat(gesture-controller): disable/enable scrolling

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);
     }
   }