fix(gestures): gesture controller is handled by components

fixes ionic-team#9046

src/components/action-sheet/action-sheet-component.ts

@@ -5,7 +5,8 @@ import { Form } from '../../util/form';
 import { Key } from '../../util/key';
 import { NavParams } from '../../navigation/nav-params';
 import { ViewController } from '../../navigation/view-controller';
-
+import { BlockerDelegate, GestureController, BLOCK_ALL } from '../../gestures/gesture-controller';
+import { assert } from '../../util/util';
 
 /**
  * @private
@@ -53,15 +54,18 @@ export class ActionSheetCmp {
   hdrId: string;
   id: number;
   mode: string;
+  gestureBlocker: BlockerDelegate;
 
   constructor(
     private _viewCtrl: ViewController,
     private _config: Config,
     private _elementRef: ElementRef,
     private _form: Form,
+    gestureCtrl: GestureController,
     params: NavParams,
     renderer: Renderer
   ) {
+    this.gestureBlocker = gestureCtrl.createBlocker(BLOCK_ALL);
     this.d = params.data;
     this.mode = _config.get('mode');
     renderer.setElementClass(_elementRef.nativeElement, `action-sheet-${this.mode}`, true);
@@ -110,6 +114,14 @@ export class ActionSheetCmp {
     this.d.buttons = buttons;
   }
 
+  ionViewWillEnter() {
+    this.gestureBlocker.block();
+  }
+
+  ionViewDidLeave() {
+    this.gestureBlocker.unblock();
+  }
+
   ionViewDidEnter() {
     this._form.focusOut();
 
@@ -166,6 +178,11 @@ export class ActionSheetCmp {
   dismiss(role: any): Promise<any> {
     return this._viewCtrl.dismiss(null, role);
   }
+
+  ngOnDestroy() {
+    assert(this.gestureBlocker.blocked === false, 'gesture blocker must be already unblocked');
+    this.gestureBlocker.destroy();
+  }
 }
 
 let actionSheetIds = -1;

src/components/alert/alert-component.ts

@@ -1,11 +1,11 @@
 import { Component, ElementRef, HostListener, Renderer, ViewEncapsulation } from '@angular/core';
 
 import { Config } from '../../config/config';
-import { isPresent } from '../../util/util';
+import { isPresent, assert } from '../../util/util';
 import { Key } from '../../util/key';
 import { NavParams } from '../../navigation/nav-params';
 import { ViewController } from '../../navigation/view-controller';
-
+import { GestureController, BlockerDelegate, BLOCK_ALL } from '../../gestures/gesture-controller';
 
 /**
  * @private
@@ -86,14 +86,18 @@ export class AlertCmp {
   msgId: string;
   subHdrId: string;
   mode: string;
+  gestureBlocker: BlockerDelegate;
 
   constructor(
     public _viewCtrl: ViewController,
     public _elementRef: ElementRef,
     public _config: Config,
+    gestureCtrl: GestureController,
     params: NavParams,
     renderer: Renderer
   ) {
+    // gesture blocker is used to disable gestures dynamically
+    this.gestureBlocker = gestureCtrl.createBlocker(BLOCK_ALL);
     this.d = params.data;
     this.mode = _config.get('mode');
     renderer.setElementClass(_elementRef.nativeElement, `alert-${this.mode}`, true);
@@ -172,6 +176,27 @@ export class AlertCmp {
     }
   }
 
+  ionViewWillEnter() {
+    this.gestureBlocker.block();
+  }
+
+  ionViewDidLeave() {
+    this.gestureBlocker.unblock();
+  }
+
+  ionViewDidEnter() {
+    let activeElement: any = document.activeElement;
+    if (document.activeElement) {
+      activeElement.blur();
+    }
+
+    let focusableEle = this._elementRef.nativeElement.querySelector('input,button');
+    if (focusableEle) {
+      focusableEle.focus();
+    }
+    this.enabled = true;
+  }
+
   @HostListener('body:keyup', ['$event'])
   keyUp(ev: KeyboardEvent) {
     if (this.enabled && this._viewCtrl.isLast()) {
@@ -193,19 +218,6 @@ export class AlertCmp {
     }
   }
 
-  ionViewDidEnter() {
-    let activeElement: any = document.activeElement;
-    if (document.activeElement) {
-      activeElement.blur();
-    }
-
-    let focusableEle = this._elementRef.nativeElement.querySelector('input,button');
-    if (focusableEle) {
-      focusableEle.focus();
-    }
-    this.enabled = true;
-  }
-
   btnClick(button: any, dismissDelay?: number) {
     if (!this.enabled) {
       return;
@@ -293,6 +305,11 @@ export class AlertCmp {
     });
     return values;
   }
+
+  ngOnDestroy() {
+    assert(this.gestureBlocker.blocked === false, 'gesture blocker must be already unblocked');
+    this.gestureBlocker.destroy();
+  }
 }
 
 let alertIds = -1;

src/components/backdrop/backdrop.scss

@@ -19,7 +19,3 @@ ion-backdrop {
   opacity: .01;
   transform: translateZ(0);
 }
-
-ion-backdrop.hide-backdrop {
-  display: none;
-}

src/components/backdrop/backdrop.ts

@@ -1,8 +1,4 @@
-import { Directive, ElementRef, Input, Renderer } from '@angular/core';
-
-import { GestureController } from '../../gestures/gesture-controller';
-import { isTrueProperty } from '../../util/util';
-
+import { Directive, ElementRef, Renderer } from '@angular/core';
 
 /**
  * @private
@@ -16,26 +12,11 @@ import { isTrueProperty } from '../../util/util';
   },
 })
 export class Backdrop {
-  private _gestureID: number = null;
-  @Input() disableScroll = true;
 
   constructor(
-    private _gestureCtrl: GestureController,
     private _elementRef: ElementRef,
-    private _renderer: Renderer) { }
-
-  ngOnInit() {
-    if (isTrueProperty(this.disableScroll)) {
-      this._gestureID = this._gestureCtrl.newID();
-      this._gestureCtrl.disableScroll(this._gestureID);
-    }
-  }
-
-  ngOnDestroy() {
-    if (this._gestureID) {
-      this._gestureCtrl.enableScroll(this._gestureID);
-    }
-  }
+    private _renderer: Renderer
+  ) { }
 
   getNativeElement(): HTMLElement {
     return this._elementRef.nativeElement;

src/components/item/item-sliding-gesture.ts

@@ -1,14 +1,14 @@
 import { ItemSliding } from './item-sliding';
 import { List } from '../list/list';
 
-import { GesturePriority } from '../../gestures/gesture-controller';
+import { GestureController, GesturePriority } from '../../gestures/gesture-controller';
 import { PanGesture } from '../../gestures/drag-gesture';
 import { pointerCoord } from '../../util/dom';
 import { NativeRafDebouncer } from '../../util/debouncer';
 
-const DRAG_THRESHOLD = 10;
-const MAX_ATTACK_ANGLE = 20;
-
+/**
+ * @private
+ */
 export class ItemSlidingGesture extends PanGesture {
 
   private preSelectedContainer: ItemSliding = null;
@@ -17,13 +17,14 @@ export class ItemSlidingGesture extends PanGesture {
   private firstCoordX: number;
   private firstTimestamp: number;
 
-  constructor(public list: List) {
+  constructor(public list: List, gestureCtrl: GestureController) {
     super(list.getNativeElement(), {
-      maxAngle: MAX_ATTACK_ANGLE,
-      threshold: DRAG_THRESHOLD,
+      maxAngle: 20,
+      threshold: 10,
       zone: false,
       debouncer: new NativeRafDebouncer(),
-      gesture: list._gestureCtrl.create('item-sliding', {
+      gesture: gestureCtrl.createGesture({
+        name: 'item-sliding',
         priority: GesturePriority.SlidingItem,
       })
     });

src/components/list/list.ts

@@ -95,7 +95,7 @@ export class List extends Ion {
 
     } else if (!this._slidingGesture) {
       console.debug('enableSlidingItems');
-      this._slidingGesture = new ItemSlidingGesture(this);
+      this._slidingGesture = new ItemSlidingGesture(this, this._gestureCtrl);
       this._slidingGesture.listen();
     }
   }

src/components/loading/loading-component.ts

@@ -1,18 +1,19 @@
 import { Component, ElementRef, Renderer, ViewEncapsulation } from '@angular/core';
 
 import { Config } from '../../config/config';
-import { isDefined, isUndefined } from '../../util/util';
+import { isDefined, isUndefined, assert } from '../../util/util';
 import { NavParams } from '../../navigation/nav-params';
 import { ViewController } from '../../navigation/view-controller';
 import { LoadingOptions } from './loading-options';
+import { BlockerDelegate, GestureController, BLOCK_ALL } from '../../gestures/gesture-controller';
 
 /**
 * @private
 */
 @Component({
   selector: 'ion-loading',
   template:
-    '<ion-backdrop [class.hide-backdrop]="!d.showBackdrop"></ion-backdrop>' +
+    '<ion-backdrop [hidden]="!d.showBackdrop"></ion-backdrop>' +
     '<div class="loading-wrapper">' +
       '<div *ngIf="showSpinner" class="loading-spinner">' +
         '<ion-spinner [name]="d.spinner"></ion-spinner>' +
@@ -29,14 +30,17 @@ export class LoadingCmp {
   id: number;
   showSpinner: boolean;
   durationTimeout: number;
+  gestureBlocker: BlockerDelegate;
 
   constructor(
     private _viewCtrl: ViewController,
     private _config: Config,
     private _elementRef: ElementRef,
+    gestureCtrl: GestureController,
     params: NavParams,
     renderer: Renderer
   ) {
+    this.gestureBlocker = gestureCtrl.createBlocker(BLOCK_ALL);
     this.d = params.data;
 
     renderer.setElementClass(_elementRef.nativeElement, `loading-${_config.get('mode')}`, true);
@@ -62,17 +66,21 @@ export class LoadingCmp {
     this.showSpinner = isDefined(this.d.spinner) && this.d.spinner !== 'hide';
   }
 
+  ionViewWillEnter() {
+    this.gestureBlocker.block();
+  }
+
+  ionViewDidLeave() {
+    this.gestureBlocker.unblock();
+  }
+
   ionViewDidEnter() {
     let activeElement: any = document.activeElement;
-    if (document.activeElement) {
-      activeElement.blur();
-    }
+    activeElement && activeElement.blur();
 
     // If there is a duration, dismiss after that amount of time
     if ( this.d && this.d.duration ) {
-      this.durationTimeout = (<any> setTimeout( () => {
-        this.dismiss('backdrop');
-      }, this.d.duration));
+      this.durationTimeout = setTimeout(() => this.dismiss('backdrop'), this.d.duration);
     }
 
   }
@@ -83,6 +91,11 @@ export class LoadingCmp {
     }
     return this._viewCtrl.dismiss(null, role);
   }
+
+  ngOnDestroy() {
+    assert(this.gestureBlocker.blocked === false, 'gesture blocker must be already unblocked');
+    this.gestureBlocker.destroy();
+  }
 }
 
 let loadingIds = -1;

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, GESTURE_MENU_SWIPE } from '../../gestures/gesture-controller';
 import { NativeRafDebouncer } from '../../util/debouncer';
 
 /**
@@ -14,16 +14,17 @@ export class MenuContentGesture extends SlideEdgeGesture {
     public menu: Menu,
     contentEle: HTMLElement,
     gestureCtrl: GestureController,
-    options: any = {}) {
+    options: any = {}
+  ) {
     super(contentEle, assign({
       direction: 'x',
       edge: menu.side,
       threshold: 0,
       maxEdgeStart: menu.maxEdgeStart || 50,
-      maxAngle: 40,
       zone: false,
       debouncer: new NativeRafDebouncer(),
-      gesture: gestureCtrl.create('menu-swipe', {
+      gesture: gestureCtrl.createGesture({
+        name: GESTURE_MENU_SWIPE,
         priority: GesturePriority.MenuSwipe,
       })
     }, 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);
   }