revert(ripple): handle touch events (#7557)

Author: devversion

src/lib/core/ripple/ripple-renderer.ts

@@ -40,8 +40,8 @@ export class RippleRenderer {
   /** Element which triggers the ripple elements on mouse events. */
   private _triggerElement: HTMLElement | null;
 
-  /** Whether the pointer is currently being held on the trigger or not. */
-  private _isPointerDown: boolean = false;
+  /** Whether the mouse is currently down or not. */
+  private _isMousedown: boolean = false;
 
   /** Events to be registered on the trigger element. */
   private _triggerEvents = new Map<string, any>();
@@ -62,12 +62,8 @@ export class RippleRenderer {
 
       // Specify events which need to be registered on the trigger.
       this._triggerEvents.set('mousedown', this.onMousedown.bind(this));
-      this._triggerEvents.set('touchstart', this.onTouchstart.bind(this));
-
-      this._triggerEvents.set('mouseup', this.onPointerUp.bind(this));
-      this._triggerEvents.set('touchend', this.onPointerUp.bind(this));
-
-      this._triggerEvents.set('mouseleave', this.onPointerLeave.bind(this));
+      this._triggerEvents.set('mouseup', this.onMouseup.bind(this));
+      this._triggerEvents.set('mouseleave', this.onMouseup.bind(this));
 
       // By default use the host element as trigger element.
       this.setTriggerElement(this._containerElement);
@@ -77,7 +73,7 @@ export class RippleRenderer {
   /**
    * Fades in a ripple at the given coordinates.
    * @param x Coordinate within the element, along the X axis at which to start the ripple.
-   * @param Y Coordinate within the element, along the Y axis at which to start the ripple.
+   * @param y Coordinate within the element, along the Y axis at which to start the ripple.
    * @param config Extra ripple options.
    */
   fadeInRipple(x: number, y: number, config: RippleConfig = {}): RippleRef {
@@ -126,7 +122,7 @@ export class RippleRenderer {
     this.runTimeoutOutsideZone(() => {
       rippleRef.state = RippleState.VISIBLE;
 
-      if (!config.persistent && !this._isPointerDown) {
+      if (!config.persistent && !this._isMousedown) {
         rippleRef.fadeOut();
       }
     }, duration);
@@ -182,14 +178,18 @@ export class RippleRenderer {
   /** Function being called whenever the trigger is being pressed. */
   private onMousedown(event: MouseEvent) {
     if (!this.rippleDisabled) {
-      this._isPointerDown = true;
+      this._isMousedown = true;
       this.fadeInRipple(event.clientX, event.clientY, this.rippleConfig);
     }
   }
 
-  /** Function being called whenever the pointer is being released. */
-  private onPointerUp() {
-    this._isPointerDown = false;
+  /** Function being called whenever the trigger is being released. */
+  private onMouseup() {
+    if (!this._isMousedown) {
+      return;
+    }
+
+    this._isMousedown = false;
 
     // Fade-out all ripples that are completely visible and not persistent.
     this._activeRipples.forEach(ripple => {
@@ -199,22 +199,6 @@ export class RippleRenderer {
     });
   }
 
-  /** Function being called whenever the pointer leaves the trigger. */
-  private onPointerLeave() {
-    if (this._isPointerDown) {
-      this.onPointerUp();
-    }
-  }
-
-  /** Function being called whenever the trigger is being touched. */
-  private onTouchstart(event: TouchEvent) {
-    if (!this.rippleDisabled) {
-      const {clientX, clientY} = event.touches[0];
-      this._isPointerDown = true;
-      this.fadeInRipple(clientX, clientY, this.rippleConfig);
-    }
-  }
-
   /** Runs a timeout outside of the Angular zone to avoid triggering the change detection. */
   private runTimeoutOutsideZone(fn: Function, delay = 0) {
     this._ngZone.runOutsideAngular(() => setTimeout(fn, delay));

src/lib/core/ripple/ripple.spec.ts

@@ -1,7 +1,7 @@
 import {TestBed, ComponentFixture, fakeAsync, tick, inject} from '@angular/core/testing';
 import {Component, ViewChild} from '@angular/core';
 import {Platform} from '@angular/cdk/platform';
-import {dispatchMouseEvent, dispatchTouchEvent} from '@angular/cdk/testing';
+import {dispatchMouseEvent} from '@angular/cdk/testing';
 import {RIPPLE_FADE_OUT_DURATION, RIPPLE_FADE_IN_DURATION} from './ripple-renderer';
 import {
   MatRipple, MatRippleModule, MAT_RIPPLE_GLOBAL_OPTIONS, RippleState, RippleGlobalOptions
@@ -104,20 +104,6 @@ describe('MatRipple', () => {
       expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(2);
     });
 
-    it('should launch ripples on touchstart', fakeAsync(() => {
-      dispatchTouchEvent(rippleTarget, 'touchstart');
-      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
-
-      tick(RIPPLE_FADE_IN_DURATION);
-      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(1);
-
-      dispatchTouchEvent(rippleTarget, 'touchend');
-
-      tick(RIPPLE_FADE_OUT_DURATION);
-
-      expect(rippleTarget.querySelectorAll('.mat-ripple-element').length).toBe(0);
-    }));
-
     it('removes ripple after timeout', fakeAsync(() => {
       dispatchMouseEvent(rippleTarget, 'mousedown');
       dispatchMouseEvent(rippleTarget, 'mouseup');