{"version":3,"file":"LightBox-xZM735L8-chunk.js","sources":["../../../src/components/utility/lightbox/LightBoxContent.tsx","../../../src/components/utility/lightbox/LightBox.jsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { DDXModal } from \"components/ddx-modal/DDXModal\";\nimport ButtonIcon from \"components/utility/button/ButtonIcon\";\nimport * as PageResponsive from \"components/utility/page-responsive/PageResponsive\";\n\ntype LightBoxContentProps = {\n\tdata: {\n\t\tsrc: string;\n\t\talt: string;\n\t};\n};\n\nconst LightBoxContent = ({ data }: LightBoxContentProps) => {\n\tconst { src, alt } = data;\n\tconst [modalIsOpen, setModalIsOpen] = useState(false);\n\tconst [zoomToggle, setZoomToggle] = useState(true);\n\tconst [isDesktop, setIsDesktop] = useState(false);\n\tconst [style, setStyle] = useState<React.CSSProperties>({ maxWidth: \"60rem\" });\n\tconst [widthInitial, setWidthInitial] = useState(960);\n\tconst [isSmallImage, setIsSmallImage] = useState(false);\n\tconst [isVerticalImage, setIsVerticalImage] = useState(false);\n\tconst [maxWidth, setMaxWidth] = useState(60);\n\n\tconst openModal = () => {\n\t\tsetModalIsOpen(true);\n\t};\n\tconst closeModal = () => {\n\t\tsetModalIsOpen(false);\n\t\tsetStyle({ maxWidth: isVerticalImage ? \"60rem\" : \"30rem\" });\n\t};\n\tconst onImgLoad = ({ target: img }) => {\n\t\tsetWidthInitial(img.naturalWidth);\n\t\t//if the image is small, if the image is vertical\n\t\tif (img.width > img.height) {\n\t\t\tsetIsVerticalImage(false);\n\t\t\tif (img.width > img.naturalWidth) {\n\t\t\t\tsetIsSmallImage(true);\n\t\t\t} else {\n\t\t\t\tsetIsSmallImage(false);\n\t\t\t}\n\t\t} else {\n\t\t\tsetIsVerticalImage(true);\n\t\t\tsetStyle({ maxWidth: \"30rem\" });\n\t\t\tsetMaxWidth(30);\n\t\t\timg.height > img.naturalHeight ? setIsSmallImage(true) : setIsSmallImage(false);\n\t\t}\n\t};\n\tconst toggleZoom = () => {\n\t\tif (isDesktop) {\n\t\t\tsetZoomToggle(!zoomToggle);\n\t\t\t//if zoom it out\n\t\t\tif (zoomToggle === true) {\n\t\t\t\t//if small image\n\t\t\t\tif (isSmallImage) {\n\t\t\t\t\tsetStyle({\n\t\t\t\t\t\twidth: `${maxWidth * 2}rem`,\n\t\t\t\t\t\theight: \"\",\n\t\t\t\t\t\tmaxWidth: `${maxWidth * 2}rem`\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tsetStyle({ width: widthInitial });\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tsetStyle({\n\t\t\t\t\twidth: \"100%\",\n\t\t\t\t\theight: \"\",\n\t\t\t\t\tmaxWidth: `${maxWidth}rem`\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t};\n\tconst handleResize = () => {\n\t\tif (PageResponsive.isDesktop() === true) {\n\t\t\tsetIsDesktop(true);\n\t\t} else {\n\t\t\tsetIsDesktop(false);\n\t\t\tsetZoomToggle(false);\n\t\t}\n\t};\n\tconst handleKeyPressEnterModal = (e) => {\n\t\tconst key = e.which || e.keyCode || 0;\n\t\tif (key === 13 || key === 32) {\n\t\t\te.preventDefault();\n\t\t\topenModal();\n\t\t}\n\t};\n\tconst handleKeyPressEnterZoom = (e) => {\n\t\tconst key = e.which || e.keyCode || 0;\n\t\tif (key === 13 || key === 32) {\n\t\t\te.preventDefault();\n\t\t\ttoggleZoom();\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\thandleResize();\n\t\twindow.addEventListener(\"resize\", handleResize);\n\t\treturn window.removeEventListener(\"resize\", handleResize);\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t{src ? (\n\t\t\t\t<div className=\"lightbox-container\">\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={src}\n\t\t\t\t\t\talt={alt}\n\t\t\t\t\t\tonClick={openModal}\n\t\t\t\t\t\tonKeyDown={handleKeyPressEnterModal}\n\t\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t\taria-label=\"image\"\n\t\t\t\t\t/>\n\t\t\t\t\t<DDXModal\n\t\t\t\t\t\tclassName=\"lightbox-dialog\"\n\t\t\t\t\t\thandleCloseModal={closeModal}\n\t\t\t\t\t\tshowModal={modalIsOpen}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className={\"lightbox lightbox-\" + zoomToggle} style={{ ...style }}>\n\t\t\t\t\t\t\t<ButtonIcon\n\t\t\t\t\t\t\t\ttype=\"close\"\n\t\t\t\t\t\t\t\tclassName=\"lightbox-close\"\n\t\t\t\t\t\t\t\tcolor=\"white\"\n\t\t\t\t\t\t\t\tonClick={closeModal}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"lightbox-image-container\"\n\t\t\t\t\t\t\t\tonClick={toggleZoom}\n\t\t\t\t\t\t\t\tonKeyDown={handleKeyPressEnterZoom}\n\t\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t\taria-label=\"lightbox\"\n\t\t\t\t\t\t\t\ttabIndex={0}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tclassName={\"lightbox-image lightbox-image-\" + zoomToggle}\n\t\t\t\t\t\t\t\t\tsrc={src}\n\t\t\t\t\t\t\t\t\talt={alt}\n\t\t\t\t\t\t\t\t\tonLoad={onImgLoad}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</DDXModal>\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</>\n\t);\n};\n\nexport default LightBoxContent;\n","import React, { Component } from \"react\";\nimport PropTypes from \"prop-types\";\nimport LightBoxContent from \"./LightBoxContent\";\nimport DataContainer from \"components/utility/data-container/DataContainer\";\n\nclass LightBox extends Component {\n\trender() {\n\t\treturn (\n\t\t\t<DataContainer data={\"lightbox_\" + this.props.dataset.guid}>\n\t\t\t\t<LightBoxContent />\n\t\t\t</DataContainer>\n\t\t);\n\t}\n}\n\nLightBox.propTypes = {\n\tdataset: PropTypes.shape({\n\t\tguid: PropTypes.string.isRequired\n\t})\n};\n\nexport default LightBox;\n"],"names":["LightBoxContent","data","src","alt","modalIsOpen","setModalIsOpen","useState","zoomToggle","setZoomToggle","isDesktop","setIsDesktop","style","setStyle","widthInitial","setWidthInitial","isSmallImage","setIsSmallImage","isVerticalImage","setIsVerticalImage","maxWidth","setMaxWidth","openModal","closeModal","onImgLoad","img","toggleZoom","handleResize","PageResponsive.isDesktop","handleKeyPressEnterModal","key","handleKeyPressEnterZoom","useEffect","jsx","Fragment","jsxs","DDXModal","ButtonIcon","LightBox","Component","DataContainer","PropTypes"],"mappings":"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"}