{"version":3,"file":"animation.mjs","sources":["../../src/message/animation.ts"],"sourcesContent":["import { PLACEMENT_LIST } from './const';\n\ninterface Keyframe {\n  composite?: CompositeOperationOrAuto;\n  easing?: string;\n  offset?: number | null;\n  [property: string]: string | number | null | undefined;\n}\ntype CompositeOperationOrAuto = 'accumulate' | 'add' | 'auto' | 'replace';\n\nconst ANIMATION_OPTION = {\n  duration: 200,\n  easing: 'linear',\n};\n\nfunction fadeIn(dom: HTMLElement, placement: string) {\n  if (!dom) return;\n  const offsetWidth = dom?.offsetWidth || 0;\n  const offsetHeight = dom?.offsetHeight || 0;\n  const fadeInKeyframes: Array<Keyframe> | null = getFadeInKeyframes(placement, offsetWidth, offsetHeight);\n  if (!fadeInKeyframes) return;\n  const styleAfterFadeIn = fadeInKeyframes[fadeInKeyframes.length - 1];\n  setDomStyleAfterAnimation(dom, styleAfterFadeIn);\n  dom.animate && dom.animate(fadeInKeyframes, ANIMATION_OPTION);\n}\n\nfunction fadeOut(dom: HTMLElement, placement: string, onFinish: Function) {\n  if (!dom) return;\n  const offsetHeight = dom?.offsetHeight || 0;\n  const fadeOutKeyframes: Array<Keyframe> | null = getFadeOutKeyframes(placement, offsetHeight);\n  if (!fadeOutKeyframes) return onFinish();\n  const styleAfterFadeOut = fadeOutKeyframes[fadeOutKeyframes.length - 1];\n  setDomStyleAfterAnimation(dom, styleAfterFadeOut);\n\n  const animation = dom.animate && dom.animate(fadeOutKeyframes, ANIMATION_OPTION);\n  if (animation) {\n    animation.onfinish = () => {\n      // eslint-disable-next-line no-param-reassign\n      dom.style.display = 'none';\n      onFinish();\n    };\n  } else {\n    // eslint-disable-next-line no-param-reassign\n    dom.style.display = 'none';\n    onFinish();\n  }\n}\n\nfunction setDomStyleAfterAnimation(dom: HTMLElement, styleAfterAnimation: Keyframe) {\n  const keys = Object.keys(styleAfterAnimation);\n  for (let i = 0; i < keys.length; i += 1) {\n    const key = keys[i];\n    // eslint-disable-next-line no-param-reassign\n    dom.style[key] = styleAfterAnimation[key];\n  }\n}\n\nfunction getFadeInKeyframes(placement: string, offsetWidth: Number, offsetHeight: Number): Array<Keyframe> | null {\n  if (!PLACEMENT_LIST.includes(placement)) return null;\n  if (['top-left', 'left', 'bottom-left'].includes(placement)) {\n    return [\n      { opacity: 0, marginLeft: `-${offsetWidth}px` },\n      { opacity: 1, marginLeft: '0' },\n    ];\n  }\n  if (['top-right', 'right', 'bottom-right'].includes(placement)) {\n    return [\n      { opacity: 0, marginRight: `-${offsetWidth}px` },\n      { opacity: 1, marginRight: '0' },\n    ];\n  }\n  if (['top', 'center'].includes(placement)) {\n    return [\n      { opacity: 0, marginTop: `-${offsetHeight}px` },\n      { opacity: 1, marginTop: '0' },\n    ];\n  }\n  if (['bottom'].includes(placement)) {\n    return [\n      { opacity: 0, transform: `translate3d(0, ${offsetHeight}px, 0)` },\n      { opacity: 1, transform: 'translate3d(0, 0, 0)' },\n    ];\n  }\n}\n\nfunction getFadeOutKeyframes(placement: string, offsetHeight: Number): Array<Keyframe> | null {\n  if (!PLACEMENT_LIST.includes(placement)) return null;\n  if (['bottom-left', 'bottom', 'bottom-right'].includes(placement)) {\n    const marginOffset = `${offsetHeight}px`;\n    return [\n      { opacity: 1, marginTop: '0px' },\n      { opacity: 0, marginTop: marginOffset },\n    ];\n  }\n  const marginOffset = `-${offsetHeight}px`;\n  return [\n    { opacity: 1, marginTop: '0px' },\n    { opacity: 0, marginTop: marginOffset },\n  ];\n}\n\nexport { fadeIn, fadeOut };\n"],"names":["duration","easing","setDomStyleAfterAnimation","dom","onFinish","opacity","marginLeft","marginRight","marginTop","transform"],"mappings":"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"}