From 72c24bc927583ff4d2dcc61ca139fe8b4120129a Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Thu, 14 Jul 2016 00:52:43 +0200 Subject: [PATCH] feat(gesture-controller): disable/enable scrolling --- src/components/alert/test/basic/index.ts | 1 + src/components/app/app.ts | 26 +++++++++++++++--- src/components/backdrop/backdrop.ts | 34 +++++------------------- src/config/providers.ts | 2 +- src/gestures/gesture-controller.ts | 22 +++++++++------ 5 files changed, 46 insertions(+), 39 deletions(-) diff --git a/src/components/alert/test/basic/index.ts b/src/components/alert/test/basic/index.ts index 9ce64108a3..b975ded10c 100644 --- a/src/components/alert/test/basic/index.ts +++ b/src/components/alert/test/basic/index.ts @@ -304,6 +304,7 @@ class E2EPage { Hi, I'm Bob, and I'm a modal. + ` }) diff --git a/src/components/app/app.ts b/src/components/app/app.ts index a505688982..c84e3b5bd8 100644 --- a/src/components/app/app.ts +++ b/src/components/app/app.ts @@ -31,6 +31,11 @@ export class App { */ clickBlock: ClickBlock; + /** + * @private + */ + appRoot: AppRoot; + viewDidLoad: EventEmitter = new EventEmitter(); viewWillEnter: EventEmitter = new EventEmitter(); viewDidEnter: EventEmitter = 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 diff --git a/src/components/backdrop/backdrop.ts b/src/components/backdrop/backdrop.ts index 66abbed167..1193dd337e 100644 --- a/src/components/backdrop/backdrop.ts +++ b/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); } } diff --git a/src/config/providers.ts b/src/config/providers.ts index 434f9de509..4b4ca71f24 100644 --- a/src/config/providers.ts +++ b/src/config/providers.ts @@ -65,6 +65,7 @@ export function ionicProviders(customProviders?: Array, 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, config?: any): any[ TapClick, ToastController, Translate, - GestureController, ]; if (isPresent(customProviders)) { diff --git a/src/gestures/gesture-controller.ts b/src/gestures/gesture-controller.ts index 715c757f8c..257bb8ccbf 100644 --- a/src/gestures/gesture-controller.ts +++ b/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 } = {}; private disabledScroll: Set = new Set(); - 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); } }