react-image-lightbox/dist/react-image-lightbox.min.js

A lightbox component for React.js

!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.ReactImageLightbox=e()}}(function(){return function e(t,i,n){function o(a,r){if(!i[a]){if(!t[a]){var l="function"==typeof require&&require;if(!r&&l)return l(a,!0);if(s)return s(a,!0);var u=new Error("Cannot find module '"+a+"'");throw u.code="MODULE_NOT_FOUND",u}var p=i[a]={exports:{}};t[a][0].call(p.exports,function(e){var i=t[a][1][e];return o(i?i:e)},p,p.exports,e,t,i,n)}return i[a].exports}for(var s="function"==typeof require&&require,a=0;a<n.length;a++)o(n[a]);return o}({1:[function(e,t,i){(function(i){"use strict";var n="undefined"!=typeof window?window.React:"undefined"!=typeof i?i.React:null,o="undefined"!=typeof window?window.Radium:"undefined"!=typeof i?i.Radium:null,s=e("./styles"),a=n.createClass({displayName:"ReactImageLightbox",propTypes:{mainSrc:n.PropTypes.string.isRequired,prevSrc:n.PropTypes.string,nextSrc:n.PropTypes.string,mainSrcThumbnail:n.PropTypes.string,prevSrcThumbnail:n.PropTypes.string,nextSrcThumbnail:n.PropTypes.string,onCloseRequest:n.PropTypes.func.isRequired,onMovePrevRequest:n.PropTypes.func,onMoveNextRequest:n.PropTypes.func,discourageDownloads:n.PropTypes.bool,animationDisabled:n.PropTypes.bool,animationOnKeyInput:n.PropTypes.bool,animationDuration:n.PropTypes.number,keyRepeatLimit:n.PropTypes.number,keyRepeatKeyupBonus:n.PropTypes.number,imageTitle:n.PropTypes.string,toolbarButtons:n.PropTypes.arrayOf(n.PropTypes.node),imagePadding:n.PropTypes.number},getDefaultProps:function(){return{onMovePrevRequest:function(){},onMoveNextRequest:function(){},discourageDownloads:!1,animationDisabled:!1,animationOnKeyInput:!1,animationDuration:300,keyRepeatLimit:180,keyRepeatKeyupBonus:40,imagePadding:10}},getInitialState:function(){return{isClosing:!this.props.animationDisabled,isMovingToPrev:!1,isMovingToNext:!1}},componentWillMount:function(){this.listenersAttached=!1,this.keyPressed=!1,this.imageCache={},this.lastKeyDownTime=0},componentDidMount:function(){this.attachListeners(),this.props.animationDisabled||this.setState({isClosing:!1}),this.loadAllImages()},componentWillReceiveProps:function(e){var t=this.getSrcTypes().some(function(t){return this.props[t]!=e[t]}.bind(this));if(t){if(!this.props.animationDisabled&&(!this.keyPressed||this.props.animationOnKeyInput)){this.props.mainSrc==e.nextSrc;this.props.mainSrc==e.nextSrc?(this.setState({isMovingToPrev:!0}),setTimeout(function(){this.setState({isMovingToPrev:!1})}.bind(this),this.props.animationDuration)):this.props.mainSrc==e.prevSrc&&(this.setState({isMovingToNext:!0}),setTimeout(function(){this.setState({isMovingToNext:!1})}.bind(this),this.props.animationDuration))}this.keyPressed=!1,this.loadAllImages(e)}},componentWillUnmount:function(){this.detachListeners()},handleKeyInput:function(e){if(e.stopPropagation(),!this.isAnimating()){if("keyup"===e.type)return void(this.lastKeyDownTime-=this.props.keyRepeatKeyupBonus);var t=e.which||e.keyCode,i={esc:27,leftArrow:37,rightArrow:39},n=new Date;if(!(n.getTime()-this.lastKeyDownTime<this.props.keyRepeatLimit&&t!=i.esc))switch(this.lastKeyDownTime=n.getTime(),t){case i.esc:e.preventDefault(),this.props.animationDisabled||!this.props.animationOnKeyInput?this.props.onCloseRequest(e):this.requestClose(e);break;case i.leftArrow:if(!this.props.prevSrc)return;e.preventDefault(),this.keyPressed=!0,this.props.onMovePrevRequest(e);break;case i.rightArrow:if(!this.props.nextSrc)return;e.preventDefault(),this.keyPressed=!0,this.props.onMoveNextRequest(e)}}},requestClose:function(e){var t=function(){this.props.onCloseRequest(e)}.bind(this);this.props.animationDisabled?t():(this.setState({isClosing:!0}),setTimeout(t,this.props.animationDuration))},requestMovePrev:function(e){this.props.onMovePrevRequest(e)},requestMoveNext:function(e){this.props.onMoveNextRequest(e)},attachListeners:function(){this.listenersAttached||(document.addEventListener("keydown",this.handleKeyInput),document.addEventListener("keyup",this.handleKeyInput),this.listenersAttached=!0)},detachListeners:function(){this.listenersAttached&&(document.removeEventListener("keydown",this.handleKeyInput),document.removeEventListener("keyup",this.handleKeyInput),this.listenersAttached=!1)},getSrcTypes:function(){return["mainSrc","mainSrcThumbnail","nextSrc","nextSrcThumbnail","prevSrc","prevSrcThumbnail"]},getFitSizes:function(e,t){var i=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight,n=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,o=Math.min(i-2*this.props.imagePadding,t),s=Math.min(n-2*this.props.imagePadding,e),a=s/o,r=e/t,l={};return a>r?(l.width=e*o/t,l.height=o):(l.width=s,l.height=t*s/e),l},isAnimating:function(){return this.state.isMovingToNext||this.state.isMovingToPrev||this.state.isClosing},loadImage:function(e,t){if(this.isImageLoaded(e))return void setTimeout(function(){t(null,this.imageCache[e].width,this.imageCache[e].height)},1);var i=this,n=new Image;n.onerror=function(){t("image load error")},n.onload=function(){i.imageCache[e]={loaded:!0,width:this.width,height:this.height},t(null,this.width,this.height)},n.src=e},loadAllImages:function(e){e=e||this.props;var t=function(e,t){return function(i){i||this.props[e]==t&&this.forceUpdate()}.bind(this)}.bind(this);this.getSrcTypes().forEach(function(i){e[i]&&!this.isImageLoaded(e[i])&&this.loadImage(e[i],t(i,e[i]))}.bind(this))},isImageLoaded:function(e){return e&&e in this.imageCache&&this.imageCache[e].loaded},render:function(){var e={};!this.props.animationDisabled&&this.isAnimating()&&(e=s.imageAnimating(this.props.animationDuration));var t=[],i=function(i,o,a){var r=this.props[i];if(r){var l=[s.image,a,e],u={};if(this.isImageLoaded(r))u=this.getFitSizes(this.imageCache[r].width,this.imageCache[r].height);else{if(!this.isImageLoaded(this.props[i+"Thumbnail"]))return void t.push(n.createElement("div",{className:o+" not-loaded",style:l,key:r}));r=this.props[i+"Thumbnail"],u=this.getFitSizes(this.imageCache[r].width,this.imageCache[r].height)}l.push({width:u.width,height:u.height}),this.props.discourageDownloads?(l.push({backgroundImage:"url('"+r+"')"}),l.push(s.imageDiscourager),t.push(n.createElement("div",{className:o,style:l,key:r},n.createElement("div",{className:"download-blocker",style:[s.image.downloadBlocker]})))):t.push(n.createElement("img",{className:o,style:l,src:r,key:r}))}}.bind(this);i("nextSrc","image-next",s.imageNext),i("mainSrc","image-current",s.imageCurrent),i("prevSrc","image-prev",s.imagePrev);var o=function(){};return n.createElement("div",{className:"outer"+(this.state.isClosing?" closing":""),style:[s.outer,s.outer.animating(this.props.animationDuration),this.state.isClosing?s.outerClosing:{}]},n.createElement("div",{className:"inner",style:[s.inner]},t),this.props.prevSrc?n.createElement("button",{type:"button",className:"prev-button",key:"prev",style:[s.navButtons,s.navButtonPrev],onClick:this.isAnimating()?o:this.requestMovePrev}):"",this.props.nextSrc?n.createElement("button",{type:"button",className:"next-button",key:"next",style:[s.navButtons,s.navButtonNext],onClick:this.isAnimating()?o:this.requestMoveNext}):"",n.createElement("div",{className:"toolbar",style:[s.toolbar]},n.createElement("ul",{className:"toolbar-left",style:[s.toolbarSide,s.toolbarLeftSide]},n.createElement("li",{style:[s.toolbarItem]},n.createElement("span",{style:[s.toolbarItemChild]},this.props.imageTitle))),n.createElement("ul",{className:"toolbar-right",style:[s.toolbarSide,s.toolbarRightSide]},this.props.toolbarButtons?this.props.toolbarButtons.map(function(e,t){return n.createElement("li",{key:t,style:[s.toolbarItem]},e)}):"",n.createElement("li",{style:[s.toolbarItem]},n.createElement("button",{type:"button",className:"close",style:[s.toolbarItemChild,s.closeButton],onClick:this.isAnimating()?o:this.requestClose})))))}});t.exports=o(a)}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./styles":2}],2:[function(e,t,i){"use strict";var n="50px",o={outer:{backgroundColor:"rgba(0, 0, 0, 0.85)",position:"fixed",top:0,left:0,right:0,bottom:0,zIndex:1e3,width:"100%",height:"100%",animating:function(e){return{transition:"opacity "+String(e)+"ms"}}},outerClosing:{opacity:0},inner:{position:"absolute",top:0,left:0,right:0,bottom:0},image:{position:"absolute",top:0,bottom:0,margin:"auto",maxWidth:"100%",maxHeight:"100%"},imagePrev:{left:"-100%",right:"100%"},imageNext:{left:"100%",right:"-100%"},imageCurrent:{left:0,right:0},imageDiscourager:{backgroundRepeat:"no-repeat",backgroundPosition:"center",backgroundSize:"contain"},imageAnimating:function(e){return{transition:["left "+String(e)+"ms","right "+String(e)+"ms"].join(", ")}},navButtons:{border:"none",position:"absolute",top:0,bottom:0,width:"20px",height:"34px",padding:"40px 40px",margin:"auto",cursor:"pointer",opacity:.7,":hover":{opacity:1},":active":{opacity:.7}},navButtonPrev:{left:0,background:"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==') no-repeat center"},navButtonNext:{right:0,background:"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+') no-repeat center"},downloadBlocker:{position:"absolute",top:0,left:0,right:0,bottom:0,backgroundImage:"url('../img/please-use-download-button.gif')",backgroundSize:"cover"},toolbar:{backgroundColor:"rgba(0, 0, 0, 0.5)",position:"absolute",left:0,top:0,right:0,height:n},toolbarSide:{lineHeight:n,position:"absolute",top:0,bottom:0,margin:0,maxWidth:"48%"},toolbarLeftSide:{paddingLeft:"20px",paddingRight:0,left:0},toolbarRightSide:{paddingLeft:0,paddingRight:"20px",right:0},toolbarItem:{display:"inline-block",lineHeight:n,padding:"0 6px",color:"#FFFFFF",fontSize:"120%",maxWidth:"100%",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},toolbarItemChild:{verticalAlign:"middle"},closeButton:{width:"25px",height:"25px",cursor:"pointer",border:"none",background:"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=') no-repeat center",":hover":{opacity:.7},":active":{outline:"none"}}};t.exports=o},{}]},{},[1])(1)});