vue3-image-magnifier
Version:
Vue 3 Image Magnifier
2 lines (1 loc) • 2.89 kB
JavaScript
(function(i,l){typeof exports=="object"&&typeof module<"u"?module.exports=l(require("vue")):typeof define=="function"&&define.amd?define(["vue"],l):(i=typeof globalThis<"u"?globalThis:i||self,i.Vue3ImageMagnifier=l(i.Vue))})(this,function(i){"use strict";const l=(e,o)=>{const s=e.__vccOpts||e;for(const[r,a]of o)s[r]=a;return s},m={props:{src:{type:String,required:!0},alt:{type:String,default:"Image to magnify"},zoomLevel:{type:Number,default:2},zoomWidth:{type:Number,default:200},zoomHeight:{type:Number,default:200},zoomBorder:{type:String,default:"2px solid #333"},zoomRadius:{type:String,default:"5px"},autoZoom:{type:Boolean,default:!0}},data(){return{showZoom:!1,zoomStyle:{}}},methods:{onClick(){this.autoZoom||(this.showZoom=!this.showZoom)},onkeydown(e){(!this.autoZoom&&e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this.onClick())},updateZoomStyle({x:e,y:o}){const s=this.$refs.imageRef,r=s.getBoundingClientRect(),a=e-r.left,t=o-r.top,n=a/r.width,f=t/r.height,u=s.width*this.zoomLevel,d=s.height*this.zoomLevel,g=u-this.zoomWidth,y=d-this.zoomHeight,p=n*g,k=f*y;this.zoomStyle={left:`${a-this.zoomWidth/2}px`,top:`${t-this.zoomHeight/2}px`,width:`${this.zoomWidth}px`,height:`${this.zoomHeight}px`,border:this.zoomBorder,borderRadius:this.zoomRadius,backgroundImage:`url(${this.src})`,backgroundSize:`${u}px ${d}px`,backgroundPosition:`-${p}px -${k}px`}},handleMove(e){let o,s;if(e.type.startsWith("touch")){const r=e.touches[0];o=r.clientX,s=r.clientY,e.preventDefault()}else o=e.clientX,s=e.clientY;this.updateZoomStyle({x:o,y:s})},onMouseMove(e){this.autoZoom?(this.showZoom=!0,this.handleMove(e)):this.showZoom&&this.handleMove(e)},onMouseLeave(){this.showZoom=!1},onTouchStart(e){this.showZoom=!0,this.handleMove(e)},onTouchEnd(){this.showZoom=!1}}},h=["src","alt"];function c(e,o,s,r,a,t){return i.openBlock(),i.createElementBlock("div",{class:"magnifier-container",role:"button","aria-label":"Image magnifier",tabindex:"0",onClick:o[0]||(o[0]=(...n)=>t.onClick&&t.onClick(...n)),onKeydown:o[1]||(o[1]=(...n)=>t.onkeydown&&t.onkeydown(...n)),onMousemove:o[2]||(o[2]=(...n)=>t.onMouseMove&&t.onMouseMove(...n)),onMouseleave:o[3]||(o[3]=(...n)=>t.onMouseLeave&&t.onMouseLeave(...n)),onTouchstart:o[4]||(o[4]=(...n)=>t.onTouchStart&&t.onTouchStart(...n)),onTouchmove:o[5]||(o[5]=(...n)=>t.handleMove&&t.handleMove(...n)),onTouchend:o[6]||(o[6]=(...n)=>t.onTouchEnd&&t.onTouchEnd(...n))},[i.createElementVNode("img",{src:s.src,class:"magnifier-image",ref:"imageRef",alt:s.alt},null,8,h),a.showZoom?(i.openBlock(),i.createElementBlock("div",{key:0,class:"zoom-result",style:i.normalizeStyle(a.zoomStyle),"aria-hidden":"true"},null,4)):i.createCommentVNode("",!0),o[7]||(o[7]=i.createElementVNode("span",{class:"sr-only"}," Use the mouse or the keyboard (Enter or Space) to activate the magnifier. ",-1))],32)}return l(m,[["render",c],["__scopeId","data-v-76f1a2cb"]])});