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

feat(ripple-effect): add option to disable ripple-effect (#16393)

Browse Source 
fixes #16379
This commit is contained in:
Manu MA
2018-11-20 11:43:18 +01:00
committed by GitHub
parent f8311860b0
commit 838f40de37
4 changed files with 13 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/src/components/app/app.tsx
View File

@ -21,7 +21,7 @@ export class App implements ComponentInterface {
const { win, config, queue } = this; const { win, config, queue } = this;
if (!config.getBoolean('_testing')) { if (!config.getBoolean('_testing')) {
importTapClick(win); importTapClick(win, config);
} }
importInputShims(win, config); importInputShims(win, config);
@ -54,8 +54,8 @@ function importStatusTap(win: Window, config: Config, queue: QueueApi) {
} }
} }
function importTapClick(win: Window) { function importTapClick(win: Window, config: Config) {
import('../../utils/tap-click').then(module => module.startTapClick(win.document)); import('../../utils/tap-click').then(module => module.startTapClick(win.document, config));
} }
function importInputShims(win: Window, config: Config) { function importInputShims(win: Window, config: Config) {

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

@ -1,7 +1,5 @@
import { Component, ComponentInterface, Element, Method, Prop, QueueApi } from '@stencil/core'; import { Component, ComponentInterface, Element, Method, Prop, QueueApi } from '@stencil/core';
import { Config } from '../../interface';
@Component({ @Component({
tag: 'ion-ripple-effect', tag: 'ion-ripple-effect',
styleUrl: 'ripple-effect.scss', styleUrl: 'ripple-effect.scss',
@ -13,20 +11,12 @@ export class RippleEffect implements ComponentInterface {
@Prop({ context: 'queue' }) queue!: QueueApi; @Prop({ context: 'queue' }) queue!: QueueApi;
@Prop({ context: 'window' }) win!: Window; @Prop({ context: 'window' }) win!: Window;
@Prop({ context: 'config' }) config!: Config;
/** /**
* Adds the ripple effect to the parent element * Adds the ripple effect to the parent element
*/ */
@Method() @Method()
async addRipple(pageX: number, pageY: number) { async addRipple(pageX: number, pageY: number) {
if (this.config.getBoolean('animated', true)) {
return this.prepareRipple(pageX, pageY);
}
return () => { return; };
}
private prepareRipple(pageX: number, pageY: number) {
return new Promise<() => void>(resolve => { return new Promise<() => void>(resolve => {
this.queue.read(() => { this.queue.read(() => {
const rect = this.el.getBoundingClientRect(); const rect = this.el.getBoundingClientRect();

6
core/src/utils/config.ts
View File

@ -7,6 +7,12 @@ export interface IonicConfig {
*/ */
animated?: boolean; animated?: boolean;
/**
* When it's set to `false`, it disables all material-design ripple-effects across the app.
* Defaults to `true`.
*/
rippleEffect?: boolean;
/** /**
* The mode determines which platform styles to use for the whole application. * The mode determines which platform styles to use for the whole application.
*/ */

6
core/src/utils/tap-click.ts
View File

@ -1,7 +1,8 @@
import { Config } from '../interface';
import { now, pointerCoord } from './helpers'; import { now, pointerCoord } from './helpers';
export function startTapClick(doc: Document) { export function startTapClick(doc: Document, config: Config) {
let lastTouch = -MOUSE_WAIT * 10; let lastTouch = -MOUSE_WAIT * 10;
let lastActivated = 0; let lastActivated = 0;
let cancelled = false; let cancelled = false;
@ -11,6 +12,7 @@ export function startTapClick(doc: Document) {
let activeRipple: Promise<() => void> | undefined; let activeRipple: Promise<() => void> | undefined;
let activeDefer: any; let activeDefer: any;
const useRippleEffect = config.getBoolean('animated', true) && config.getBoolean('rippleEffect', true);
const clearDefers = new WeakMap<HTMLElement, any>(); const clearDefers = new WeakMap<HTMLElement, any>();
function onBodyClick(ev: Event) { function onBodyClick(ev: Event) {
@ -116,7 +118,7 @@ export function startTapClick(doc: Document) {
lastActivated = Date.now(); lastActivated = Date.now();
el.classList.add(ACTIVATED); el.classList.add(ACTIVATED);
const rippleEffect = getRippleEffect(el); const rippleEffect = useRippleEffect && getRippleEffect(el);
if (rippleEffect && rippleEffect.addRipple) { if (rippleEffect && rippleEffect.addRipple) {
activeRipple = rippleEffect.addRipple(x, y); activeRipple = rippleEffect.addRipple(x, y);
} }