https://www.cantref.com/app/brands/default/7350.73e197479f3442b9b257.js

1"use strict";(globalThis.webpackChunkloop_web=globalThis.webpackChunkloop_web||[]).push([[7350],{7350(t,e,i){i.r(e),i.d(e,{createFrom:()=>h});class s{constructor(t){this.el=t,this.zoomActive=!1,this.thumbImg=this.el.querySelector("img"),this.fullImgSrc=t.dataset.fullImgSrc,this.fullImgLoading=!1,this.fullImgLoaded=!1,this.touching=!1,this.thumbImg.complete?this.init():this.thumbImg.onload=()=>{this.init()}}init(){this.baseWidth=this.el.offsetWidth,this.baseHeight=this.el.offsetHeight,this.overlay=document.createElement("div"),this.overlay.classList.add("overlay"),this.el.appendChild(this.overlay),this.loader=null,this.el.addEventListener("mouseenter",t=>{this.loader=setTimeout(()=>{this.loadFullImage(!1)},200)}),this.el.addEventListener("touchstart",t=>{clearTimeout(this.loader),this.loadFullImage(!0)}),this.ro=new ResizeObserver(t=>{for(let e of t){const t=e.contentRect;this.baseWidth=t.width,this.baseHeight=t.height}}),this.ro.observe(this.el)}loadFullImage(t){this.fullImgLoading||(this.fullImgLoading=!0,this.fullImg=document.createElement("img"),this.fullImg.classList.add("full-image"),this.fullImg.alt="full image",this.fullImg.setAttribute("aria-hidden",!0),this.fullImg.onload=()=>{this.setup(t)},this.fullImg.src=this.fullImgSrc)}setup(t){this.imgWidth=this.fullImg.naturalWidth,this.imgHeight=this.fullImg.naturalHeight,window.requestAnimationFrame(()=>{this.el.appendChild(this.fullImg),window.requestAnimationFrame(()=>{this.el.classList.add("enabled"),this.overlay.addEventListener("mouseenter",t=>{t.target==this.overlay&&this.toggleZoom(!0)}),this.overlay.addEventListener("mouseleave",t=>{t.target==this.overlay&&this.toggleZoom(!1)}),this.overlay.addEventListener("mousemove",t=>{t.target!=this.overlay||this.touching||(this.zoomActive||this.toggleZoom(!0),this.update(t.offsetX,t.offsetY))}),t&&(this.update(this.baseWidth/2,this.baseHeight/2),this.toggleZoom(!0)),this.overlay.addEventListener("touchstart",t=>{this.touchStartTime=Date.now(),this.touching=!0}),document.body.addEventListener("touchend",t=>{this.touchEndTime=Date.now(),setTimeout(()=>{this.touching=!1},100),this.touchEndTime-this.touchStartTime<250&&this.toggleZoom(!this.zoomActive)}),this.overlay.addEventListener("touchmove",t=>{if(this.zoomActive){t.preventDefault();let e=this.overlay.getBoundingClientRect(),i=t.touches[0].pageX-window.scrollX-e.left,s=t.touches[0].pageY-window.scrollY-e.top;i<0&&(i=0),s<0&&(s=0),i>this.baseWidth&&(i=this.baseWidth),s>this.baseHeight&&(s=this.baseHeight),this.update(i,s)}})})})}toggleZoom(t){t?(this.el.classList.add("zoom"),this.fullImg.removeAttribute("aria-hidden"),this.zoomActive=!0):(this.el.classList.remove("zoom"),this.fullImg.setAttribute("aria-hidden",!0),this.zoomActive=!1)}update(t,e){let i=(this.imgWidth-this.baseWidth)/this.imgWidth,s=i*(t/this.baseWidth*-100),h=i*(e/this.baseHeight*-100);this.el.style.setProperty("--img-translate-x",`${s}%`),this.el.style.setProperty("--img-translate-y",`${h}%`)}}function h(t){t.forEach(t=>{1===t.nodeType&&new s(t)})}}}]);