skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Paul Gschwendtner
2017-10-06 22:26:52 +02:00
committed by Kara
parent 60707b385a
commit 37a423beb2
2 changed files with 15 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/core/ripple/ripple-renderer.ts
+14 -30
View File
@@ -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 -15
View File
@@ -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');