react-image-lightbox - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

dist/react-image-lightbox.js

@@ -83,3 +83,3 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.ReactImageLightbox = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 /*
- * react-image-lightbox 2.0.0
+ * react-image-lightbox 2.2.0
  * Copyright 2016 Chris Fritz All rights reserved.
@@ -1151,2 +1151,3 @@ * @license Open source under the MIT License
 var Radium = (typeof window !== "undefined" ? window['Radium'] : typeof global !== "undefined" ? global['Radium'] : null);
+var Util = require('./Util');
 var toolbarHeight = '50px';
@@ -1271,11 +1272,9 @@
         right: 0,
-        height: toolbarHeight
+        height: toolbarHeight,
+        display: 'flex',
+        justifyContent: 'space-between'
     },
     toolbarSide: {
-        lineHeight: toolbarHeight,
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        margin: 0,
-        maxWidth: '48%'
+        height: toolbarHeight,
+        margin: 0
     },
@@ -1285,3 +1284,5 @@ toolbarLeftSide: {
         paddingRight: 0,
-        left: 0
+        flex: '0 1 auto',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
     },
@@ -1291,3 +1292,3 @@ toolbarRightSide: {
         paddingRight: '20px',
-        right: 0
+        flex: '0 0 auto'
     },
@@ -1348,6 +1349,56 @@ toolbarItem: {
 
+// Use fallback styles for browsers without flexbox support
+if (Util.getIEVersion() < 10) {
+    styles.toolbar = {
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        right: 0,
+        height: toolbarHeight
+    };
+
+    styles.toolbarSide = {
+        lineHeight: toolbarHeight,
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        margin: 0,
+        maxWidth: '48%'
+    };
+
+    styles.toolbarLeftSide = {
+        paddingLeft: '20px',
+        paddingRight: 0,
+        left: 0
+    };
+
+    styles.toolbarRightSide = {
+        paddingLeft: 0,
+        paddingRight: '20px',
+        right: 0
+    };
+}
+
 module.exports = styles;
 
 }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
+},{"./Util":5}],5:[function(require,module,exports){
+/**
+ * Get the version of Internet Explorer in use, or undefined
+ *
+ * @return {?number} ieVersion - IE version as an integer, or undefined if not IE
+ */
+"use strict";
+
+function getIEVersion() {
+    var match = navigator.userAgent.match(/(?:MSIE |Trident\/.*; rv:)(\d+)/);
+    return match ? parseInt(match[1]) : undefined;
+}
+
+module.exports = {
+    getIEVersion: getIEVersion
+};
+
 },{}]},{},[3])(3)
 });

dist/react-image-lightbox.min.js

@@ -1,1 +0,1 @@
-!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,o){function n(s,r){if(!i[s]){if(!t[s]){var l="function"==typeof require&&require;if(!r&&l)return l(s,!0);if(a)return a(s,!0);var u=new Error("Cannot find module '"+s+"'");throw u.code="MODULE_NOT_FOUND",u}var d=i[s]={exports:{}};t[s][0].call(d.exports,function(e){var i=t[s][1][e];return n(i?i:e)},d,d.exports,e,t,i,o)}return i[s].exports}for(var a="function"==typeof require&&require,s=0;s<o.length;s++)n(o[s]);return n}({1:[function(e,t,i){"use strict";var o={MIN_ZOOM_LEVEL:0,MAX_ZOOM_LEVEL:300,ZOOM_RATIO:1.007,ZOOM_BUTTON_INCREMENT_SIZE:100,WHEEL_MOVE_X_THRESHOLD:200,WHEEL_MOVE_Y_THRESHOLD:1};t.exports=Object.freeze(o)},{}],2:[function(e,t,i){(function(e){"use strict";var i="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,o="undefined"!=typeof window?window.ReactDOM:"undefined"!=typeof e?e.ReactDOM:null;t.exports=i.createClass({displayName:"exports",portalElement:null,propTypes:{portalId:i.PropTypes.string},getDefaultProps:function(){return{portalId:"react-image-lightbox-portal"}},componentDidMount:function(){var e=this.props.portalId&&document.getElementById(this.props.portalId);e||(e=document.createElement("div"),e.id=this.props.portalId,document.body.appendChild(e)),this.portalElement=e,this.componentDidUpdate()},componentWillUnmount:function(){document.body.removeChild(this.portalElement)},componentDidUpdate:function(){o.render(i.createElement("div",this.props,this.props.children),this.portalElement)},render:function(){return null}})}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],3:[function(e,t,i){(function(i){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function n(){return window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth}function a(){return window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function s(){try{return window.self!==window.top}catch(e){return!0}}var r="undefined"!=typeof window?window.React:"undefined"!=typeof i?i.React:null,l=o(r),u="undefined"!=typeof window?window.Radium:"undefined"!=typeof i?i.Radium:null,d=o(u),h=e("./Styles"),c=o(h),m=e("./Portal"),f=o(m),p=e("./Constant"),g=o(p),y=l["default"].createClass({displayName:"ReactImageLightbox",propTypes:{mainSrc:r.PropTypes.string.isRequired,prevSrc:r.PropTypes.string,nextSrc:r.PropTypes.string,mainSrcThumbnail:r.PropTypes.string,prevSrcThumbnail:r.PropTypes.string,nextSrcThumbnail:r.PropTypes.string,onCloseRequest:r.PropTypes.func.isRequired,onMovePrevRequest:r.PropTypes.func,onMoveNextRequest:r.PropTypes.func,discourageDownloads:r.PropTypes.bool,animationDisabled:r.PropTypes.bool,animationOnKeyInput:r.PropTypes.bool,animationDuration:r.PropTypes.number,keyRepeatLimit:r.PropTypes.number,keyRepeatKeyupBonus:r.PropTypes.number,imageTitle:r.PropTypes.node,toolbarButtons:r.PropTypes.arrayOf(r.PropTypes.node),imagePadding:r.PropTypes.number,clickOutsideToClose:r.PropTypes.bool},getDefaultProps:function(){return{onMovePrevRequest:function(){},onMoveNextRequest:function(){},discourageDownloads:!1,animationDisabled:!1,animationOnKeyInput:!1,animationDuration:300,keyRepeatLimit:180,keyRepeatKeyupBonus:40,imagePadding:10,clickOutsideToClose:!0}},getInitialState:function(){return{isClosing:!this.props.animationDisabled,shouldAnimate:!1,zoomLevel:g["default"].MIN_ZOOM_LEVEL,offsetX:0,offsetY:0}},componentWillMount:function(){this.listenersAttached=!1,this.keyPressed=!1,this.imageCache={},this.lastKeyDownTime=0,this.resizeTimeout=null,this.wheelActionTimeout=null,this.resetScrollTimeout=null,this.scrollX=0,this.scrollY=0,this.isDragging=!1,this.dragStartX=0,this.dragStartY=0,this.dragStartOffsetX=0,this.dragStartOffsetY=0,this.keyCounter=0,this.moveRequested=!1},componentDidMount:function(){this.attachListeners(),this.props.animationDisabled||this.setState({isClosing:!1}),this.loadAllImages()},componentWillReceiveProps:function(e){var t=this,i=this.getSrcTypes().some(function(i){return t.props[i.name]!=e[i.name]});(i||this.moveRequested)&&(this.moveRequested=!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},o=new Date;if(!(o.getTime()-this.lastKeyDownTime<this.props.keyRepeatLimit&&t!=i.esc))switch(this.lastKeyDownTime=o.getTime(),t){case i.esc:e.preventDefault(),this.requestClose(e);break;case i.leftArrow:if(!this.props.prevSrc)return;e.preventDefault(),this.keyPressed=!0,this.requestMovePrev(e);break;case i.rightArrow:if(!this.props.nextSrc)return;e.preventDefault(),this.keyPressed=!0,this.requestMoveNext(e)}}},handleWindowResize:function(){clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout(this.forceUpdate.bind(this),100)},handleOuterMousewheel:function(e){var t=this;e.preventDefault(),e.stopPropagation();var i=g["default"].WHEEL_MOVE_X_THRESHOLD,o=0,n=500;if(clearTimeout(this.resetScrollTimeout),this.resetScrollTimeout=setTimeout(function(){t.scrollX=0,t.scrollY=0},300),null===this.wheelActionTimeout&&!this.isAnimating()){if(Math.abs(e.deltaY)<Math.abs(e.deltaX)){this.scrollY=0,this.scrollX+=e.deltaX;var a=i/2;this.scrollX>=i||e.deltaX>=a?(this.requestMoveNext(e),o=n,this.scrollX=0):(this.scrollX<=-1*i||e.deltaX<=-1*a)&&(this.requestMovePrev(e),o=n,this.scrollX=0)}0!==o&&(this.wheelActionTimeout=setTimeout(function(){t.wheelActionTimeout=null},o))}},handleImageMouseWheel:function(e){e.preventDefault();var t=g["default"].WHEEL_MOVE_Y_THRESHOLD;if(Math.abs(e.deltaY)>=Math.abs(e.deltaX)){if(e.stopPropagation(),Math.abs(e.deltaY)<t)return;this.scrollX=0,this.scrollY+=e.deltaY,this.changeZoom(this.state.zoomLevel-e.deltaY,e.clientX,e.clientY)}},getOffsetXFromWindowCenter:function(e){var t=n();return t/2-e},getOffsetYFromWindowCenter:function(e){var t=a();return t/2-e},handleImageDoubleClick:function(e){this.state.zoomLevel>g["default"].MIN_ZOOM_LEVEL?this.changeZoom(g["default"].MIN_ZOOM_LEVEL,e.clientX,e.clientY):this.changeZoom(this.state.zoomLevel+g["default"].ZOOM_BUTTON_INCREMENT_SIZE,e.clientX,e.clientY)},handleOuterMouseDown:function(e){e.preventDefault(),this.state.zoomLevel>g["default"].MIN_ZOOM_LEVEL&&(this.isDragging=!0,this.dragStartX=e.clientX,this.dragStartY=e.clientY,this.dragStartOffsetX=this.state.offsetX,this.dragStartOffsetY=this.state.offsetY)},handleOuterMouseMove:function(e){if(this.isDragging){var t=this.getZoomMultiplier(),i=(this.dragStartX-e.clientX)/t+this.dragStartOffsetX,o=(this.dragStartY-e.clientY)/t+this.dragStartOffsetY;this.state.offsetX===i&&this.state.offsetY===o||this.setState({offsetX:i,offsetY:o})}},handleMouseUp:function(){var e=this;if(this.isDragging){this.isDragging=!1;var t=this.getMaxOffsets(),i=Math.max(t.minX,Math.min(t.maxX,this.state.offsetX)),o=Math.max(t.minY,Math.min(t.maxY,this.state.offsetY));i===this.state.offsetX&&o===this.state.offsetY||(this.setState({offsetX:i,offsetY:o,shouldAnimate:!0}),setTimeout(function(){e.setState({shouldAnimate:!1})},this.props.animationDuration))}},handleZoomInButtonClick:function(){this.changeZoom(this.state.zoomLevel+g["default"].ZOOM_BUTTON_INCREMENT_SIZE)},handleZoomOutButtonClick:function(){this.changeZoom(this.state.zoomLevel-g["default"].ZOOM_BUTTON_INCREMENT_SIZE)},changeZoom:function(e,t,i){var o=n(),s=a();t="undefined"!=typeof t?t:o/2,i="undefined"!=typeof i?i:s/2;var r=Math.max(g["default"].MIN_ZOOM_LEVEL,Math.min(g["default"].MAX_ZOOM_LEVEL,e));if(r!==this.state.zoomLevel){if(r===g["default"].MIN_ZOOM_LEVEL)return this.setState({zoomLevel:r,offsetX:0,offsetY:0});var l=this.getZoomMultiplier(),u=this.getZoomMultiplier(r),d=t/o,h=i/s,c=o/l,m=s/l,f=o/u,p=s/u,y=(f-c)*(d-.5),v=(p-m)*(h-.5),I=this.state.offsetX-y,b=this.state.offsetY-v,M=this.getMaxOffsets();this.state.zoomLevel>r&&(I=Math.max(M.minX,Math.min(M.maxX,I)),b=Math.max(M.minY,Math.min(M.maxY,b))),this.setState({zoomLevel:r,offsetX:I,offsetY:b})}},requestClose:function(e){var t=this,i=function(){return t.props.onCloseRequest(e)};return this.props.animationDisabled||"keydown"===e.type&&!this.props.animationOnKeyInput?i():(this.setState({isClosing:!0}),void setTimeout(i,this.props.animationDuration))},requestMove:function(e,t){var i=this,o={zoomLevel:g["default"].MIN_ZOOM_LEVEL,offsetX:0,offsetY:0};this.props.animationDisabled||this.keyPressed&&!this.props.animationOnKeyInput||(o.shouldAnimate=!0,setTimeout(function(){return i.setState({shouldAnimate:!1})},this.props.animationDuration)),this.keyPressed=!1,this.moveRequested=!0,"prev"===e?(this.keyCounter--,this.setState(o),this.props.onMovePrevRequest(t)):(this.keyCounter++,this.setState(o),this.props.onMoveNextRequest(t))},requestMovePrev:function(e){this.requestMove("prev",e)},requestMoveNext:function(e){this.requestMove("next",e)},closeIfClickInner:function(e){e.target.className.search(/\binner\b/)>-1&&this.requestClose(e)},attachListeners:function(){this.listenersAttached||(document.addEventListener("keydown",this.handleKeyInput),document.addEventListener("keyup",this.handleKeyInput),window.addEventListener("resize",this.handleWindowResize),window.addEventListener("mouseup",this.handleMouseUp),s()&&window.top.addEventListener("mouseup",this.handleMouseUp),this.listenersAttached=!0)},detachListeners:function(){this.listenersAttached&&(document.removeEventListener("keydown",this.handleKeyInput),document.removeEventListener("keyup",this.handleKeyInput),window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("mouseup",this.handleMouseUp),s()&&window.top.removeEventListener("mouseup",this.handleMouseUp),this.listenersAttached=!1)},getSrcTypes:function(){return[{name:"mainSrc",keyEnding:"i"+this.keyCounter},{name:"mainSrcThumbnail",keyEnding:"t"+this.keyCounter},{name:"nextSrc",keyEnding:"i"+(this.keyCounter+1)},{name:"nextSrcThumbnail",keyEnding:"t"+(this.keyCounter+1)},{name:"prevSrc",keyEnding:"i"+(this.keyCounter-1)},{name:"prevSrcThumbnail",keyEnding:"t"+(this.keyCounter-1)}]},getFitSizes:function(e,t,i){var o=a(),s=n(),r=o-2*this.props.imagePadding,l=s-2*this.props.imagePadding;i||(r=Math.min(r,t),l=Math.min(l,e));var u=l/r,d=e/t,h={};return u>d?(h.width=e*r/t,h.height=r):(h.width=l,h.height=t*l/e),h},getZoomMultiplier:function(e){return e="undefined"!=typeof e?e:this.state.zoomLevel,Math.pow(g["default"].ZOOM_RATIO,e)},getMaxOffsets:function(e){e="undefined"!=typeof e?e:this.state.zoomLevel;var t=this.getBestImageForType("mainSrc");if(null===t)return{maxX:0,minX:0,maxY:0,minY:0};var i=n(),o=a(),s=this.getZoomMultiplier(e),r=0;r=t.width-i/s<0?(i/s-t.width)/2:(t.width-i/s)/2;var l=0;return l=t.height-o/s<0?(o/s-t.height)/2:(t.height-o/s)/2,{maxX:r,minX:-1*r,maxY:l,minY:-1*l}},isAnimating:function(){return this.state.shouldAnimate||this.state.isClosing},loadImage:function(e,t){var i=this;if(this.isImageLoaded(e))return void setTimeout(function(){t(null,i.imageCache[e].width,i.imageCache[e].height)},1);var o=this,n=new Image;n.onerror=function(){t("image load error")},n.onload=function(){o.imageCache[e]={loaded:!0,width:this.width,height:this.height},t(null,this.width,this.height)},n.src=e},loadAllImages:function(e){var t=this;e=e||this.props;var i=function(e,i){return function(o){return o?void(window.console&&window.console.warn(o)):void(t.props[e]==i&&t.forceUpdate())}};this.getSrcTypes().forEach(function(o){var n=o.name;e[n]&&!t.isImageLoaded(e[n])&&t.loadImage(e[n],i(n,e[n]))})},isImageLoaded:function(e){return e&&e in this.imageCache&&this.imageCache[e].loaded},getBestImageForType:function(e){var t=this.props[e],i={};if(this.isImageLoaded(t))i=this.getFitSizes(this.imageCache[t].width,this.imageCache[t].height);else{if(!this.isImageLoaded(this.props[e+"Thumbnail"]))return null;t=this.props[e+"Thumbnail"],i=this.getFitSizes(this.imageCache[t].width,this.imageCache[t].height,!0)}return{src:t,height:i.height,width:i.width}},render:function(){var e=this,t={};!this.props.animationDisabled&&this.isAnimating()&&(t=c["default"].imageAnimating(this.props.animationDuration));var i={};this.getSrcTypes().forEach(function(e){i[e.name]=e.keyEnding});var o=[],n=function(n,a,s){if(e.props[n]){var r=[c["default"].image,s,t];e.state.zoomLevel>g["default"].MIN_ZOOM_LEVEL&&r.push({cursor:"move"});var u=e.getBestImageForType(n);if(null===u)return void o.push(l["default"].createElement("div",{className:a+" not-loaded",style:r,key:e.props[n]+i[n]}));r.push({width:u.width,height:u.height});var d=u.src;e.props.discourageDownloads?(r.push({backgroundImage:"url('"+d+"')"}),r.push(c["default"].imageDiscourager),o.push(l["default"].createElement("div",{className:a,onDoubleClick:e.handleImageDoubleClick,onWheel:e.handleImageMouseWheel,style:r,key:d+i[n]},l["default"].createElement("div",{className:"download-blocker",style:[c["default"].downloadBlocker]})))):o.push(l["default"].createElement("img",{className:a,onDoubleClick:e.handleImageDoubleClick,onWheel:e.handleImageMouseWheel,style:r,src:d,key:d+i[n]}))}},a=this.getZoomMultiplier();n("nextSrc","image-next",c["default"].imageNext),n("mainSrc","image-current",c["default"].imageCurrent(a,a*this.state.offsetX,a*this.state.offsetY)),n("prevSrc","image-prev",c["default"].imagePrev);var s=function(){},r=[c["default"].toolbarItemChild,c["default"].builtinButton,c["default"].zoomInButton],d=[c["default"].toolbarItemChild,c["default"].builtinButton,c["default"].zoomOutButton],h=this.handleZoomInButtonClick,m=this.handleZoomOutButtonClick;return this.state.zoomLevel===g["default"].MAX_ZOOM_LEVEL&&(r.push(c["default"].builtinButtonDisabled),h=s),this.state.zoomLevel===g["default"].MIN_ZOOM_LEVEL&&(d.push(c["default"].builtinButtonDisabled),m=s),this.isAnimating()&&(h=s,m=s),l["default"].createElement(f["default"],null,l["default"].createElement(u.StyleRoot,null,l["default"].createElement("div",{className:"outer"+(this.state.isClosing?" closing":""),onWheel:this.handleOuterMousewheel,onMouseMove:this.handleOuterMouseMove,onMouseDown:this.handleOuterMouseDown,onMouseUp:this.handleOuterMouseUp,style:[c["default"].outer,c["default"].outerAnimating(this.props.animationDuration,this.state.isClosing),this.state.isClosing?c["default"].outerClosing:{}]},l["default"].createElement("div",{className:"inner",onClick:this.props.clickOutsideToClose?this.closeIfClickInner:s,style:[c["default"].inner]},o),this.props.prevSrc?l["default"].createElement("button",{type:"button",className:"prev-button",key:"prev",style:[c["default"].navButtons,c["default"].navButtonPrev],onClick:this.isAnimating()?s:this.requestMovePrev}):"",this.props.nextSrc?l["default"].createElement("button",{type:"button",className:"next-button",key:"next",style:[c["default"].navButtons,c["default"].navButtonNext],onClick:this.isAnimating()?s:this.requestMoveNext}):"",l["default"].createElement("div",{className:"toolbar",style:[c["default"].toolbar]},l["default"].createElement("ul",{className:"toolbar-left",style:[c["default"].toolbarSide,c["default"].toolbarLeftSide]},l["default"].createElement("li",{style:[c["default"].toolbarItem]},l["default"].createElement("span",{style:[c["default"].toolbarItemChild]},this.props.imageTitle))),l["default"].createElement("ul",{className:"toolbar-right",style:[c["default"].toolbarSide,c["default"].toolbarRightSide]},this.props.toolbarButtons?this.props.toolbarButtons.map(function(e,t){return l["default"].createElement("li",{key:t,style:[c["default"].toolbarItem]},e)}):"",l["default"].createElement("li",{style:[c["default"].toolbarItem]},l["default"].createElement("button",{type:"button",key:"zoom-in",className:"zoom-in",style:r,onClick:h})),l["default"].createElement("li",{style:[c["default"].toolbarItem]},l["default"].createElement("button",{type:"button",key:"zoom-out",className:"zoom-out",style:d,onClick:m})),l["default"].createElement("li",{style:[c["default"].toolbarItem]},l["default"].createElement("button",{type:"button",key:"close",className:"close",style:[c["default"].toolbarItemChild,c["default"].builtinButton,c["default"].closeButton],onClick:this.isAnimating()?s:this.requestClose})))))))}});t.exports=d["default"].call(void 0,y)}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Constant":1,"./Portal":2,"./Styles":4}],4:[function(e,t,i){(function(e){"use strict";var i="undefined"!=typeof window?window.Radium:"undefined"!=typeof e?e.Radium:null,o="50px",n=i.keyframes({"0%":{opacity:1},"100%":{opacity:0}},"closeWindow"),a={outer:{backgroundColor:"rgba(0, 0, 0, 0.85)",position:"fixed",top:0,left:0,right:0,bottom:0,zIndex:1e3,width:"100%",height:"100%"},outerAnimating:function(e,t){return{transition:"opacity "+String(e)+"ms",animationDuration:String(e)+"ms",animationDirection:t?"normal":"reverse",animationName:n}},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:function(e,t,i){return{transform:"scale3d("+e+","+e+",1) ",left:-1*t,right:t,top:-1*i,bottom:i}},imageDiscourager:{backgroundRepeat:"no-repeat",backgroundPosition:"center",backgroundSize:"contain"},imageAnimating:function(e){return{transition:["transform "+String(e)+"ms","left "+String(e)+"ms","top "+String(e)+"ms","right "+String(e)+"ms","bottom "+String(e)+"ms"].join(", ")}},navButtons:{border:"none",position:"absolute",top:0,bottom:0,width:"20px",height:"34px",padding:"40px 30px",margin:"auto",cursor:"pointer",opacity:.7,":hover":{opacity:1},":active":{opacity:.7}},navButtonPrev:{left:0,background:"rgba(0,0,0,0.2) url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==') no-repeat center"},navButtonNext:{right:0,background:"rgba(0,0,0,0.2) url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+') no-repeat center"},downloadBlocker:{position:"absolute",top:0,left:0,right:0,bottom:0,backgroundImage:"url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')",backgroundSize:"cover"},toolbar:{backgroundColor:"rgba(0, 0, 0, 0.5)",position:"absolute",left:0,top:0,right:0,height:o},toolbarSide:{lineHeight:o,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:o,padding:0,color:"#FFFFFF",fontSize:"120%",maxWidth:"100%",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},toolbarItemChild:{verticalAlign:"middle"},builtinButton:{width:"40px",height:"35px",cursor:"pointer",border:"none",opacity:.7,":hover":{opacity:1},":active":{outline:"none"}},builtinButtonDisabled:{cursor:"default",opacity:.5,":hover":{opacity:.5}},closeButton:{background:"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=') no-repeat center"},zoomInButton:{background:"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+') no-repeat center"},zoomOutButton:{background:"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=') no-repeat center"}};t.exports=a}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[3])(3)});
+!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,o){function n(s,r){if(!i[s]){if(!t[s]){var l="function"==typeof require&&require;if(!r&&l)return l(s,!0);if(a)return a(s,!0);var u=new Error("Cannot find module '"+s+"'");throw u.code="MODULE_NOT_FOUND",u}var d=i[s]={exports:{}};t[s][0].call(d.exports,function(e){var i=t[s][1][e];return n(i?i:e)},d,d.exports,e,t,i,o)}return i[s].exports}for(var a="function"==typeof require&&require,s=0;s<o.length;s++)n(o[s]);return n}({1:[function(e,t,i){"use strict";var o={MIN_ZOOM_LEVEL:0,MAX_ZOOM_LEVEL:300,ZOOM_RATIO:1.007,ZOOM_BUTTON_INCREMENT_SIZE:100,WHEEL_MOVE_X_THRESHOLD:200,WHEEL_MOVE_Y_THRESHOLD:1};t.exports=Object.freeze(o)},{}],2:[function(e,t,i){(function(e){"use strict";var i="undefined"!=typeof window?window.React:"undefined"!=typeof e?e.React:null,o="undefined"!=typeof window?window.ReactDOM:"undefined"!=typeof e?e.ReactDOM:null;t.exports=i.createClass({displayName:"exports",portalElement:null,propTypes:{portalId:i.PropTypes.string},getDefaultProps:function(){return{portalId:"react-image-lightbox-portal"}},componentDidMount:function(){var e=this.props.portalId&&document.getElementById(this.props.portalId);e||(e=document.createElement("div"),e.id=this.props.portalId,document.body.appendChild(e)),this.portalElement=e,this.componentDidUpdate()},componentWillUnmount:function(){document.body.removeChild(this.portalElement)},componentDidUpdate:function(){o.render(i.createElement("div",this.props,this.props.children),this.portalElement)},render:function(){return null}})}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],3:[function(e,t,i){(function(i){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function n(){return window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth}function a(){return window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}function s(){try{return window.self!==window.top}catch(e){return!0}}var r="undefined"!=typeof window?window.React:"undefined"!=typeof i?i.React:null,l=o(r),u="undefined"!=typeof window?window.Radium:"undefined"!=typeof i?i.Radium:null,d=o(u),h=e("./Styles"),c=o(h),m=e("./Portal"),f=o(m),p=e("./Constant"),g=o(p),y=l["default"].createClass({displayName:"ReactImageLightbox",propTypes:{mainSrc:r.PropTypes.string.isRequired,prevSrc:r.PropTypes.string,nextSrc:r.PropTypes.string,mainSrcThumbnail:r.PropTypes.string,prevSrcThumbnail:r.PropTypes.string,nextSrcThumbnail:r.PropTypes.string,onCloseRequest:r.PropTypes.func.isRequired,onMovePrevRequest:r.PropTypes.func,onMoveNextRequest:r.PropTypes.func,discourageDownloads:r.PropTypes.bool,animationDisabled:r.PropTypes.bool,animationOnKeyInput:r.PropTypes.bool,animationDuration:r.PropTypes.number,keyRepeatLimit:r.PropTypes.number,keyRepeatKeyupBonus:r.PropTypes.number,imageTitle:r.PropTypes.node,toolbarButtons:r.PropTypes.arrayOf(r.PropTypes.node),imagePadding:r.PropTypes.number,clickOutsideToClose:r.PropTypes.bool},getDefaultProps:function(){return{onMovePrevRequest:function(){},onMoveNextRequest:function(){},discourageDownloads:!1,animationDisabled:!1,animationOnKeyInput:!1,animationDuration:300,keyRepeatLimit:180,keyRepeatKeyupBonus:40,imagePadding:10,clickOutsideToClose:!0}},getInitialState:function(){return{isClosing:!this.props.animationDisabled,shouldAnimate:!1,zoomLevel:g["default"].MIN_ZOOM_LEVEL,offsetX:0,offsetY:0}},componentWillMount:function(){this.listenersAttached=!1,this.keyPressed=!1,this.imageCache={},this.lastKeyDownTime=0,this.resizeTimeout=null,this.wheelActionTimeout=null,this.resetScrollTimeout=null,this.scrollX=0,this.scrollY=0,this.isDragging=!1,this.dragStartX=0,this.dragStartY=0,this.dragStartOffsetX=0,this.dragStartOffsetY=0,this.keyCounter=0,this.moveRequested=!1},componentDidMount:function(){this.attachListeners(),this.props.animationDisabled||this.setState({isClosing:!1}),this.loadAllImages()},componentWillReceiveProps:function(e){var t=this,i=this.getSrcTypes().some(function(i){return t.props[i.name]!=e[i.name]});(i||this.moveRequested)&&(this.moveRequested=!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},o=new Date;if(!(o.getTime()-this.lastKeyDownTime<this.props.keyRepeatLimit&&t!=i.esc))switch(this.lastKeyDownTime=o.getTime(),t){case i.esc:e.preventDefault(),this.requestClose(e);break;case i.leftArrow:if(!this.props.prevSrc)return;e.preventDefault(),this.keyPressed=!0,this.requestMovePrev(e);break;case i.rightArrow:if(!this.props.nextSrc)return;e.preventDefault(),this.keyPressed=!0,this.requestMoveNext(e)}}},handleWindowResize:function(){clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout(this.forceUpdate.bind(this),100)},handleOuterMousewheel:function(e){var t=this;e.preventDefault(),e.stopPropagation();var i=g["default"].WHEEL_MOVE_X_THRESHOLD,o=0,n=500;if(clearTimeout(this.resetScrollTimeout),this.resetScrollTimeout=setTimeout(function(){t.scrollX=0,t.scrollY=0},300),null===this.wheelActionTimeout&&!this.isAnimating()){if(Math.abs(e.deltaY)<Math.abs(e.deltaX)){this.scrollY=0,this.scrollX+=e.deltaX;var a=i/2;this.scrollX>=i||e.deltaX>=a?(this.requestMoveNext(e),o=n,this.scrollX=0):(this.scrollX<=-1*i||e.deltaX<=-1*a)&&(this.requestMovePrev(e),o=n,this.scrollX=0)}0!==o&&(this.wheelActionTimeout=setTimeout(function(){t.wheelActionTimeout=null},o))}},handleImageMouseWheel:function(e){e.preventDefault();var t=g["default"].WHEEL_MOVE_Y_THRESHOLD;if(Math.abs(e.deltaY)>=Math.abs(e.deltaX)){if(e.stopPropagation(),Math.abs(e.deltaY)<t)return;this.scrollX=0,this.scrollY+=e.deltaY,this.changeZoom(this.state.zoomLevel-e.deltaY,e.clientX,e.clientY)}},getOffsetXFromWindowCenter:function(e){var t=n();return t/2-e},getOffsetYFromWindowCenter:function(e){var t=a();return t/2-e},handleImageDoubleClick:function(e){this.state.zoomLevel>g["default"].MIN_ZOOM_LEVEL?this.changeZoom(g["default"].MIN_ZOOM_LEVEL,e.clientX,e.clientY):this.changeZoom(this.state.zoomLevel+g["default"].ZOOM_BUTTON_INCREMENT_SIZE,e.clientX,e.clientY)},handleOuterMouseDown:function(e){e.preventDefault(),this.state.zoomLevel>g["default"].MIN_ZOOM_LEVEL&&(this.isDragging=!0,this.dragStartX=e.clientX,this.dragStartY=e.clientY,this.dragStartOffsetX=this.state.offsetX,this.dragStartOffsetY=this.state.offsetY)},handleOuterMouseMove:function(e){if(this.isDragging){var t=this.getZoomMultiplier(),i=(this.dragStartX-e.clientX)/t+this.dragStartOffsetX,o=(this.dragStartY-e.clientY)/t+this.dragStartOffsetY;(this.state.offsetX!==i||this.state.offsetY!==o)&&this.setState({offsetX:i,offsetY:o})}},handleMouseUp:function(){var e=this;if(this.isDragging){this.isDragging=!1;var t=this.getMaxOffsets(),i=Math.max(t.minX,Math.min(t.maxX,this.state.offsetX)),o=Math.max(t.minY,Math.min(t.maxY,this.state.offsetY));(i!==this.state.offsetX||o!==this.state.offsetY)&&(this.setState({offsetX:i,offsetY:o,shouldAnimate:!0}),setTimeout(function(){e.setState({shouldAnimate:!1})},this.props.animationDuration))}},handleZoomInButtonClick:function(){this.changeZoom(this.state.zoomLevel+g["default"].ZOOM_BUTTON_INCREMENT_SIZE)},handleZoomOutButtonClick:function(){this.changeZoom(this.state.zoomLevel-g["default"].ZOOM_BUTTON_INCREMENT_SIZE)},changeZoom:function(e,t,i){var o=n(),s=a();t="undefined"!=typeof t?t:o/2,i="undefined"!=typeof i?i:s/2;var r=Math.max(g["default"].MIN_ZOOM_LEVEL,Math.min(g["default"].MAX_ZOOM_LEVEL,e));if(r!==this.state.zoomLevel){if(r===g["default"].MIN_ZOOM_LEVEL)return this.setState({zoomLevel:r,offsetX:0,offsetY:0});var l=this.getZoomMultiplier(),u=this.getZoomMultiplier(r),d=t/o,h=i/s,c=o/l,m=s/l,f=o/u,p=s/u,y=(f-c)*(d-.5),v=(p-m)*(h-.5),I=this.state.offsetX-y,b=this.state.offsetY-v,M=this.getMaxOffsets();this.state.zoomLevel>r&&(I=Math.max(M.minX,Math.min(M.maxX,I)),b=Math.max(M.minY,Math.min(M.maxY,b))),this.setState({zoomLevel:r,offsetX:I,offsetY:b})}},requestClose:function(e){var t=this,i=function(){return t.props.onCloseRequest(e)};return this.props.animationDisabled||"keydown"===e.type&&!this.props.animationOnKeyInput?i():(this.setState({isClosing:!0}),void setTimeout(i,this.props.animationDuration))},requestMove:function(e,t){var i=this,o={zoomLevel:g["default"].MIN_ZOOM_LEVEL,offsetX:0,offsetY:0};this.props.animationDisabled||this.keyPressed&&!this.props.animationOnKeyInput||(o.shouldAnimate=!0,setTimeout(function(){return i.setState({shouldAnimate:!1})},this.props.animationDuration)),this.keyPressed=!1,this.moveRequested=!0,"prev"===e?(this.keyCounter--,this.setState(o),this.props.onMovePrevRequest(t)):(this.keyCounter++,this.setState(o),this.props.onMoveNextRequest(t))},requestMovePrev:function(e){this.requestMove("prev",e)},requestMoveNext:function(e){this.requestMove("next",e)},closeIfClickInner:function(e){e.target.className.search(/\binner\b/)>-1&&this.requestClose(e)},attachListeners:function(){this.listenersAttached||(document.addEventListener("keydown",this.handleKeyInput),document.addEventListener("keyup",this.handleKeyInput),window.addEventListener("resize",this.handleWindowResize),window.addEventListener("mouseup",this.handleMouseUp),s()&&window.top.addEventListener("mouseup",this.handleMouseUp),this.listenersAttached=!0)},detachListeners:function(){this.listenersAttached&&(document.removeEventListener("keydown",this.handleKeyInput),document.removeEventListener("keyup",this.handleKeyInput),window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("mouseup",this.handleMouseUp),s()&&window.top.removeEventListener("mouseup",this.handleMouseUp),this.listenersAttached=!1)},getSrcTypes:function(){return[{name:"mainSrc",keyEnding:"i"+this.keyCounter},{name:"mainSrcThumbnail",keyEnding:"t"+this.keyCounter},{name:"nextSrc",keyEnding:"i"+(this.keyCounter+1)},{name:"nextSrcThumbnail",keyEnding:"t"+(this.keyCounter+1)},{name:"prevSrc",keyEnding:"i"+(this.keyCounter-1)},{name:"prevSrcThumbnail",keyEnding:"t"+(this.keyCounter-1)}]},getFitSizes:function(e,t,i){var o=a(),s=n(),r=o-2*this.props.imagePadding,l=s-2*this.props.imagePadding;i||(r=Math.min(r,t),l=Math.min(l,e));var u=l/r,d=e/t,h={};return u>d?(h.width=e*r/t,h.height=r):(h.width=l,h.height=t*l/e),h},getZoomMultiplier:function(e){return e="undefined"!=typeof e?e:this.state.zoomLevel,Math.pow(g["default"].ZOOM_RATIO,e)},getMaxOffsets:function(e){e="undefined"!=typeof e?e:this.state.zoomLevel;var t=this.getBestImageForType("mainSrc");if(null===t)return{maxX:0,minX:0,maxY:0,minY:0};var i=n(),o=a(),s=this.getZoomMultiplier(e),r=0;r=t.width-i/s<0?(i/s-t.width)/2:(t.width-i/s)/2;var l=0;return l=t.height-o/s<0?(o/s-t.height)/2:(t.height-o/s)/2,{maxX:r,minX:-1*r,maxY:l,minY:-1*l}},isAnimating:function(){return this.state.shouldAnimate||this.state.isClosing},loadImage:function(e,t){var i=this;if(this.isImageLoaded(e))return void setTimeout(function(){t(null,i.imageCache[e].width,i.imageCache[e].height)},1);var o=this,n=new Image;n.onerror=function(){t("image load error")},n.onload=function(){o.imageCache[e]={loaded:!0,width:this.width,height:this.height},t(null,this.width,this.height)},n.src=e},loadAllImages:function(e){var t=this;e=e||this.props;var i=function(e,i){return function(o){return o?void(window.console&&window.console.warn(o)):void(t.props[e]==i&&t.forceUpdate())}};this.getSrcTypes().forEach(function(o){var n=o.name;e[n]&&!t.isImageLoaded(e[n])&&t.loadImage(e[n],i(n,e[n]))})},isImageLoaded:function(e){return e&&e in this.imageCache&&this.imageCache[e].loaded},getBestImageForType:function(e){var t=this.props[e],i={};if(this.isImageLoaded(t))i=this.getFitSizes(this.imageCache[t].width,this.imageCache[t].height);else{if(!this.isImageLoaded(this.props[e+"Thumbnail"]))return null;t=this.props[e+"Thumbnail"],i=this.getFitSizes(this.imageCache[t].width,this.imageCache[t].height,!0)}return{src:t,height:i.height,width:i.width}},render:function(){var e=this,t={};!this.props.animationDisabled&&this.isAnimating()&&(t=c["default"].imageAnimating(this.props.animationDuration));var i={};this.getSrcTypes().forEach(function(e){i[e.name]=e.keyEnding});var o=[],n=function(n,a,s){if(e.props[n]){var r=[c["default"].image,s,t];e.state.zoomLevel>g["default"].MIN_ZOOM_LEVEL&&r.push({cursor:"move"});var u=e.getBestImageForType(n);if(null===u)return void o.push(l["default"].createElement("div",{className:a+" not-loaded",style:r,key:e.props[n]+i[n]}));r.push({width:u.width,height:u.height});var d=u.src;e.props.discourageDownloads?(r.push({backgroundImage:"url('"+d+"')"}),r.push(c["default"].imageDiscourager),o.push(l["default"].createElement("div",{className:a,onDoubleClick:e.handleImageDoubleClick,onWheel:e.handleImageMouseWheel,style:r,key:d+i[n]},l["default"].createElement("div",{className:"download-blocker",style:[c["default"].downloadBlocker]})))):o.push(l["default"].createElement("img",{className:a,onDoubleClick:e.handleImageDoubleClick,onWheel:e.handleImageMouseWheel,style:r,src:d,key:d+i[n]}))}},a=this.getZoomMultiplier();n("nextSrc","image-next",c["default"].imageNext),n("mainSrc","image-current",c["default"].imageCurrent(a,a*this.state.offsetX,a*this.state.offsetY)),n("prevSrc","image-prev",c["default"].imagePrev);var s=function(){},r=[c["default"].toolbarItemChild,c["default"].builtinButton,c["default"].zoomInButton],d=[c["default"].toolbarItemChild,c["default"].builtinButton,c["default"].zoomOutButton],h=this.handleZoomInButtonClick,m=this.handleZoomOutButtonClick;return this.state.zoomLevel===g["default"].MAX_ZOOM_LEVEL&&(r.push(c["default"].builtinButtonDisabled),h=s),this.state.zoomLevel===g["default"].MIN_ZOOM_LEVEL&&(d.push(c["default"].builtinButtonDisabled),m=s),this.isAnimating()&&(h=s,m=s),l["default"].createElement(f["default"],null,l["default"].createElement(u.StyleRoot,null,l["default"].createElement("div",{className:"outer"+(this.state.isClosing?" closing":""),onWheel:this.handleOuterMousewheel,onMouseMove:this.handleOuterMouseMove,onMouseDown:this.handleOuterMouseDown,onMouseUp:this.handleOuterMouseUp,style:[c["default"].outer,c["default"].outerAnimating(this.props.animationDuration,this.state.isClosing),this.state.isClosing?c["default"].outerClosing:{}]},l["default"].createElement("div",{className:"inner",onClick:this.props.clickOutsideToClose?this.closeIfClickInner:s,style:[c["default"].inner]},o),this.props.prevSrc?l["default"].createElement("button",{type:"button",className:"prev-button",key:"prev",style:[c["default"].navButtons,c["default"].navButtonPrev],onClick:this.isAnimating()?s:this.requestMovePrev}):"",this.props.nextSrc?l["default"].createElement("button",{type:"button",className:"next-button",key:"next",style:[c["default"].navButtons,c["default"].navButtonNext],onClick:this.isAnimating()?s:this.requestMoveNext}):"",l["default"].createElement("div",{className:"toolbar",style:[c["default"].toolbar]},l["default"].createElement("ul",{className:"toolbar-left",style:[c["default"].toolbarSide,c["default"].toolbarLeftSide]},l["default"].createElement("li",{style:[c["default"].toolbarItem]},l["default"].createElement("span",{style:[c["default"].toolbarItemChild]},this.props.imageTitle))),l["default"].createElement("ul",{className:"toolbar-right",style:[c["default"].toolbarSide,c["default"].toolbarRightSide]},this.props.toolbarButtons?this.props.toolbarButtons.map(function(e,t){return l["default"].createElement("li",{key:t,style:[c["default"].toolbarItem]},e)}):"",l["default"].createElement("li",{style:[c["default"].toolbarItem]},l["default"].createElement("button",{type:"button",key:"zoom-in",className:"zoom-in",style:r,onClick:h})),l["default"].createElement("li",{style:[c["default"].toolbarItem]},l["default"].createElement("button",{type:"button",key:"zoom-out",className:"zoom-out",style:d,onClick:m})),l["default"].createElement("li",{style:[c["default"].toolbarItem]},l["default"].createElement("button",{type:"button",key:"close",className:"close",style:[c["default"].toolbarItemChild,c["default"].builtinButton,c["default"].closeButton],onClick:this.isAnimating()?s:this.requestClose})))))))}});t.exports=d["default"].call(void 0,y)}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Constant":1,"./Portal":2,"./Styles":4}],4:[function(e,t,i){(function(i){"use strict";var o="undefined"!=typeof window?window.Radium:"undefined"!=typeof i?i.Radium:null,n=e("./Util"),a="50px",s=o.keyframes({"0%":{opacity:1},"100%":{opacity:0}},"closeWindow"),r={outer:{backgroundColor:"rgba(0, 0, 0, 0.85)",position:"fixed",top:0,left:0,right:0,bottom:0,zIndex:1e3,width:"100%",height:"100%"},outerAnimating:function(e,t){return{transition:"opacity "+String(e)+"ms",animationDuration:String(e)+"ms",animationDirection:t?"normal":"reverse",animationName:s}},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:function(e,t,i){return{transform:"scale3d("+e+","+e+",1) ",left:-1*t,right:t,top:-1*i,bottom:i}},imageDiscourager:{backgroundRepeat:"no-repeat",backgroundPosition:"center",backgroundSize:"contain"},imageAnimating:function(e){return{transition:["transform "+String(e)+"ms","left "+String(e)+"ms","top "+String(e)+"ms","right "+String(e)+"ms","bottom "+String(e)+"ms"].join(", ")}},navButtons:{border:"none",position:"absolute",top:0,bottom:0,width:"20px",height:"34px",padding:"40px 30px",margin:"auto",cursor:"pointer",opacity:.7,":hover":{opacity:1},":active":{opacity:.7}},navButtonPrev:{left:0,background:"rgba(0,0,0,0.2) url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==') no-repeat center"},navButtonNext:{right:0,background:"rgba(0,0,0,0.2) url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+') no-repeat center"},downloadBlocker:{position:"absolute",top:0,left:0,right:0,bottom:0,backgroundImage:"url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')",backgroundSize:"cover"},toolbar:{backgroundColor:"rgba(0, 0, 0, 0.5)",position:"absolute",left:0,top:0,right:0,height:a,display:"flex",justifyContent:"space-between"},toolbarSide:{height:a,margin:0},toolbarLeftSide:{paddingLeft:"20px",paddingRight:0,flex:"0 1 auto",overflow:"hidden",textOverflow:"ellipsis"},toolbarRightSide:{paddingLeft:0,paddingRight:"20px",flex:"0 0 auto"},toolbarItem:{display:"inline-block",lineHeight:a,padding:0,color:"#FFFFFF",fontSize:"120%",maxWidth:"100%",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},toolbarItemChild:{verticalAlign:"middle"},builtinButton:{width:"40px",height:"35px",cursor:"pointer",border:"none",opacity:.7,":hover":{opacity:1},":active":{outline:"none"}},builtinButtonDisabled:{cursor:"default",opacity:.5,":hover":{opacity:.5}},closeButton:{background:"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=') no-repeat center"},zoomInButton:{background:"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+') no-repeat center"},zoomOutButton:{background:"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=') no-repeat center"}};n.getIEVersion()<10&&(r.toolbar={backgroundColor:"rgba(0, 0, 0, 0.5)",position:"absolute",left:0,top:0,right:0,height:a},r.toolbarSide={lineHeight:a,position:"absolute",top:0,bottom:0,margin:0,maxWidth:"48%"},r.toolbarLeftSide={paddingLeft:"20px",paddingRight:0,left:0},r.toolbarRightSide={paddingLeft:0,paddingRight:"20px",right:0}),t.exports=r}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./Util":5}],5:[function(e,t,i){"use strict";function o(){var e=navigator.userAgent.match(/(?:MSIE |Trident\/.*; rv:)(\d+)/);return e?parseInt(e[1]):void 0}t.exports={getIEVersion:o}},{}]},{},[3])(3)});

example/dist/bundle.js

@@ -82,2 +82,3 @@ require=(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 var Radium = require('radium');
+var Util = require('./Util');
 var toolbarHeight = '50px';
@@ -202,11 +203,9 @@
         right: 0,
-        height: toolbarHeight
+        height: toolbarHeight,
+        display: 'flex',
+        justifyContent: 'space-between'
     },
     toolbarSide: {
-        lineHeight: toolbarHeight,
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        margin: 0,
-        maxWidth: '48%'
+        height: toolbarHeight,
+        margin: 0
     },
@@ -216,3 +215,5 @@ toolbarLeftSide: {
         paddingRight: 0,
-        left: 0
+        flex: '0 1 auto',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
     },
@@ -222,3 +223,3 @@ toolbarRightSide: {
         paddingRight: '20px',
-        right: 0
+        flex: '0 0 auto'
     },
@@ -279,7 +280,57 @@ toolbarItem: {
 
+// Use fallback styles for browsers without flexbox support
+if (Util.getIEVersion() < 10) {
+    styles.toolbar = {
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        right: 0,
+        height: toolbarHeight
+    };
+
+    styles.toolbarSide = {
+        lineHeight: toolbarHeight,
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        margin: 0,
+        maxWidth: '48%'
+    };
+
+    styles.toolbarLeftSide = {
+        paddingLeft: '20px',
+        paddingRight: 0,
+        left: 0
+    };
+
+    styles.toolbarRightSide = {
+        paddingLeft: 0,
+        paddingRight: '20px',
+        right: 0
+    };
+}
+
 module.exports = styles;
 
-},{"radium":undefined}],"react-image-lightbox":[function(require,module,exports){
+},{"./Util":4,"radium":undefined}],4:[function(require,module,exports){
+/**
+ * Get the version of Internet Explorer in use, or undefined
+ *
+ * @return {?number} ieVersion - IE version as an integer, or undefined if not IE
+ */
+"use strict";
+
+function getIEVersion() {
+    var match = navigator.userAgent.match(/(?:MSIE |Trident\/.*; rv:)(\d+)/);
+    return match ? parseInt(match[1]) : undefined;
+}
+
+module.exports = {
+    getIEVersion: getIEVersion
+};
+
+},{}],"react-image-lightbox":[function(require,module,exports){
 /*
- * react-image-lightbox 2.0.0
+ * react-image-lightbox 2.2.0
  * Copyright 2016 Chris Fritz All rights reserved.
@@ -286,0 +337,0 @@ * @license Open source under the MIT License

lib/ReactImageLightbox.js

 /*
- * react-image-lightbox 2.0.0
+ * react-image-lightbox 2.2.0
  * Copyright 2016 Chris Fritz All rights reserved.
@@ -4,0 +4,0 @@ * @license Open source under the MIT License

lib/Styles.js

 'use strict';
 
 var Radium = require('radium');
+var Util = require('./Util');
 var toolbarHeight = '50px';
@@ -123,11 +124,9 @@
         right: 0,
-        height: toolbarHeight
+        height: toolbarHeight,
+        display: 'flex',
+        justifyContent: 'space-between'
     },
     toolbarSide: {
-        lineHeight: toolbarHeight,
-        position: 'absolute',
-        top: 0,
-        bottom: 0,
-        margin: 0,
-        maxWidth: '48%'
+        height: toolbarHeight,
+        margin: 0
     },
@@ -137,3 +136,5 @@ toolbarLeftSide: {
         paddingRight: 0,
-        left: 0
+        flex: '0 1 auto',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
     },
@@ -143,3 +144,3 @@ toolbarRightSide: {
         paddingRight: '20px',
-        right: 0
+        flex: '0 0 auto'
     },
@@ -200,2 +201,35 @@ toolbarItem: {
 
+// Use fallback styles for browsers without flexbox support
+if (Util.getIEVersion() < 10) {
+    styles.toolbar = {
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        right: 0,
+        height: toolbarHeight
+    };
+
+    styles.toolbarSide = {
+        lineHeight: toolbarHeight,
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        margin: 0,
+        maxWidth: '48%'
+    };
+
+    styles.toolbarLeftSide = {
+        paddingLeft: '20px',
+        paddingRight: 0,
+        left: 0
+    };
+
+    styles.toolbarRightSide = {
+        paddingLeft: 0,
+        paddingRight: '20px',
+        right: 0
+    };
+}
+
 module.exports = styles;

package.json

 {
   "name": "react-image-lightbox",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A lightbox component for React.js",
   "scripts": {
-    "start": "node_modules/.bin/gulp dev"
+    "start": "node_modules/.bin/gulp dev",
+    "prepublish": "node_modules/.bin/gulp clean && node_modules/.bin/gulp build"
   },
@@ -43,2 +44,2 @@ "main": "lib/ReactImageLightbox.js",
   }
-}
+}

src/ReactImageLightbox.js

 /*
- * react-image-lightbox 2.0.0
+ * react-image-lightbox 2.2.0
  * Copyright 2016 Chris Fritz All rights reserved.
@@ -4,0 +4,0 @@ * @license Open source under the MIT License

src/Styles.js

 const Radium = require('radium');
+const Util = require('./Util');
 const toolbarHeight = '50px';
@@ -128,10 +129,8 @@
         height          : toolbarHeight,
+        display         : 'flex',
+        justifyContent  : 'space-between',
     },
     toolbarSide: {
-        lineHeight : toolbarHeight,
-        position   : 'absolute',
-        top        : 0,
-        bottom     : 0,
-        margin     : 0,
-        maxWidth   : '48%',
+        height : toolbarHeight,
+        margin : 0,
     },
@@ -141,3 +140,5 @@ toolbarLeftSide: {
         paddingRight : 0,
-        left         : 0,
+        flex         : '0 1 auto',
+        overflow     : 'hidden',
+        textOverflow : 'ellipsis',
     },
@@ -147,3 +148,3 @@ toolbarRightSide: {
         paddingRight : '20px',
-        right        : 0,
+        flex         : '0 0 auto',
     },
@@ -204,2 +205,35 @@ toolbarItem: {
 
+// Use fallback styles for browsers without flexbox support
+if (Util.getIEVersion() < 10) {
+    styles.toolbar = {
+        backgroundColor : 'rgba(0, 0, 0, 0.5)',
+        position        : 'absolute',
+        left            : 0,
+        top             : 0,
+        right           : 0,
+        height          : toolbarHeight,
+    };
+
+    styles.toolbarSide = {
+        lineHeight : toolbarHeight,
+        position   : 'absolute',
+        top        : 0,
+        bottom     : 0,
+        margin     : 0,
+        maxWidth   : '48%',
+    };
+
+    styles.toolbarLeftSide = {
+        paddingLeft  : '20px',
+        paddingRight : 0,
+        left         : 0,
+    };
+
+    styles.toolbarRightSide = {
+        paddingLeft  : 0,
+        paddingRight : '20px',
+        right        : 0,
+    };
+}
+
 module.exports = styles;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2004006

increased by0.97%

Number of package files

53

increased by3.92%

Lines of code

26513

increased by1.78%

Worsened metrics

Number of low supply chain risk alerts

399

increased by19.82%

No dependency changes