{"version":3,"file":"WebAnimation.mjs","sourceRoot":"","sources":["../../../src/meta/WebAnimation.ts"],"names":[],"mappings":"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","sourcesContent":["import { Base } from './Base';\nimport Map from '@dojo/shim/Map';\nimport global from '@dojo/shim/global';\n\n/**\n * Animation controls are used to control the web animation that has been applied\n * to a vdom node.\n */\nexport interface AnimationControls {\n\tplay?: boolean;\n\tonFinish?: () => void;\n\tonCancel?: () => void;\n\treverse?: boolean;\n\tcancel?: boolean;\n\tfinish?: boolean;\n\tplaybackRate?: number;\n\tstartTime?: number;\n\tcurrentTime?: number;\n}\n\n/**\n * Animation timing properties passed to a new KeyframeEffect.\n */\nexport interface AnimationTimingProperties {\n\tduration?: number;\n\tdelay?: number;\n\tdirection?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';\n\teasing?: string;\n\tendDelay?: number;\n\tfill?: 'none' | 'forwards' | 'backwards' | 'both' | 'auto';\n\titerations?: number;\n\titerationStart?: number;\n}\n\n/**\n * Animation propertiues that can be passed as vdom property `animate`\n */\nexport interface AnimationProperties {\n\tid: string;\n\teffects: (() => AnimationKeyFrame | AnimationKeyFrame[]) | AnimationKeyFrame | AnimationKeyFrame[];\n\tcontrols?: AnimationControls;\n\ttiming?: AnimationTimingProperties;\n}\n\nexport type AnimationPropertiesFunction = () => AnimationProperties;\n\n/**\n * Info returned by the `get` function on WebAnimation meta\n */\nexport interface AnimationInfo {\n\tcurrentTime: number;\n\tplayState: 'idle' | 'pending' | 'running' | 'paused' | 'finished';\n\tplaybackRate: number;\n\tstartTime: number;\n}\n\nexport interface AnimationPlayer {\n\tplayer: Animation;\n\tused: boolean;\n}\n\nexport class WebAnimations extends Base {\n\tprivate _animationMap = new Map<string, AnimationPlayer>();\n\n\tprivate _createPlayer(node: HTMLElement, properties: AnimationProperties): Animation {\n\t\tconst { effects, timing = {} } = properties;\n\n\t\tconst fx = typeof effects === 'function' ? effects() : effects;\n\n\t\tconst keyframeEffect = new KeyframeEffect(node, fx, timing as AnimationEffectTiming);\n\n\t\treturn new Animation(keyframeEffect, global.document.timeline);\n\t}\n\n\tprivate _updatePlayer(player: Animation, controls: AnimationControls) {\n\t\tconst { play, reverse, cancel, finish, onFinish, onCancel, playbackRate, startTime, currentTime } = controls;\n\n\t\tif (playbackRate !== undefined) {\n\t\t\tplayer.playbackRate = playbackRate;\n\t\t}\n\n\t\tif (reverse) {\n\t\t\tplayer.reverse();\n\t\t}\n\n\t\tif (cancel) {\n\t\t\tplayer.cancel();\n\t\t}\n\n\t\tif (finish) {\n\t\t\tplayer.finish();\n\t\t}\n\n\t\tif (startTime !== undefined) {\n\t\t\tplayer.startTime = startTime;\n\t\t}\n\n\t\tif (currentTime !== undefined) {\n\t\t\tplayer.currentTime = currentTime;\n\t\t}\n\n\t\tif (play) {\n\t\t\tplayer.play();\n\t\t} else {\n\t\t\tplayer.pause();\n\t\t}\n\n\t\tif (onFinish) {\n\t\t\tplayer.onfinish = onFinish.bind(this._bind);\n\t\t}\n\n\t\tif (onCancel) {\n\t\t\tplayer.oncancel = onCancel.bind(this._bind);\n\t\t}\n\t}\n\n\tanimate(\n\t\tkey: string,\n\t\tanimateProperties:\n\t\t\t| AnimationProperties\n\t\t\t| AnimationPropertiesFunction\n\t\t\t| (AnimationProperties | AnimationPropertiesFunction)[]\n\t) {\n\t\tconst node = this.getNode(key) as HTMLElement;\n\n\t\tif (node) {\n\t\t\tif (!Array.isArray(animateProperties)) {\n\t\t\t\tanimateProperties = [animateProperties];\n\t\t\t}\n\t\t\tanimateProperties.forEach((properties) => {\n\t\t\t\tproperties = typeof properties === 'function' ? properties() : properties;\n\n\t\t\t\tif (properties) {\n\t\t\t\t\tconst { id } = properties;\n\t\t\t\t\tif (!this._animationMap.has(id)) {\n\t\t\t\t\t\tthis._animationMap.set(id, {\n\t\t\t\t\t\t\tplayer: this._createPlayer(node, properties),\n\t\t\t\t\t\t\tused: true\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t\tconst animation = this._animationMap.get(id);\n\t\t\t\t\tconst { controls = {} } = properties;\n\n\t\t\t\t\tif (animation) {\n\t\t\t\t\t\tthis._updatePlayer(animation.player, controls);\n\n\t\t\t\t\t\tthis._animationMap.set(id, {\n\t\t\t\t\t\t\tplayer: animation.player,\n\t\t\t\t\t\t\tused: true\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t}\n\t}\n\n\tget(id: string): Readonly<AnimationInfo> | undefined {\n\t\tconst animation = this._animationMap.get(id);\n\t\tif (animation) {\n\t\t\tconst { currentTime, playState, playbackRate, startTime } = animation.player;\n\n\t\t\treturn {\n\t\t\t\tcurrentTime,\n\t\t\t\tplayState,\n\t\t\t\tplaybackRate,\n\t\t\t\tstartTime\n\t\t\t};\n\t\t}\n\t}\n\n\tafterRender() {\n\t\tthis._animationMap.forEach((animation, key) => {\n\t\t\tif (!animation.used) {\n\t\t\t\tanimation.player.cancel();\n\t\t\t\tthis._animationMap.delete(key);\n\t\t\t}\n\t\t\tanimation.used = false;\n\t\t});\n\t}\n}\n\nexport default WebAnimations;\n"]}