From d57833c81b953bd905e9cccbe3834ca90948edef Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 31 May 2016 21:53:39 -0500 Subject: [PATCH] fix(ripple): do not activate ripple if pointer moved --- src/components/tap-click/activator.ts | 6 +-- src/components/tap-click/ripple.ts | 73 ++++++++++++++------------- src/components/tap-click/tap-click.ts | 11 ++-- 3 files changed, 48 insertions(+), 42 deletions(-) diff --git a/src/components/tap-click/activator.ts b/src/components/tap-click/activator.ts index a319a4d4247..dd8d099fbe6 100644 --- a/src/components/tap-click/activator.ts +++ b/src/components/tap-click/activator.ts @@ -1,6 +1,6 @@ import {App} from '../app/app'; import {Config} from '../../config/config'; -import {rafFrames, nativeTimeout} from '../../util/dom'; +import {Coordinates, nativeTimeout, rafFrames} from '../../util/dom'; export class Activator { @@ -12,7 +12,7 @@ export class Activator { this._css = config.get('activatedClass') || 'activated'; } - downAction(ev: UIEvent, activatableEle: HTMLElement, pointerX: number, pointerY: number) { + downAction(ev: UIEvent, activatableEle: HTMLElement, startCoord: Coordinates) { // the user just pressed down let self = this; if (self.disableActivated(ev)) { @@ -35,7 +35,7 @@ export class Activator { }); } - upAction(ev: UIEvent, activatableEle: HTMLElement, pointerX: number, pointerY: number) { + upAction(ev: UIEvent, activatableEle: HTMLElement, startCoord: Coordinates) { // the user was pressing down, then just let up rafFrames(CLEAR_STATE_DEFERS, () => { this.clearState(); diff --git a/src/components/tap-click/ripple.ts b/src/components/tap-click/ripple.ts index 9b5e694fa53..3dc2c040123 100644 --- a/src/components/tap-click/ripple.ts +++ b/src/components/tap-click/ripple.ts @@ -1,6 +1,6 @@ import {Activator} from './activator'; import {App} from '../app/app'; -import {CSS, nativeRaf, rafFrames} from '../../util/dom'; +import {Coordinates, CSS, hasPointerMoved, nativeRaf, pointerCoord, rafFrames} from '../../util/dom'; import {Config} from '../../config/config'; @@ -13,7 +13,7 @@ export class RippleActivator extends Activator { super(app, config); } - downAction(ev: UIEvent, activatableEle: HTMLElement, pointerX: number, pointerY: number) { + downAction(ev: UIEvent, activatableEle: HTMLElement, startCoord: Coordinates) { let self = this; if (self.disableActivated(ev)) { return; @@ -56,47 +56,50 @@ export class RippleActivator extends Activator { }); } - upAction(ev: UIEvent, activatableEle: HTMLElement, pointerX: number, pointerY: number) { + upAction(ev: UIEvent, activatableEle: HTMLElement, startCoord: Coordinates) { let self = this; - var i = activatableEle.childElementCount; - while (i--) { - var rippleEle: any = activatableEle.children[i]; - if (rippleEle.tagName === 'ION-BUTTON-EFFECT') { - var clientPointerX = (pointerX - rippleEle.$left); - var clientPointerY = (pointerY - rippleEle.$top); + if (!hasPointerMoved(6, startCoord, pointerCoord(ev))) { + let i = activatableEle.childElementCount; - var x = Math.max(Math.abs(rippleEle.$width - clientPointerX), clientPointerX) * 2; - var y = Math.max(Math.abs(rippleEle.$height - clientPointerY), clientPointerY) * 2; - var diameter = Math.min(Math.max(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)), 64), 240); + while (i--) { + var rippleEle: any = activatableEle.children[i]; + if (rippleEle.tagName === 'ION-BUTTON-EFFECT') { + var clientPointerX = (startCoord.x - rippleEle.$left); + var clientPointerY = (startCoord.y - rippleEle.$top); - if (activatableEle.hasAttribute('ion-item')) { - diameter = Math.min(diameter, 140); - } + var x = Math.max(Math.abs(rippleEle.$width - clientPointerX), clientPointerX) * 2; + var y = Math.max(Math.abs(rippleEle.$height - clientPointerY), clientPointerY) * 2; + var diameter = Math.min(Math.max(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)), 64), 240); + + if (activatableEle.hasAttribute('ion-item')) { + diameter = Math.min(diameter, 140); + } + + var radius = Math.sqrt(rippleEle.$width + rippleEle.$height); - var radius = Math.sqrt(rippleEle.$width + rippleEle.$height); - - var scaleTransitionDuration = Math.max(1600 * Math.sqrt(radius / TOUCH_DOWN_ACCEL) + 0.5, 260); - var opacityTransitionDuration = scaleTransitionDuration * 0.7; - var opacityTransitionDelay = scaleTransitionDuration - opacityTransitionDuration; - - // DOM WRITE - rippleEle.style.width = rippleEle.style.height = diameter + 'px'; - rippleEle.style.marginTop = rippleEle.style.marginLeft = -(diameter / 2) + 'px'; - rippleEle.style.left = clientPointerX + 'px'; - rippleEle.style.top = clientPointerY + 'px'; - rippleEle.style.opacity = '0'; - rippleEle.style[CSS.transform] = 'scale(1) translateZ(0px)'; - rippleEle.style[CSS.transition] = 'transform ' + - scaleTransitionDuration + - 'ms,opacity ' + - opacityTransitionDuration + - 'ms ' + - opacityTransitionDelay + 'ms'; + var scaleTransitionDuration = Math.max(1600 * Math.sqrt(radius / TOUCH_DOWN_ACCEL) + 0.5, 260); + var opacityTransitionDuration = scaleTransitionDuration * 0.7; + var opacityTransitionDelay = scaleTransitionDuration - opacityTransitionDuration; + + // DOM WRITE + rippleEle.style.width = rippleEle.style.height = diameter + 'px'; + rippleEle.style.marginTop = rippleEle.style.marginLeft = -(diameter / 2) + 'px'; + rippleEle.style.left = clientPointerX + 'px'; + rippleEle.style.top = clientPointerY + 'px'; + rippleEle.style.opacity = '0'; + rippleEle.style[CSS.transform] = 'scale(1) translateZ(0px)'; + rippleEle.style[CSS.transition] = 'transform ' + + scaleTransitionDuration + + 'ms,opacity ' + + opacityTransitionDuration + + 'ms ' + + opacityTransitionDelay + 'ms'; + } } } - super.upAction(ev, activatableEle, pointerX, pointerY); + super.upAction(ev, activatableEle, startCoord); } deactivate() { diff --git a/src/components/tap-click/tap-click.ts b/src/components/tap-click/tap-click.ts index 74a85d6561e..d6dbffd616a 100644 --- a/src/components/tap-click/tap-click.ts +++ b/src/components/tap-click/tap-click.ts @@ -123,7 +123,7 @@ export class TapClick { let now = Date.now(); if (this.lastActivated + 150 < now) { - this.activator && this.activator.downAction(ev, activatableEle, this.startCoord.x, this.startCoord.y); + this.activator && this.activator.downAction(ev, activatableEle, this.startCoord); this.lastActivated = now; } @@ -135,10 +135,13 @@ export class TapClick { } pointerEnd(ev: any) { - let activatableEle = getActivatableTarget(ev.target); - if (activatableEle && this.startCoord) { - this.activator && this.activator.upAction(ev, activatableEle, this.startCoord.x, this.startCoord.y); + if (this.startCoord && this.activator) { + let activatableEle = getActivatableTarget(ev.target); + if (activatableEle) { + this.activator.upAction(ev, activatableEle, this.startCoord); + } } + this.moveListeners(false); }