react-looking-glass/build/index.js

A react component for magnifying images with a magnifying/looking glass effect

module.exports=function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},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(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));return n},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=4)}([function(e,t,o){e.exports=o(2)()},function(e,t){e.exports=require("react")},function(e,t,o){"use strict";var n=o(3);function r(){}e.exports=function(){function e(e,t,o,r,i,a){if(a!==n){var s=new Error("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");throw s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var o={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 o.checkPropTypes=r,o.PropTypes=o,o}},function(e,t,o){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,t,o){"use strict";o.r(t);var n=o(1),r=o.n(n),i=o(0),a=o.n(i);function s(e){return(s="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})(e)}function u(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)}}function c(e,t){return!t||"object"!==s(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function l(e){return(l=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function f(e,t){return(f=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var p=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),c(this,l(t).apply(this,arguments))}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&f(e,t)}(t,r.a.PureComponent),function(e,t,o){t&&u(e.prototype,t),o&&u(e,o)}(t,[{key:"render",value:function(){var e=this.props,t=e.imageRef,o=e.zoomFactor,n=e.size,i=e.cursorOffset,a=e.zoomSrc,s=e.cursorPosition,u=e.imageOffset,c=e.squareMagnifier,l=e.zoomClassName,f=n/2,p=-o*u.x+f,y=-o*u.y+f,b=t.current.offsetWidth,h=t.current.offsetHeight,m=t.current.src;return r.a.createElement("div",{style:{position:"absolute",display:"block",top:s.y,left:s.x,width:n,height:n,marginLeft:i.x-f,marginTop:i.y-f,backgroundColor:"white",borderRadius:c?"0%":"50%",boxShadow:"1px 1px 6px rgba(0,0,0,0.3)",touchAction:"none",pointerEvents:"none"},className:l},r.a.createElement("div",{style:{width:n,height:n,backgroundImage:'url("'.concat(null!=a?a:m,'")'),backgroundSize:"".concat(b*o,"px ").concat(h*o,"px"),backgroundRepeat:"no-repeat",backgroundPosition:"".concat(p,"px ").concat(y,"px"),borderRadius:c?"0%":"50%",touchAction:"none",pointerEvents:"none"}}))}}]),t}();p.propTypes={imageRef:a.a.object.isRequired,zoomFactor:a.a.number.isRequired,size:a.a.number.isRequired,cursorOffset:a.a.shape({x:a.a.number.isRequired,y:a.a.number.isRequired}).isRequired,zoomSrc:a.a.string,cursorPosition:a.a.shape({x:a.a.number.isRequired,y:a.a.number.isRequired}).isRequired,imageOffset:a.a.shape({x:a.a.number.isRequired,y:a.a.number.isRequired}).isRequired,squareMagnifier:a.a.bool,zoomClassName:a.a.string};var y=p;function b(e){return(b="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})(e)}function h(){return(h=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}).apply(this,arguments)}function m(e,t){if(null==e)return{};var o,n,r=function(e,t){if(null==e)return{};var o,n,r={},i=Object.keys(e);for(n=0;n<i.length;n++)o=i[n],t.indexOf(o)>=0||(r[o]=e[o]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)o=i[n],t.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(r[o]=e[o])}return r}function d(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)}}function g(e){return(g=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function v(e,t){return(v=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function O(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var P=function(e){function t(e){var o;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),(o=function(e,t){return!t||"object"!==b(t)&&"function"!=typeof t?O(e):t}(this,g(t).call(this,e))).state={cursorPosition:{x:0,y:0},imageOffset:{x:0,y:0},mouseE:{clientX:0,clientY:0,pageX:0,pageY:0},hover:!1},o.imageRef=r.a.createRef(),o.onEnter=o.onEnter.bind(O(O(o))),o.onLeave=o.onLeave.bind(O(O(o))),o.onMove=o.onMove.bind(O(O(o))),o.setPosition=o.setPosition.bind(O(O(o))),o}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&v(e,t)}(t,r.a.PureComponent),function(e,t,o){t&&d(e.prototype,t),o&&d(e,o)}(t,[{key:"onEnter",value:function(e){this.onMove(e),this.setState({hover:!0})}},{key:"onLeave",value:function(){this.setState({hover:!1})}},{key:"onMove",value:function(e){if(e.hasOwnProperty("touches")||e.hasOwnProperty("changedTouches")){var t=(e.changedTouches||e.touches)[0],o=this.imageRef.current.getBoundingClientRect();t.clientX>=o.left&&t.clientX<=o.right&&t.clientY>=o.top&&t.clientY<=o.bottom?this.setPosition({clientX:t.clientX,clientY:t.clientY,pageX:t.pageX,pageY:t.pageY}):this.onLeave()}else e.hasOwnProperty("clientX")&&e.hasOwnProperty("pageX")?this.setPosition({clientX:e.clientX,clientY:e.clientY,pageX:e.pageX,pageY:e.pageY}):this.setPosition(this.state.mouseE)}},{key:"setPosition",value:function(e){var t=this.imageRef.current.getBoundingClientRect();this.setState({cursorPosition:{x:e.clientX+window.scrollX,y:e.clientY+window.scrollY},imageOffset:{x:e.pageX-t.left-window.pageXOffset,y:e.pageY-t.top-window.pageYOffset},mouseE:e})}},{key:"render",value:function(){var e=this.props,t=e.src,o=e.alt,n=e.zoomFactor,i=e.displayZoomOne,a=e.scrollLinked,s=e.className,u=e.imageClassName,c=e.hideCursor,l=m(e,["src","alt","zoomFactor","displayZoomOne","scrollLinked","className","imageClassName","hideCursor"]),f=this.state,p=f.hover,b=m(f,["hover"]);return r.a.createElement("div",{onScroll:a?this.onMove:void 0,style:{width:"100%",height:"100%",overflowY:"auto",touchAction:"none"},className:s},r.a.createElement("img",{src:t,alt:o,onMouseEnter:this.onEnter,onMouseLeave:this.onLeave,onMouseMove:this.onMove,onTouchStart:this.onEnter,onTouchEnd:this.onLeave,onTouchCancel:this.onLeave,onTouchMove:this.onMove,ref:this.imageRef,style:{width:"100%",height:"auto",touchAction:"none",cursor:!0===c?"none":"crosshair"},className:u}),p&&n>=1&&(i||1!==n)&&r.a.createElement(y,h({imageRef:this.imageRef,zoomFactor:n},b,l)))}}]),t}();P.propTypes={src:a.a.string.isRequired,alt:a.a.string.isRequired,zoomFactor:a.a.number.isRequired,size:a.a.number,cursorOffset:a.a.shape({x:a.a.number.isRequired,y:a.a.number.isRequired}),zoomSrc:a.a.string,displayZoomOne:a.a.bool,scrollLinked:a.a.bool,squareMagnifier:a.a.bool,className:a.a.string,imageClassName:a.a.string,zoomClassName:a.a.string,hideCursor:a.a.bool},P.defaultProps={zoomFactor:3,size:200,cursorOffset:{x:0,y:0},alt:"",displayZoomOne:!1,scrollLinked:!0,squareMagnifier:!1,hideCursor:!0};t.default=P}]);