{"version":3,"sources":["webpack:///./Scripts/Components/SliderThumbnails.js","webpack:///./Scripts/Components/FullscreenImageSlider.js","webpack:///./Scripts/Components/ProductImageSlider.js"],"names":["images","sliderRef","activeSlide","className","onClick","current","slickPrev","size","map","img","index","key","thumbnailSrc","slickGoTo","src","alt","loading","slickNext","showCloseButton","initialSlide","onClosed","showThumbnails","props","dispatch","useDispatch","contentRef","createRef","isMobile","useIsMobile","open","setOpen","useState","zoomed","setZoomed","zoomClickPos","setZoomClickPos","visible","setVisible","currentSlide","setCurrentSlide","isSliding","setIsSliding","doubleClickMode","setDoubleClickMode","swipingEnabled","setSwipingEnabled","transformComponentRefs","useRef","settings","lazyLoad","infinite","speed","slidesToShow","slidesToScroll","arrows","swipe","beforeChange","_","forEach","ref","resetTransform","onSwipe","afterChange","onKeyDown","e","useEffect","addOverlay","document","addEventListener","removeEventListener","removeOverlay","onZoom","stopPropagation","didZoomIn","clickPos","pageY","windowHeight","getBoundingClientRect","height","percentage","centeredClickPos","scrollHeight","scrollTo","top","behavior","onMobileZoom","idx","setTimeout","doubleClickModeCopy","Object","assign","Math","round","state","scale","ReactDOM","color","touchThreshold","centerOnInit","wheel","wheelDisabled","panning","disabled","velocityDisabled","limitToBounds","velocityAnimation","doubleClick","mode","onPanningStop","onZoomStop","wrapperClass","contentClass","hdSrc","body","minHeight","setActiveSlide","showFullscreenImages","setShowFullscreenImages","sliderSettings","style"],"mappings":"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","file":"176.47d7b2e44d50260a35f3.js","sourcesContent":["import React from 'react';\nimport { ArrowLeft, ArrowRight } from 'phosphor-react';\nimport 'Styles/components/slider-thumbnails.scss';\n\nconst SliderThumbnails = ({ images, sliderRef, activeSlide }) => {\n  return (\n    <div className=\"slider-thumbnails\">\n      <button\n        onClick={() => sliderRef.current.slickPrev()}\n        aria-label=\"Previous slide\"\n      >\n        <ArrowLeft size={16} />\n      </button>\n      {images.map((img, index) => (\n        <div\n          key={img.thumbnailSrc}\n          className={activeSlide == index ? 'active' : ''}\n        >\n          <img\n            onClick={() => sliderRef.current.slickGoTo(index)}\n            src={img.thumbnailSrc}\n            alt={img.alt}\n            loading=\"lazy\"\n          />\n        </div>\n      ))}\n      <button\n        onClick={() => sliderRef.current.slickNext()}\n        aria-label=\"Next slide\"\n      >\n        <ArrowRight size={16} />\n      </button>\n    </div>\n  );\n};\n\nexport default SliderThumbnails;\n","import React, { createRef, useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { X as CloseIcon } from 'phosphor-react';\nimport { useDispatch } from 'react-redux';\nimport { addOverlay, removeOverlay } from '../Actions/Overlay.action';\nimport { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';\nimport Slider from 'react-slick';\nimport 'slick-carousel/slick/slick.css';\nimport 'Styles/components/fullscreen-image-slider.scss';\n\nimport useIsMobile from '../Hooks/useIsMobile';\nimport SliderThumbnails from './SliderThumbnails';\n\nconst FullscreenImageSlider = ({\n  showCloseButton = true,\n  images,\n  initialSlide = 0,\n  onClosed,\n  showThumbnails = true,\n} = props) => {\n  const dispatch = useDispatch();\n  const contentRef = createRef();\n  const isMobile = useIsMobile();\n\n  const [open, setOpen] = useState(true);\n  const [zoomed, setZoomed] = useState(false);\n  const [zoomClickPos, setZoomClickPos] = useState(0);\n  const [visible, setVisible] = useState(false);\n  const [currentSlide, setCurrentSlide] = useState(initialSlide);\n  const [isSliding, setIsSliding] = useState(false);\n  const [doubleClickMode, setDoubleClickMode] = useState(\n    images.map(() => 'zoomIn')\n  );\n  const [swipingEnabled, setSwipingEnabled] = useState(true);\n  const [transformComponentRefs] = useState(images.map(() => createRef()));\n  const sliderRef = useRef();\n\n  const settings = {\n    lazyLoad: true,\n    infinite: true,\n    speed: 200,\n    slidesToShow: 1,\n    slidesToScroll: 1,\n    arrows: false,\n    swipe: swipingEnabled,\n    initialSlide: initialSlide,\n    beforeChange: (_, index) => {\n      setCurrentSlide(index);\n      transformComponentRefs.forEach((ref) => ref?.current?.resetTransform());\n      setSwipingEnabled(true);\n    },\n    onSwipe: () => setIsSliding(true),\n    afterChange: () => setIsSliding(false),\n  };\n\n  const onKeyDown = (e) => {\n    if (e.key == 'Escape') {\n      setOpen(false);\n    }\n  };\n\n  /**\n   * Set \"open\" to true on mount\n   */\n  useEffect(() => {\n    setVisible(true);\n    dispatch(\n      addOverlay('FullscreenWindow', () => {\n        setOpen(false);\n      })\n    );\n    document.addEventListener('keydown', onKeyDown, false);\n\n    return () => {\n      document.removeEventListener('keydown', onKeyDown, false);\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!open) {\n      dispatch(removeOverlay('FullscreenWindow'));\n      onClosed && onClosed();\n    }\n  }, [open]);\n\n  const onZoom = (e) => {\n    if (isSliding) return;\n\n    e.stopPropagation();\n    const didZoomIn = !zoomed;\n    const clickPos = e.pageY;\n    setZoomClickPos(didZoomIn ? clickPos : 0);\n    setZoomed(didZoomIn);\n  };\n\n  useEffect(() => {\n    if (zoomed) {\n      const windowHeight = contentRef.current.getBoundingClientRect().height;\n      const percentage = zoomClickPos / windowHeight;\n      const upScaledClickPos = contentRef.current.scrollHeight * percentage;\n      const centeredClickPos = upScaledClickPos - windowHeight / 2;\n      contentRef.current.scrollTo({ top: centeredClickPos, behavior: 'auto' });\n    }\n  }, [zoomClickPos]);\n\n  const onMobileZoom = (e, idx) => {\n    setTimeout(() => {\n      let doubleClickModeCopy = Object.assign([], doubleClickMode);\n      doubleClickModeCopy[idx] =\n        Math.round(e.state.scale) >= 8 ? 'reset' : 'zoomIn';\n\n      setDoubleClickMode(doubleClickModeCopy);\n      setSwipingEnabled(e.state.scale <= 1);\n    }, 200);\n  };\n\n  return (\n    open &&\n    ReactDOM.createPortal(\n      <div\n        className={`fullscreen-image-slider ${\n          visible && 'fullscreen-image-slider--visible'\n        } ${zoomed ? 'zoomed' : ''}`}\n      >\n        <div className=\"fullscreen-image-slider__content\" ref={contentRef}>\n          {showCloseButton && (\n            <div\n              className=\"fullscreen-image-slider__close-btn\"\n              onClick={() => setOpen(false)}\n            >\n              <CloseIcon size={isMobile ? '20' : '24'} color=\"#181818\" />\n            </div>\n          )}\n          <Slider {...settings} ref={sliderRef} touchThreshold={20}>\n            {images.map((img, idx) => (\n              <div key={'fullwidth-image-slide' + idx}>\n                {/* Use \"zoom\" library on mobile */}\n                {isMobile && (\n                  <TransformWrapper\n                    ref={transformComponentRefs[idx]}\n                    centerOnInit={true}\n                    wheel={{ wheelDisabled: true }}\n                    panning={{\n                      disabled: swipingEnabled,\n                      velocityDisabled: true,\n                    }}\n                    limitToBounds={true}\n                    velocityAnimation={{ disabled: true }}\n                    doubleClick={{ mode: doubleClickMode[idx] }}\n                    onPanningStop={(e) => onMobileZoom(e, idx)}\n                    onZoomStop={(e) => onMobileZoom(e, idx)}\n                  >\n                    <TransformComponent\n                      wrapperClass=\"fullscreen-image-slider__transform-wrapper\"\n                      contentClass=\"fullscreen-image-slider__transform-component\"\n                    >\n                      <img\n                        src={img.hdSrc}\n                        loading={idx == 0 ? 'eager' : 'lazy'}\n                      />\n                    </TransformComponent>\n                  </TransformWrapper>\n                )}\n\n                {/* Use zoom-on-click in desktop*/}\n                {!isMobile && <img src={img.hdSrc} onClick={onZoom} />}\n              </div>\n            ))}\n          </Slider>\n          {showThumbnails && (\n            <SliderThumbnails\n              images={images}\n              sliderRef={sliderRef}\n              activeSlide={currentSlide}\n            />\n          )}\n        </div>\n      </div>,\n      document.body\n    )\n  );\n};\n\nexport default FullscreenImageSlider;\n","import React, { useRef, useState } from 'react';\nimport Slider from 'react-slick';\nimport 'slick-carousel/slick/slick.css';\nimport FullscreenImageSlider from './FullscreenImageSlider';\nimport SliderThumbnails from './SliderThumbnails';\nimport 'Styles/components/product-image-slider.scss';\n\nconst ProductImageSlider = ({ images, minHeight }) => {\n  const sliderRef = useRef();\n  const [activeSlide, setActiveSlide] = useState(0);\n  const [showFullscreenImages, setShowFullscreenImages] = useState(false);\n  const [isSliding, setIsSliding] = useState(false);\n\n  const sliderSettings = {\n    lazyLoad: false,\n    infinite: true,\n    speed: 200,\n    slidesToShow: 1,\n    slidesToScroll: 1,\n    arrows: false,\n    beforeChange: (_, index) => setActiveSlide(index),\n    onSwipe: () => setIsSliding(true),\n    afterChange: () => setIsSliding(false),\n  };\n\n  return (\n    <>\n      <Slider\n        {...sliderSettings}\n        ref={sliderRef}\n        style={{ minHeight: minHeight + 'px' }}\n      >\n        {images.map((img) => (\n          <div\n            key={img.src}\n            onClick={() => !isSliding && setShowFullscreenImages(true)}\n          >\n            <img src={img.src} alt={img.alt} />\n          </div>\n        ))}\n      </Slider>\n      <SliderThumbnails\n        images={images}\n        sliderRef={sliderRef}\n        activeSlide={activeSlide}\n      />\n      {showFullscreenImages && (\n        <FullscreenImageSlider\n          images={images}\n          onClosed={() => setShowFullscreenImages(false)}\n          initialSlide={activeSlide}\n        />\n      )}\n    </>\n  );\n};\n\nexport default ProductImageSlider;\n"],"sourceRoot":""}