{"version":3,"sources":["webpack:///./Scripts/Components/SliderThumbnails.js","webpack:///./Scripts/Components/FullscreenImageSlider.js","webpack:///./Scripts/Components/ProductImageSlider.js"],"names":["images","sliderRef","activeSlide","isMobile","useIsMobile","className","map","img","index","key","thumbnailSrc","onClick","current","slickGoTo","src","alt","showCloseButton","initialSlide","onClosed","showThumbnails","props","dispatch","useDispatch","contentRef","createRef","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","size","color","touchThreshold","centerOnInit","wheel","wheelDisabled","panning","disabled","velocityDisabled","limitToBounds","velocityAnimation","doubleClick","mode","onPanningStop","onZoomStop","wrapperClass","contentClass","hdSrc","loading","originalSrc","length","slickPrev","slickNext","body","minHeight","otherProductTags","hasConfigurator","setActiveSlide","showFullscreenImages","setShowFullscreenImages","selectedVariant","useSelector","productPage","imageUrls","imageIndex","findIndex","indexOf","sliderSettings","style","position","tag","translate"],"mappings":"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","file":"480.e3b57687.js","sourcesContent":["import React from 'react';\nimport { ArrowLeft, ArrowRight } from 'phosphor-react';\nimport useIsMobile from '../Hooks/useIsMobile';\n\nconst SliderThumbnails = ({ images, sliderRef, activeSlide }) => {\n  const isMobile = useIsMobile();\n  return (\n    <div className=\"slider-thumbnails\">\n      {!isMobile &&\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            />\n          </div>\n        ))}\n    </div>\n  );\n};\n\nexport default SliderThumbnails;\n","import React, { createRef, useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport { ArrowLeft, ArrowRight, 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';\n\nimport useIsMobile from '../Hooks/useIsMobile';\nimport SliderThumbnails from './SliderThumbnails';\nimport slider from 'react-slick/lib/slider';\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: (index) => {\n      setIsSliding(false);\n    },\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  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                        alt=\"\"\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 && (\n                  <img\n                    alt=\"\"\n                    src={zoomed ? img.originalSrc : img.hdSrc}\n                    onClick={onZoom}\n                  />\n                )}\n              </div>\n            ))}\n          </Slider>\n          <div className=\"fullscreen-image-slider__mobile-footer\">\n            <div>\n              {currentSlide + 1} / {images.length}\n            </div>\n            <div className=\"fullscreen-image-slider__mobile-footer__navigation\">\n              <button\n                onClick={() => sliderRef.current.slickPrev()}\n                aria-label=\"Previous slide\"\n              >\n                <ArrowLeft size={16} />\n              </button>\n              <button\n                onClick={() => sliderRef.current.slickNext()}\n                aria-label=\"Next slide\"\n              >\n                <ArrowRight size={16} />\n              </button>\n            </div>\n          </div>\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, { useEffect, useRef, useState } from 'react';\nimport { useSelector } from 'react-redux';\nimport Slider from 'react-slick';\nimport useIsMobile from '../Hooks/useIsMobile';\nimport { translate } from '../Services/translation';\nimport FullscreenImageSlider from './FullscreenImageSlider';\nimport SliderThumbnails from './SliderThumbnails';\n\nconst ProductImageSlider = ({\n  images,\n  minHeight,\n  otherProductTags,\n  hasConfigurator,\n}) => {\n  const sliderRef = useRef();\n  const [activeSlide, setActiveSlide] = useState(0);\n  const [showFullscreenImages, setShowFullscreenImages] = useState(false);\n  const [isSliding, setIsSliding] = useState(false);\n  const isMobile = useIsMobile();\n\n  const { selectedVariant } = useSelector((state) => state.productPage);\n\n  useEffect(() => {\n    if (!selectedVariant || !sliderRef?.current) return;\n    if (selectedVariant.imageUrls?.length > 0) {\n      const imageIndex = images.findIndex(\n        (img) => img.src.indexOf(selectedVariant.imageUrls[0]) != -1\n      );\n      if (imageIndex == -1) return;\n      sliderRef.current.slickGoTo(imageIndex);\n    }\n  }, [selectedVariant, sliderRef, images]);\n\n  const sliderSettings = {\n    lazyLoad: false,\n    infinite: false,\n    speed: 200,\n    slidesToShow: isMobile ? 1.4 : 1,\n    slidesToScroll: 1,\n    arrows: false,\n    beforeChange: (_, index) => setActiveSlide(Math.round(index)),\n    onSwipe: () => setIsSliding(true),\n    afterChange: () => setIsSliding(false),\n  };\n\n  return (\n    <>\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      <div style={{ position: 'relative' }}>\n        <Slider\n          {...sliderSettings}\n          ref={sliderRef}\n          style={{ minHeight: isMobile ? 0 : 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        <div className=\"[ product-tags ] [ flex-container flex-row ]\">\n          {otherProductTags?.map((tag, idx) => (\n            <span className=\"product-tags__tag\" key={idx + tag}>\n              {tag}\n            </span>\n          ))}\n          {hasConfigurator && (\n            <span className=\"product-tags__tag\">\n              {translate('product.custom-size')}\n            </span>\n          )}\n        </div>\n      </div>\n    </>\n  );\n};\n\nexport default ProductImageSlider;\n"],"sourceRoot":""}