{"version":3,"sources":["webpack:///./Scripts/Containers/ImageVideoGallery.container.js"],"names":["View","props","data","react__WEBPACK_IMPORTED_MODULE_0___default","a","createElement","style","textAlign","height","alignItems","display","justifyContent","type","className","cursor","maxHeight","src","title","width","concat","youtubeId","frameBorder","allow","allowFullScreen","ImageVideoGallery","_this","_classCallCheck","this","_possibleConstructorReturn","_getPrototypeOf","call","state","selectedIndex","lightboxIsOpen","Component","setState","_this2","_this$state","selectedData","alt","productname","onClick","toggleLightbox","_this3","_this$state2","selectedDataTags","JSON","parse","tags","length","id","map","_ref","j","thumbnail","key","react_images__WEBPACK_IMPORTED_MODULE_1__","onClose","x","currentIndex","frameProps","autoSize","components","views","ProductScroll","href","tag","index","backgroundColor","tagColor","tagName","renderActiveImage"],"mappings":"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","file":"10.0e585831f793b94dae62.js","sourcesContent":["import React, { Component } from 'react'\r\nimport Carousel, { Modal, ModalGateway } from 'react-images';\r\n\r\n\r\nconst View = (props) => {\r\n    const { data } = props;\r\n    return (<div style={{\r\n        textAlign: 'center',\r\n        height: '100vh',\r\n        alignItems: 'center',\r\n        display: 'flex ',\r\n        justifyContent: 'center'\r\n    }} >\r\n\r\n        {data.type !== 'video' ? (\r\n\r\n            <img className=\"\" style={{\r\n                cursor: 'auto',\r\n                maxHeight: 'calc(100vh - 140px)'\r\n            }} src={data.src} />\r\n\r\n        ) : (\r\n                <iframe title=\"video\" width=\"854\" height=\"480\" src={`https://www.youtube.com/embed/${data.youtubeId}`} frameBorder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowFullScreen></iframe>\r\n            )}\r\n\r\n    </div>)\r\n}\r\n\r\nexport default class ImageVideoGallery extends Component {\r\n\r\n    constructor(props) {\r\n        super(props)\r\n\r\n        this.state = {\r\n            selectedIndex: 0,\r\n            lightboxIsOpen: false,\r\n            data: this.props.data\r\n        };\r\n    }\r\n\r\n    toggleLightbox(selectedIndex) {\r\n\r\n        this.setState(state => ({\r\n            lightboxIsOpen: !state.lightboxIsOpen,\r\n            selectedIndex\r\n        }));\r\n    }\r\n\r\n    renderActiveImage() {\r\n        const { data, selectedIndex } = this.state;\r\n\r\n        const selectedData = data[selectedIndex];\r\n\r\n        return selectedData.type === 'video' ?\r\n            <iframe title=\"video\" width=\"100%\" height=\"100%\" src={`https://www.youtube.com/embed/${selectedData.youtubeId}`} frameBorder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowFullScreen></iframe> :\r\n            <img src={selectedData.src} alt={selectedData.productname} onClick={() => this.toggleLightbox(selectedIndex)} />\r\n    }\r\n\r\n    render() {\r\n        const { selectedIndex, lightboxIsOpen, data } = this.state;\r\n\r\n        const selectedData = data[selectedIndex];\r\n        const selectedDataTags = JSON.parse(selectedData.tags ? selectedData.tags : '[]')\r\n        if (!data || data.length <= 0)\r\n            return null;\r\n\r\n        return (\r\n            <div className=\"custom-carousel-wrapper row\">\r\n                <ul id='carousel-thumbnails-image' className=\"carousel-thumbnails small-12 large-12 columns\">\r\n                    {data && (\r\n                        data.map(({ thumbnail, alt }, j) => (\r\n                            <li key={j}>\r\n                                <img  alt={selectedData.productname} onClick={() => this.toggleLightbox(j)} key={j} src={thumbnail} />\r\n                            </li>\r\n                        )))}\r\n\r\n                    <ModalGateway>\r\n                        {lightboxIsOpen && (\r\n                            <Modal onClose={(x) => this.toggleLightbox(selectedIndex)}>\r\n                                <Carousel\r\n                                    currentIndex={selectedIndex}\r\n                                    frameProps={{ autoSize: 'height' }}\r\n                                    components={{ View }}\r\n                                    views={data}\r\n                                />\r\n                            </Modal>\r\n                        )}\r\n                    </ModalGateway>\r\n                </ul>\r\n\r\n                <a id=\"btnLeftId\"  className={`scroll-button scroll-button--left ${data && data.length < 8? 'product-scroll-hide':'scroll-hide'}`} onClick={() => ProductScroll('carousel-thumbnails-image',false,'btnLeftId')} >\r\n                    <svg>\r\n                        <use href=\"/ui/images/icons/right-arrow.svg#right-arrow\" />\r\n                    </svg>\r\n                </a>\r\n                <br />\r\n                <a id=\"btnRight\" className={`scroll-button scroll-button--right ${data && data.length < 8? 'product-scroll-hide':''}`} onClick={() => ProductScroll('carousel-thumbnails-image',true,'btnLeftId')} >\r\n                    <svg>\r\n                        <use href=\"/ui/images/icons/right-arrow.svg#right-arrow\" />\r\n                    </svg>\r\n                </a>\r\n\r\n                <div className=\"big-image small-12 large-12 columns\">\r\n                {selectedDataTags.length>0 &&(\r\n                        <div className=\"product__tag-container\">\r\n                            {selectedDataTags.map((tag,index)=>\r\n                                <div key={`tag-${index}`} className=\"product__tag\" style={{backgroundColor:tag.tagColor}}>{tag.tagName}</div>\r\n                            )}\r\n                        </div>\r\n                    )}\r\n                    {this.renderActiveImage()}\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}"],"sourceRoot":""}