From 0ddee0163b0badb45fc7ce25b5203ae14e18988c Mon Sep 17 00:00:00 2001 From: justintaddei Date: Tue, 16 Jul 2024 00:02:12 -0600 Subject: [PATCH] feat: disabled wave effect if `prefers-reduced-motion:` set to `reduce` Resolves #740 --- README.md | 37 ++++++++++++++++---------- src/__snapshots__/options.test.ts.snap | 1 + src/options.ts | 9 +++++++ src/wave.ts | 1 + 4 files changed, 34 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 2b43149..46d546b 100644 --- a/README.md +++ b/README.md @@ -74,6 +74,7 @@ After installing and registering the plugin, this is all you need to get started - [trigger](#trigger) - [disabled](#disabled) - [respectDisabledAttribute](#respectdisabledattribute) + - [respectPrefersReducedMotion](#respectprefersreducedmotion) - [stopPropagation](#stoppropagation) - [tagName](#tagname) - [Using triggers](#using-triggers) @@ -240,20 +241,21 @@ export default { ### Summary -| Name | Default | Type | -| ----------------------------------------------------- | :--------------: | ----------------------------- | -| [color](#color) | `"currentColor"` | `string` | -| [initialOpacity](#initialopacity) | `0.2` | `number` | -| [finalOpacity](#finalopacity) | `0.1` | `number` | -| [duration](#duration) | `0.4` | `number` | -| [dissolveDuration](#dissolveduration) | `0.15` | `number` | -| [easing](#easing) | `ease-out` | `string` | -| [cancellationPeriod](#cancellationperiod) | `75` | `number` | -| [trigger](#trigger) | `"auto"` | `string \| boolean \| "auto"` | -| [disabled](#disabled) | `false` | `boolean` | -| [respectDisabledAttribute](#respectdisabledattribute) | `true` | `boolean` | -| [stopPropagation](#stoppropagation) | `false` | `boolean` | -| [tagName](#tagname) | `"div"` | `string` | +| Name | Default | Type | +| ------------------------------------------------------ | :--------------: | ----------------------------- | +| [color](#color) | `"currentColor"` | `string` | +| [initialOpacity](#initialopacity) | `0.2` | `number` | +| [finalOpacity](#finalopacity) | `0.1` | `number` | +| [duration](#duration) | `0.4` | `number` | +| [dissolveDuration](#dissolveduration) | `0.15` | `number` | +| [easing](#easing) | `ease-out` | `string` | +| [cancellationPeriod](#cancellationperiod) | `75` | `number` | +| [trigger](#trigger) | `"auto"` | `string \| boolean \| "auto"` | +| [disabled](#disabled) | `false` | `boolean` | +| [respectDisabledAttribute](#respectdisabledattribute) | `true` | `boolean` | +| [respectPrefersReducedMotion](#respectpreferredmotion) | `true` | `boolean` | +| [stopPropagation](#stoppropagation) | `false` | `boolean` | +| [tagName](#tagname) | `"div"` | `string` | ### Details @@ -545,6 +547,13 @@ export default { ``` +#### respectPrefersReducedMotion + +- **type:** `boolean` +- _default:_ `true` + +> If `true`, the wave effect will be disabled if the user's [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) preference is set to `reduce`. + #### stopPropagation - **type:** `boolean` diff --git a/src/__snapshots__/options.test.ts.snap b/src/__snapshots__/options.test.ts.snap index c25b0b0..7cc7a8e 100644 --- a/src/__snapshots__/options.test.ts.snap +++ b/src/__snapshots__/options.test.ts.snap @@ -12,6 +12,7 @@ exports[`has documented default options 1`] = ` "finalOpacity": 0.1, "initialOpacity": 0.2, "respectDisabledAttribute": true, + "respectPrefersReducedMotion": true, "stopPropagation": false, "tagName": "div", "trigger": "auto", diff --git a/src/options.ts b/src/options.ts index 3e64af9..2adcbbd 100644 --- a/src/options.ts +++ b/src/options.ts @@ -102,6 +102,14 @@ interface IVWaveDirectiveOptions { */ respectDisabledAttribute: boolean + /** + * If `true`, the wave effect will be disabled if the user's `prefers-reduced-motion` preference is set to `reduce`. + * + * @default + * true + */ + respectPrefersReducedMotion: boolean + /** * Prevents the pointerdown event from propagating to parent elements * @@ -144,6 +152,7 @@ const DEFAULT_PLUGIN_OPTIONS: IVWavePluginOptions = { tagName: 'div', disabled: false, respectDisabledAttribute: true, + respectPrefersReducedMotion: true, stopPropagation: false, } diff --git a/src/wave.ts b/src/wave.ts index b63d3ad..50345e3 100644 --- a/src/wave.ts +++ b/src/wave.ts @@ -16,6 +16,7 @@ const SCALE_FACTOR = 2.05 const wave = (screenPos: Vector, el: HTMLElement, options: IVWaveDirectiveOptions) => { if (options.disabled) return if (options.respectDisabledAttribute && el.hasAttribute('disabled')) return + if (options.respectPrefersReducedMotion && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return const rect = el.getBoundingClientRect() const computedStyles = window.getComputedStyle(el)