react-zoomer-image/dist/index.js

React Zoomer Image: a simple React component to make your images zoomable.

module.exports=function(r){var n={};function o(e){if(n[e])return n[e].exports;var t=n[e]={i:e,l:!1,exports:{}};return r[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}return o.m=r,o.c=n,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)o.d(r,n,function(e){return t[e]}.bind(null,n));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t,r){"use strict";var n=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0});var o=n(r(1));t.ZoomerImage=o.default},function(e,t,r){"use strict";var n,o=this&&this.__extends||(n=function(e,t){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)t.hasOwnProperty(r)&&(e[r]=t[r])})(e,t)},function(e,t){function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}),i=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)Object.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t.default=e,t};Object.defineProperty(t,"__esModule",{value:!0});var u=i(r(2));r(5);var a,s=(a=u.Component,o(c,a),c.prototype.componentDidUpdate=function(){this.overlay.className=this.state.zoomed?"zoomer__backdrop":"zoomer__backdrop--hidden",document.querySelector("body").classList.toggle("zoomer__no-overflow"),this.state.zoomed&&(document.querySelector("body").addEventListener("keydown",this._keyPressListener),document.querySelector("body").addEventListener("wheel",this._zoomOut),window.addEventListener("resize",this._zoomOut))},c.prototype.render=function(){var e=this.props,t=e.imgSrc,r=e.imgAlt,n=e.imgTitle,o=e.zoomId;return u.default.createElement("div",{className:"zoomer",id:"zoomer-"+o},u.default.createElement("div",{style:{zIndex:this.state.transitioning||this.state.zoomed?200:null,transform:"translate("+this.state.offsetX+"px, "+(this.state.zoomed?this.state.offsetY+"px":"0")+")"},className:"zoomer__img "+(this.state.zoomed?"zoomer__img--zoomed":"")},u.default.createElement("img",{src:t,alt:r||null,title:n||null,style:{transform:this.state.zoomed?"scale("+this.state.scale+")":null},onClick:this.zoom})))},c);function c(e){var c=a.call(this,e)||this;return c.state={zoomed:!1,transitioning:!1,offsetX:0,offsetY:0,scale:1},c.overlay=null,c._keyPressListener=function(e){27===e.keyCode&&c._zoomOut()},c._zoomOut=function(){c.state.zoomed&&!c.state.transitioning&&c.zoom()},c._getOffsets=function(){var e=c.props.zoomId,t=window.innerWidth/2,r=window.innerHeight/2,n=document.querySelector("#zoomer-"+e+" .zoomer__img"),o=t-n.getBoundingClientRect().left-n.clientWidth/2,i=r-n.getBoundingClientRect().top-n.clientHeight/2,u=window.innerHeight/n.clientHeight,a=window.innerWidth/n.clientWidth,s=a<u?a:u;return{offsetX:o,offsetY:i,scale:s*=.8}},c.zoom=function(){var e=c._getOffsets(),t=e.offsetX,r=e.offsetY,n=e.scale;c.setState(function(e){return{zoomed:!e.zoomed,offsetX:e.zoomed?0:t,offsetY:e.zoomed?0:r}},function(){c.setState({transitioning:!0,scale:c.state.zoomed?n:1},function(){setTimeout(function(){c.setState({transitioning:!1})},290)})}),document.querySelector("body").removeEventListener("keydown",c._keyPressListener),document.querySelector("body").removeEventListener("wheel",c._zoomOut),window.removeEventListener("resize",c._zoomOut)},document.querySelector(".zoomer__backdrop--hidden")?c.overlay=document.querySelector(".zoomer__backdrop--hidden"):(c.overlay=document.createElement("div"),c.overlay.className="zoomer__backdrop--hidden",document.body.appendChild(c.overlay)),c}t.default=s},function(e,t,r){"use strict";e.exports=r(3)},function(e,t,r){"use strict";var f=r(4),n="function"==typeof Symbol&&Symbol.for,l=n?Symbol.for("react.element"):60103,c=n?Symbol.for("react.portal"):60106,o=n?Symbol.for("react.fragment"):60107,i=n?Symbol.for("react.strict_mode"):60108,u=n?Symbol.for("react.profiler"):60114,a=n?Symbol.for("react.provider"):60109,s=n?Symbol.for("react.context"):60110,p=n?Symbol.for("react.forward_ref"):60112,d=n?Symbol.for("react.suspense"):60113;n&&Symbol.for("react.suspense_list");var m=n?Symbol.for("react.memo"):60115,y=n?Symbol.for("react.lazy"):60116;n&&Symbol.for("react.fundamental"),n&&Symbol.for("react.responder"),n&&Symbol.for("react.scope");var h="function"==typeof Symbol&&Symbol.iterator;function v(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,r=1;r<arguments.length;r++)t+="&args[]="+encodeURIComponent(arguments[r]);return"Minified React error #"+e+"; visit "+t+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."}var b={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},g={};function _(e,t,r){this.props=e,this.context=t,this.refs=g,this.updater=r||b}function w(){}function S(e,t,r){this.props=e,this.context=t,this.refs=g,this.updater=r||b}_.prototype.isReactComponent={},_.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error(v(85));this.updater.enqueueSetState(this,e,t,"setState")},_.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},w.prototype=_.prototype;var O=S.prototype=new w;O.constructor=S,f(O,_.prototype),O.isPureReactComponent=!0;var j={current:null},z={current:null},x=Object.prototype.hasOwnProperty,k={key:!0,ref:!0,__self:!0,__source:!0};function E(e,t,r){var n,o={},i=null,u=null;if(null!=t)for(n in void 0!==t.ref&&(u=t.ref),void 0!==t.key&&(i=""+t.key),t)x.call(t,n)&&!k.hasOwnProperty(n)&&(o[n]=t[n]);var a=arguments.length-2;if(1===a)o.children=r;else if(1<a){for(var s=Array(a),c=0;c<a;c++)s[c]=arguments[c+2];o.children=s}if(e&&e.defaultProps)for(n in a=e.defaultProps)void 0===o[n]&&(o[n]=a[n]);return{$$typeof:l,type:e,key:i,ref:u,props:o,_owner:z.current}}function C(e){return"object"==typeof e&&null!==e&&e.$$typeof===l}var R=/\/+/g,P=[];function L(e,t,r,n){if(P.length){var o=P.pop();return o.result=e,o.keyPrefix=t,o.func=r,o.context=n,o.count=0,o}return{result:e,keyPrefix:t,func:r,context:n,count:0}}function U(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,P.length<10&&P.push(e)}function $(e,t,r){return null==e?0:function e(t,r,n,o){var i=typeof t;"undefined"!==i&&"boolean"!==i||(t=null);var u=!1;if(null===t)u=!0;else switch(i){case"string":case"number":u=!0;break;case"object":switch(t.$$typeof){case l:case c:u=!0}}if(u)return n(o,t,""===r?"."+A(t,0):r),1;if(u=0,r=""===r?".":r+":",Array.isArray(t))for(var a=0;a<t.length;a++){var s=r+A(i=t[a],a);u+=e(i,s,n,o)}else if("function"==typeof(s=null===t||"object"!=typeof t?null:"function"==typeof(s=h&&t[h]||t["@@iterator"])?s:null))for(t=s.call(t),a=0;!(i=t.next()).done;)u+=e(i=i.value,s=r+A(i,a++),n,o);else if("object"===i)throw n=""+t,Error(v(31,"[object Object]"===n?"object with keys {"+Object.keys(t).join(", ")+"}":n,""));return u}(e,"",t,r)}function A(e,t){return"object"==typeof e&&null!==e&&null!=e.key?(r=e.key,n={"=":"=0",":":"=2"},"$"+(""+r).replace(/[=:]/g,function(e){return n[e]})):t.toString(36);var r,n}function M(e,t){e.func.call(e.context,t,e.count++)}function I(e,t,r){var n,o,i=e.result,u=e.keyPrefix;e=e.func.call(e.context,t,e.count++),Array.isArray(e)?q(e,i,r,function(e){return e}):null!=e&&(C(e)&&(o=u+(!(n=e).key||t&&t.key===e.key?"":(""+e.key).replace(R,"$&/")+"/")+r,e={$$typeof:l,type:n.type,key:o,ref:n.ref,props:n.props,_owner:n._owner}),i.push(e))}function q(e,t,r,n,o){var i="";null!=r&&(i=(""+r).replace(R,"$&/")+"/"),$(e,I,t=L(t,i,n,o)),U(t)}function T(){var e=j.current;if(null===e)throw Error(v(321));return e}var N={Children:{map:function(e,t,r){if(null==e)return e;var n=[];return q(e,n,null,t,r),n},forEach:function(e,t,r){if(null==e)return e;$(e,M,t=L(null,null,t,r)),U(t)},count:function(e){return $(e,function(){return null},null)},toArray:function(e){var t=[];return q(e,t,null,function(e){return e}),t},only:function(e){if(!C(e))throw Error(v(143));return e}},createRef:function(){return{current:null}},Component:_,PureComponent:S,createContext:function(e,t){return void 0===t&&(t=null),(e={$$typeof:s,_calculateChangedBits:t,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null}).Provider={$$typeof:a,_context:e},e.Consumer=e},forwardRef:function(e){return{$$typeof:p,render:e}},lazy:function(e){return{$$typeof:y,_ctor:e,_status:-1,_result:null}},memo:function(e,t){return{$$typeof:m,type:e,compare:void 0===t?null:t}},useCallback:function(e,t){return T().useCallback(e,t)},useContext:function(e,t){return T().useContext(e,t)},useEffect:function(e,t){return T().useEffect(e,t)},useImperativeHandle:function(e,t,r){return T().useImperativeHandle(e,t,r)},useDebugValue:function(){},useLayoutEffect:function(e,t){return T().useLayoutEffect(e,t)},useMemo:function(e,t){return T().useMemo(e,t)},useReducer:function(e,t,r){return T().useReducer(e,t,r)},useRef:function(e){return T().useRef(e)},useState:function(e){return T().useState(e)},Fragment:o,Profiler:u,StrictMode:i,Suspense:d,createElement:E,cloneElement:function(e,t,r){if(null==e)throw Error(v(267,e));var n=f({},e.props),o=e.key,i=e.ref,u=e._owner;if(null!=t){if(void 0!==t.ref&&(i=t.ref,u=z.current),void 0!==t.key&&(o=""+t.key),e.type&&e.type.defaultProps)var a=e.type.defaultProps;for(s in t)x.call(t,s)&&!k.hasOwnProperty(s)&&(n[s]=void 0===t[s]&&void 0!==a?a[s]:t[s])}var s=arguments.length-2;if(1===s)n.children=r;else if(1<s){a=Array(s);for(var c=0;c<s;c++)a[c]=arguments[c+2];n.children=a}return{$$typeof:l,type:e.type,key:o,ref:i,props:n,_owner:u}},createFactory:function(e){var t=E.bind(null,e);return t.type=e,t},isValidElement:C,version:"16.12.0",__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{ReactCurrentDispatcher:j,ReactCurrentBatchConfig:{suspense:null},ReactCurrentOwner:z,IsSomeRendererActing:{current:!1},assign:f}},B=N;e.exports=B.default||B},function(e,t,r){"use strict";var s=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var n={};return"abcdefghijklmnopqrst".split("").forEach(function(e){n[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},n)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var r,n,o=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(e),i=1;i<arguments.length;i++){for(var u in r=Object(arguments[i]))c.call(r,u)&&(o[u]=r[u]);if(s){n=s(r);for(var a=0;a<n.length;a++)f.call(r,n[a])&&(o[n[a]]=r[n[a]])}}return o}},function(e,t,r){var n=r(6);"string"==typeof n&&(n=[[e.i,n,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};r(8)(n,o);n.locals&&(e.exports=n.locals)},function(e,t,r){(e.exports=r(7)(!1)).push([e.i,".zoomer__no-overflow{overflow:hidden}.zoomer__backdrop{top:0;left:0;right:0;bottom:0;opacity:1;z-index:50;height:100%;position:fixed;background:#FFFFFF;transition:opacity 200ms linear}.zoomer__backdrop--hidden{opacity:0;transition:opacity 200ms linear}.zoomer__img{cursor:zoom-in;position:relative;transition:transform 280ms linear}.zoomer__img--zoomed{z-index:100;cursor:zoom-out;transition:transform 280ms linear}.zoomer__img--zoomed img{transition:transform 280ms linear}.zoomer__img img{width:100%;max-width:100%;transform:scale(1);transition:transform 280ms linear}\n",""])},function(e,t,r){"use strict";e.exports=function(r){var u=[];return u.toString=function(){return this.map(function(e){var t=function(e,t){var r=e[1]||"",n=e[3];if(!n)return r;if(t&&"function"==typeof btoa){var o=function(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}(n),i=n.sources.map(function(e){return"/*# sourceURL="+n.sourceRoot+e+" */"});return[r].concat(i).concat([o]).join("\n")}return[r].join("\n")}(e,r);return e[2]?"@media "+e[2]+"{"+t+"}":t}).join("")},u.i=function(e,t){"string"==typeof e&&(e=[[null,e,""]]);for(var r={},n=0;n<this.length;n++){var o=this[n][0];null!=o&&(r[o]=!0)}for(n=0;n<e.length;n++){var i=e[n];null!=i[0]&&r[i[0]]||(t&&!i[2]?i[2]=t:t&&(i[2]="("+i[2]+") and ("+t+")"),u.push(i))}},u}},function(e,t,n){var r,o,i,s={},c=(r=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===o&&(o=r.apply(this,arguments)),o}),u=(i={},function(e,t){if("function"==typeof e)return e();if(void 0===i[e]){var r=function(e,t){return t?t.querySelector(e):document.querySelector(e)}.call(this,e,t);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}i[e]=r}return i[e]}),f=null,l=0,a=[],p=n(9);function d(e,t){for(var r=0;r<e.length;r++){var n=e[r],o=s[n.id];if(o){o.refs++;for(var i=0;i<o.parts.length;i++)o.parts[i](n.parts[i]);for(;i<n.parts.length;i++)o.parts.push(g(n.parts[i],t))}else{var u=[];for(i=0;i<n.parts.length;i++)u.push(g(n.parts[i],t));s[n.id]={id:n.id,refs:1,parts:u}}}}function m(e,t){for(var r=[],n={},o=0;o<e.length;o++){var i=e[o],u=t.base?i[0]+t.base:i[0],a={css:i[1],media:i[2],sourceMap:i[3]};n[u]?n[u].parts.push(a):r.push(n[u]={id:u,parts:[a]})}return r}function y(e,t){var r=u(e.insertInto);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var n=a[a.length-1];if("top"===e.insertAt)n?n.nextSibling?r.insertBefore(t,n.nextSibling):r.appendChild(t):r.insertBefore(t,r.firstChild),a.push(t);else if("bottom"===e.insertAt)r.appendChild(t);else{if("object"!=typeof e.insertAt||!e.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");var o=u(e.insertAt.before,r);r.insertBefore(t,o)}}function h(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e);var t=a.indexOf(e);0<=t&&a.splice(t,1)}function v(e){var t=document.createElement("style");if(void 0===e.attrs.type&&(e.attrs.type="text/css"),void 0===e.attrs.nonce){var r=function(){0;return n.nc}();r&&(e.attrs.nonce=r)}return b(t,e.attrs),y(e,t),t}function b(t,r){Object.keys(r).forEach(function(e){t.setAttribute(e,r[e])})}function g(t,e){var r,n,o,i,u,a;if(e.transform&&t.css){if(!(i="function"==typeof e.transform?e.transform(t.css):e.transform.default(t.css)))return function(){};t.css=i}if(e.singleton){var s=l++;r=f=f||v(e),n=S.bind(null,r,s,!1),o=S.bind(null,r,s,!0)}else o=t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(u=e,a=document.createElement("link"),void 0===u.attrs.type&&(u.attrs.type="text/css"),u.attrs.rel="stylesheet",b(a,u.attrs),y(u,a),n=function(e,t,r){var n=r.css,o=r.sourceMap,i=void 0===t.convertToAbsoluteUrls&&o;(t.convertToAbsoluteUrls||i)&&(n=p(n));o&&(n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var u=new Blob([n],{type:"text/css"}),a=e.href;e.href=URL.createObjectURL(u),a&&URL.revokeObjectURL(a)}.bind(null,r=a,e),function(){h(r),r.href&&URL.revokeObjectURL(r.href)}):(r=v(e),n=function(e,t){var r=t.css,n=t.media;n&&e.setAttribute("media",n);if(e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}.bind(null,r),function(){h(r)});return n(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;n(t=e)}else o()}}e.exports=function(e,u){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(u=u||{}).attrs="object"==typeof u.attrs?u.attrs:{},u.singleton||"boolean"==typeof u.singleton||(u.singleton=c()),u.insertInto||(u.insertInto="head"),u.insertAt||(u.insertAt="bottom");var a=m(e,u);return d(a,u),function(e){for(var t=[],r=0;r<a.length;r++){var n=a[r];(o=s[n.id]).refs--,t.push(o)}e&&d(m(e,u),u);for(r=0;r<t.length;r++){var o;if(0===(o=t[r]).refs){for(var i=0;i<o.parts.length;i++)o.parts[i]();delete s[o.id]}}}};var _,w=(_=[],function(e,t){return _[e]=t,_.filter(Boolean).join("\n")});function S(e,t,r,n){var o=r?"":n.css;if(e.styleSheet)e.styleSheet.cssText=w(t,o);else{var i=document.createTextNode(o),u=e.childNodes;u[t]&&e.removeChild(u[t]),u.length?e.insertBefore(i,u[t]):e.appendChild(i)}}},function(e,t){e.exports=function(e){var t="undefined"!=typeof window&&window.location;if(!t)throw new Error("fixUrls requires window.location");if(!e||"string"!=typeof e)return e;var o=t.protocol+"//"+t.host,i=o+t.pathname.replace(/\/[^\/]*$/,"/");return e.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,function(e,t){var r,n=t.trim().replace(/^"(.*)"$/,function(e,t){return t}).replace(/^'(.*)'$/,function(e,t){return t});return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(n)?e:(r=0===n.indexOf("//")?n:0===n.indexOf("/")?o+n:i+n.replace(/^\.\//,""),"url("+JSON.stringify(r)+")")})}}]);