react-trilogo-images
Version:
A simple, responsive lightbox component for displaying an array of images with React.js with extended features
2 lines (1 loc) • 29.8 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("prop-types"),require("react"),require("aphrodite"),require("react-scrolllock"),require("aphrodite/no-important"),require("react-transition-group"),require("react-dom")):"function"==typeof define&&define.amd?define(["prop-types","react","aphrodite","react-scrolllock","aphrodite/no-important","react-transition-group","react-dom"],e):t.Lightbox=e(t.PropTypes,t.React,t.aphrodite,t.ScrollLock,t.aphrodite,t.ReactTransitionGroup,t.ReactDOM)}(this,function(t,e,n,o,i,r,a){"use strict";function s(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=Object.assign({},t);return Object.keys(e).forEach(function(o){"object"===v(e[o])&&e[o]&&t[o]?n[o]=s(t[o],e[o]):n[o]=e[o]}),n}function l(t,e){var n=e.theme,o=t.direction,r=t.icon,a=t.onClick,l=t.size,c=k(t,["direction","icon","onClick","size"]),h=i.StyleSheet.create(s(L,n));return g.createElement("button",b({type:"button",className:i.css(h.arrow,h["arrow__direction__"+o],l&&h["arrow__size__"+l]),onClick:a,onTouchEnd:a},c),g.createElement(S,{fill:!!n.arrow&&n.arrow.fill||f.arrow.fill,type:r}))}function c(t,e){var n=e.theme,o=k(t,[]),r=i.StyleSheet.create(s(_,n));return g.createElement("div",b({id:"lightboxBackdrop",className:i.css(r.container)},o))}function h(t,e){var n=e.theme,o=t.icon,r=t.onClick,a=k(t,["icon","onClick"]),l=i.StyleSheet.create(s(T,n));return g.createElement("button",b({type:"button",className:i.css(l.actionButton),onClick:r,onTouchEnd:r},a),g.createElement(S,{fill:!!n.toolbarAction&&n.toolbarAction.fill||f.toolbarAction.fill,type:o}))}function u(t,e){var n=e.theme,o=t.customControls,r=t.onClose,a=t.showCloseButton,l=t.closeButtonTitle,c=k(t,["customControls","onClose","showCloseButton","closeButtonTitle"]),h=i.StyleSheet.create(s(A,n));return g.createElement("div",b({className:i.css(h.header)},c),o||g.createElement("span",null),!!a&&g.createElement("button",{title:l,className:i.css(h.close),onClick:r},g.createElement(S,{fill:!!n.close&&n.close.fill||f.close.fill,type:"close"})))}function p(t,e){var n=t.index,o=t.src,r=t.thumbnail,a=t.active,l=t.onClick,c=e.theme,h=r||o,u=i.StyleSheet.create(s(P,c));return g.createElement("div",{className:i.css(u.thumbnail,a&&u.thumbnail__active),onClick:function(t){t.preventDefault(),t.stopPropagation(),l(n)},style:{backgroundImage:'url("'+h+'")'}})}function d(t){var e=this;t.forEach(function(t){return e[t]=e[t].bind(e)})}function m(t){var e=t.srcSet||t.srcset;return Array.isArray(e)?e.join():e}t=t&&t.hasOwnProperty("default")?t.default:t;var g="default"in e?e.default:e;o=o&&o.hasOwnProperty("default")?o.default:o;var f={};f.container={background:"rgba(0, 0, 0, 0.8)",gutter:{horizontal:10,vertical:10},zIndex:2001},f.header={height:40},f.close={fill:"white"},f.footer={color:"white",count:{color:"rgba(255, 255, 255, 0.75)",fontSize:"0.85em"},height:"auto",gutter:{horizontal:0,vertical:5}},f.thumbnail={activeBorderColor:"white",size:50,gutter:2},f.arrow={background:"none",fill:"white",height:120},f.toolbarAction={background:"none",fill:"white",height:60};var v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},y=(function(){function t(t){this.value=t}function e(e){function n(i,r){try{var a=e[i](r),s=a.value;s instanceof t?Promise.resolve(s.value).then(function(t){n("next",t)},function(t){n("throw",t)}):o(a.done?"return":"normal",a.value)}catch(t){o("throw",t)}}function o(t,e){switch(t){case"return":i.resolve({value:e,done:!0});break;case"throw":i.reject(e);break;default:i.resolve({value:e,done:!1})}(i=i.next)?n(i.key,i.arg):r=null}var i,r;this._invoke=function(t,e){return new Promise(function(o,a){var s={key:t,arg:e,resolve:o,reject:a,next:null};r?r=r.next=s:(i=r=s,n(t,e))})},"function"!=typeof e.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(e.prototype[Symbol.asyncIterator]=function(){return this}),e.prototype.next=function(t){return this._invoke("next",t)},e.prototype.throw=function(t){return this._invoke("throw",t)},e.prototype.return=function(t){return this._invoke("return",t)}}(),function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}),w=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),b=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},x=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},k=function(t,e){var n={};for(var o in t)e.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(t,o)&&(n[o]=t[o]);return n},C=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},I=function(){function t(t,e){var n=[],o=!0,i=!1,r=void 0;try{for(var a,s=t[Symbol.iterator]();!(o=(a=s.next()).done)&&(n.push(a.value),!e||n.length!==e);o=!0);}catch(t){i=!0,r=t}finally{try{!o&&s.return&&s.return()}finally{if(i)throw r}}return n}return function(e,n){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return t(e,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),E={arrowLeft:function(t){return'<svg fill="'+t+'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" xml:space="preserve">\n\t\t<path d="M213.7,256L213.7,256L213.7,256L380.9,81.9c4.2-4.3,4.1-11.4-0.2-15.8l-29.9-30.6c-4.3-4.4-11.3-4.5-15.5-0.2L131.1,247.9 c-2.2,2.2-3.2,5.2-3,8.1c-0.1,3,0.9,5.9,3,8.1l204.2,212.7c4.2,4.3,11.2,4.2,15.5-0.2l29.9-30.6c4.3-4.4,4.4-11.5,0.2-15.8 L213.7,256z"/>\n\t</svg>'},arrowRight:function(t){return'<svg fill="'+t+'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" xml:space="preserve">\n\t\t<path d="M298.3,256L298.3,256L298.3,256L131.1,81.9c-4.2-4.3-4.1-11.4,0.2-15.8l29.9-30.6c4.3-4.4,11.3-4.5,15.5-0.2l204.2,212.7 c2.2,2.2,3.2,5.2,3,8.1c0.1,3-0.9,5.9-3,8.1L176.7,476.8c-4.2,4.3-11.2,4.2-15.5-0.2L131.3,446c-4.3-4.4-4.4-11.5-0.2-15.8 L298.3,256z"/>\n\t</svg>'},close:function(t){return'<svg fill="'+t+'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">\n\t\t<path d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4 L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1 c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1 c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z"/>\n\t</svg>'},zoomIn:function(t){return'<svg fill="'+t+'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 150 100">\n\t<g>\n\t\t<path d="M51.6,96.7c11,0,21-3.9,28.8-10.5l35,35c0.8,0.8,1.8,1.2,2.9,1.2c1,0,2.1-0.4,2.9-1.2c1.6-1.6,1.6-4.2,0-5.8l-35-35 c6.5-7.8,10.5-17.9,10.5-28.8c0-24.9-20.2-45.1-45.1-45.1C26.8,6.5,6.5,26.8,6.5,51.6C6.5,76.5,26.8,96.7,51.6,96.7z M51.6,14.7 c20.4,0,36.9,16.6,36.9,36.9C88.5,72,72,88.5,51.6,88.5c-20.4,0-36.9-16.6-36.9-36.9C14.7,31.3,31.3,14.7,51.6,14.7z"/>\n\t\t<path d="m47.5,78.3c0,2.3 1.8,4.1 4.1,4.1 2.3,0 4.1-1.8 4.1-4.1v-22.6h22.6c2.3,0 4.1-1.8 4.1-4.1s-1.8-4.1-4.1-4.1h-22.6v-22.6c0-2.3-1.8-4.1-4.1-4.1-2.3,0-4.1,1.8-4.1,4.1v22.6h-22.6c-2.3,0-4.1,1.8-4.1,4.1s1.8,4.1 4.1,4.1h22.6v22.6z"/>\n\t</g>\n</svg>'},zoomOut:function(t){return'<svg fill="'+t+'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 150 100" xml:space="preserve" class="">\n\t<g>\n <path d="m51.6,6.5c-24.9,0-45.1,20.2-45.1,45.1 0,24.9 20.2,45.1 45.1,45.1 11,0 21-3.9 28.9-10.5l35.1,35.1c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2 1.6-1.6 1.6-4.2 0-5.8l-35.1-35c6.5-7.8 10.5-17.9 10.5-28.9-0.1-24.9-20.3-45.1-45.2-45.1zm0,82.1c-20.4,0-37-16.6-37-37 0-20.4 16.6-37 37-37 20.4,0 37,16.6 37,37 0,20.4-16.6,37-37,37z" />\n <path d="m78.3,47.5h-53.4c-2.3,0-4.1,1.8-4.1,4.1s1.8,4.1 4.1,4.1h53.4c2.3,0 4.1-1.8 4.1-4.1s-1.8-4.1-4.1-4.1z" />\n </g>\n</svg>'},rotateLeft:function(t){return'<svg fill="'+t+'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 600 400">\n\t<g><path d="M261.397,17.983c-88.909,0-167.372,51.302-203.909,129.073L32.072,94.282L0,109.73l52.783,109.565l109.565-52.786 l-15.451-32.066L89.82,161.934c30.833-65.308,96.818-108.353,171.577-108.353c104.668,0,189.818,85.154,189.818,189.821 s-85.15,189.824-189.818,189.824c-61.631,0-119.663-30.109-155.228-80.539l-29.096,20.521 c42.241,59.87,111.143,95.613,184.324,95.613c124.286,0,225.407-101.122,225.407-225.419S385.684,17.983,261.397,17.983z" /></g>\n\t\t</svg>'},rotateRight:function(t){return'<svg fill="'+t+'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 100 70">\n\t\t<g><path d="M37.242,2.971c14.689,0,27.651,8.476,33.688,21.325l4.201-8.719l5.298,2.552l-8.721,18.102L53.605,27.51l2.553-5.298 l9.43,4.542C60.494,15.964,49.594,8.853,37.242,8.853C19.95,8.853,5.88,22.921,5.88,40.214s14.07,31.362,31.362,31.362 c10.183,0,19.769-4.975,25.647-13.307l4.805,3.391c-6.979,9.892-18.361,15.797-30.452,15.797C16.707,77.458,0,60.75,0,40.214 S16.707,2.971,37.242,2.971z"/></g>\n\t\t</svg>'},save:function(t){return'<svg fill="'+t+'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 650 400">\n\t<g>\n\t\t<path d="M473.7,485.75c6.8,0,12.3-5.5,12.3-12.3v-359.8c0-3.6-1.6-7-4.3-9.3L363,2.85c-0.2-0.2-0.4-0.3-0.6-0.4 c-0.3-0.2-0.5-0.4-0.8-0.6c-0.4-0.2-0.7-0.4-1.1-0.6c-0.3-0.1-0.6-0.3-0.9-0.4c-0.4-0.2-0.9-0.3-1.3-0.4c-0.3-0.1-0.6-0.2-0.9-0.2 c-0.8-0.1-1.5-0.2-2.3-0.2H12.3C5.5,0.05,0,5.55,0,12.35v461.3c0,6.8,5.5,12.3,12.3,12.3h461.4V485.75z M384.5,461.25h-283v-184.1 c0-3.7,3-6.6,6.6-6.6h269.8c3.7,0,6.6,3,6.6,6.6V461.25z M161.8,24.45h180.9v127.8c0,0.8-0.6,1.4-1.4,1.4h-178 c-0.8,0-1.4-0.7-1.4-1.4V24.45H161.8z M24.6,24.45h112.8v127.8c0,14.3,11.6,25.9,25.9,25.9h178c14.3,0,25.9-11.6,25.9-25.9V38.75 l94.2,80.6v341.9H409v-184.1c0-17.2-14-31.1-31.1-31.1H108.1c-17.2,0-31.1,14-31.1,31.1v184.2H24.6V24.45z" />\n\t\t<path d="M227.4,77.65h53.8v32.6c0,6.8,5.5,12.3,12.3,12.3s12.3-5.5,12.3-12.3v-44.8c0-6.8-5.5-12.3-12.3-12.3h-66.1 c-6.8,0-12.3,5.5-12.3,12.3S220.7,77.65,227.4,77.65z" />\n\t\t<path d="M304.5,322.85h-123c-6.8,0-12.3,5.5-12.3,12.3s5.5,12.3,12.3,12.3h123c6.8,0,12.3-5.5,12.3-12.3 S311.3,322.85,304.5,322.85z" />\n\t\t<path d="M304.5,387.75h-123c-6.8,0-12.3,5.5-12.3,12.3s5.5,12.3,12.3,12.3h123c6.8,0,12.3-5.5,12.3-12.3 S311.3,387.75,304.5,387.75z" />\n\t</g>\n</svg>'}},S=function(t){var e=t.fill,n=t.type,o=k(t,["fill","type"]),i=E[n];return g.createElement("span",b({dangerouslySetInnerHTML:{__html:i(e)}},o))};S.defaultProps={fill:"white"};var z={zoomIn:1,zoomOut:2,prev:3,next:4,rotateLeft:5,rotateRight:6,reset:7,close:8,scaleX:9,scaleY:10,save:11};l.defaultProps={size:"medium"},l.contextTypes={theme:t.object.isRequired};var L={arrow:{background:"none",border:"none",borderRadius:4,cursor:"pointer",outline:"none",padding:10,position:"absolute",top:"50%",WebkitTouchCallout:"none",userSelect:"none"},arrow__size__medium:{height:f.arrow.height,marginTop:f.arrow.height/-2,width:40,"@media (min-width: 768px)":{width:70}},arrow__size__small:{height:f.thumbnail.size,marginTop:f.thumbnail.size/-2,width:30,"@media (min-width: 500px)":{width:40}},arrow__direction__right:{right:f.container.gutter.horizontal},arrow__direction__left:{left:f.container.gutter.horizontal}};c.contextTypes={theme:t.object.isRequired};var _={container:{alignItems:"center",backgroundColor:f.container.background,boxSizing:"border-box",display:"flex",height:"100%",justifyContent:"center",left:0,paddingBottom:f.container.gutter.vertical,paddingLeft:f.container.gutter.horizontal,paddingRight:f.container.gutter.horizontal,paddingTop:f.container.gutter.vertical,position:"fixed",top:0,width:"100%",zIndex:f.container.zIndex}};h.contextTypes={theme:t.object.isRequired};var T={actionButton:{background:"none",border:"none",borderRadius:4,cursor:"pointer",outline:"none",padding:10,WebkitTouchCallout:"none",userSelect:"none"}},O=function(t){function e(t){return y(this,e),C(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t))}return x(e,t),w(e,[{key:"handleAction",value:function(t){this.props.onAction(t)}},{key:"render",value:function(){var t=this,e=this.props,n=e.caption,o=e.countCurrent,r=e.countSeparator,a=e.countTotal,l=e.showCount,c=e.zoomable,u=e.rotatable,p=e.savable;if(!n&&!l)return null;var d=i.StyleSheet.create(s(N,this.context.theme)),m=l?g.createElement("div",{className:i.css(d.footerCount)},o,r,a):g.createElement("span",null),f=[];return c&&(f=f.concat([g.createElement("li",{key:"zoomIn",className:i.css(d.footerActionBtn)},g.createElement(h,{icon:"zoomIn",onClick:function(){t.handleAction(z.zoomIn)}})),g.createElement("li",{key:"zoomOut",className:i.css(d.footerActionBtn)},g.createElement(h,{icon:"zoomOut",onClick:function(){t.handleAction(z.zoomOut)}}))])),u&&(f=f.concat([g.createElement("li",{key:"rotateLeft",className:i.css(d.footerActionBtn)},g.createElement(h,{icon:"rotateLeft",onClick:function(){t.handleAction(z.rotateLeft)}})),g.createElement("li",{key:"rotateRight",className:i.css(d.footerActionBtn)},g.createElement(h,{icon:"rotateRight",onClick:function(){t.handleAction(z.rotateRight)}}))])),p&&(f=f.concat([g.createElement("li",{key:"save",className:i.css(d.footerActionBtn)},g.createElement(h,{icon:"save",onClick:function(){t.handleAction(z.save)}}))])),g.createElement("div",{className:i.css(d.footer)},g.createElement("div",{className:i.css(d.footerInfos)},n?g.createElement("figcaption",{className:i.css(d.footerCaption)},n):g.createElement("span",{className:i.css(d.footerCaption)}),g.createElement("ul",{className:i.css(d.actions)},f),m),g.createElement("div",{className:i.css(d.footerActions)}))}}]),e}(g.Component);O.contextTypes={theme:t.object.isRequired};var N={footer:{position:"absolute",bottom:35,width:"100%",height:"60px"},footerInfos:{boxSizing:"border-box",color:f.footer.color,cursor:"auto",display:"flex",justifyContent:"space-between",left:0,lineHeight:1.3,paddingBottom:f.footer.gutter.vertical,paddingLeft:f.footer.gutter.horizontal,paddingRight:f.footer.gutter.horizontal,paddingTop:f.footer.gutter.vertical,zIndex:1100,alignItems:"center"},footerCount:{color:f.footer.count.color,fontSize:f.footer.count.fontSize,paddingLeft:"1em",flex:1,textAlign:"right"},footerCaption:{flex:1},footerActions:{position:"relative",flex:1},actions:{display:"flex",listStyle:"none",justifyContent:"center",padding:0,margin:0}};u.contextTypes={theme:t.object.isRequired};var A={header:{display:"flex",justifyContent:"space-between",height:f.header.height},close:{background:"none",border:"none",cursor:"pointer",outline:"none",position:"relative",top:0,verticalAlign:"bottom",zIndex:1,height:40,marginRight:-10,padding:10,width:40}};p.contextTypes={theme:t.object.isRequired};var P={thumbnail:{backgroundPosition:"center",backgroundSize:"cover",borderRadius:2,boxShadow:"inset 0 0 0 1px hsla(0,0%,100%,.2)",cursor:"pointer",display:"inline-block",height:f.thumbnail.size,margin:f.thumbnail.gutter,overflow:"hidden",width:f.thumbnail.size},thumbnail__active:{boxShadow:"inset 0 0 0 2px "+f.thumbnail.activeBorderColor}},R=i.StyleSheet.create({paginatedThumbnails:{bottom:f.container.gutter.vertical,height:f.thumbnail.size,padding:"0 50px",position:"absolute",textAlign:"center",whiteSpace:"nowrap",left:"50%",transform:"translateX(-50%)"}}),B={height:f.thumbnail.size+2*f.thumbnail.gutter,width:40},j=function(t){function e(t){y(this,e);var n=C(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return n.state={hasCustomPage:!1},n.gotoPrev=n.gotoPrev.bind(n),n.gotoNext=n.gotoNext.bind(n),n}return x(e,t),w(e,[{key:"componentWillReceiveProps",value:function(t){t.currentImage!==this.props.currentImage&&this.setState({hasCustomPage:!1})}},{key:"getFirst",value:function(){var t=this.props,e=t.currentImage,n=t.offset;return this.state.hasCustomPage?this.clampFirst(this.state.first):this.clampFirst(e-n)}},{key:"setFirst",value:function(t,e){var n=this.state.first;t&&(t.preventDefault(),t.stopPropagation()),n!==e&&this.setState({hasCustomPage:!0,first:e})}},{key:"gotoPrev",value:function(t){this.setFirst(t,this.getFirst()-this.props.offset)}},{key:"gotoNext",value:function(t){this.setFirst(t,this.getFirst()+this.props.offset)}},{key:"clampFirst",value:function(t){var e=this.props,n=e.images,o=2*e.offset+1;return t<0?0:t+o>n.length?n.length-o:t}},{key:"renderArrowPrev",value:function(){return this.getFirst()<=0?null:g.createElement(l,{direction:"left",size:"small",icon:"arrowLeft",onClick:this.gotoPrev,style:B,title:"Previous (Left arrow key)",type:"button"})}},{key:"renderArrowNext",value:function(){var t=this.props,e=t.offset,n=t.images,o=2*e+1;return this.getFirst()+o>=n.length?null:g.createElement(l,{direction:"right",size:"small",icon:"arrowRight",onClick:this.gotoNext,style:B,title:"Next (Right arrow key)",type:"button"})}},{key:"render",value:function(){var t=this.props,e=t.images,n=t.currentImage,o=t.onClickThumbnail,r=2*t.offset+1,a=[],s=0;return e.length<=r?a=e:(s=this.getFirst(),a=e.slice(s,s+r)),g.createElement("div",{className:i.css(R.paginatedThumbnails)},this.renderArrowPrev(),a.map(function(t,e){return g.createElement(p,b({key:s+e},t,{index:s+e,onClick:o,active:s+e===n}))}),this.renderArrowNext())}}]),e}(e.Component),H=function(t){function n(){return y(this,n),C(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return x(n,t),w(n,[{key:"getChildContext",value:function(){return this.props.context}},{key:"render",value:function(){return e.Children.only(this.props.children)}}]),n}(e.Component);H.childContextTypes={theme:t.object};var M=function(t){function e(){y(this,e);var t=C(this,(e.__proto__||Object.getPrototypeOf(e)).call(this));return t.portalElement=null,t}return x(e,t),w(e,[{key:"componentDidMount",value:function(){var t=document.createElement("div");document.body.appendChild(t),this.portalElement=t,this.componentDidUpdate()}},{key:"componentDidUpdate",value:function(){a.render(g.createElement(H,{context:this.context},g.createElement("div",null,g.createElement("style",null,"\n\t\t\t\t.fade-enter { opacity: 0.01; }\n\t\t\t\t.fade-enter.fade-enter-active { opacity: 1; transition: opacity 200ms; }\n\t\t\t\t.fade-leave { opacity: 1; }\n\t\t\t\t.fade-leave.fade-leave-active { opacity: 0.01; transition: opacity 200ms; }\n\t\t"),g.createElement(r.CSSTransitionGroup,b({component:"div",transitionName:"fade",transitionEnterTimeout:200,transitionLeaveTimeout:200},this.props)))),this.portalElement)}},{key:"componentWillUnmount",value:function(){a.unmountComponentAtNode(this.portalElement),document.body.removeChild(this.portalElement)}},{key:"render",value:function(){return null}}]),e}(e.Component);M.contextTypes={theme:t.object.isRequired};var W={"0%":{top:"50%",left:"50%",width:0,height:0,opacity:1},"100%":{top:0,left:0,width:"100%",height:"100%",opacity:0}},X=function(t){var e=t.color,n=t.size;return{spinner:{display:"inline-block",position:"relative",width:n,height:n},ripple:{position:"absolute",border:"4px solid "+e,opacity:1,borderRadius:"50%",animationName:W,animationDuration:"1s",animationTimingFunction:"cubic-bezier(0, 0.2, 0.8, 1)",animationIterationCount:"infinite"}}},F=!("undefined"==typeof window||!window.document||!window.document.createElement),Y=function(t){function e(t){y(this,e);var o=C(this,(e.__proto__||Object.getPrototypeOf(e)).call(this,t));return o.theme=s(f,t.theme),o.classes=n.StyleSheet.create(s(q,o.theme)),o.state={imageLoaded:!1,left:null,top:15,width:0,height:0,rotate:0,imageWidth:0,imageHeight:0,scaleX:1,scaleY:1},o.containerWidth=0,o.containerHeight=0,o.footerHeight=84,o.setContainerWidthHeight(),d.call(o,["gotoNext","gotoPrev","closeBackdrop","handleKeyboardInput","handleImageLoaded","handleAction","getImageCenterXY","handleZoom","handleRotate"]),o}return x(e,t),w(e,[{key:"getChildContext",value:function(){return{theme:this.theme}}},{key:"componentDidMount",value:function(){this.props.isOpen&&(this.props.enableKeyboardInput&&window.addEventListener("keydown",this.handleKeyboardInput),"number"==typeof this.props.currentImage&&this.preloadImage(this.props.currentImage))}},{key:"componentWillReceiveProps",value:function(t){if(F){if(this.props.isOpen&&t.isOpen&&this.preloadImage(this.props.currentImage,t),this.props.currentImage!==t.currentImage||!this.props.isOpen&&t.isOpen){var e=this.preloadImage(t.currentImage,t);e&&e.complete&&this.setState({imageLoaded:e.complete})}!this.props.isOpen&&t.isOpen&&t.enableKeyboardInput&&window.addEventListener("keydown",this.handleKeyboardInput),!t.isOpen&&t.enableKeyboardInput&&window.removeEventListener("keydown",this.handleKeyboardInput)}}},{key:"componentWillUnmount",value:function(){this.props.enableKeyboardInput&&window.removeEventListener("keydown",this.handleKeyboardInput)}},{key:"setContainerWidthHeight",value:function(){this.containerWidth=window.innerWidth,this.containerHeight=window.innerHeight}},{key:"getImageCenterXY",value:function(){return{x:this.state.left+this.state.width/2,y:this.state.top+this.state.height/2}}},{key:"getImgWidthHeight",value:function(t,e){var n=0,o=0,i=.8*this.containerWidth,r=.8*(this.containerHeight-this.footerHeight);return n=Math.min(i,t),(o=n/t*e)>r&&(n=(o=r)/e*t),[n,o]}},{key:"handleAction",value:function(t){switch(t){case z.prev:this.state.activeIndex-1>=0&&this.handleChangeImg(this.state.activeIndex-1);break;case z.next:this.state.activeIndex+1<this.props.images.length&&this.handleChangeImg(this.state.activeIndex+1);break;case z.zoomIn:var e=this.getImageCenterXY();this.handleZoom(e.x,e.y,1,.1),this.props.onZoomIn&&this.props.onZoomIn();break;case z.zoomOut:var n=this.getImageCenterXY();this.handleZoom(n.x,n.y,-1,.1),this.props.onZoomOut&&this.props.onZoomOut();break;case z.rotateLeft:this.handleRotate(),this.props.onRotateLeft&&this.props.onRotateLeft();break;case z.rotateRight:this.handleRotate(!0),this.props.onRotateRight&&this.props.onRotateRight();break;case z.reset:this.loadImg(this.state.activeIndex);break;case z.scaleX:this.handleScaleX(-1);break;case z.scaleY:this.handleScaleY(-1);break;case z.save:this.props.onSave&&this.props.onSave(this.props.currentImage,{zoom:this.state.scaleX,rotation:this.state.rotate})}}},{key:"handleZoom",value:function(t,e,n,o){var i=this.getImageCenterXY(),r=t-i.x,a=e-i.y,s=0,l=0,c=0,h=0,u=0,p=0;if(0===this.state.width){var d=this.getImgWidthHeight(this.state.imageWidth,this.state.imageHeight),m=I(d,2),g=m[0],f=m[1];l=(this.containerWidth-g)/2,s=(this.containerHeight-this.footerHeight-f)/2,c=this.state.width+g,h=this.state.height+f,u=p=1}else{var v=this.state.scaleX>0?1:-1,y=this.state.scaleY>0?1:-1;if(u=this.state.scaleX+o*n*v,p=this.state.scaleY+o*n*y,Math.abs(u)<.1||Math.abs(p)<.1)return;s=this.state.top+-n*a/this.state.scaleX*o*v,l=this.state.left+-n*r/this.state.scaleY*o*y,c=this.state.width,h=this.state.height}this.setState({width:c,scaleX:Math.floor(10*u)/10,scaleY:Math.floor(10*p)/10,height:h,top:s,left:l,loading:!1})}},{key:"handleRotate",value:function(){var t=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.setState({rotate:(this.state.rotate+90*(t?1:-1))%360})}},{key:"preloadImage",value:function(t,e){var n=this,o=e?e.images[t]:this.props.images[t];if(o){var i=new Image,r=m(o);return i.onerror=function(){n.setState({imageLoaded:!0})},i.onload=function(){var t=i.width,e=i.height,r=n.getImgWidthHeight(t,e),a=I(r,2),s=a[0],l=a[1],c=(n.containerWidth-s)/2,h=(n.containerHeight-l-n.footerHeight)/2;n.setState({width:s,height:l,left:c,top:h,imageWidth:t,imageHeight:e,rotate:o.initialRotation||0,scaleX:o.initialZoom||1,scaleY:o.initialZoom||1,imageLoaded:!0})},i.src=o.src,r&&(i.srcset=r),i}}},{key:"gotoNext",value:function(t){var e=this.props,n=e.currentImage,o=e.images;this.state.imageLoaded&&n!==o.length-1&&(t&&(t.preventDefault(),t.stopPropagation()),this.props.onClickNext())}},{key:"gotoPrev",value:function(t){var e=this.props.currentImage;this.state.imageLoaded&&0!==e&&(t&&(t.preventDefault(),t.stopPropagation()),this.props.onClickPrev())}},{key:"closeBackdrop",value:function(t){"lightboxBackdrop"!==t.target.id&&"FIGURE"!==t.target.tagName||this.props.onClose()}},{key:"handleKeyboardInput",value:function(t){return 37===t.keyCode?(this.gotoPrev(t),!0):39===t.keyCode?(this.gotoNext(t),!0):27===t.keyCode&&(this.props.onClose(),!0)}},{key:"handleImageLoaded",value:function(){this.setState({imageLoaded:!0})}},{key:"renderArrowPrev",value:function(){return 0===this.props.currentImage?null:g.createElement(l,{direction:"left",icon:"arrowLeft",onClick:this.gotoPrev,title:this.props.leftArrowTitle,type:"button"})}},{key:"renderArrowNext",value:function(){return this.props.currentImage===this.props.images.length-1?null:g.createElement(l,{direction:"right",icon:"arrowRight",onClick:this.gotoNext,title:this.props.rightArrowTitle,type:"button"})}},{key:"renderDialog",value:function(){var t=this.props,e=t.backdropClosesModal,i=t.isOpen,r=t.showThumbnails,a=t.width,s=this.state.imageLoaded;if(!i)return g.createElement("span",{key:"closed"});var l=0;return r&&(l=this.theme.thumbnail.size+this.theme.container.gutter.vertical),g.createElement(c,{key:"open",onClick:e&&this.closeBackdrop,onTouchEnd:e&&this.closeBackdrop},g.createElement("div",null,g.createElement("div",{className:n.css(this.classes.content),style:{marginBottom:l,maxWidth:a}},s&&this.renderHeader(),this.renderImages(),this.renderSpinner(),s&&this.renderFooter()),s&&this.renderThumbnails(),s&&this.renderArrowPrev(),s&&this.renderArrowNext(),this.props.preventScroll&&g.createElement(o,null)))}},{key:"renderImages",value:function(){var t=this,e=this.props,o=e.currentImage,i=e.images,r=e.onClickImage,a=this.state.imageLoaded;if(!i||!i.length)return null;var s=i[o],l=m(s),c=l?"100vw":null,h={width:this.state.width+"px",height:"auto",transform:"rotate("+this.state.rotate+"deg) scaleX("+this.state.scaleX+") scaleY("+this.state.scaleY+")"};return g.createElement("figure",{className:n.css(this.classes.figure)},g.createElement("img",{className:n.css(this.classes.image,a&&this.classes.imageLoaded),onClick:r,ref:function(e){t.image=e},sizes:c,alt:s.alt,src:s.src,srcSet:l,style:h}))}},{key:"renderThumbnails",value:function(){var t=this.props,e=t.images,n=t.currentImage,o=t.onClickThumbnail,i=t.showThumbnails,r=t.thumbnailOffset;if(i)return g.createElement(j,{currentImage:n,images:e,offset:r,onClickThumbnail:o})}},{key:"renderHeader",value:function(){var t=this.props,e=t.closeButtonTitle,n=t.customControls,o=t.onClose,i=t.showCloseButton;return g.createElement(u,{customControls:n,onClose:o,showCloseButton:i,closeButtonTitle:e})}},{key:"renderFooter",value:function(){var t=this.props,e=t.currentImage,n=t.images,o=t.imageCountSeparator,i=t.showImageCount,r=t.rotatable,a=t.zoomable,s=t.onSave;return n&&n.length?g.createElement(O,{caption:n[e].caption,countCurrent:e+1,countSeparator:o,countTotal:n.length,onAction:this.handleAction,rotatable:r,showCount:i,zoomable:a,savable:!!s}):null}},{key:"renderSpinner",value:function(){var t=this.props,e=t.spinner,o=t.spinnerColor,i=t.spinnerSize,r=this.state.imageLoaded,a=e;return g.createElement("div",{className:n.css(this.classes.spinner,!r&&this.classes.spinnerActive)},g.createElement(a,{color:o,size:i}))}},{key:"render",value:function(){return g.createElement(M,null,this.renderDialog())}}]),e}(e.Component);Y.defaultProps={closeButtonTitle:"Close (Esc)",currentImage:0,enableKeyboardInput:!0,imageCountSeparator:" of ",leftArrowTitle:"Previous (Left arrow key)",onClickShowNextImage:!0,preloadNextImage:!0,preventScroll:!0,rightArrowTitle:"Next (Right arrow key)",showCloseButton:!0,showImageCount:!0,spinner:function(t){var e=i.StyleSheet.create(X(t));return g.createElement("div",{className:i.css(e.spinner)},g.createElement("div",{className:i.css(e.ripple)}))},spinnerColor:"white",spinnerSize:100,theme:{},thumbnailOffset:2,width:1024},Y.childContextTypes={theme:t.object.isRequired};var q={content:{position:"relative",width:"100vw",height:"100vh"},figure:{margin:0,width:"auto",height:"auto",position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)"},image:{display:"block",margin:"0 auto",maxWidth:"100%",WebkitTouchCallout:"none",userSelect:"none",opacity:0,transition:"opacity 0.3s"},imageLoaded:{opacity:1},spinner:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",opacity:0,transition:"opacity 0.3s"},spinnerActive:{opacity:1}};return Y});