| 1 | const DIRECTIONS = new Set(['normal', 'reverse', 'alternate', 'alternate-reverse'])
|
|---|
| 2 | const PLAY_STATES = new Set(['running', 'paused'])
|
|---|
| 3 | const FILL_MODES = new Set(['none', 'forwards', 'backwards', 'both'])
|
|---|
| 4 | const ITERATION_COUNTS = new Set(['infinite'])
|
|---|
| 5 | const TIMINGS = new Set([
|
|---|
| 6 | 'linear',
|
|---|
| 7 | 'ease',
|
|---|
| 8 | 'ease-in',
|
|---|
| 9 | 'ease-out',
|
|---|
| 10 | 'ease-in-out',
|
|---|
| 11 | 'step-start',
|
|---|
| 12 | 'step-end',
|
|---|
| 13 | ])
|
|---|
| 14 | const TIMING_FNS = ['cubic-bezier', 'steps']
|
|---|
| 15 |
|
|---|
| 16 | const COMMA = /\,(?![^(]*\))/g // Comma separator that is not located between brackets. E.g.: `cubic-bezier(a, b, c)` these don't count.
|
|---|
| 17 | const SPACE = /\ +(?![^(]*\))/g // Similar to the one above, but with spaces instead.
|
|---|
| 18 | const TIME = /^(-?[\d.]+m?s)$/
|
|---|
| 19 | const DIGIT = /^(\d+)$/
|
|---|
| 20 |
|
|---|
| 21 | export default function parseAnimationValue(input) {
|
|---|
| 22 | let animations = input.split(COMMA)
|
|---|
| 23 | return animations.map((animation) => {
|
|---|
| 24 | let value = animation.trim()
|
|---|
| 25 | let result = { value }
|
|---|
| 26 | let parts = value.split(SPACE)
|
|---|
| 27 | let seen = new Set()
|
|---|
| 28 |
|
|---|
| 29 | for (let part of parts) {
|
|---|
| 30 | if (!seen.has('DIRECTIONS') && DIRECTIONS.has(part)) {
|
|---|
| 31 | result.direction = part
|
|---|
| 32 | seen.add('DIRECTIONS')
|
|---|
| 33 | } else if (!seen.has('PLAY_STATES') && PLAY_STATES.has(part)) {
|
|---|
| 34 | result.playState = part
|
|---|
| 35 | seen.add('PLAY_STATES')
|
|---|
| 36 | } else if (!seen.has('FILL_MODES') && FILL_MODES.has(part)) {
|
|---|
| 37 | result.fillMode = part
|
|---|
| 38 | seen.add('FILL_MODES')
|
|---|
| 39 | } else if (
|
|---|
| 40 | !seen.has('ITERATION_COUNTS') &&
|
|---|
| 41 | (ITERATION_COUNTS.has(part) || DIGIT.test(part))
|
|---|
| 42 | ) {
|
|---|
| 43 | result.iterationCount = part
|
|---|
| 44 | seen.add('ITERATION_COUNTS')
|
|---|
| 45 | } else if (!seen.has('TIMING_FUNCTION') && TIMINGS.has(part)) {
|
|---|
| 46 | result.timingFunction = part
|
|---|
| 47 | seen.add('TIMING_FUNCTION')
|
|---|
| 48 | } else if (!seen.has('TIMING_FUNCTION') && TIMING_FNS.some((f) => part.startsWith(`${f}(`))) {
|
|---|
| 49 | result.timingFunction = part
|
|---|
| 50 | seen.add('TIMING_FUNCTION')
|
|---|
| 51 | } else if (!seen.has('DURATION') && TIME.test(part)) {
|
|---|
| 52 | result.duration = part
|
|---|
| 53 | seen.add('DURATION')
|
|---|
| 54 | } else if (!seen.has('DELAY') && TIME.test(part)) {
|
|---|
| 55 | result.delay = part
|
|---|
| 56 | seen.add('DELAY')
|
|---|
| 57 | } else if (!seen.has('NAME')) {
|
|---|
| 58 | result.name = part
|
|---|
| 59 | seen.add('NAME')
|
|---|
| 60 | } else {
|
|---|
| 61 | if (!result.unknown) result.unknown = []
|
|---|
| 62 | result.unknown.push(part)
|
|---|
| 63 | }
|
|---|
| 64 | }
|
|---|
| 65 |
|
|---|
| 66 | return result
|
|---|
| 67 | })
|
|---|
| 68 | }
|
|---|