react-content-zoom/dist/contentzoom.js

React lightweight stateless component for image zoom on mouse hover

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.contentzoom=t():e.contentzoom=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={exports:{},id:r,loaded:!1};return e[r].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="/static/",t(0)}([function(e,t,n){e.exports=n(2)},function(e,t){"use strict";function n(e){return function(){return e}}var r=function(){};r.thatReturns=n,r.thatReturnsFalse=n(!1),r.thatReturnsTrue=n(!0),r.thatReturnsNull=n(null),r.thatReturnsThis=function(){return this},r.thatReturnsArgument=function(e){return e},e.exports=r},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(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}function u(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)}Object.defineProperty(t,"__esModule",{value:!0});var a=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),c=n(11),l=r(c),s=n(8),f=r(s);n(3);var p=function(e){function t(){var e;o(this,t);for(var n=arguments.length,r=Array(n),u=0;u<n;u++)r[u]=arguments[u];var a=i(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(r)));return a.zoomedImageElement=null,a.contentToZoom=null,a}return u(t,e),a(t,[{key:"componentDidMount",value:function(){this.preloadImages(),this.contentToZoom=this.zoomedImageElement?this.renderZoomedImage(this.zoomedImageElement):null,this.handleMouseEnter(this.zoomedImageElement),this.handleMouseMove(this.zoomedImageElement),this.handleMouseLeave(this.zoomedImageElement)}},{key:"preloadImages",value:function(){[this.props.imageUrl,this.props.largeImageUrl].forEach(function(e){(new Image).src=e})}},{key:"handleMouseEnter",value:function(e){if(e){var t=this.props.zoomPercent?this.props.zoomPercent+"%":"250%",n=this.props.largeImageUrl;e.addEventListener("mouseenter",function(e){this.style.backgroundImage="url("+n+")",this.style.backgroundSize=t},!1)}}},{key:"handleMouseLeave",value:function(e){var t=this.props.imageUrl;e&&e.addEventListener("mouseleave",function(e){this.style.backgroundSize="cover",this.style.backgroundPosition="center",this.style.backgroundImage="url("+t+")"},!1)}},{key:"handleMouseMove",value:function(e){e&&e.addEventListener("mousemove",function(e){var t=this.getBoundingClientRect(),n=e.clientX-t.left,r=e.clientY-t.top,o=Math.round(100/(t.width/n)),i=Math.round(100/(t.height/r));this.style.backgroundPosition=o+"% "+i+"%"},!1)}},{key:"renderZoomedImage",value:function(e){e&&(e.style.backgroundImage="url("+this.props.imageUrl+")")}},{key:"render",value:function(){var e=this,t=void 0!==this.props.children?this.props.children:null,n=null,r=null;return n=this.props.contentHeight?this.props.contentHeight+"px":"100%",r=this.props.contentWidth?this.props.contentWidth+"px":"100%",l.default.createElement("div",null,l.default.createElement("div",{className:"zoomed-image",ref:function(t){e.zoomedImageElement=t},style:{height:n,width:r}},this.contentToZoom,t))}}]),t}(l.default.Component);t.default=p,p.propTypes={imageUrl:f.default.string,largeImageUrl:f.default.string,zoomPercent:f.default.number,contentWidth:f.default.number,contentHeight:f.default.number}},function(e,t,n){t=e.exports=n(4)(),t.push([e.id,".zoomed-image{background-size:cover;cursor:pointer}",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var n=this[t];n[2]?e.push("@media "+n[2]+"{"+n[1]+"}"):e.push(n[1])}return e.join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o<this.length;o++){var i=this[o][0];"number"==typeof i&&(r[i]=!0)}for(o=0;o<t.length;o++){var u=t[o];"number"==typeof u[0]&&r[u[0]]||(n&&!u[2]?u[2]=n:n&&(u[2]="("+u[2]+") and ("+n+")"),e.push(u))}},e}},function(e,t,n){"use strict";var r={};e.exports=r},function(e,t,n){"use strict";function r(e,t,n,r,i,u,a,c){if(o(t),!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var s=[n,r,i,u,a,c],f=0;l=new Error(t.replace(/%s/g,function(){return s[f++]})),l.name="Invariant Violation"}throw l.framesToPop=1,l}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";var r=n(1),o=n(6),i=n(9);e.exports=function(){function e(e,t,n,r,u,a){a!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){e.exports=n(7)()},function(e,t){"use strict";var n="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=n},function(e,t,n){/** @license React v16.2.0
	 * react.production.min.js
	 *
	 * Copyright (c) 2013-present, Facebook, Inc.
	 *
	 * This source code is licensed under the MIT license found in the
	 * LICENSE file in the root directory of this source tree.
	 */
"use strict";function r(e){for(var t=arguments.length-1,n="Minified React error #"+e+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant="+e,r=0;r<t;r++)n+="&args[]="+encodeURIComponent(arguments[r+1]);throw t=Error(n+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."),t.name="Invariant Violation",t.framesToPop=1,t}function o(e,t,n){this.props=e,this.context=t,this.refs=b,this.updater=n||S}function i(e,t,n){this.props=e,this.context=t,this.refs=b,this.updater=n||S}function u(){}function a(e,t,n){this.props=e,this.context=t,this.refs=b,this.updater=n||S}function c(e,t,n){var r,o={},i=null,u=null;if(null!=t)for(r in void 0!==t.ref&&(u=t.ref),void 0!==t.key&&(i=""+t.key),t)z.call(t,r)&&!C.hasOwnProperty(r)&&(o[r]=t[r]);var a=arguments.length-2;if(1===a)o.children=n;else if(1<a){for(var c=Array(a),l=0;l<a;l++)c[l]=arguments[l+2];o.children=c}if(e&&e.defaultProps)for(r in a=e.defaultProps)void 0===o[r]&&(o[r]=a[r]);return{$$typeof:_,type:e,key:i,ref:u,props:o,_owner:T.current}}function l(e){return"object"==typeof e&&null!==e&&e.$$typeof===_}function s(e){var t={"=":"=0",":":"=2"};return"$"+(""+e).replace(/[=:]/g,function(e){return t[e]})}function f(e,t,n,r){if(U.length){var o=U.pop();return o.result=e,o.keyPrefix=t,o.func=n,o.context=r,o.count=0,o}return{result:e,keyPrefix:t,func:n,context:r,count:0}}function p(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,10>U.length&&U.push(e)}function h(e,t,n,o){var i=typeof e;"undefined"!==i&&"boolean"!==i||(e=null);var u=!1;if(null===e)u=!0;else switch(i){case"string":case"number":u=!0;break;case"object":switch(e.$$typeof){case _:case j:case w:case x:u=!0}}if(u)return n(o,e,""===t?"."+d(e,0):t),1;if(u=0,t=""===t?".":t+":",Array.isArray(e))for(var a=0;a<e.length;a++){i=e[a];var c=t+d(i,a);u+=h(i,c,n,o)}else if(null===e||"undefined"==typeof e?c=null:(c=P&&e[P]||e["@@iterator"],c="function"==typeof c?c:null),"function"==typeof c)for(e=c.call(e),a=0;!(i=e.next()).done;)i=i.value,c=t+d(i,a++),u+=h(i,c,n,o);else"object"===i&&(n=""+e,r("31","[object Object]"===n?"object with keys {"+Object.keys(e).join(", ")+"}":n,""));return u}function d(e,t){return"object"==typeof e&&null!==e&&null!=e.key?s(e.key):t.toString(36)}function y(e,t){e.func.call(e.context,t,e.count++)}function m(e,t,n){var r=e.result,o=e.keyPrefix;e=e.func.call(e.context,t,e.count++),Array.isArray(e)?v(e,r,n,k.thatReturnsArgument):null!=e&&(l(e)&&(t=o+(!e.key||t&&t.key===e.key?"":(""+e.key).replace(M,"$&/")+"/")+n,e={$$typeof:_,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}),r.push(e))}function v(e,t,n,r,o){var i="";null!=n&&(i=(""+n).replace(M,"$&/")+"/"),t=f(t,i,r,o),null==e||h(e,"",m,t),p(t)}var g=n(12),b=n(5),k=n(1),O="function"==typeof Symbol&&Symbol.for,_=O?Symbol.for("react.element"):60103,j=O?Symbol.for("react.call"):60104,w=O?Symbol.for("react.return"):60105,x=O?Symbol.for("react.portal"):60106,E=O?Symbol.for("react.fragment"):60107,P="function"==typeof Symbol&&Symbol.iterator,S={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}};o.prototype.isReactComponent={},o.prototype.setState=function(e,t){"object"!=typeof e&&"function"!=typeof e&&null!=e?r("85"):void 0,this.updater.enqueueSetState(this,e,t,"setState")},o.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},u.prototype=o.prototype;var I=i.prototype=new u;I.constructor=i,g(I,o.prototype),I.isPureReactComponent=!0;var R=a.prototype=new u;R.constructor=a,g(R,o.prototype),R.unstable_isAsyncReactComponent=!0,R.render=function(){return this.props.children};var T={current:null},z=Object.prototype.hasOwnProperty,C={key:!0,ref:!0,__self:!0,__source:!0},M=/\/+/g,U=[],A={Children:{map:function(e,t,n){if(null==e)return e;var r=[];return v(e,r,null,t,n),r},forEach:function(e,t,n){return null==e?e:(t=f(null,null,t,n),null==e||h(e,"",y,t),void p(t))},count:function(e){return null==e?0:h(e,"",k.thatReturnsNull,null)},toArray:function(e){var t=[];return v(e,t,null,k.thatReturnsArgument),t},only:function(e){return l(e)?void 0:r("143"),e}},Component:o,PureComponent:i,unstable_AsyncComponent:a,Fragment:E,createElement:c,cloneElement:function(e,t,n){var r=g({},e.props),o=e.key,i=e.ref,u=e._owner;if(null!=t){if(void 0!==t.ref&&(i=t.ref,u=T.current),void 0!==t.key&&(o=""+t.key),e.type&&e.type.defaultProps)var a=e.type.defaultProps;for(c in t)z.call(t,c)&&!C.hasOwnProperty(c)&&(r[c]=void 0===t[c]&&void 0!==a?a[c]:t[c])}var c=arguments.length-2;if(1===c)r.children=n;else if(1<c){a=Array(c);for(var l=0;l<c;l++)a[l]=arguments[l+2];r.children=a}return{$$typeof:_,type:e.type,key:o,ref:i,props:r,_owner:u}},createFactory:function(e){var t=c.bind(null,e);return t.type=e,t},isValidElement:l,version:"16.2.0",__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{ReactCurrentOwner:T,assign:g}},$=Object.freeze({default:A}),L=$&&A||$;e.exports=L.default?L.default:L},function(e,t,n){"use strict";e.exports=n(10)},function(e,t){/*
	object-assign
	(c) Sindre Sorhus
	@license MIT
	*/
"use strict";function n(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function r(){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={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;var r=Object.getOwnPropertyNames(t).map(function(e){return t[e]});if("0123456789"!==r.join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach(function(e){o[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(e){return!1}}var o=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable;e.exports=r()?Object.assign:function(e,t){for(var r,a,c=n(e),l=1;l<arguments.length;l++){r=Object(arguments[l]);for(var s in r)i.call(r,s)&&(c[s]=r[s]);if(o){a=o(r);for(var f=0;f<a.length;f++)u.call(r,a[f])&&(c[a[f]]=r[a[f]])}}return c}}])});
//# sourceMappingURL=contentzoom.js.map