https://www.kalmarhockey.com/assets/vue-image-zoomer.es-kbwFKPeC.js

1import{cg as w,C as h,D as n,an as y,J as r,a7 as _,as as b,E as c,aa as m,G as u,H as d,ag as g,F as f,K as v,ah as z,aA as A,n as k}from"./index-BKnu1zUV.js";var W=(t,o)=>{const s=t.__vccOpts||t;for(const[l,e]of o)s[l]=e;return s};const x={name:"VueImageZoomer",emits:["onZoom","offZoom","regularLoaded","zoomLoaded","zoomLoading"],directives:{clickOutside:{mounted(t,o){t.clickOutsideEvent=function(s){t==s.target||t.contains(s.target)||o.value(s,t)},document.body.addEventListener("click",t.clickOutsideEvent)},unmounted(t){document.body.removeEventListener("click",t.clickOutsideEvent)}}},data(){return{touch:!1,zoomed:!1,x:0,y:0,touchPosition:0,origX:0,origY:0,offsetLeft:0,offsetTop:0,zoomWidth:0,zoomHeight:0,options:{zoomAmount:0,zoom:!1,zoomWebp:!1},loaded:!1,loading:!1,webp_supported:!1,cx:0,cy:0,showSlot:!0}},props:{regular:String,regularWebp:String,zoom:String,zoomWebp:String,imgClass:{type:String,default:""},alt:String,zoomAmount:{type:Number,default:0},clickZoom:Boolean,hoverMessage:{type:String,default:'<span class="vh--icon">&#9906;</span> Hover to zoom'},touchMessage:{type:String,default:'<span class="vh--icon">&#9906;</span> Tap to zoom'},clickMessage:{type:String,default:'<span class="vh--icon">&#9906;</span> Click to zoom'},closePos:{type:String,default:"top-left"},messagePos:{type:String,default:"bottom"},showMessage:{type:Boolean,default:!0},showMessageTouch:{type:Boolean,default:!0},tapToClose:Boolean,breakpoints:Array,touchZoomPos:{type:Array,default(){return[.5,.5]}},imgWidth:Number,imgHeight:Number,lazyload:Boolean,rightClick:{type:Boolean,default:!0}},watch:{propChanges(){this.get_options()}},computed:{propChanges(){return`${this.breakpoints}|${this.regular}|${this.regularWebp}|${this.zoom}|${this.zoomAmount}|${this.zoomWebp}|${this.lazyload}`}},mounted(){this.check_webp_feature("lossy",(t,o)=>{o&&(this.webp_supported=!0)}),this.get_options(),("ontouchstart"in window||navigator.msMaxTouchPoints)&&(this.touch=!0),this.touchLogic()},created(){window.addEventListener("resize",this.debounce(()=>{this.resize()},500))},unmounted(){window.removeEventListener("resize",this.resize())},methods:{async touchLogic(){await k();let t,o,s=!1;this.$refs["vue-hover-zs"].addEventListener("touchstart",l=>{if(this.zoomed){l.cancelable&&l.preventDefault();let e=l.changedTouches[0];t=e.pageX-this.cx,o=e.pageY-this.cy}}),this.$refs["vue-hover-zs"].addEventListener("touchmove",l=>{if(this.zoomed){let e=l.changedTouches[0];this.x=e.pageX-t,this.y=e.pageY-o,e.pageX-t<=this.origX-this.zoomWidth&&(this.x=this.origX-this.zoomWidth),e.pageX-t>=0&&(this.x=-1),e.pageY-o<=this.origY-this.options.zoomAmount*this.origY&&(this.y=this.origY-this.options.zoomAmount*this.origY),e.pageY-o>=0&&(this.y=-1),this.touchPosition="translate3d("+this.x+"px,"+this.y+"px,0)",s=!0}}),this.$refs["vue-hover-zs"].addEventListener("touchend",l=>{if(this.zoomed){let e=l.changedTouches[0];this.cx=e.pageX-t,this.cy=e.pageY-o,!s&&this.tapToClose&&(this.zoomed=!1,this.$emit("offZoom")),s=!1}})},debounce(t,o){let s;return(...l)=>{const e=this;clearTimeout(s),s=setTimeout(()=>t.apply(e,l),o)}},get_options(){this.options.zoomAmount=this.zoomAmount,this.options.zoom=this.zoom,this.options.zoomWebp=this.zoomWebp,this.zoom||(this.options.zoom=this.regular,this.options.zoomAmount=2),!this.zoomWebp&&this.regularWebp&&(this.options.zoomWebp=this.regularWebp,this.options.zoomAmount=2),this.resize()},resize(){this.zoomed=!1,this.loaded=!1},check_webp_feature(t,o){let s={lossy:"UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA"},l=new Image;l.onload=()=>{let e=l.width>0&&l.height>0;o(t,e)},l.onerror=()=>{o(t,!1)},l.src="data:image/webp;base64,"+s[t]},loadImage(t,o){const s=new Image;s.onload=o,s.src=t},loadZoom(){this.offset(),this.options.zoomAmount!=0&&(this.zoomWidth=this.origX*this.options.zoomAmount,this.zoomHeight=this.origY*this.options.zoomAmount,this.touch&&this.mobilePos()),this.loaded?(this.zoomed=!0,this.options.zoomAmount==0&&(this.options.zoomAmount=this.zoomWidth/this.origX)):this.zoomLoad()},zoomLoad(){(!this.clickZoom||this.touch)&&(this.loading=!0,this.$emit("zoomLoading"));let t=this.options.zoom;

1this.breakpoints&&this.breakpoints.forEach(o=>{window.innerWidth>=o.width&&(o.zoom?t=o.zoom:t=o.regular)}),this.webp_supported&&this.options.zoomWebp&&(t=this.options.zoomWebp,this.breakpoints&&this.breakpoints.forEach(o=>{window.innerWidth>=o.width&&(o.zoomWebp?t=o.zoomWebp:t=o.regularWebp)})),this.loadImage(t,o=>{this.options.zoomAmount==0&&(this.zoomWidth=o.target.width,this.zoomHeight=o.target.height,this.options.zoomAmount=o.target.width/this.origX),this.loaded=!0,this.loading=!1,this.$emit("zoomLoaded"),(!this.clickZoom||this.touch)&&(this.zoomed=!0,this.mobilePos())})},isZoom(t,o){(o=="hover"&&!this.clickZoom&&!this.touch||o=="click"&&(this.clickZoom||this.touch)||typeof t=="object")&&(this.zoomed=!1,t==!0?(this.loadZoom(),this.$emit("onZoom")):this.$emit("offZoom"))},mobilePos(){let t=(this.zoomWidth-this.origX)*this.touchZoomPos[0],o=(this.zoomHeight-this.origY)*this.touchZoomPos[1];(this.touchZoomPos[0]>1||this.touchZoomPos[0]<0||this.touchZoomPos[1]>1||this.touchZoomPos[1]<0)&&(t=0,o=0),this.cx=-t,this.cy=-o,this.x=-t,this.y=-o,this.touchPosition="translate3d(-"+t+"px,-"+o+"px,0)"},offset(){this.origX=parseFloat(this.$refs["vue-hover-zs"].offsetWidth),this.origY=parseFloat(this.$refs["vue-hover-zs"].offsetHeight)},mousePos(t){this.offsetLeft=window.pageXOffset+this.$refs["vue-hover-zs"].getBoundingClientRect().left,this.offsetTop=window.pageYOffset+this.$refs["vue-hover-zs"].getBoundingClientRect().top,!this.touch&&!this.loading&&(this.loaded?(this.x=(t.pageX-this.offsetLeft)*(this.options.zoomAmount-1),this.y=(t.pageY-this.offsetTop)*(this.options.zoomAmount-1)):(this.offset(),this.zoomLoad()))}}},L={class:"vh--outer vh--rel"},Z=["srcset","media"],T=["srcset","media"],M=["srcset"],P=["loading","src","alt","width","height"],C={key:0},H=["srcset","media"],S=["srcset","media"],X=["srcset","media"],Y=["srcset","media"],E=["src"],B=["src"],I=["src"],V=["innerHTML"],j=["innerHTML"],D=["innerHTML"],O={key:1,class:"vh--loading-o vh--abs vh--flex vh--jc vh--ai"},N=c("div",{class:"vh--loading",innerHTML:"◠"},null,-1),F=[N];function R(t,o,s,l,e,a){const p=w("click-outside");return h(),n(u,null,[e.showSlot&&!s.lazyload?y(t.$slots,"default",{key:0}):r("",!0),_((h(),n("div",L,[c("div",{class:m(["vh--holder vh--rel vh--flex vh--jc",{"vh--no-click":!s.rightClick}]),onMouseenter:o[1]||(o[1]=i=>a.isZoom(!0,"hover")),onMouseleave:o[2]||(o[2]=i=>a.isZoom(!1,"hover")),onMousemove:o[3]||(o[3]=(...i)=>a.mousePos&&a.mousePos(...i)),ref:"vue-hover-zs",onClick:o[4]||(o[4]=i=>a.isZoom(!e.zoomed,"click"))},[c("picture",{class:m({"vh--none":e.zoomed})},[(h(!0),n(u,null,d(s.breakpoints,i=>(h(),n(u,{key:i.width},[i.regularWebp?(h(),n("source",{key:0,srcset:i.regularWebp,type:"image/webp",media:"(min-width:"+i.width+"px)"},null,8,Z)):r("",!0),i.regular?(h(),n("source",{key:1,srcset:i.regular,media:"(min-width:"+i.width+"px)"},null,8,T)):r("",!0)],64))),128)),s.regularWebp?(h(),n("source",{key:0,srcset:s.regularWebp,type:"image/webp"},null,8,M)):r("",!0),c("img",{loading:s.lazyload?"lazy":"eager",src:s.regular,class:m(s.imgClass),alt:s.alt,onLoad:o[0]||(o[0]=i=>(t.$emit("regularLoaded"),e.showSlot=!1)),width:s.imgWidth,height:s.imgHeight},null,42,P)],2),e.zoomed?(h(),n("picture",C,[(h(!0),n(u,null,d(s.breakpoints,i=>(h(),n(u,{key:i.width},[i.zoomWebp?(h(),n("source",{key:0,srcset:i.zoomWebp,type:"image/webp",media:"(min-width:"+i.width+"px)"},null,8,H)):i.regularWebp?(h(),n("source",{key:1,srcset:i.regularWebp,type:"image/webp",media:"(min-width:"+i.width+"px)"},null,8,S)):r("",!0),i.zoom?(h(),n("source",{key:2,srcset:i.zoom,media:"(min-width:"+i.width+"px)"},null,8,X)):i.regular?(h(),n("source",{key:3,srcset:i.regular,media:"(min-width:"+i.width+"px)"},null,8,Y)):r("",!0)],64))),128)),e.options.zoomWebp?(h(),n("source",{key:0,src:e.options.zoomWebp,type:"image/webp"},null,8,E)):r("",!0),e.touch?(h(),n("img",{key:2,src:e.options.zoom,class:"vh--image vh--abs",style:g("width:"+e.zoomWidth+"px;transform:"+e.touchPosition)},null,12,I)):(h(),n("img",{key:1,src:e.options.zoom,class:"vh--image vh--abs",style:g({width:e.zoomWidth+"px",transform:"translate(-"+e.x+"px,-"+e.y+"px)"})},null,12,B))])):r("",!0),f(z,{name:"VueHoverfade"},{default:v(()=>[!e.zoomed&&!e.loading&&!s.clickZoom&&!e.touch&&s.showMessage?(h(),n("div",{key:0,class:m(["vh--message vh--abs vh--flex vh--jc vh--ai","vh--message-"+s.messagePos]),innerHTML:s.hoverMessage},null,10,V)):!e.zoomed&&!e.loading&&!e.touch&&s.showMessage?(h(),n("div",{key:1,class:m(["vh--message vh--abs vh--flex vh--jc vh--ai","vh--message-"+s.messagePos]),innerHTML:s.clickMessage},null,10,j)):!e.zoomed&&!e.loading&&e.touch&&s.showMessageTouch?(h(),n("div",{key:2,class:m(["vh--message vh--abs vh--flex vh--jc vh--ai","vh--message-"+s.messagePos]),innerHTML:s.touchMessage},null,10,D)):r("",!0)]),_:1})],34),f(z,{name:"VueHoverfade"},{default:v(()=>

1[e.touch&&e.zoomed&&e.loaded&&!s.tapToClose?(h(),n("div",{key:0,class:m(["vh--close vh--abs vh--flex vh--jc vh--ai","vh--"+s.closePos]),onClick:o[5]||(o[5]=A(i=>(e.zoomed=!1,t.$emit("offZoom")),["stop"])),innerHTML:"×"},null,2)):e.loading?(h(),n("div",O,F)):r("",!0)]),_:1})])),[[p,a.isZoom],[b,!e.showSlot||s.lazyload]])],64)}var Q=W(x,[["render",R]]);export{Q as VueImageZoomer};