{"version":3,"sources":["../src/Marquee/index.tsx","../src/Marquee/utils.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { MarqueeAnimation, MarqueeProps } from './interface';\nimport {\n\tgenerateSlideStyles,\n\tgetPlayStateVariable,\n\tgetRotateInDeg,\n\tgetTranslateProp,\n\tgetWrapperClassName,\n\tgetWrapperStyles,\n\thandleInitialSlide,\n\thandleReplication,\n} from './utils';\n\nexport const Marquee = ({\n\tid,\n\tspeed = 50,\n\tplay = true,\n\tchildren = [],\n\tdirection = 'left',\n\tinitialSlideIndex = 0,\n\tpauseOnHover = false,\n}: MarqueeProps) => {\n\tconst wrapperRef = useRef<HTMLUListElement>(null);\n\tconst [marqueeId] = useState(`marquee_${id || (Math.random() + '').slice(2)}`);\n\tconst [rotateInDeg] = useState(getRotateInDeg(direction));\n\tconst [slides, setSlides] = useState<React.ReactNode[]>(() =>\n\t\thandleInitialSlide(initialSlideIndex, children),\n\t);\n\n\tuseEffect(() => {\n\t\tconst wrapper = wrapperRef?.current;\n\t\tif (!wrapper || !marqueeId) return;\n\n\t\tvar styleElement = document.createElement('style');\n\t\tstyleElement.setAttribute('type', 'text/css');\n\t\tstyleElement.setAttribute('id', marqueeId);\n\n\t\tdocument.head.appendChild(styleElement);\n\n\t\tconst styleSheet = styleElement.sheet;\n\t\tconst playStateVariable = getPlayStateVariable(marqueeId);\n\t\tconst wrapperClassName = getWrapperClassName(marqueeId);\n\t\tconst insertRule = (rule: string) =>\n\t\t\t!!rule && styleSheet?.insertRule?.(rule, 0);\n\n\t\t[\n\t\t\t`:root {\n\t\t\t\t${playStateVariable}: ${play ? 'running' : 'paused'};\n\t\t\t}`,\n\t\t\tpauseOnHover\n\t\t\t\t? `.${wrapperClassName}:hover {\n\t\t\t\t\t\t${playStateVariable}: paused;\n\t\t\t\t\t}`\n\t\t\t\t: '',\n\t\t].forEach(insertRule);\n\n\t\tconst translateProp = getTranslateProp(direction);\n\t\tconst { slideEdges, finalSlides, contentSize } = handleReplication(\n\t\t\twrapper,\n\t\t\tdirection,\n\t\t\tslides,\n\t\t);\n\t\tconst totalAnimationDuration = ((contentSize / speed) * 1000) | 0;\n\n\t\tsetSlides(finalSlides);\n\n\t\tslideEdges.forEach((slideEndingEdge, index) => {\n\t\t\tconst firstAnimationDuration =\n\t\t\t\t((slideEndingEdge / speed) * 1000) | 0;\n\t\t\tconst animationConfigs: MarqueeAnimation[] = [\n\t\t\t\t{\n\t\t\t\t\tfrom: '0px',\n\t\t\t\t\tto: `${-slideEndingEdge}px`,\n\t\t\t\t\tdelay: 0,\n\t\t\t\t\tduration: firstAnimationDuration,\n\t\t\t\t\tcount: 1,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tfrom: `${contentSize - slideEndingEdge}px`,\n\t\t\t\t\tto: `${-slideEndingEdge}px`,\n\t\t\t\t\tdelay: firstAnimationDuration,\n\t\t\t\t\tduration: totalAnimationDuration,\n\t\t\t\t\tcount: 'infinite',\n\t\t\t\t},\n\t\t\t];\n\t\t\tgenerateSlideStyles(\n\t\t\t\twrapperClassName,\n\t\t\t\tmarqueeId,\n\t\t\t\tindex,\n\t\t\t\ttranslateProp,\n\t\t\t\trotateInDeg,\n\t\t\t\tanimationConfigs,\n\t\t\t).forEach(insertRule);\n\t\t});\n\n\t\treturn () => {\n\t\t\tdocument.documentElement.style.removeProperty(playStateVariable);\n\t\t\tdocument.head.removeChild(styleElement);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tconst wrapper = wrapperRef?.current;\n\t\tif (!wrapper || !marqueeId) return;\n\n\t\tconst playStateVariable = getPlayStateVariable(marqueeId);\n\t\tdocument.documentElement.style.setProperty(playStateVariable, play ? 'running' : 'paused');\n\t}, [play]);\n\n\tif (!children.length) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ul ref={wrapperRef} className={getWrapperClassName(marqueeId)} style={getWrapperStyles(direction, rotateInDeg)}>\n\t\t\t{slides.map((slide, slideIndex) => (\n\t\t\t\t<li key={slideIndex}>{slide}</li>\n\t\t\t))}\n\t\t</ul>\n\t);\n};\n\nMarquee.displayName = 'Marquee';\n\nexport default Marquee;\n","import { CSSProperties } from 'react';\nimport { MarqueeAnimation, MarqueeDirection } from './interface';\n\nexport const getWrapperClassName = (marqueeId: string): string => {\n\treturn `${marqueeId}_wrapper`;\n};\n\nexport const getPlayStateVariable = (marqueeId: string): string => {\n\treturn `--${marqueeId}_play_state`;\n};\n\nexport const getWrapperStyles = (direction: MarqueeDirection, rotateInDeg: string): CSSProperties => {\n\treturn {\n\t\twidth: '100%',\n\t\theight: '100%',\n\t\tdisplay: 'flex',\n\t\tflexDirection: direction === 'left' || direction === 'right'\n\t\t\t? 'row' : 'column',\n\t\toverflow: 'hidden',\n\t\tlistStyle: 'none',\n\t\t...(rotateInDeg && { transform: rotateInDeg })\n\t};\n}\n\nexport const handleInitialSlide = (\n\tinitialSlideIndex: number,\n\tslides: React.ReactNode[],\n) => {\n\tif (!initialSlideIndex) return slides;\n\n\treturn slides\n\t\t.slice(initialSlideIndex)\n\t\t.concat(slides.slice(0, initialSlideIndex));\n};\n\nexport const generateSlideStyles = (\n\twrapperClassName: string,\n\tmarqueeId: string,\n\tslideIndex: number,\n\ttranslateProp: string,\n\trotateInDeg: string,\n\tanimationConfigs: MarqueeAnimation[],\n): string[] => {\n\tconst animations: string[] = [];\n\tconst styles: string[] = [];\n\n\tanimationConfigs.forEach((animation, index) => {\n\t\tconst keyFrameId = `${marqueeId}_keyframe_slide${slideIndex}_${index}`;\n\n\t\tstyles.push(`@keyframes ${keyFrameId}  {\n        0% { transform: ${translateProp}(${animation.from}) ${rotateInDeg}; }\n        100% { transform: ${translateProp}(${animation.to}) ${rotateInDeg}; }\n      }\n    `);\n\t\tanimations.push(\n\t\t\t`${animation.duration}ms linear ${animation.delay}ms ${animation.count} ${keyFrameId}`,\n\t\t);\n\t});\n\n\tstyles.push(`.${wrapperClassName} > :nth-child(${slideIndex + 1}) {\n\t\tanimation: ${animations.join(',')};\n\t\tanimation-play-state: var(${getPlayStateVariable(marqueeId)});\n\t}`);\n\n\treturn styles;\n};\n\nexport const getTranslateProp = (direction: MarqueeDirection): string => {\n\treturn direction === 'left' || direction === 'right'\n\t\t? 'translateX'\n\t\t: 'translateY';\n};\n\nexport const getRotateInDeg = (direction: MarqueeDirection): string => {\n\tlet deg = 0;\n\tlet rotateStyle = '';\n\n\tif (direction === 'right') {\n\t\tdeg = 180;\n\t\trotateStyle = 'rotateY';\n\t}\n\n\tif (direction === 'down') {\n\t\tdeg = 180;\n\t\trotateStyle = 'rotateX';\n\t}\n\n\treturn deg ? `${rotateStyle}(${deg}deg)` : '';\n};\n\nconst getDistanceBetweenEdges = (direction: MarqueeDirection, startRect: DOMRect, endRect: DOMRect): number => {\n\tlet distance = startRect.bottom - endRect.top; // down\n\n\tif (direction === 'left') distance = endRect.right - startRect.left;\n\telse if (direction === 'right') distance = startRect.right - endRect.left;\n\telse if (direction === 'up') distance = endRect.bottom - startRect.top;\n\n\treturn distance;\n}\n\nexport const getContentSize = (\n\tchildren: HTMLElement[],\n\tdirection: MarqueeDirection,\n) => {\n\tconst firstChildRect = children[0].getBoundingClientRect();\n\tconst lastChildRect = children[children.length - 1].getBoundingClientRect();\n\n\treturn getDistanceBetweenEdges(direction, firstChildRect, lastChildRect);\n};\n\nexport const getSlideEndingEdge = (\n\tparentElement: HTMLUListElement,\n\tslideElement: HTMLUListElement,\n\tdirection: MarqueeDirection,\n): number => {\n\tconst parentRect = parentElement.getBoundingClientRect();\n\tconst slideRect = slideElement.getBoundingClientRect();\n\n\treturn getDistanceBetweenEdges(direction, parentRect, slideRect);\n};\n\nconst getNodeSize = (\n\tnode: HTMLElement,\n\tdirection: MarqueeDirection,\n): number => {\n\tconst rect = node.getBoundingClientRect();\n\treturn direction === 'left' || direction === 'right'\n\t\t? rect.right - rect.left\n\t\t: rect.bottom - rect.top;\n};\n\nexport const handleReplication = (\n\twrapper: HTMLUListElement,\n\tdirection: MarqueeDirection,\n\tchildren: React.ReactNode[],\n): {\n\tslideEdges: number[];\n\tfinalSlides: React.ReactNode[];\n\tcontentSize: number;\n} => {\n\tconst wrapperSize = getNodeSize(wrapper, direction);\n\tconst finalSlides = [...children];\n\tconst slideEdges: number[] = [];\n\tconst childElements = Array.from(wrapper.children) as HTMLUListElement[];\n\tconst initialSlidesCount = childElements.length;\n\tlet contentSize = getContentSize(childElements, direction);\n\tlet needsReplication = false;\n\n\tchildElements.forEach(slide => {\n\t\tslideEdges.push(getSlideEndingEdge(wrapper, slide, direction));\n\t\tneedsReplication ||=\n\t\t\tcontentSize - getNodeSize(slide, direction) < wrapperSize;\n\t});\n\n\tif (needsReplication) {\n\t\tlet replicationCount = 1;\n\t\tif (contentSize <= wrapperSize) {\n\t\t\treplicationCount = Math.floor(wrapperSize / contentSize + 1);\n\t\t}\n\n\t\tfor (let i = 1; i <= replicationCount; i++) {\n\t\t\tfinalSlides.push(...children);\n\n\t\t\tconst offset = contentSize * i;\n\t\t\tfor (let j = 0; j < initialSlidesCount; j++) {\n\t\t\t\tslideEdges.push(slideEdges[j] + offset);\n\t\t\t}\n\t\t}\n\n\t\t// update after using it to calculate offsets above\n\t\tcontentSize = (replicationCount + 1) * contentSize;\n\t}\n\n\treturn {\n\t\tfinalSlides,\n\t\tslideEdges,\n\t\tcontentSize,\n\t};\n};\n"],"mappings":"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","names":[]}