data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

fix: length gauge should respect reduceMotion (#1440)

Browse source
This commit is contained in:
Nolan Lawson 2019-08-27 22:58:25 -07:00 committed by GitHub
parent f6981cff01
commit fc0f5df6c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/routes/_components/LengthGauge.html
View file

@ -1,4 +1,4 @@
<div class="length-gauge {shouldAnimate ? 'should-animate' : ''} {overLimit ? 'over-char-limit' : ''}" <div class={computedClass}
style={computedStyle} style={computedStyle}
aria-hidden="true" aria-hidden="true"
></div> ></div>
@ -20,6 +20,7 @@
import { store } from '../_store/store' import { store } from '../_store/store'
import { observe } from 'svelte-extras' import { observe } from 'svelte-extras'
import { throttleTimer } from '../_utils/throttleTimer' import { throttleTimer } from '../_utils/throttleTimer'
import { classname } from '../_utils/classname'
const updateDisplayedLength = process.browser && throttleTimer(requestAnimationFrame) const updateDisplayedLength = process.browser && throttleTimer(requestAnimationFrame)
@ -50,6 +51,11 @@
const int = Math.round(Math.min(max, length) / max * 100) const int = Math.round(Math.min(max, length) / max * 100)
return (int - (int % 2)) / 100 return (int - (int % 2)) / 100
}, },
computedClass: ({ shouldAnimate, overLimit, $reduceMotion }) => classname(
'length-gauge',
!$reduceMotion && shouldAnimate && 'should-animate',
overLimit && 'over-char-limit'
),
computedStyle: ({ style, lengthAsFractionDeferred }) => `transform: scaleX(${lengthAsFractionDeferred}); ${style}` computedStyle: ({ style, lengthAsFractionDeferred }) => `transform: scaleX(${lengthAsFractionDeferred}); ${style}`
}, },
methods: { methods: {