diff --git a/src/lib/core/ripple/ripple-renderer.ts b/src/lib/core/ripple/ripple-renderer.ts index 866b0cf8441..bb5f61aafd0 100644 --- a/src/lib/core/ripple/ripple-renderer.ts +++ b/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(); @@ -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)); diff --git a/src/lib/core/ripple/ripple.spec.ts b/src/lib/core/ripple/ripple.spec.ts index 071973d03d7..709569d927b 100644 --- a/src/lib/core/ripple/ripple.spec.ts +++ b/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');