schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-29 09:10:30 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Move accessibility checks into module.

Browse source
This commit is contained in:
orangemug 2018-05-11 09:32:57 +01:00
parent c241a6e280
commit 7cb2c36ac9
2 changed files with 14 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/layers/CollapseReducedMotion.jsx
View file

@ -1,14 +1,9 @@
import React from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import Collapse from 'react-collapse' import Collapse from 'react-collapse'
import lodash from 'lodash' import accessibility from '../../libs/accessibility'
// Wait 3 seconds so when a user enables it they don't have to refresh the page.
const isReduceMotionEnabled = lodash.throttle(() => {
return window.matchMedia("(prefers-reduced-motion: reduce)").matches
}, 3000);
export default class CollapseReducedMotion extends React.Component { export default class CollapseReducedMotion extends React.Component {
static propTypes = { static propTypes = {
isActive: PropTypes.bool.isRequired, isActive: PropTypes.bool.isRequired,
@ -16,7 +11,7 @@ export default class CollapseReducedMotion extends React.Component {
} }
render() { render() {
if (isReduceMotionEnabled()) { if (accessibility.reducedMotionEnabled()) {
return ( return (
<div style={{display: this.props.isActive ? "block" : "none"}}> <div style={{display: this.props.isActive ? "block" : "none"}}>
{this.props.children} {this.props.children}

12
src/libs/accessibility.js Normal file
View file

@ -0,0 +1,12 @@
import lodash from 'lodash'
// Throttle for 3 seconds so when a user enables it they don't have to refresh the page.
const reducedMotionEnabled = lodash.throttle(() => {
return window.matchMedia("(prefers-reduced-motion: reduce)").matches
}, 3000);
export default {
reducedMotionEnabled
}