{"version":3,"sources":["webpack:///./Scripts/Containers/FullscreenImageSlider.container.js","webpack:///./Scripts/Components/ProductPageImageSlider.js","webpack:///./Scripts/Components/SliderArrows.js"],"names":["props","showCloseButton","sources","videos","initialSlide","onClosed","dispatch","useDispatch","contentRef","createRef","isMobile","useIsMobile","useState","open","setOpen","zoomed","setZoomed","zoomClickPos","setZoomClickPos","visible","setVisible","currentSlide","setCurrentSlide","swiperInstance","setSwiperInstance","sliderLength","length","settings","spaceBetween","slidesPerView","freeModeSticky","resistanceRatio","loop","onSlideChange","instance","realIndex","onSwiper","useEffect","addOverlay","removeOverlay","current","focus","onZoom","e","stopPropagation","didZoomIn","clickPos","pageY","resetZoom","windowHeight","getBoundingClientRect","height","percentage","centeredClickPos","scrollHeight","scrollTo","top","behavior","getProgressMarginLeft","slidePrev","slideNext","onKeyUp","key","ReactDOM","createPortal","className","onClick","size","color","ref","tabIndex","src","idx","centerOnInit","wheel","wheelDisabled","panning","disabled","wrapperClass","contentClass","loading","video","autoPlay","muted","playsInline","target","paused","play","pause","sourceSrc","type","sourceType","style","width","marginLeft","SliderArrows","onLeftClick","onRightClick","document","body","images","showFullscreenImages","setShowFullscreenImages","useKeenSlider","initial","spacing","rubberband","move","s","details","relativeSlide","sliderRef","slider","img","moveToSlideRelative","thumbnail","alt","moveToSelectedVideo","srcSet","original","media","parentElement","classList","remove","add","prev","next","showBackground","leftEnabled","rightEnabled","leftVisible","rightVisible"],"mappings":"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","file":"24.46c1338595ea96d3f5de.js","sourcesContent":["import React, { createRef, useEffect, useState } from \"react\"\r\nimport ReactDOM from \"react-dom\"\r\nimport { X as CloseIcon } from \"phosphor-react\"\r\nimport { useKeenSlider } from \"keen-slider/react\"\r\nimport \"keen-slider/keen-slider.min.css\"\r\nimport { useDispatch } from \"react-redux\"\r\nimport { addOverlay, removeOverlay } from \"../Actions/Overlay.action\"\r\nimport { TransformWrapper, TransformComponent } from \"react-zoom-pan-pinch\";\r\nimport { Swiper, SwiperSlide } from 'swiper/react';\r\nimport(/* webpackPrefetch: true */ 'swiper/swiper.scss');\r\nimport useIsMobile from \"../Hooks/useIsMobile\";\r\nimport SliderArrows from \"../Components/SliderArrows\"\r\n\r\nexport default ({ showCloseButton = true, sources, videos = [], initialSlide = 0, onClosed } = props) => {\r\n    const dispatch = useDispatch()\r\n    const contentRef = createRef()\r\n    const isMobile = useIsMobile()\r\n\r\n    const [open, setOpen] = useState(true)\r\n    const [zoomed, setZoomed] = useState(false)\r\n    const [zoomClickPos, setZoomClickPos] = useState(0)\r\n    const [visible, setVisible] = useState(false)\r\n    const [currentSlide, setCurrentSlide] = useState(initialSlide)\r\n    const [swiperInstance, setSwiperInstance] = useState()\r\n    const sliderLength = sources.length + videos.length;\r\n \r\n    const settings = {\r\n        initialSlide: initialSlide,\r\n        spaceBetween: 4,\r\n        slidesPerView: 1,\r\n        freeModeSticky: true,\r\n        resistanceRatio: 0,\r\n        loop: sliderLength > 0,\r\n        onSlideChange: instance => setCurrentSlide(instance.realIndex),\r\n        onSwiper: instance => {\r\n            setSwiperInstance(instance)\r\n        },\r\n    }\r\n\r\n    /**\r\n     * Set \"open\" to true on mount\r\n     */\r\n    useEffect(() => {\r\n        setVisible(true)\r\n        dispatch(addOverlay(\"FullscreenWindow\", () => {\r\n            setOpen(false)\r\n        }))\r\n    }, [])\r\n\r\n    useEffect(() => {\r\n        if(!open) {\r\n            dispatch(removeOverlay(\"FullscreenWindow\"))\r\n            onClosed && onClosed()\r\n        }\r\n    }, [open])\r\n\r\n    useEffect(() => {\r\n        if (open) {\r\n            contentRef.current.focus();\r\n        }\r\n    }, [open]);\r\n\r\n    const onZoom = e => {\r\n        e.stopPropagation()\r\n        const didZoomIn = !zoomed\r\n        const clickPos = e.pageY\r\n        setZoomClickPos(didZoomIn ? clickPos : 0)\r\n        setZoomed(didZoomIn)\r\n    }\r\n\r\n    const resetZoom = () => {\r\n        setZoomClickPos(0)\r\n        setZoomed(false)\r\n    }\r\n\r\n    useEffect(() => {\r\n        if(zoomed) {\r\n            const windowHeight = contentRef.current.getBoundingClientRect().height\r\n            const percentage = zoomClickPos / windowHeight\r\n            const upScaledClickPos = contentRef.current.scrollHeight * percentage\r\n            const centeredClickPos = upScaledClickPos - (windowHeight / 2)\r\n            contentRef.current.scrollTo({ top: centeredClickPos, behavior: \"auto\" })\r\n        }\r\n    }, [zoomClickPos])\r\n\r\n    const getProgressMarginLeft = () => {\r\n        return ((currentSlide + 1) / sliderLength) * 100 - (100 / sliderLength) + \"%\"\r\n    }\r\n\r\n    const slidePrev = () => {\r\n        swiperInstance && swiperInstance.slidePrev()\r\n        !isMobile && resetZoom()\r\n    }\r\n\r\n    const slideNext = () => {\r\n        swiperInstance && swiperInstance.slideNext()\r\n        !isMobile && resetZoom()\r\n    }\r\n\r\n    const onKeyUp = e => {\r\n        switch(e.key) {\r\n            case \"Escape\":\r\n                setOpen(false)\r\n                resetZoom()\r\n                break\r\n            case \"ArrowLeft\":\r\n                slidePrev()\r\n                break\r\n            case \"ArrowRight\":\r\n                slideNext()\r\n                break\r\n        }\r\n    }\r\n\r\n    return open && ReactDOM.createPortal(\r\n        <div className={`fullscreen-window ${visible && \"fullscreen-window--visible\"} ${zoomed ? \"zoomed\" : \"\"}`}>\r\n            {showCloseButton && <div className=\"fullscreen-window__close-btn\" onClick={() => setOpen(false)}><CloseIcon size={isMobile ? \"20\" : \"24\"} color=\"#181818\" /></div>}\r\n            <div className=\"fullscreen-window__content\" ref={contentRef} onKeyUp={onKeyUp} tabIndex={0} >\r\n                <Swiper {...settings}>\r\n                    {sources.map((src, idx) => \r\n                        <SwiperSlide key={\"fullwidth-image-slide\"+idx}>\r\n                            {/* Use \"zoom\" library on mobile */}\r\n                            {isMobile && <TransformWrapper \r\n                                centerOnInit={true}\r\n                                wheel={{wheelDisabled: true}}\r\n                                panning={{ disabled: true }}>\r\n                                    <TransformComponent wrapperClass=\"fullscreen-window__transform-wrapper\" contentClass=\"fullscreen-window__transform-component\">\r\n                                        <img src={src}  loading={idx == 0 ? \"eager\" : \"lazy\"} />\r\n                                    </TransformComponent>\r\n                            </TransformWrapper>}\r\n\r\n                            {/* Use zoom-on-click in desktop*/}\r\n                            {!isMobile && <img src={src} loading={idx == 0 ? \"eager\" : \"lazy\"} onClick={onZoom} />}\r\n                        </SwiperSlide>\r\n                    )}\r\n                    {videos.map((video, idx) => \r\n                        <SwiperSlide key={\"fullwidth-image-slide\"+idx}>\r\n                            <video\r\n                                autoPlay\r\n                                muted\r\n                                loop\r\n                                playsInline\r\n                                onClick={e => {\r\n                                    if (e.target.paused) {\r\n                                        e.target.play();\r\n                                    } else {\r\n                                        e.target.pause();\r\n                                    }\r\n                                }}\r\n                                loading=\"lazy\">\r\n                                <source src={video.sourceSrc} type={video.sourceType} />\r\n                            </video>\r\n                        </SwiperSlide>\r\n                    )}\r\n                </Swiper>\r\n                {sliderLength > 0 && <div className=\"slider-slidebar\">\r\n                    <div className=\"slider-slidebar__wrapper\">\r\n                        <div style={{width: 100 / sliderLength + \"%\", marginLeft: getProgressMarginLeft()}} className=\"slider-slidebar__visible\">\r\n                        </div>\r\n                    </div>\r\n                </div>}\r\n                <SliderArrows\r\n                    className=\"d-flex\"\r\n                    size={isMobile ? 20 : 24}\r\n                    color=\"white\"\r\n                    onLeftClick={() => slidePrev()} \r\n                    onRightClick={() => slideNext()}\r\n                />\r\n            </div>\r\n        </div>,\r\n        document.body\r\n    )\r\n}","import React, { useState } from \"react\"\r\nimport { useKeenSlider } from \"keen-slider/react\"\r\nimport \"keen-slider/keen-slider.min.css\"\r\nimport { CaretLeft, CaretRight } from \"phosphor-react\"\r\nimport FullscreenImageSlider from \"../Containers/FullscreenImageSlider.container\"\r\n\r\nexport default ({ images, videos }) => {\r\n    const [showFullscreenImages, setShowFullscreenImages] = useState(false)\r\n    const [currentSlide, setCurrentSlide] = useState(0)\r\n    const [sliderRef, slider] = useKeenSlider({\r\n        initial: 0,\r\n        slidesPerView: 1,\r\n        spacing: 4,\r\n        loop: images.length > 1,\r\n        rubberband: images.length > 1,\r\n        move(s) {\r\n          setCurrentSlide(s.details().relativeSlide)\r\n        },\r\n    })\r\n\r\n    const onArrowLeftClick = (e) => {\r\n        e.stopPropagation() || slider.prev()\r\n    } \r\n    const onArrowRightClick = (e) => {\r\n        e.stopPropagation() || slider.next()\r\n    }\r\n    const getMarginLeft = () => {\r\n        return ((currentSlide + 1) / slider.details().size) * 100 - (100 / slider.details().size) + \"%\"\r\n    }\r\n\r\n    const onImageClick = (img, idx) => {\r\n        setShowFullscreenImages(true)\r\n    }\r\n    const moveToSelectedVideo = (idx) => {\r\n        slider.moveToSlideRelative(images.length + idx)\r\n    };\r\n\r\n    return <><div className=\"row expanded no-padding\">\r\n        {slider && (\r\n            <div className=\"medium-1 columns productPage-thumbnails\">\r\n                {images.map((img, idx) => \r\n                    <div className={\"productPage-thumbnails--item \" + (currentSlide === idx ? \"productPage-thumbnails--item--active\" : \"\")} key={\"thumbnail\"+idx}>\r\n                        <button className=\"productPage-thumbnails--item__button\" onClick={() => slider.moveToSlideRelative(idx)}>\r\n                            <img\r\n                                src={img.thumbnail}\r\n                                loading=\"lazy\"\r\n                                alt={img.alt}\r\n                            />\r\n                        </button>\r\n                    </div>\r\n                )}\r\n                {videos.map((video, idx) => \r\n                    <div className={\"productPage-thumbnails--item  productPage-thumbnails--item--video \" + (currentSlide === idx ? \"productPage-thumbnails--item--active\" : \"\")} key={\"thumbnail\"+idx}>\r\n                        <button className=\"productPage-thumbnails--item__button\" onClick={() => moveToSelectedVideo(idx)}>\r\n                            <video src={video.sourceSrc} />\r\n                            <i className=\"ph-play-fill\"></i>\r\n                        </button>\r\n                    </div>\r\n                )}\r\n            </div>\r\n        )}\r\n        <div className=\"small-12 medium-11 columns productPage-slider\">\r\n            <div className=\"productPage-slider__wrapper\">\r\n                <div ref={sliderRef} className=\"keen-slider\">\r\n                    {images.map((img, idx) => \r\n                        <div className=\"keen-slider__slide productPage-slide\" key={\"image-slide\"+idx} onClick={() => onImageClick(img, idx)}>\r\n                            <picture>\r\n                                <source srcSet={img.original} media=\"(min-width: 1920px)\" />\r\n                                <img src={img.src} className=\"productPage-slide__img\" loading=\"lazy\" alt={img.alt} />\r\n                            </picture>\r\n                        </div>\r\n                    )}\r\n                    {videos.map((video, idx) => \r\n                        <div className=\"keen-slider__slide productPage-slide\" key={\"video-slide\"+idx}>\r\n                            <video \r\n                            autoPlay\r\n                            muted\r\n                            loop\r\n                            playsInline\r\n                            onClick={e => {\r\n                                const pausedVideoClass = 'productPage-slide--video-paused';\r\n                                if (e.target.paused) {\r\n                                    e.target.play();\r\n                                    e.target.parentElement.classList.remove(pausedVideoClass);\r\n                                } else {\r\n                                    e.target.pause();\r\n                                    e.target.parentElement.classList.add(pausedVideoClass);\r\n                                }\r\n                            }}\r\n                            className=\"productPage-slide__img\" \r\n                            loading=\"lazy\">\r\n                                <source src={video.sourceSrc} type={video.sourceType} />\r\n                            </video>\r\n                            <i className=\"productPage-slide__play-icon ph-play-fill\"></i>\r\n                        </div>\r\n                    )}\r\n                </div>\r\n                {slider && images.length > 1 && (\r\n                    <>\r\n                        <div className=\"arrow-wrapper left\" onClick={onArrowLeftClick}>\r\n                            <CaretLeft size=\"30\" color=\"white\" />\r\n                        </div>\r\n                        <div className=\"arrow-wrapper right\" onClick={onArrowRightClick}>\r\n                            <CaretRight size=\"30\" color=\"white\" />\r\n                        </div>\r\n                        <div className=\"slider-slidebar\">\r\n                            <div className=\"slider-slidebar__wrapper\">\r\n                                <div style={{width: 100 / slider.details().size + \"%\", marginLeft: getMarginLeft()}} className=\"slider-slidebar__visible\">\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </>\r\n                )}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    {showFullscreenImages && \r\n        <FullscreenImageSlider\r\n            sources={images.map(img => img.original)}\r\n            videos={videos}\r\n            onClosed={() => setShowFullscreenImages(false)} \r\n            initialSlide={currentSlide}\r\n        />\r\n    }\r\n    </>\r\n}\r\n","import { CaretLeft, CaretRight } from \"phosphor-react\"\r\nimport React from \"react\"\r\n\r\nexport default ({ className = \"\", onLeftClick, color, showBackground = true, onRightClick, leftEnabled = true, rightEnabled = true, leftVisible = true, rightVisible = true, size }) => (<>\r\n    {leftVisible && <div className={`slider-arrow slider-arrow--left ${className} ${!showBackground ? \"slider-arrow--hide-background\": \"\"}`} onClick={leftEnabled && onLeftClick}>\r\n        <CaretLeft size={size} color={color} />\r\n    </div>}\r\n    {rightVisible && <div className={`slider-arrow slider-arrow--right ${className} ${!showBackground ? \"slider-arrow--hide-background\" : \"\"}`} onClick={rightEnabled && onRightClick}>\r\n        <CaretRight size={size} color={color} />\r\n    </div>}\r\n</>)"],"sourceRoot":""}