Skip to content

Commit d57833c

Browse files
adamdbradleyadamdbradley
committed
fix(ripple): do not activate ripple if pointer moved
1 parent f4f6f7b commit d57833c

File tree

3 files changed

+48
-42
lines changed

3 files changed

+48
-42
lines changed

‎src/components/tap-click/activator.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {App} from '../app/app';
22
import {Config} from '../../config/config';
3-
import {rafFrames, nativeTimeout} from '../../util/dom';
3+
import {Coordinates, nativeTimeout, rafFrames} from '../../util/dom';
44

55

66
export class Activator {
@@ -12,7 +12,7 @@ export class Activator {
1212
this._css = config.get('activatedClass') || 'activated';
1313
}
1414

15-
downAction(ev: UIEvent, activatableEle: HTMLElement, pointerX: number, pointerY: number) {
15+
downAction(ev: UIEvent, activatableEle: HTMLElement, startCoord: Coordinates) {
1616
// the user just pressed down
1717
let self = this;
1818
if (self.disableActivated(ev)) {
@@ -35,7 +35,7 @@ export class Activator {
3535
});
3636
}
3737

38-
upAction(ev: UIEvent, activatableEle: HTMLElement, pointerX: number, pointerY: number) {
38+
upAction(ev: UIEvent, activatableEle: HTMLElement, startCoord: Coordinates) {
3939
// the user was pressing down, then just let up
4040
rafFrames(CLEAR_STATE_DEFERS, () => {
4141
this.clearState();

‎src/components/tap-click/ripple.ts

Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {Activator} from './activator';
22
import {App} from '../app/app';
3-
import {CSS, nativeRaf, rafFrames} from '../../util/dom';
3+
import {Coordinates, CSS, hasPointerMoved, nativeRaf, pointerCoord, rafFrames} from '../../util/dom';
44
import {Config} from '../../config/config';
55

66

@@ -13,7 +13,7 @@ export class RippleActivator extends Activator {
1313
super(app, config);
1414
}
1515

16-
downAction(ev: UIEvent, activatableEle: HTMLElement, pointerX: number, pointerY: number) {
16+
downAction(ev: UIEvent, activatableEle: HTMLElement, startCoord: Coordinates) {
1717
let self = this;
1818
if (self.disableActivated(ev)) {
1919
return;
@@ -56,47 +56,50 @@ export class RippleActivator extends Activator {
5656
});
5757
}
5858

59-
upAction(ev: UIEvent, activatableEle: HTMLElement, pointerX: number, pointerY: number) {
59+
upAction(ev: UIEvent, activatableEle: HTMLElement, startCoord: Coordinates) {
6060
let self = this;
6161

62-
var i = activatableEle.childElementCount;
63-
while (i--) {
64-
var rippleEle: any = activatableEle.children[i];
65-
if (rippleEle.tagName === 'ION-BUTTON-EFFECT') {
66-
var clientPointerX = (pointerX - rippleEle.$left);
67-
var clientPointerY = (pointerY - rippleEle.$top);
62+
if (!hasPointerMoved(6, startCoord, pointerCoord(ev))) {
63+
let i = activatableEle.childElementCount;
6864

69-
var x = Math.max(Math.abs(rippleEle.$width - clientPointerX), clientPointerX) * 2;
70-
var y = Math.max(Math.abs(rippleEle.$height - clientPointerY), clientPointerY) * 2;
71-
var diameter = Math.min(Math.max(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)), 64), 240);
65+
while (i--) {
66+
var rippleEle: any = activatableEle.children[i];
67+
if (rippleEle.tagName === 'ION-BUTTON-EFFECT') {
68+
var clientPointerX = (startCoord.x - rippleEle.$left);
69+
var clientPointerY = (startCoord.y - rippleEle.$top);
7270

73-
if (activatableEle.hasAttribute('ion-item')) {
74-
diameter = Math.min(diameter, 140);
75-
}
71+
var x = Math.max(Math.abs(rippleEle.$width - clientPointerX), clientPointerX) * 2;
72+
var y = Math.max(Math.abs(rippleEle.$height - clientPointerY), clientPointerY) * 2;
73+
var diameter = Math.min(Math.max(Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)), 64), 240);
74+
75+
if (activatableEle.hasAttribute('ion-item')) {
76+
diameter = Math.min(diameter, 140);
77+
}
78+
79+
var radius = Math.sqrt(rippleEle.$width + rippleEle.$height);
7680

77-
var radius = Math.sqrt(rippleEle.$width + rippleEle.$height);
78-
79-
var scaleTransitionDuration = Math.max(1600 * Math.sqrt(radius / TOUCH_DOWN_ACCEL) + 0.5, 260);
80-
var opacityTransitionDuration = scaleTransitionDuration * 0.7;
81-
var opacityTransitionDelay = scaleTransitionDuration - opacityTransitionDuration;
82-
83-
// DOM WRITE
84-
rippleEle.style.width = rippleEle.style.height = diameter + 'px';
85-
rippleEle.style.marginTop = rippleEle.style.marginLeft = -(diameter / 2) + 'px';
86-
rippleEle.style.left = clientPointerX + 'px';
87-
rippleEle.style.top = clientPointerY + 'px';
88-
rippleEle.style.opacity = '0';
89-
rippleEle.style[CSS.transform] = 'scale(1) translateZ(0px)';
90-
rippleEle.style[CSS.transition] = 'transform ' +
91-
scaleTransitionDuration +
92-
'ms,opacity ' +
93-
opacityTransitionDuration +
94-
'ms ' +
95-
opacityTransitionDelay + 'ms';
81+
var scaleTransitionDuration = Math.max(1600 * Math.sqrt(radius / TOUCH_DOWN_ACCEL) + 0.5, 260);
82+
var opacityTransitionDuration = scaleTransitionDuration * 0.7;
83+
var opacityTransitionDelay = scaleTransitionDuration - opacityTransitionDuration;
84+
85+
// DOM WRITE
86+
rippleEle.style.width = rippleEle.style.height = diameter + 'px';
87+
rippleEle.style.marginTop = rippleEle.style.marginLeft = -(diameter / 2) + 'px';
88+
rippleEle.style.left = clientPointerX + 'px';
89+
rippleEle.style.top = clientPointerY + 'px';
90+
rippleEle.style.opacity = '0';
91+
rippleEle.style[CSS.transform] = 'scale(1) translateZ(0px)';
92+
rippleEle.style[CSS.transition] = 'transform ' +
93+
scaleTransitionDuration +
94+
'ms,opacity ' +
95+
opacityTransitionDuration +
96+
'ms ' +
97+
opacityTransitionDelay + 'ms';
98+
}
9699
}
97100
}
98101

99-
super.upAction(ev, activatableEle, pointerX, pointerY);
102+
super.upAction(ev, activatableEle, startCoord);
100103
}
101104

102105
deactivate() {

‎src/components/tap-click/tap-click.ts

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ export class TapClick {
123123

124124
let now = Date.now();
125125
if (this.lastActivated + 150 < now) {
126-
this.activator && this.activator.downAction(ev, activatableEle, this.startCoord.x, this.startCoord.y);
126+
this.activator && this.activator.downAction(ev, activatableEle, this.startCoord);
127127
this.lastActivated = now;
128128
}
129129

@@ -135,10 +135,13 @@ export class TapClick {
135135
}
136136

137137
pointerEnd(ev: any) {
138-
let activatableEle = getActivatableTarget(ev.target);
139-
if (activatableEle && this.startCoord) {
140-
this.activator && this.activator.upAction(ev, activatableEle, this.startCoord.x, this.startCoord.y);
138+
if (this.startCoord && this.activator) {
139+
let activatableEle = getActivatableTarget(ev.target);
140+
if (activatableEle) {
141+
this.activator.upAction(ev, activatableEle, this.startCoord);
142+
}
141143
}
144+
142145
this.moveListeners(false);
143146
}
144147

0 commit comments

Comments
 (0)