javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(ripple): do not activate ripple if pointer moved

Browse Source
This commit is contained in:
Adam Bradley
2016-05-31 21:53:39 -05:00
parent f4f6f7b2b8
commit d57833c81b
3 changed files with 48 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/tap-click/activator.ts
View File

@@ -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();

73
src/components/tap-click/ripple.ts
View File

@@ -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 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 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';
}
}
super.upAction(ev, activatableEle, pointerX, pointerY);
super.upAction(ev, activatableEle, startCoord);
}
deactivate() {

11
src/components/tap-click/tap-click.ts
View File

@@ -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);
}