vue-image-magnifier
Version:
## setup ``` npm install vue-image-magnifier ```
2 lines • 14.9 kB
JavaScript
(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["magnifier"]=e():t["magnifier"]=e()})("undefined"!==typeof self?self:this,function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},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 o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(o,i,function(e){return t[e]}.bind(null,i));return o},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="fb15")}({"0d58":function(t,e,n){var o=n("ce10"),i=n("e11e");t.exports=Object.keys||function(t){return o(t,i)}},"11e9":function(t,e,n){var o=n("52a7"),i=n("4630"),r=n("6821"),c=n("6a99"),a=n("69a8"),u=n("c69a"),s=Object.getOwnPropertyDescriptor;e.f=n("9e1e")?s:function(t,e){if(t=r(t),e=c(e,!0),u)try{return s(t,e)}catch(n){}if(a(t,e))return i(!o.f.call(t,e),t[e])}},1495:function(t,e,n){var o=n("86cc"),i=n("cb7c"),r=n("0d58");t.exports=n("9e1e")?Object.defineProperties:function(t,e){i(t);var n,c=r(e),a=c.length,u=0;while(a>u)o.f(t,n=c[u++],e[n]);return t}},"230e":function(t,e,n){var o=n("d3f4"),i=n("7726").document,r=o(i)&&o(i.createElement);t.exports=function(t){return r?i.createElement(t):{}}},"2aba":function(t,e,n){var o=n("7726"),i=n("32e9"),r=n("69a8"),c=n("ca5a")("src"),a=n("fa5b"),u="toString",s=(""+a).split(u);n("8378").inspectSource=function(t){return a.call(t)},(t.exports=function(t,e,n,a){var u="function"==typeof n;u&&(r(n,"name")||i(n,"name",e)),t[e]!==n&&(u&&(r(n,c)||i(n,c,t[e]?""+t[e]:s.join(String(e)))),t===o?t[e]=n:a?t[e]?t[e]=n:i(t,e,n):(delete t[e],i(t,e,n)))})(Function.prototype,u,function(){return"function"==typeof this&&this[c]||a.call(this)})},"2aeb":function(t,e,n){var o=n("cb7c"),i=n("1495"),r=n("e11e"),c=n("613b")("IE_PROTO"),a=function(){},u="prototype",s=function(){var t,e=n("230e")("iframe"),o=r.length,i="<",c=">";e.style.display="none",n("fab2").appendChild(e),e.src="javascript:",t=e.contentWindow.document,t.open(),t.write(i+"script"+c+"document.F=Object"+i+"/script"+c),t.close(),s=t.F;while(o--)delete s[u][r[o]];return s()};t.exports=Object.create||function(t,e){var n;return null!==t?(a[u]=o(t),n=new a,a[u]=null,n[c]=t):n=s(),void 0===e?n:i(n,e)}},"2d00":function(t,e){t.exports=!1},"2d95":function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},"32e9":function(t,e,n){var o=n("86cc"),i=n("4630");t.exports=n("9e1e")?function(t,e,n){return o.f(t,e,i(1,n))}:function(t,e,n){return t[e]=n,t}},4588:function(t,e){var n=Math.ceil,o=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?o:n)(t)}},4630:function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},"52a7":function(t,e){e.f={}.propertyIsEnumerable},5537:function(t,e,n){var o=n("8378"),i=n("7726"),r="__core-js_shared__",c=i[r]||(i[r]={});(t.exports=function(t,e){return c[t]||(c[t]=void 0!==e?e:{})})("versions",[]).push({version:o.version,mode:n("2d00")?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},"5ca1":function(t,e,n){var o=n("7726"),i=n("8378"),r=n("32e9"),c=n("2aba"),a=n("9b43"),u="prototype",s=function(t,e,n){var f,h,l,m,p=t&s.F,d=t&s.G,g=t&s.S,v=t&s.P,y=t&s.B,b=d?o:g?o[e]||(o[e]={}):(o[e]||{})[u],x=d?i:i[e]||(i[e]={}),w=x[u]||(x[u]={});for(f in d&&(n=e),n)h=!p&&b&&void 0!==b[f],l=(h?b:n)[f],m=y&&h?a(l,o):v&&"function"==typeof l?a(Function.call,l):l,b&&c(b,f,l,t&s.U),x[f]!=l&&r(x,f,m),v&&w[f]!=l&&(w[f]=l)};o.core=i,s.F=1,s.G=2,s.S=4,s.P=8,s.B=16,s.W=32,s.U=64,s.R=128,t.exports=s},"5dbc":function(t,e,n){var o=n("d3f4"),i=n("8b97").set;t.exports=function(t,e,n){var r,c=e.constructor;return c!==n&&"function"==typeof c&&(r=c.prototype)!==n.prototype&&o(r)&&i&&i(t,r),t}},"613b":function(t,e,n){var o=n("5537")("keys"),i=n("ca5a");t.exports=function(t){return o[t]||(o[t]=i(t))}},"626a":function(t,e,n){var o=n("2d95");t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==o(t)?t.split(""):Object(t)}},6821:function(t,e,n){var o=n("626a"),i=n("be13");t.exports=function(t){return o(i(t))}},"69a8":function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},"6a99":function(t,e,n){var o=n("d3f4");t.exports=function(t,e){if(!o(t))return t;var n,i;if(e&&"function"==typeof(n=t.toString)&&!o(i=n.call(t)))return i;if("function"==typeof(n=t.valueOf)&&!o(i=n.call(t)))return i;if(!e&&"function"==typeof(n=t.toString)&&!o(i=n.call(t)))return i;throw TypeError("Can't convert object to primitive value")}},7726:function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},"77f1":function(t,e,n){var o=n("4588"),i=Math.max,r=Math.min;t.exports=function(t,e){return t=o(t),t<0?i(t+e,0):r(t,e)}},"79e5":function(t,e){t.exports=function(t){try{return!!t()}catch(e){return!0}}},8378:function(t,e){var n=t.exports={version:"2.6.5"};"number"==typeof __e&&(__e=n)},"86cc":function(t,e,n){var o=n("cb7c"),i=n("c69a"),r=n("6a99"),c=Object.defineProperty;e.f=n("9e1e")?Object.defineProperty:function(t,e,n){if(o(t),e=r(e,!0),o(n),i)try{return c(t,e,n)}catch(a){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},"8b97":function(t,e,n){var o=n("d3f4"),i=n("cb7c"),r=function(t,e){if(i(t),!o(e)&&null!==e)throw TypeError(e+": can't set as prototype!")};t.exports={set:Object.setPrototypeOf||("__proto__"in{}?function(t,e,o){try{o=n("9b43")(Function.call,n("11e9").f(Object.prototype,"__proto__").set,2),o(t,[]),e=!(t instanceof Array)}catch(i){e=!0}return function(t,n){return r(t,n),e?t.__proto__=n:o(t,n),t}}({},!1):void 0),check:r}},9093:function(t,e,n){var o=n("ce10"),i=n("e11e").concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return o(t,i)}},"9b43":function(t,e,n){var o=n("d8e8");t.exports=function(t,e,n){if(o(t),void 0===e)return t;switch(n){case 1:return function(n){return t.call(e,n)};case 2:return function(n,o){return t.call(e,n,o)};case 3:return function(n,o,i){return t.call(e,n,o,i)}}return function(){return t.apply(e,arguments)}}},"9def":function(t,e,n){var o=n("4588"),i=Math.min;t.exports=function(t){return t>0?i(o(t),9007199254740991):0}},"9e1e":function(t,e,n){t.exports=!n("79e5")(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},aa77:function(t,e,n){var o=n("5ca1"),i=n("be13"),r=n("79e5"),c=n("fdef"),a="["+c+"]",u="
",s=RegExp("^"+a+a+"*"),f=RegExp(a+a+"*$"),h=function(t,e,n){var i={},a=r(function(){return!!c[t]()||u[t]()!=u}),s=i[t]=a?e(l):c[t];n&&(i[n]=s),o(o.P+o.F*a,"String",i)},l=h.trim=function(t,e){return t=String(i(t)),1&e&&(t=t.replace(s,"")),2&e&&(t=t.replace(f,"")),t};t.exports=h},be13:function(t,e){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on "+t);return t}},c366:function(t,e,n){var o=n("6821"),i=n("9def"),r=n("77f1");t.exports=function(t){return function(e,n,c){var a,u=o(e),s=i(u.length),f=r(c,s);if(t&&n!=n){while(s>f)if(a=u[f++],a!=a)return!0}else for(;s>f;f++)if((t||f in u)&&u[f]===n)return t||f||0;return!t&&-1}}},c5f6:function(t,e,n){"use strict";var o=n("7726"),i=n("69a8"),r=n("2d95"),c=n("5dbc"),a=n("6a99"),u=n("79e5"),s=n("9093").f,f=n("11e9").f,h=n("86cc").f,l=n("aa77").trim,m="Number",p=o[m],d=p,g=p.prototype,v=r(n("2aeb")(g))==m,y="trim"in String.prototype,b=function(t){var e=a(t,!1);if("string"==typeof e&&e.length>2){e=y?e.trim():l(e,3);var n,o,i,r=e.charCodeAt(0);if(43===r||45===r){if(n=e.charCodeAt(2),88===n||120===n)return NaN}else if(48===r){switch(e.charCodeAt(1)){case 66:case 98:o=2,i=49;break;case 79:case 111:o=8,i=55;break;default:return+e}for(var c,u=e.slice(2),s=0,f=u.length;s<f;s++)if(c=u.charCodeAt(s),c<48||c>i)return NaN;return parseInt(u,o)}}return+e};if(!p(" 0o1")||!p("0b1")||p("+0x1")){p=function(t){var e=arguments.length<1?0:t,n=this;return n instanceof p&&(v?u(function(){g.valueOf.call(n)}):r(n)!=m)?c(new d(b(e)),n,p):b(e)};for(var x,w=n("9e1e")?s(d):"MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,EPSILON,isFinite,isInteger,isNaN,isSafeInteger,MAX_SAFE_INTEGER,MIN_SAFE_INTEGER,parseFloat,parseInt,isInteger".split(","),_=0;w.length>_;_++)i(d,x=w[_])&&!i(p,x)&&h(p,x,f(d,x));p.prototype=g,g.constructor=p,n("2aba")(o,m,p)}},c69a:function(t,e,n){t.exports=!n("9e1e")&&!n("79e5")(function(){return 7!=Object.defineProperty(n("230e")("div"),"a",{get:function(){return 7}}).a})},ca5a:function(t,e){var n=0,o=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+o).toString(36))}},cb7c:function(t,e,n){var o=n("d3f4");t.exports=function(t){if(!o(t))throw TypeError(t+" is not an object!");return t}},ce10:function(t,e,n){var o=n("69a8"),i=n("6821"),r=n("c366")(!1),c=n("613b")("IE_PROTO");t.exports=function(t,e){var n,a=i(t),u=0,s=[];for(n in a)n!=c&&o(a,n)&&s.push(n);while(e.length>u)o(a,n=e[u++])&&(~r(s,n)||s.push(n));return s}},d3f4:function(t,e){t.exports=function(t){return"object"===typeof t?null!==t:"function"===typeof t}},d8e8:function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},e11e:function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},fa5b:function(t,e,n){t.exports=n("5537")("native-function-to-string",Function.toString)},fab2:function(t,e,n){var o=n("7726").document;t.exports=o&&o.documentElement},fb15:function(t,e,n){"use strict";var o;(n.r(e),"undefined"!==typeof window)&&((o=window.document.currentScript)&&(o=o.src.match(/(.+\/)[^\/]+\.js(\?.*)?$/))&&(n.p=o[1]));var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"image-magnifier",style:t.style},[n("img",{ref:"img",staticClass:"image-magnifier__img",attrs:{width:t.width,height:t.height,src:t.src},on:{mouseenter:t.handleOver,mousemove:t.handleMove,mouseleave:t.handleOut}}),n("div",{ref:"mask",staticClass:"image-magnifier__mask",class:t.maskClass,style:t.maskStyle}),n("div",{directives:[{name:"show",rawName:"v-show",value:t.zoomShow,expression:"zoomShow"}],staticClass:"image-magnifier__zoom",class:t.zoomClass,style:t.zoomStyle},[n("img",{style:t.zoomImgStyle,attrs:{src:t.zoomSrc}})])])},r=[],c=(n("c5f6"),{name:"ImageMagnifier",props:{width:{default:"auto"},height:{default:"auto"},src:{},zoomSrc:{},zoomWidth:{default:"auto"},zoomHeight:{default:"auto"},zoomClass:{},maskWidth:{default:100},maskHeight:{default:100},maskBgColor:{default:"#409eff"},maskOpacity:{default:.5},maskClass:{},delayIn:{type:Number,default:0},delayOut:{type:Number,default:0}},data:function(){return{zoomShow:!1,imgRect:"",maskRect:"",maskX:0,maskY:0,zoomImage:"",zoomLeft:"",zoomImgWidth:0,zoomImgHeight:0,zoomPosition:{x:0,y:0},zoomInTimeoutId:null,zoomOutTimeoutId:null}},computed:{style:function(){return{position:"relative",cursor:"move"}},maskStyle:function(){return{position:"absolute",width:"".concat(this.maskWidth,"px"),height:"".concat(this.maskHeight,"px"),opacity:this.maskOpacity,backgroundColor:this.maskBgColor,left:0,top:0,transform:"translate(".concat(this.maskX,"px, ").concat(this.maskY,"px)"),willChange:"transform",pointerEvents:"none",zIndex:1e3,visibility:this.zoomShow?"visible":"hidden"}},zoomStyle:function(){return{width:"".concat(this.zoomWidth,"px"),height:"".concat(this.zoomHeight,"px"),position:"absolute",left:"".concat(this.zoomLeft,"px"),top:0,overflow:"hidden",zIndex:1e3}},zoomImgStyle:function(){return{width:"".concat(this.zoomImgWidth,"px"),height:"".concat(this.zoomImgHeight,"px"),willChange:"transform",transform:"translate(-".concat(this.zoomPosition.x,"px, -").concat(this.zoomPosition.y,"px)")}}},created:function(){},methods:{handleOver:function(){var t=this;clearTimeout(this.zoomOutTimeoutId),this.calcZoomSize(),0===this.delayIn?this.zoomShow=!0:this.zoomInTimeoutId=setTimeout(function(){t.zoomShow=!0},this.delayIn)},calcZoomSize:function(){this.imgRect=this.$refs.img&&this.$refs.img.getBoundingClientRect(),this.maskRect=this.$refs.mask&&this.$refs.mask.getBoundingClientRect(),this.imgRect&&this.maskRect&&(this.zoomImgWidth=this.imgRect.width/this.maskRect.width*this.zoomWidth,this.zoomImgHeight=this.imgRect.height/this.maskRect.height*this.zoomHeight)},handleMove:function(t){this.imgRect&&this.maskRect&&(this.maskX=this.outXCheck(t.clientX-this.imgRect.left),this.maskY=this.outYCheck(t.clientY-this.imgRect.top),this.zoomLeft=this.imgRect.width+10,this.zoomPosition.x=this.maskX*(this.zoomImgWidth/this.imgRect.width),this.zoomPosition.y=this.maskY*(this.zoomImgHeight/this.imgRect.height))},handleOut:function(){var t=this;clearTimeout(this.zoomInTimeoutId),0===this.delayOut?this.zoomShow=!1:this.zoomOutTimeoutId=setTimeout(function(){t.zoomShow=!1},this.delayOut)},outXCheck:function(t){return t-=this.maskRect.width/2,t<0?0:t+this.maskRect.width>this.imgRect.width?this.imgRect.width-this.maskRect.width:t},outYCheck:function(t){return t-=this.maskRect.height/2,t<0?0:t+this.maskRect.height>this.imgRect.height?this.imgRect.height-this.maskRect.height:t}}}),a=c;function u(t,e,n,o,i,r,c,a){var u,s="function"===typeof t?t.options:t;if(e&&(s.render=e,s.staticRenderFns=n,s._compiled=!0),o&&(s.functional=!0),r&&(s._scopeId="data-v-"+r),c?(u=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),i&&i.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(c)},s._ssrRegister=u):i&&(u=a?function(){i.call(this,this.$root.$options.shadowRoot)}:i),u)if(s.functional){s._injectStyles=u;var f=s.render;s.render=function(t,e){return u.call(e),f(t,e)}}else{var h=s.beforeCreate;s.beforeCreate=h?[].concat(h,u):[u]}return{exports:t,options:s}}var s=u(a,i,r,!1,null,null,null),f=s.exports,h=function(t){t.component("image-magnifier",f)};"undefined"!==typeof window&&window.Vue&&h(window.Vue);var l={install:h,ImageMagnifier:f};n.d(e,"ImageMagnifier",function(){return f});e["default"]=l},fdef:function(t,e){t.exports="\t\n\v\f\r \u2028\u2029\ufeff"}})});
//# sourceMappingURL=magnifier.umd.min.js.map