react-image-video-lightbox/umd/react-image-video-lightbox.min.js

A React lightbox that supports videos, images and pinch zooming on images. Optimized for mobile UI with swiping, but can be used on desktop as well.

/*!
 * react-image-video-lightbox v3.0.0
 * MIT Licensed
 */
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports["react-image-video-lightbox"]=e(require("react")):t["react-image-video-lightbox"]=e(t.React)}(window,(function(t){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(e,n){e.exports=t},function(t,e,n){t.exports=n(2)},function(t,e,n){"use strict";n.r(e);var i=n(0),o=function(t,e,n){return t>e-n&&t<e||t<e+n&&t>e?e:t},a=function(t){return{x:t.clientX,y:t.clientY}},s=function(t,e){return Math.sqrt(Math.pow(t.y-e.y,2)+Math.pow(t.x-e.x,2))};function r(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function h(t,e){return(h=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}var l=function(t){var e,n;function l(e){var n;return(n=t.call(this,e)||this).state={x:0,y:0,scale:1,width:window.innerWidth,height:window.innerHeight,index:n.props.startIndex,swiping:!1,loading:!0,iconSize:window.innerWidth<=500?35:50},n.width=window.innerWidth,n.height=window.innerHeight,n.handleTouchStart=n.handleTouchStart.bind(r(n)),n.handleTouchMove=n.handleTouchMove.bind(r(n)),n.handleTouchEnd=n.handleTouchEnd.bind(r(n)),n.onNavigationCallback=n.props.onNavigationCallback&&"function"==typeof n.props.onNavigationCallback?n.props.onNavigationCallback:function(){},n}n=t,(e=l).prototype=Object.create(n.prototype),e.prototype.constructor=e,h(e,n);var c=l.prototype;return c.zoomTo=function(t){var e=this;this.animation=requestAnimationFrame((function n(){if(e.state.scale!==t){var i=t-e.state.scale,a=e.state.scale+.04*i;e.zoom(o(a,t,.001)),e.animation=requestAnimationFrame(n)}}))},c.reset=function(){var t=this;this.animation=requestAnimationFrame((function e(){if(1!==t.state.scale||0!==t.state.x||0!==t.state.y){var n=1-t.state.scale,i=o(t.state.scale+.08*n,1,.001),a=t.width*i,s=t.height*i;t.setState({scale:i,width:a,height:s,x:0,y:0},(function(){t.animation=requestAnimationFrame(e)}))}}))},c.handleTouchStart=function(t){this.animation&&cancelAnimationFrame(this.animation),2===t.touches.length&&this.handlePinchStart(t),1===t.touches.length&&this.handleTapStart(t)},c.handleTouchMove=function(t){2===t.touches.length&&this.handlePinchMove(t),1===t.touches.length&&this.handlePanMove(t)},c.handleTouchEnd=function(t){return t.touches.length>0?null:this.state.scale>4?this.zoomTo(4):this.state.scale<1?this.zoomTo(1):(this.lastTouchEnd&&this.lastTouchEnd+300>t.timeStamp&&this.reset(),this.state.swiping&&1===this.state.scale&&this.handleSwipe(t),void(this.lastTouchEnd=t.timeStamp))},c.handleSwipe=function(t){var e=t.changedTouches[0].clientX-this.swipeStartX;e<-this.width/3?this.swipeRight():e>this.width/3?this.swipeLeft():this.reset()},c.swipeLeft=function(){var t=this,e=this.state.index;e>0?setTimeout((function(){t.setState({index:e-1,swiping:!1,x:0,loading:!0},(function(){return t.onNavigationCallback(e-1)}))}),500):this.reset()},c.swipeRight=function(){var t=this,e=this.state.index;e<this.props.data.length-1?setTimeout((function(){t.setState({index:e+1,swiping:!1,x:0,loading:!0},(function(){return t.onNavigationCallback(e+1)}))}),500):this.reset()},c.handleTapStart=function(t){this.swipeStartX=t.touches[0].clientX,this.swipeStartY=t.touches[0].clientY,1===this.state.scale&&this.setState({swiping:!0})},c.handlePanMove=function(t){1===this.state.scale?this.setState({x:t.touches[0].clientX-this.swipeStartX}):(t.preventDefault(),this.setState({x:t.touches[0].clientX-this.swipeStartX,y:t.touches[0].clientY-this.swipeStartY}))},c.handlePinchStart=function(t){var e=a(t.touches[0]),n=a(t.touches[1]);this.lastDistance=s(e,n)},c.handlePinchMove=function(t){t.preventDefault();var e,n,i,o=a(t.touches[0]),r=a(t.touches[1]),h=s(o,r),l=(e=.8,n=4.2,i=this.state.scale*(h/this.lastDistance),Math.min(n,Math.max(e,i)));this.zoom(l),this.lastDistance=h},c.zoom=function(t){var e=this.width*t,n=this.height*t;this.setState({width:e,height:n,scale:t})},c.getResources=function(){for(var t=this,e=[],n=this.props.data,o=0;o<n.length;o++){var a=n[o];"photo"===a.type&&e.push(i.createElement("img",{key:o,alt:a.altTag,src:a.url,style:{pointerEvents:1===this.state.scale?"auto":"none",maxWidth:"100%",maxHeight:"100%",transform:"translate("+this.state.x+"px, "+this.state.y+"px) scale("+this.state.scale+")",transition:"transform 0.5s ease-out"},onLoad:function(){t.setState({loading:!1})}})),"video"===a.type&&e.push(i.createElement("iframe",{key:o,width:"560",height:"315",src:a.url,frameBorder:"0",allow:"autoplay; encrypted-media",title:a.title,allowFullScreen:!0,style:{pointerEvents:1===this.state.scale?"auto":"none",maxWidth:"100%",maxHeight:"100%",transform:"translate("+this.state.x+"px, "+this.state.y+"px)",transition:"transform 0.5s ease-out"},onLoad:function(){t.setState({loading:!1})}}))}return e},c.UNSAFE_componentWillMount=function(){var t=this;window.addEventListener("resize",(function(){window.innerWidth<=500?t.setState({iconSize:35}):t.setState({iconSize:50})}))},c.componentWillUnmount=function(){var t=this;window.removeEventListener("resize",(function(){window.innerWidth<=500?t.setState({iconSize:35}):t.setState({iconSize:50})}))},c.render=function(){var t=this,e=this.getResources();return i.createElement("div",{onTouchStart:this.handleTouchStart,onTouchMove:this.handleTouchMove,onTouchEnd:this.handleTouchEnd,style:{top:"0px",left:"0px",overflow:"hidden",position:"fixed",display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"row",height:"100%",width:"100%",backgroundColor:"rgba(0,0,0,1)"}},this.props.showResourceCount&&i.createElement("div",{style:{position:"absolute",top:"0px",left:"0px",padding:"15px",color:"white",fontWeight:"bold"}},i.createElement("span",null,this.state.index+1)," / ",i.createElement("span",null,this.props.data.length)),i.createElement("div",{style:{position:"absolute",top:"0px",right:"0px",padding:"10px",color:"#FFFFFF",cursor:"pointer",fontSize:.8*this.state.iconSize+"px"},onClick:this.props.onCloseCallback},i.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"36px",viewBox:"0 0 24 24",width:"36px",fill:"#FFFFFF"},i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"}))),this.state.index+1!=1?i.createElement("div",{style:{position:"absolute",left:"0px",zIndex:1,color:"#FFFFFF",cursor:"pointer",fontSize:this.state.iconSize+"px"},onClick:function(){t.swipeLeft()}},i.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"48px",viewBox:"0 0 24 24",width:"48px",fill:"#FFFFFF"},i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"}))):i.createElement(i.Fragment,null),this.state.index+1!=this.props.data.length?i.createElement("div",{style:{position:"absolute",right:"0px",zIndex:1,color:"#FFFFFF",cursor:"pointer",fontSize:this.state.iconSize+"px"},onClick:function(){t.swipeRight()}},i.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"48px",viewBox:"0 0 24 24",width:"48px",fill:"#FFFFFF"},i.createElement("path",{d:"M0 0h24v24H0z",fill:"none"}),i.createElement("path",{d:"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"}))):i.createElement(i.Fragment,null),this.state.loading&&i.createElement("div",{style:{margin:"auto",position:"fixed"}},i.createElement("style",null,"@keyframes react_image_video_spinner {\n                  0% {\n                    transform: translate3d(-50 %, -50 %, 0) rotate(0deg);\n                  }\n                  100% {\n                    transform: translate3d(-50%, -50%, 0) rotate(360deg);\n                  }\n                }"),i.createElement("div",{style:{animation:"1.0s linear infinite react_image_video_spinner",border:"solid 5px #ffffff",borderBottomColor:"#cfd0d1",borderRadius:"50%",height:30,width:30,position:"fixed",transform:"translate3d(-50%, -50%, 0)"}})),e[this.state.index])},l}(i.Component);e.default=l}]).default}));
//# sourceMappingURL=react-image-video-lightbox.min.js.map