3862-5f4fa4829b21a4f839ea.js.map

{"version":3,"file":"3862-5f4fa4829b21a4f839ea.js","mappings":"uIAAA,k+I","sources":["webpack://embla-carousel-docs/./src/components/Sandbox/React/SandboxFilesDist/Parallax/EmblaCarousel.jsx"],"sourcesContent":["export default \"import React, { useCallback, useEffect, useRef } from 'react';\\nimport useEmblaCarousel from 'embla-carousel-react';\\nimport { NextButton, PrevButton, usePrevNextButtons } from '../EmblaCarouselArrowButtons';\\nimport { DotButton, useDotButton } from '../EmblaCarouselDotButton';\\nimport { sandboxImages } from 'components/Sandbox/sandboxImages';\\n\\nconst TWEEN_FACTOR_BASE = 0.2;\\n\\nconst EmblaCarousel = (props) => {\\n    const { slides, options } = props;\\n    const [emblaRef, emblaApi] = useEmblaCarousel(options);\\n    const tweenFactor = useRef(0);\\n    const tweenNodes = useRef([]);\\n    \\n    const { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(emblaApi);\\n    \\n    const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } = usePrevNextButtons(emblaApi);\\n    \\n    const setTweenNodes = useCallback((emblaApi) => {\\n        tweenNodes.current = emblaApi.slideNodes().map((slideNode) => {\\n            return slideNode.querySelector('.embla__parallax__layer');\\n        });\\n    }, []);\\n    \\n    const setTweenFactor = useCallback((emblaApi) => {\\n        tweenFactor.current = TWEEN_FACTOR_BASE * emblaApi.scrollSnapList().length;\\n    }, []);\\n    \\n    const tweenParallax = useCallback((emblaApi, eventName) => {\\n        const engine = emblaApi.internalEngine();\\n        const scrollProgress = emblaApi.scrollProgress();\\n        const slidesInView = emblaApi.slidesInView();\\n        const isScrollEvent = eventName === 'scroll';\\n        \\n        emblaApi.scrollSnapList().forEach((scrollSnap, snapIndex) => {\\n            let diffToTarget = scrollSnap - scrollProgress;\\n            const slidesInSnap = engine.slideRegistry[snapIndex];\\n            \\n            slidesInSnap.forEach((slideIndex) => {\\n                if (isScrollEvent && !slidesInView.includes(slideIndex))\\n                    return;\\n                \\n                if (engine.options.loop) {\\n                    engine.slideLooper.loopPoints.forEach((loopItem) => {\\n                        const target = loopItem.target();\\n                        \\n                        if (slideIndex === loopItem.index && target !== 0) {\\n                            const sign = Math.sign(target);\\n                            \\n                            if (sign === -1) {\\n                                diffToTarget = scrollSnap - (1 + scrollProgress);\\n                            }\\n                            if (sign === 1) {\\n                                diffToTarget = scrollSnap + (1 - scrollProgress);\\n                            }\\n                        }\\n                    });\\n                }\\n                \\n                const translate = diffToTarget * (-1 * tweenFactor.current) * 100;\\n                const tweenNode = tweenNodes.current[slideIndex];\\n                tweenNode.style.transform = `translateX(${translate}%)`;\\n            });\\n        });\\n    }, []);\\n    \\n    useEffect(() => {\\n        if (!emblaApi)\\n            return;\\n        \\n        setTweenNodes(emblaApi);\\n        setTweenFactor(emblaApi);\\n        tweenParallax(emblaApi);\\n        \\n        emblaApi\\n            .on('reInit', setTweenNodes)\\n            .on('reInit', setTweenFactor)\\n            .on('reInit', tweenParallax)\\n            .on('scroll', tweenParallax)\\n            .on('slideFocus', tweenParallax);\\n    }, [emblaApi, tweenParallax]);\\n    \\n    return (<div className=\\\"embla\\\">\\n      <div className=\\\"embla__viewport\\\" ref={emblaRef}>\\n        <div className=\\\"embla__container\\\">\\n          {slides.map((index) => (<div className=\\\"embla__slide\\\" key={index}>\\n              <div className=\\\"embla__parallax\\\">\\n                <div className=\\\"embla__parallax__layer\\\">\\n                  <img className=\\\"embla__slide__img embla__parallax__img\\\" src={sandboxImages(index)} alt=\\\"Your alt text\\\"/>\\n                </div>\\n              </div>\\n            </div>))}\\n        </div>\\n      </div>\\n \\n      <div className=\\\"embla__controls\\\">\\n        <div className=\\\"embla__buttons\\\">\\n          <PrevButton onClick={onPrevButtonClick} disabled={prevBtnDisabled}/>\\n          <NextButton onClick={onNextButtonClick} disabled={nextBtnDisabled}/>\\n        </div>\\n \\n        <div className=\\\"embla__dots\\\">\\n          {scrollSnaps.map((_, index) => (<DotButton key={index} onClick={() => onDotButtonClick(index)} className={'embla__dot'.concat(index === selectedIndex ? ' embla__dot--selected' : '')}/>))}\\n        </div>\\n      </div>\\n    </div>);\\n};\\n\\nexport default EmblaCarousel;\\n\";"],"names":[],"sourceRoot":""}