react-image-slideshow/lib/app.js

A simple image slideshow components with react.js

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("tween.js"),require("react-portal")):"function"==typeof define&&define.amd?define(["react","tween.js","react-portal"],t):"object"==typeof exports?exports["react-image-slideshow"]=t(require("react"),require("tween.js"),require("react-portal")):e["react-image-slideshow"]=t(e.react,e["tween.js"],e["react-portal"])}(this,function(e,t,i){return function(e){function t(n){if(i[n])return i[n].exports;var o=i[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function r(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),l=i(1),d=n(l),u=i(2),m=n(u),h=i(3),c=n(h),g=i(4),f=n(g),p=i(8),w=n(p),v=i(9),y=n(v),I=function(e){function t(e){o(this,t);var i=a(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return(0,y["default"])(),i.window=null,i.keyEvent=null,i.bodyAttr=null,i.resizeRatio=.9,i.onAnimate=!1,i.tmpNowImage=null,i.minImageSize=null,i.originalSize=null,i.imageInZoom=!1,i.imageZoomMargin=100,i.imageMoveRange=null,i.state={isOpened:!1,nowImage:null,imageSize:null,imageSizeAnimate:null,imageMovePos:null,imageZoomQuit:null,showAction:!1},i.handleModalOpen=i.handleModalOpen.bind(i),i.handleBeforeModalOnOpen=i.handleBeforeModalOnOpen.bind(i),i.handleModalBeforeClose=i.handleModalBeforeClose.bind(i),i.handleModalClose=i.handleModalClose.bind(i),i.calAllImageSize=i.calAllImageSize.bind(i),i.getImageSize=i.getImageSize.bind(i),i.initImageSize=i.initImageSize.bind(i),i.calImageSize=i.calImageSize.bind(i),i.calSingleImageSize=i.calSingleImageSize.bind(i),i.calNowImageSize=i.calNowImageSize.bind(i),i.handleImageSliderToPreviousHover=i.handleImageSliderToPreviousHover.bind(i),i.handleImageSliderToNextHover=i.handleImageSliderToNextHover.bind(i),i.handleImageCloserHover=i.handleImageCloserHover.bind(i),i.handleImageKeySwitch=i.handleImageKeySwitch.bind(i),i.handleImageSliderToPrevious=i.handleImageSliderToPrevious.bind(i),i.handleImageSliderToNext=i.handleImageSliderToNext.bind(i),i.handleImageAnimate=i.handleImageAnimate.bind(i),i.getPrevIndex=i.getPrevIndex.bind(i),i.getNextIndex=i.getNextIndex.bind(i),i.handleImageZoom=i.handleImageZoom.bind(i),i.handleImageMove=i.handleImageMove.bind(i),i.handleImageOnComplete=i.handleImageOnComplete.bind(i),i.getWindow=i.getWindow.bind(i),i.preventSelect=i.preventSelect.bind(i),i.addEvent=i.addEvent.bind(i),i.enableBodyScroll=i.enableBodyScroll.bind(i),i.disableBodyScroll=i.disableBodyScroll.bind(i),i.listenKeyDown=i.listenKeyDown.bind(i),i.unListenKeyDown=i.unListenKeyDown.bind(i),i.handleKeyDown=i.handleKeyDown.bind(i),i}return r(t,e),s(t,[{key:"componentWillMount",value:function(){this.window=this.getWindow()}},{key:"componentDidMount",value:function(){this.initImageSize(),this.addEvent(this.window,"resize",this.calNowImageSize)}},{key:"componentWillReceiveProps",value:function(e){e.imgs.length!==this.props.imgs.length&&this.calNowImageSize()}},{key:"shouldComponentUpdate",value:function(e,t){return!0}},{key:"componentWillUpdate",value:function(e,t){}},{key:"componentDidUpdate",value:function(e,t){}},{key:"componentWillUnmount",value:function(){}},{key:"handleModalOpen",value:function(e){this.onAnimate=!0,void 0!==e&&void 0!==this.props.imgs?this.tmpNowImage=e>this.props.imgs.length-1?this.props.imgs.length-1:e<0?0:e:this.tmpNowImage=0,this.setState({nowImage:this.tmpNowImage,isOpened:!0,showAction:!1}),this.calSingleImageSize(this.tmpNowImage),this.disableBodyScroll(),this.listenKeyDown(),this.handleImageOnComplete(this.tmpNowImage)}},{key:"handleBeforeModalOnOpen",value:function(e){var t=this,i=document.getElementById("sliderShowImageOf"+this.tmpNowImage);i.style.opacity=1,new m["default"].Tween({opacity:0}).to({opacity:1},300).easing(m["default"].Easing.Cubic.In).onUpdate(function(){e.style.opacity=this.opacity}).onComplete(function(){t.onAnimate=!1}).start()}},{key:"handleModalClose",value:function(){this.onAnimate=!0,this.setState({isOpened:!1}),this.enableBodyScroll(),this.unListenKeyDown()}},{key:"handleModalBeforeClose",value:function(e,t){var i=this;new m["default"].Tween({opacity:1}).to({opacity:0},300).easing(m["default"].Easing.Cubic.In).onUpdate(function(){e.style.opacity=this.opacity}).onComplete(function(){t(),i.onAnimate=!1}).start()}},{key:"getImageSize",value:function(e){var t=new Image;return t.src=e,{width:t.width,height:t.height}}},{key:"initImageSize",value:function(){var e=new Array(this.props.imgs.length);e.fill({width:0,height:0}),this.props.imgs&&this.setState({imageSize:e,imageSizeAnimate:{transition:".3s height, .3s width"},imageMovePos:{transformOrigin:this.imageZoomMargin+"px "+this.imageZoomMargin+"px 0px"}})}},{key:"calImageSize",value:function(e,t){var i=this,n=this.window.innerWidth,o=this.window.innerHeight,a=n/o,r=new Image;r.onload=function(){var e=null,s=r.width/r.height;e=s>a?r.width>=n?{width:n*i.resizeRatio,height:n*i.resizeRatio/s}:r.width<n*i.resizeRatio?{width:r.width,height:r.height}:{width:n*i.resizeRatio,height:n*i.resizeRatio/s}:r.height>=o?{height:o*i.resizeRatio,width:o*i.resizeRatio*s}:r.height<o*i.resizeRatio?{height:r.height,width:r.width}:{height:o*i.resizeRatio,width:o*i.resizeRatio*s},t(e)},r.src=e}},{key:"calAllImageSize",value:function(){var e=this,t=JSON.parse(JSON.stringify(this.state.imageSize));this.props.imgs?this.props.imgs.map(function(i,n){e.calImageSize(i.url,function(i){t[n]=i,e.setState({imageSize:t})})}):null}},{key:"calSingleImageSize",value:function(e){var t=this;this.state.imageSize&&this.props.imgs?!function(){var i=JSON.parse(JSON.stringify(t.state.imageSize));t.calImageSize(t.props.imgs[e].url,function(n){i[e]=n,t.setState({imageSize:i},function(){setTimeout(function(){t.setState({imageSizeAnimate:{transition:".3s height, .3s width"}})},500)})})}():console.warn("imageUrl数据为空， 无法计算图片尺寸")}},{key:"calNowImageSize",value:function(){this.state.nowImage&&this.calSingleImageSize(this.state.nowImage)}},{key:"handleImageSliderToPreviousHover",value:function(){this.onAnimate||(document.getElementById("toPrevButton").style.left="40px",document.getElementById("toNextButton").style.right="30px")}},{key:"handleImageSliderToNextHover",value:function(){this.onAnimate||(document.getElementById("toPrevButton").style.left="30px",document.getElementById("toNextButton").style.right="40px")}},{key:"handleImageCloserHover",value:function(){this.onAnimate||(document.getElementById("toPrevButton").style.left="30px",document.getElementById("toNextButton").style.right="30px")}},{key:"handleImageKeySwitch",value:function(e){37==e||38==e?this.handleImageSliderToPrevious():39!=e&&40!=e||this.handleImageSliderToNext()}},{key:"handleImageSliderToPrevious",value:function(){if(!this.onAnimate){this.onAnimate=!0;var e=this.getPrevIndex();this.setState({nowImage:e,imageSizeAnimate:{transition:"initial"},showAction:!1}),this.calSingleImageSize(e),this.handleImageOnComplete(e);var t=document.getElementById("sliderShowImageOf"+this.state.nowImage),i=document.getElementById("sliderShowImageOf"+e);this.handleImageAnimate(t,i)}}},{key:"handleImageSliderToNext",value:function(){if(!this.onAnimate){this.onAnimate=!0;var e=this.getNextIndex();this.setState({nowImage:e,imageSizeAnimate:{transition:"initial"},showAction:!1}),this.calSingleImageSize(e),this.handleImageOnComplete(e);var t=document.getElementById("sliderShowImageOf"+this.state.nowImage),i=document.getElementById("sliderShowImageOf"+e);this.handleImageAnimate(t,i)}}},{key:"handleImageAnimate",value:function(e,t){var i=this,n=!1,o=!1;new m["default"].Tween({opacity:1}).to({opacity:0},300).easing(m["default"].Easing.Cubic.In).onUpdate(function(){e&&(e.style.opacity=this.opacity)}).onComplete(function(){n=!0,n&&o&&(i.onAnimate=!1)}).start(),new m["default"].Tween({opacity:0}).to({opacity:1},300).easing(m["default"].Easing.Cubic.In).onUpdate(function(){t&&(t.style.opacity=this.opacity)}).onComplete(function(){o=!0,n&&o&&(i.onAnimate=!1)}).start()}},{key:"getPrevIndex",value:function(e){var t=null;t=e?e:this.state.nowImage;try{return t>0?t-1:this.props.imgs.length-1}catch(i){return console.warn(i),0}}},{key:"getNextIndex",value:function(e){var t=null;t=e?e:this.state.nowImage;try{return t<this.props.imgs.length-1?t+1:0}catch(i){return console.warn(i),0}}},{key:"handleImageZoom",value:function(e){if(this.imageInZoom){var t=JSON.parse(JSON.stringify(this.state.imageSize));t[this.tmpNowImage]=this.minImageSize,this.removeEvent(this.window,"mousemove",this.handleImageMove),this.addEvent(this.window,"resize",this.calNowImageSize),this.setState({imageMovePos:null,imageSize:t,imageZoomQuit:{zIndex:-100},showAction:!0}),this.imageInZoom=!1}else{this.tmpNowImage=e,this.minImageSize=this.state.imageSize[this.tmpNowImage],this.originalSize=this.getImageSize(this.props.imgs[this.tmpNowImage].url),this.imageMoveRange={x:this.originalSize.width-this.window.innerWidth+2*this.imageZoomMargin,y:this.originalSize.height-this.window.innerHeight+2*this.imageZoomMargin};var i=JSON.parse(JSON.stringify(this.state.imageSize));i[this.tmpNowImage]=this.originalSize,this.addEvent(this.window,"mousemove",this.handleImageMove),this.removeEvent(this.window,"resize",this.calNowImageSize),this.setState({imageSize:i,imageZoomQuit:{zIndex:200},showAction:!1}),this.imageInZoom=!0}}},{key:"handleImageMove",value:function(e){var t=void 0,i=null;t=this.originalSize.width>this.window.innerWidth?this.imageZoomMargin-this.imageMoveRange.x*(e.clientX/this.window.innerWidth):0,i=this.originalSize.height>this.window.innerHeight?this.imageZoomMargin-this.imageMoveRange.y*(e.clientY/this.window.innerHeight)+this.originalSize.height/2:(this.window.innerHeight-this.originalSize.height)/2+this.originalSize.height/2,this.setState({imageMovePos:{transform:"translate("+t+"px, "+i+"px)"}})}},{key:"handleImageOnComplete",value:function(e){var t=this;clearInterval(this.checkNowImageLoaded);var i=new Image;i.src=this.props.imgs[e?e:this.state.nowImage?this.state.nowImage:this.tmpNowImage].url,this.checkNowImageLoaded=setInterval(function(){i.complete&&(t.setState({showAction:!0}),clearInterval(t.checkNowImageLoaded))},250)}},{key:"getWindow",value:function(){return window.top?window.top:window}},{key:"preventSelect",value:function(){return!1}},{key:"addEvent",value:function(e,t,i){null!=e&&"undefined"!=typeof e&&(e.addEventListener?e.addEventListener(t,i,!1):e.attachEvent?e.attachEvent("on"+t,i):e["on"+t]=i)}},{key:"removeEvent",value:function(e,t,i){null!=e&&"undefined"!=typeof e&&(e.removeEventListener?e.removeEventListener(t,i,!1):e.detachEvent?e.detachEvent("on"+t,i):e["on"+t]=i)}},{key:"enableBodyScroll",value:function(){this.bodyAttr?(document.getElementsByTagName("body")[0].style.position=this.bodyAttr,this.bodyAttr=null):document.getElementsByTagName("body")[0].style.position=""}},{key:"disableBodyScroll",value:function(){this.bodyAttr?document.getElementsByTagName("body")[0].style.position="fixed":(this.bodyAttr=document.getElementsByTagName("body")[0].style.position,document.getElementsByTagName("body")[0].style.position="fixed")}},{key:"listenKeyDown",value:function(){this.keyEvent?document.onkeydown=this.handleKeyDown:(this.keyEvent=document.onkeydown,document.onkeydown=this.handleKeyDown)}},{key:"unListenKeyDown",value:function(){this.keyEvent?(document.onkeydown=this.keyEvent,this.keyEvent=null):document.onkeydown=null}},{key:"handleKeyDown",value:function(e){var t=!1;document.all&&(t=!0);var i;i=t?event.keyCode:e.keyCode,this.handleImageKeySwitch(i)}},{key:"render",value:function(){function e(t){requestAnimationFrame(e),m["default"].update(t)}var t=this;return requestAnimationFrame(e),d["default"].createElement(c["default"],{className:f["default"].portalStyle,isOpened:this.state.isOpened,closeOnEsc:!0,closeOnOutsideClick:!1,onOpen:this.handleBeforeModalOnOpen,beforeClose:this.handleModalBeforeClose},d["default"].createElement("div",{className:f["default"].slider},d["default"].createElement("div",{className:f["default"].screenOverlay,onClickCapture:function(){return t.handleModalClose()}}),d["default"].createElement("div",{className:f["default"].sliderZoomQuit,onClickCapture:function(){return t.handleImageZoom()},style:this.state.imageZoomQuit}),this.props.switchButton?d["default"].createElement("div",{className:f["default"].toPreviousButton,onClickCapture:function(){return t.handleImageSliderToPrevious()},id:"toPrevButton"},d["default"].createElement("div",{className:f["default"].switchButtonLayer}),d["default"].createElement("svg",{className:f["default"].switchButtonIcons,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},d["default"].createElement("path",{d:"M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"}),d["default"].createElement("path",{d:"M0-.5h24v24H0z",fill:"none"}))):null,d["default"].createElement("div",{className:f["default"].sliderImageListWrapper},this.props.imgs&&this.state.imageSize?this.props.imgs.map(function(e,i){var n=i==t.state.nowImage?w["default"].imageWrapperShowStyle:w["default"].imageWrapperHideStyle,o=i==t.state.nowImage?t.state.imageMovePos:null,a=t.props.lazyLoad?i==t.state.nowImage?e.url:0==t.state.imageSize[i].width?"":e.url:e.url,r={top:t.window.innerHeight/2-t.state.imageSize[i].height/2,right:t.window.innerWidth/2-t.state.imageSize[i].width/2-48,display:t.state.showAction?"block":"none"},s={display:t.props.loading?"block":"none"};return d["default"].createElement("div",{className:f["default"].sliderImageWrapper,key:i,style:n},d["default"].createElement("div",{className:f["default"].sliderCloser,onClickCapture:function(){return t.handleModalClose()},onMouseOver:t.handleImageCloserHover}),d["default"].createElement("div",{className:f["default"].sliderImageContainer,id:"sliderShowImageOf"+i,style:o},d["default"].createElement("div",{className:f["default"].imageLoading,style:s},d["default"].createElement("svg",{className:f["default"].circleLoading,width:"65px",height:"65px",viewBox:"0 0 66 66",xmlns:"http://www.w3.org/2000/svg"},d["default"].createElement("circle",{className:f["default"].circleLoadingPath,fill:"none",strokeWidth:"3",strokeLinecap:"round",cx:"33",cy:"33",r:"30"}))),d["default"].createElement("img",{src:a,className:f["default"].sliderImage,style:Object.assign({},t.state.imageSize[i],t.state.imageSizeAnimate),onSelect:t.preventSelect}),d["default"].createElement("div",{className:f["default"].imageAction,style:r},t.props.zoomButton?d["default"].createElement("a",{className:f["default"].imageZoom,onClickCapture:function(){return t.handleImageZoom(i)}},d["default"].createElement("svg",{className:f["default"].actionButtonIcons,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},d["default"].createElement("path",{d:"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"}),d["default"].createElement("path",{d:"M0 0h24v24H0V0z",fill:"none"}),d["default"].createElement("path",{d:"M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"}))):null,t.props.downloadButton?d["default"].createElement("a",{className:f["default"].imageDownLoad,href:e.url,download:"保存图片"},d["default"].createElement("svg",{className:f["default"].actionButtonIcons,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},d["default"].createElement("path",{d:"M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"}),d["default"].createElement("path",{d:"M0 0h24v24H0z",fill:"none"}))):null)),d["default"].createElement("div",{className:f["default"].imageSwitch,style:t.state.imageSize[i]},d["default"].createElement("div",{className:f["default"].switchOverlay,onMouseOver:t.handleImageCloserHover}),d["default"].createElement("div",{className:f["default"].leftSwitch,onClickCapture:function(){return t.handleImageSliderToPrevious()},onMouseOver:t.handleImageSliderToPreviousHover}),d["default"].createElement("div",{className:f["default"].rightSwitch,onClickCapture:function(){return t.handleImageSliderToNext()},onMouseOver:t.handleImageSliderToNextHover})))}):null,this.props.indicator?d["default"].createElement("div",{className:f["default"].imageIndicatorWrapper},d["default"].createElement("div",{className:f["default"].imageIndicator},d["default"].createElement("span",{className:f["default"].imageIndicatorLabel,onSelect:this.preventSelect},this.state.nowImage+1," / ",this.props.imgs.length))):null),this.props.switchButton?d["default"].createElement("div",{className:f["default"].toNextButton,onClickCapture:function(){return t.handleImageSliderToNext()},id:"toNextButton"},d["default"].createElement("div",{className:f["default"].switchButtonLayer}),d["default"].createElement("svg",{className:f["default"].switchButtonIcons,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},d["default"].createElement("path",{d:"M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"}),d["default"].createElement("path",{d:"M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"}),d["default"].createElement("path",{d:"M0-.25h24v24H0z",fill:"none"}))):null))}}]),t}(d["default"].Component);I.defaultProps={lazyLoad:!0,infinitySwitch:!0,switchButton:!0,downloadButton:!0,loading:!0,zoomButton:!0,indicator:!0,imgs:[]},I.propTypes={imgs:d["default"].PropTypes.array.isRequired},t["default"]=I},function(t,i){t.exports=e},function(e,i){e.exports=t},function(e,t){e.exports=i},function(e,t,i){var n=i(5);"string"==typeof n&&(n=[[e.id,n,""]]);i(7)(n,{});n.locals&&(e.exports=n.locals)},function(e,t,i){t=e.exports=i(6)(),t.push([e.id,'.portalStyle-2oWr2{opacity:0;z-index:100;position:relative}.slider-3fx7S{position:fixed;width:100%;height:100%;top:0;left:0;z-index:100}.screenOverlay-3VSUR{z-index:1}.switchImageButton-3Sqb4{position:absolute;top:50%;width:40px;height:40px;z-index:20;box-sizing:border-box;padding-top:1px;border-radius:2px;cursor:pointer;transition:all .3s}.switchButtonLayer-uqz0f{position:absolute;width:100%;height:100%;opacity:0;transition:all .2s}.switchButtonLayer-uqz0f:hover{opacity:.2}.switchButtonLayer-uqz0f:active{opacity:.4}.toPreviousButton-1ZWVL{left:30px;transition:all .3s}.toPreviousButtonMove-2KXc2{left:40px}.toNextButton-1dHwq{right:30px;transition:all .3s}.toNextButtonMove-3sObS{right:40px}.switchButtonIcons-1wtSX{width:100%;height:100%;fill:#fff}.noUse-k_ZeB:before{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:jumper-1COnh 1.8s .33333s ease-out infinite}.noUse-k_ZeB:after,.noUse-k_ZeB:before{content:"";top:0;left:0;background-color:#ff3466;width:50px;height:50px;border-radius:100%;position:absolute;opacity:0}.noUse-k_ZeB:after{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation:jumper-1COnh 1.8s .66666s ease-out infinite}.sliderZoomQuit-iAtKv{position:absolute;width:100%;height:100%;z-index:-100;cursor:zoom-out}.sliderImageListWrapper-3woYC{position:relative;width:100%;height:100%;left:0;top:0;z-index:15;background-color:rgba(0,0,0,.8);box-shadow:0 14px 45px rgba(0,0,0,.247059),0 10px 18px rgba(0,0,0,.219608)}.sliderCloser-9QxjR,.sliderImageWrapper-1ATuC{position:absolute;width:100%;height:100%;left:0;top:0}.sliderImageContainer-1mWBA{opacity:0}.sliderImage-2d0oN{position:absolute;border-radius:2px;left:0;top:0;right:0;bottom:0;margin:auto;transition:height .3s,width .3s;-webkit-user-select:none;-moz-user-select:none}.imageIndicatorWrapper-2JJLq{position:relative;width:90px;height:100%;margin:auto}.imageIndicator-1P5CB{position:absolute;width:100%;height:26px;bottom:10px;color:#fff;text-align:center;border-radius:3px;background-color:rgba(0,0,0,.65);box-shadow:0 0 10px rgba(0,0,0,.6)}.imageIndicatorLabel-1gFvF{-webkit-user-select:none;-moz-user-select:none;line-height:26px;font-size:12px}.imageLoading-3AmXW{position:absolute;top:46vh;width:100%;text-align:center}.imageAction-2whOf{position:absolute;width:30px}.imageActionButton-1pmAA{height:30px;margin-bottom:5px}.actionButtonIcons-L86u6{cursor:pointer;width:100%;height:30px;fill:#e9e9e9;transition:all .3s}.actionButtonIcons-L86u6:hover{fill:#f4f4f4}.actionButtonIcons-L86u6:active{fill:#fff}.switchOverlay-fqILT{position:absolute;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none}.leftSwitch-3AmZe{left:0}.leftSwitch-3AmZe,.rightSwitch-1IUnE{position:absolute;height:100%;width:40%;cursor:pointer}.rightSwitch-1IUnE{right:0}@-webkit-keyframes jumper-1COnh{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}5%{opacity:1}to{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@keyframes jumper-1COnh{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}5%{opacity:1}to{opacity:0}}.circleLoading-g8YHQ{-webkit-animation:rotator-2lGr1 1.4s linear infinite;animation:rotator-2lGr1 1.4s linear infinite}@-webkit-keyframes rotator-2lGr1{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@keyframes rotator-2lGr1{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}.circleLoadingPath-2Y-Sp{stroke-dasharray:187;stroke-dashoffset:0;-webkit-transform-origin:center;transform-origin:center;-webkit-animation:dash-XtFOS 1.4s ease-in-out infinite,colors-37Zis 5.6s ease-in-out infinite;animation:dash-XtFOS 1.4s ease-in-out infinite,colors-37Zis 5.6s ease-in-out infinite}@-webkit-keyframes colors-37Zis{0%{stroke:#4285f4}25%{stroke:#de3e35}50%{stroke:#f7c223}75%{stroke:#1b9a59}to{stroke:#4285f4}}@keyframes colors-37Zis{0%{stroke:#4285f4}25%{stroke:#de3e35}50%{stroke:#f7c223}75%{stroke:#1b9a59}to{stroke:#4285f4}}@-webkit-keyframes dash-XtFOS{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;-webkit-transform:rotate(135deg);transform:rotate(135deg)}to{stroke-dashoffset:187;-webkit-transform:rotate(450deg);transform:rotate(450deg)}}@keyframes dash-XtFOS{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;-webkit-transform:rotate(135deg);transform:rotate(135deg)}to{stroke-dashoffset:187;-webkit-transform:rotate(450deg);transform:rotate(450deg)}}',""]),t.locals={portalStyle:"portalStyle-2oWr2",slider:"slider-3fx7S",screenOverlay:"screenOverlay-3VSUR",switchImageButton:"switchImageButton-3Sqb4",switchButtonLayer:"switchButtonLayer-uqz0f",toPreviousButton:"toPreviousButton-1ZWVL switchImageButton-3Sqb4",toPreviousButtonMove:"toPreviousButtonMove-2KXc2",toNextButton:"toNextButton-1dHwq switchImageButton-3Sqb4",toNextButtonMove:"toNextButtonMove-3sObS",switchButtonIcons:"switchButtonIcons-1wtSX",noUse:"noUse-k_ZeB",jumper:"jumper-1COnh",sliderZoomQuit:"sliderZoomQuit-iAtKv",sliderImageListWrapper:"sliderImageListWrapper-3woYC",sliderImageWrapper:"sliderImageWrapper-1ATuC",sliderCloser:"sliderCloser-9QxjR",sliderImageContainer:"sliderImageContainer-1mWBA",sliderImage:"sliderImage-2d0oN",imageIndicatorWrapper:"imageIndicatorWrapper-2JJLq",imageIndicator:"imageIndicator-1P5CB",imageIndicatorLabel:"imageIndicatorLabel-1gFvF",imageLoading:"imageLoading-3AmXW",imageAction:"imageAction-2whOf",imageActionButton:"imageActionButton-1pmAA",imageZoom:"imageZoom-TCx73 imageActionButton-1pmAA",downloadButton:"downloadButton-399iK imageActionButton-1pmAA",actionButtonIcons:"actionButtonIcons-L86u6",imageSwitch:"imageSwitch-1aIbt sliderImage-2d0oN",switchOverlay:"switchOverlay-fqILT",leftSwitch:"leftSwitch-3AmZe",rightSwitch:"rightSwitch-1IUnE",circleLoading:"circleLoading-g8YHQ",rotator:"rotator-2lGr1",circleLoadingPath:"circleLoadingPath-2Y-Sp",dash:"dash-XtFOS",colors:"colors-37Zis"}},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var i=this[t];i[2]?e.push("@media "+i[2]+"{"+i[1]+"}"):e.push(i[1])}return e.join("")},e.i=function(t,i){"string"==typeof t&&(t=[[null,t,""]]);for(var n={},o=0;o<this.length;o++){var a=this[o][0];"number"==typeof a&&(n[a]=!0)}for(o=0;o<t.length;o++){var r=t[o];"number"==typeof r[0]&&n[r[0]]||(i&&!r[2]?r[2]=i:i&&(r[2]="("+r[2]+") and ("+i+")"),e.push(r))}},e}},function(e,t,i){function n(e,t){for(var i=0;i<e.length;i++){var n=e[i],o=c[n.id];if(o){o.refs++;for(var a=0;a<o.parts.length;a++)o.parts[a](n.parts[a]);for(;a<n.parts.length;a++)o.parts.push(d(n.parts[a],t))}else{for(var r=[],a=0;a<n.parts.length;a++)r.push(d(n.parts[a],t));c[n.id]={id:n.id,refs:1,parts:r}}}}function o(e){for(var t=[],i={},n=0;n<e.length;n++){var o=e[n],a=o[0],r=o[1],s=o[2],l=o[3],d={css:r,media:s,sourceMap:l};i[a]?i[a].parts.push(d):t.push(i[a]={id:a,parts:[d]})}return t}function a(e,t){var i=p(),n=y[y.length-1];if("top"===e.insertAt)n?n.nextSibling?i.insertBefore(t,n.nextSibling):i.appendChild(t):i.insertBefore(t,i.firstChild),y.push(t);else{if("bottom"!==e.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");i.appendChild(t)}}function r(e){e.parentNode.removeChild(e);var t=y.indexOf(e);t>=0&&y.splice(t,1)}function s(e){var t=document.createElement("style");return t.type="text/css",a(e,t),t}function l(e){var t=document.createElement("link");return t.rel="stylesheet",a(e,t),t}function d(e,t){var i,n,o;if(t.singleton){var a=v++;i=w||(w=s(t)),n=u.bind(null,i,a,!1),o=u.bind(null,i,a,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(i=l(t),n=h.bind(null,i),o=function(){r(i),i.href&&URL.revokeObjectURL(i.href)}):(i=s(t),n=m.bind(null,i),o=function(){r(i)});return n(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;n(e=t)}else o()}}function u(e,t,i,n){var o=i?"":n.css;if(e.styleSheet)e.styleSheet.cssText=I(t,o);else{var a=document.createTextNode(o),r=e.childNodes;r[t]&&e.removeChild(r[t]),r.length?e.insertBefore(a,r[t]):e.appendChild(a)}}function m(e,t){var i=t.css,n=t.media;if(n&&e.setAttribute("media",n),e.styleSheet)e.styleSheet.cssText=i;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(i))}}function h(e,t){var i=t.css,n=t.sourceMap;n&&(i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */");var o=new Blob([i],{type:"text/css"}),a=e.href;e.href=URL.createObjectURL(o),a&&URL.revokeObjectURL(a)}var c={},g=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},f=g(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),p=g(function(){return document.head||document.getElementsByTagName("head")[0]}),w=null,v=0,y=[];e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=f()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var i=o(e);return n(i,t),function(e){for(var a=[],r=0;r<i.length;r++){var s=i[r],l=c[s.id];l.refs--,a.push(l)}if(e){var d=o(e);n(d,t)}for(var r=0;r<a.length;r++){var l=a[r];if(0===l.refs){for(var u=0;u<l.parts.length;u++)l.parts[u]();delete c[l.id]}}}};var I=function(){var e=[];return function(t,i){return e[t]=i,e.filter(Boolean).join("\n")}}()},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i={portalStyle:{opacity:0,zIndex:100,position:"relative"},imageWrapperShowStyle:{opacity:1},imageWrapperHideStyle:{display:"none",opacity:0}};t["default"]=i},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(){Array.prototype.fill||(Array.prototype.fill=function(e){if(null==this)throw new TypeError("this is null or not defined");for(var t=Object(this),i=t.length>>>0,n=arguments[1],o=n>>0,a=o<0?Math.max(i+o,0):Math.min(o,i),r=arguments[2],s=void 0===r?i:r>>0,l=s<0?Math.max(i+s,0):Math.min(s,i);a<l;)t[a]=e,a++;return t})};t["default"]=i}])});