mk-react-images
Version:
A simple, responsive lightbox component for displaying an array of images with React.js
2 lines (1 loc) • 17.9 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(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"],t):e.Lightbox=t(e.PropTypes,e.React,e.aphrodite,e.ScrollLock,e.aphrodite,e.ReactTransitionGroup,e.ReactDOM)}(this,function(e,t,o,n,r,i,a){"use strict";function s(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},o=Object.assign({},e);return Object.keys(t).forEach(function(n){"object"===g(t[n])&&t[n]&&e[n]?o[n]=s(e[n],t[n]):o[n]=t[n]}),o}function l(e,t){var o=t.theme,n=e.direction,i=e.icon,a=e.onClick,l=e.size,c=k(e,["direction","icon","onClick","size"]),u=r.StyleSheet.create(s(E,o));return m.createElement("button",w({type:"button",className:r.css(u.arrow,u["arrow__direction__"+n],l&&u["arrow__size__"+l]),onClick:a,onTouchEnd:a},c),m.createElement(_,{fill:!!o.arrow&&o.arrow.fill||f.arrow.fill,type:i}))}function c(e,t){var o=t.theme,n=k(e,[]),i=r.StyleSheet.create(s(I,o));return m.createElement("div",w({id:"lightboxBackdrop",className:r.css(i.container)},n))}function u(e,t){var o=t.theme,n=e.caption,i=e.countCurrent,a=e.countSeparator,l=e.countTotal,c=e.showCount,u=k(e,["caption","countCurrent","countSeparator","countTotal","showCount"]);if(!n&&!c)return null;var h=r.StyleSheet.create(s(S,o)),p=c?m.createElement("div",{className:r.css(h.footerCount)},i,a,l):m.createElement("span",null);return m.createElement("div",w({className:r.css(h.footer)},u),n?m.createElement("figcaption",{className:r.css(h.footerCaption)},n):m.createElement("span",null),p)}function h(e,t){var o=t.theme,n=e.customControls,i=e.onClose,a=e.showCloseButton,l=e.closeButtonTitle,c=k(e,["customControls","onClose","showCloseButton","closeButtonTitle"]),u=r.StyleSheet.create(s(T,o));return m.createElement("div",w({className:r.css(u.header)},c),n||m.createElement("span",null),!!a&&m.createElement("button",{title:l,className:r.css(u.close),onClick:i},m.createElement(_,{fill:!!o.close&&o.close.fill||f.close.fill,type:"close"})))}function p(e,t){var o=e.index,n=e.src,i=e.thumbnail,a=e.active,l=e.onClick,c=t.theme,u=i||n,h=r.StyleSheet.create(s(P,c));return m.createElement("div",{className:r.css(h.thumbnail,a&&h.thumbnail__active),onClick:function(e){e.preventDefault(),e.stopPropagation(),l(o)},style:{backgroundImage:'url("'+u+'")'}})}function d(e){var t=this;e.forEach(function(e){return t[e]=t[e].bind(t)})}e=e&&e.hasOwnProperty("default")?e.default:e;var m="default"in t?t.default:t;n=n&&n.hasOwnProperty("default")?n.default:n;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:40,gutter:{horizontal:0,vertical:5}},f.thumbnail={activeBorderColor:"white",size:50,gutter:2},f.arrow={background:"none",fill:"white",height:120};var g="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},v=(function(){function e(e){this.value=e}function t(t){function o(r,i){try{var a=t[r](i),s=a.value;s instanceof e?Promise.resolve(s.value).then(function(e){o("next",e)},function(e){o("throw",e)}):n(a.done?"return":"normal",a.value)}catch(e){n("throw",e)}}function n(e,t){switch(e){case"return":r.resolve({value:t,done:!0});break;case"throw":r.reject(t);break;default:r.resolve({value:t,done:!1})}(r=r.next)?o(r.key,r.arg):i=null}var r,i;this._invoke=function(e,t){return new Promise(function(n,a){var s={key:e,arg:t,resolve:n,reject:a,next:null};i?i=i.next=s:(r=i=s,o(e,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}(),function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}),y=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),w=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},b=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},k=function(e,t){var o={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(o[n]=e[n]);return o},x=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},C={arrowLeft:function(e){return'<svg fill="'+e+'" 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(e){return'<svg fill="'+e+'" 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(e){return'<svg fill="'+e+'" 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>'}},_=function(e){var t=e.fill,o=e.type,n=k(e,["fill","type"]),r=C[o];return m.createElement("span",w({dangerouslySetInnerHTML:{__html:r(t)}},n))};_.defaultProps={fill:"white"},l.defaultProps={size:"medium"},l.contextTypes={theme:e.object.isRequired};var E={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:e.object.isRequired};var I={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}};u.contextTypes={theme:e.object.isRequired};var S={footer:{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},footerCount:{color:f.footer.count.color,fontSize:f.footer.count.fontSize,paddingLeft:"1em"},footerCaption:{flex:"1 1 0"}};h.contextTypes={theme:e.object.isRequired};var T={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",height:40,marginRight:-10,padding:10,width:40}};p.contextTypes={theme:e.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}},z=r.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%)"}}),L={height:f.thumbnail.size+2*f.thumbnail.gutter,width:40},N=function(e){function t(e){v(this,t);var o=x(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return o.state={hasCustomPage:!1},o.gotoPrev=o.gotoPrev.bind(o),o.gotoNext=o.gotoNext.bind(o),o}return b(t,e),y(t,[{key:"componentWillReceiveProps",value:function(e){e.currentImage!==this.props.currentImage&&this.setState({hasCustomPage:!1})}},{key:"getFirst",value:function(){var e=this.props,t=e.currentImage,o=e.offset;return this.state.hasCustomPage?this.clampFirst(this.state.first):this.clampFirst(t-o)}},{key:"setFirst",value:function(e,t){var o=this.state.first;e&&(e.preventDefault(),e.stopPropagation()),o!==t&&this.setState({hasCustomPage:!0,first:t})}},{key:"gotoPrev",value:function(e){this.setFirst(e,this.getFirst()-this.props.offset)}},{key:"gotoNext",value:function(e){this.setFirst(e,this.getFirst()+this.props.offset)}},{key:"clampFirst",value:function(e){var t=this.props,o=t.images,n=2*t.offset+1;return e<0?0:e+n>o.length?o.length-n:e}},{key:"renderArrowPrev",value:function(){return this.getFirst()<=0?null:m.createElement(l,{direction:"left",size:"small",icon:"arrowLeft",onClick:this.gotoPrev,style:L,title:"Previous (Left arrow key)",type:"button"})}},{key:"renderArrowNext",value:function(){var e=this.props,t=e.offset,o=e.images,n=2*t+1;return this.getFirst()+n>=o.length?null:m.createElement(l,{direction:"right",size:"small",icon:"arrowRight",onClick:this.gotoNext,style:L,title:"Next (Right arrow key)",type:"button"})}},{key:"render",value:function(){var e=this.props,t=e.images,o=e.currentImage,n=e.onClickThumbnail,i=2*e.offset+1,a=[],s=0;return t.length<=i?a=t:(s=this.getFirst(),a=t.slice(s,s+i)),m.createElement("div",{className:r.css(z.paginatedThumbnails)},this.renderArrowPrev(),a.map(function(e,t){return m.createElement(p,w({key:s+t},e,{index:s+t,onClick:n,active:s+t===o}))}),this.renderArrowNext())}}]),t}(t.Component),O=function(e){function o(){return v(this,o),x(this,(o.__proto__||Object.getPrototypeOf(o)).apply(this,arguments))}return b(o,e),y(o,[{key:"getChildContext",value:function(){return this.props.context}},{key:"render",value:function(){return t.Children.only(this.props.children)}}]),o}(t.Component);O.childContextTypes={theme:e.object};var j=function(e){function t(){v(this,t);var e=x(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.portalElement=null,e}return b(t,e),y(t,[{key:"componentDidMount",value:function(){var e=document.createElement("div");document.body.appendChild(e),this.portalElement=e,this.componentDidUpdate()}},{key:"componentDidUpdate",value:function(){a.render(m.createElement(O,{context:this.context},m.createElement("div",null,m.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"),m.createElement(i.CSSTransitionGroup,w({component:"div",transitionName:"fade",transitionEnterTimeout:200,transitionLeaveTimeout:200},this.props)))),this.portalElement)}},{key:"componentWillUnmount",value:function(){document.body.removeChild(this.portalElement)}},{key:"render",value:function(){return null}}]),t}(t.Component);j.contextTypes={theme:e.object.isRequired};var B=!("undefined"==typeof window||!window.document||!window.document.createElement),R=function(e){function t(e){v(this,t);var n=x(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.theme=s(f,e.theme),n.classes=o.StyleSheet.create(s(q,n.theme)),d.call(n,["gotoNext","gotoPrev","closeBackdrop","handleKeyboardInput"]),n}return b(t,e),y(t,[{key:"getChildContext",value:function(){return{theme:this.theme}}},{key:"componentDidMount",value:function(){this.props.isOpen&&this.props.enableKeyboardInput&&window.addEventListener("keydown",this.handleKeyboardInput)}},{key:"componentWillReceiveProps",value:function(e){if(B){if(e.preloadNextImage){var t=this.props.currentImage,o=e.currentImage+1,n=e.currentImage-1,r=void 0;t&&e.currentImage>t?r=o:t&&e.currentImage<t&&(r=n),r?this.preloadImage(r):(this.preloadImage(n),this.preloadImage(o))}!this.props.isOpen&&e.isOpen&&e.enableKeyboardInput&&window.addEventListener("keydown",this.handleKeyboardInput),!e.isOpen&&e.enableKeyboardInput&&window.removeEventListener("keydown",this.handleKeyboardInput)}}},{key:"componentWillUnmount",value:function(){this.props.enableKeyboardInput&&window.removeEventListener("keydown",this.handleKeyboardInput)}},{key:"preloadImage",value:function(e){var t=this.props.images[e];if(t){var o=new Image;o.src=t.src,o.srcset=o.srcSet||o.srcset,t.srcset&&(o.srcset=t.srcset.join())}}},{key:"gotoNext",value:function(e){this.props.currentImage!==this.props.images.length-1&&(e&&(e.preventDefault(),e.stopPropagation()),this.props.onClickNext())}},{key:"gotoPrev",value:function(e){0!==this.props.currentImage&&(e&&(e.preventDefault(),e.stopPropagation()),this.props.onClickPrev())}},{key:"closeBackdrop",value:function(e){"lightboxBackdrop"!==e.target.id&&"FIGURE"!==e.target.tagName||this.props.onClose()}},{key:"handleKeyboardInput",value:function(e){return 37===e.keyCode?(this.gotoPrev(e),!0):39===e.keyCode?(this.gotoNext(e),!0):27===e.keyCode&&(this.props.onClose(),!0)}},{key:"renderArrowPrev",value:function(){return 0===this.props.currentImage?null:m.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:m.createElement(l,{direction:"right",icon:"arrowRight",onClick:this.gotoNext,title:this.props.rightArrowTitle,type:"button"})}},{key:"renderDialog",value:function(){var e=this.props,t=e.backdropClosesModal,n=e.customControls,r=e.isOpen,i=e.onClose,a=e.showCloseButton,s=e.showThumbnails,l=e.width;if(!r)return m.createElement("span",{key:"closed"});var u=0;return s&&(u=this.theme.thumbnail.size+this.theme.container.gutter.vertical),m.createElement(c,{key:"open",onClick:t&&this.closeBackdrop,onTouchEnd:t&&this.closeBackdrop},m.createElement("div",{className:o.css(this.classes.content),style:{marginBottom:u,maxWidth:l}},m.createElement(h,{customControls:n,onClose:i,showCloseButton:a,closeButtonTitle:this.props.closeButtonTitle}),this.renderImages()),this.renderThumbnails(),this.renderArrowPrev(),this.renderArrowNext())}},{key:"renderImages",value:function(){var e=this.props,t=e.currentImage,n=e.images,r=e.imageCountSeparator,i=e.onClickImage,a=e.showImageCount,s=e.showThumbnails;if(!n||!n.length)return null;var l=n[t];l.srcset=l.srcSet||l.srcset;var c=void 0,h=void 0;l.srcset&&(c=l.srcset.join(),h="100vw");var p=s?this.theme.thumbnail.size:0,d=this.theme.header.height+this.theme.footer.height+p+this.theme.container.gutter.vertical+"px";return m.createElement("figure",{className:o.css(this.classes.figure)},m.createElement("img",{className:o.css(this.classes.image),onClick:!!i&&i,sizes:h,alt:l.alt,src:l.src,srcSet:c,style:{cursor:this.props.onClickImage?"pointer":"auto",maxHeight:"calc(100vh - "+d+")"}}),m.createElement(u,{caption:n[t].caption,countCurrent:t+1,countSeparator:r,countTotal:n.length,showCount:a}))}},{key:"renderThumbnails",value:function(){var e=this.props,t=e.images,o=e.currentImage,n=e.onClickThumbnail,r=e.showThumbnails,i=e.thumbnailOffset;if(r)return m.createElement(N,{currentImage:o,images:t,offset:i,onClickThumbnail:n})}},{key:"render",value:function(){return m.createElement(j,null,this.renderDialog())}}]),t}(t.Component);R.defaultProps={closeButtonTitle:"Close (Esc)",currentImage:0,enableKeyboardInput:!0,imageCountSeparator:" of ",leftArrowTitle:"Previous (Left arrow key)",onClickShowNextImage:!0,preloadNextImage:!0,rightArrowTitle:"Next (Right arrow key)",showCloseButton:!0,showImageCount:!0,theme:{},thumbnailOffset:2,width:1024},R.childContextTypes={theme:e.object.isRequired};var q={content:{position:"relative"},figure:{margin:0},image:{display:"block",height:"auto",margin:"0 auto",maxWidth:"100%",WebkitTouchCallout:"none",userSelect:"none"}};return R});