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

fix(ripple-effect): using method invocation instead of events

Browse Source 
fixes #15318
This commit is contained in:
Manu Mtz.-Almeida
2018-08-24 22:58:12 +02:00
parent 926758e585
commit 4a45effe8c
16 changed files with 30 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components/ripple-effect/readme.md
View File

@ -6,14 +6,6 @@ The ripple effect component adds the [Material Design ink ripple interaction eff
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type |
| ---------- | ----------- | ---------------------------------------------------------------------- | ----------------------- |
| `parent` | `parent` | | `HTMLElement`, `string` |
| `tapClick` | `tap-click` | If true, the ripple effect will listen to any click events and animate | `boolean` |
## Methods
| Method | Description |

41
core/src/components/ripple-effect/ripple-effect.tsx
View File

@ -1,6 +1,4 @@
import { Component, Element, EventListenerEnable, Listen, Method, Prop, QueueApi, Watch } from '@stencil/core';
import { now } from '../../utils/helpers';
import { Component, Element, Method, Prop, QueueApi } from '@stencil/core';
@Component({
tag: 'ion-ripple-effect',
@ -9,48 +7,11 @@ import { now } from '../../utils/helpers';
})
export class RippleEffect {
private lastClick = -10000;
@Element() el!: HTMLElement;
@Prop({ context: 'queue' }) queue!: QueueApi;
@Prop({ context: 'enableListener' }) enableListener!: EventListenerEnable;
@Prop({ context: 'window' }) win!: Window;
@Prop() parent?: HTMLElement | string = 'parent';
/** If true, the ripple effect will listen to any click events and animate */
@Prop() tapClick = false;
@Watch('tapClick')
tapClickChanged(tapClick: boolean) {
this.enableListener(this, 'ionActivated', tapClick, this.parent);
this.enableListener(this, 'touchstart', !tapClick);
this.enableListener(this, 'mousedown', !tapClick);
}
@Listen('ionActivated', { enabled: false })
ionActivated(ev: CustomEvent) {
this.addRipple(ev.detail.x, ev.detail.y);
}
@Listen('touchstart', { passive: true, enabled: false })
touchStart(ev: TouchEvent) {
this.lastClick = now(ev);
const touches = ev.touches[0];
this.addRipple(touches.clientX, touches.clientY);
}
@Listen('mousedown', { passive: true, enabled: false })
mouseDown(ev: MouseEvent) {
const timeStamp = now(ev);
if (this.lastClick < (timeStamp - 1000)) {
this.addRipple(ev.pageX, ev.pageY);
}
}
componentDidLoad() {
this.tapClickChanged(this.tapClick);
}
/**
* Adds the ripple effect to the parent element
*/