JavaScript File

1const imgZoom={zoom:null,cx:0,cy:0,kx:0,ky:0,sx:0,sy:0,k:1,force:!1,busy:!1,ratio:.75,moved:!1,init(area){this.zoom||(this.zoom=document.createElement("img"),this.zoom.setAttribute("draggable","false"),this.zoom.setAttribute("alt","zoom"),this.zoom.style="display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;max-width:unset;max-height:unset;z-index:99999;cursor:zoom-out;transition:all 0.25s ease;opacity:0;visibility:hidden;color:white;background:black;border:1px solid;",window.addEventListener("keydown",e=>{"Escape"===e.code&&document.body.classList.contains("__zoom")&&(this.force=!1,this.close())}

2),document.body.addEventListener("click",e=>{"body"===e.target.localName&&e.target.classList.contains("__zoom")&&(this.force=!1,this.close())}

3),this.zoom.addEventListener("click",()=>{this.force?this.force=!1:this.close()}

4),this.zoom.addEventListener("error",e=>{let width=260,height=100,alt="Image not found or corrupted";this.zoom.setAttribute("alt",alt),this.zoom.style.olor="white",this.zoom.style.backgroundColor="black",setTimeout(()=>this.recalc(260,100),250)}

5),this.zoom.addEventListener("load",e=>{let x,y,width=e.target.naturalWidth,height=e.target.naturalHeight,alt="img-zoom";0!==width&&0!==height||(width=260,height=100,alt="Image not found or corrupted"),this.zoom.setAttribute("alt",alt),"ontouchstart"in window&&"img-zoom"===alt?e.target.style="display:block;position:fixed;top:50%;left:0;transform:translateY(-50%);width:100%;height:auto;max-width:unset;max-height:unset;z-index:99999;transition:all 0.25s ease;opacity:1;visibility:visible;":this.recalc(width,height)}

6),"ontouchstart"in window||(this.zoom.addEventListener("mousemove",e=>this.move(e),{passive:!0}

7),this.zoom.addEventListener("mousedown",e=>this.down(e),{passive:!0}

8),this.zoom.addEventListener("mouseup",e=>this.up(e),{passive:!0}

9)),document.body.appendChild(this.zoom));let type=typeof area,wrapper=document;if("string"===type){if(wrapper=document.querySelector(area),!wrapper)return void console.warn(area+": not found in document")}

10else if("object"===type)wrapper=area instanceof Element?area:document;else if("undefined"!==type)return void console.warn(area+": invalid argument");wrapper.querySelectorAll("img[data-zoom]").forEach(img=>{"!ontouchstart"in window&&(img.addEventListener("mousedown",e=>{this.moved=!1}

11,{passive:!0}

12),img.addEventListener("mousemove",e=>{this.moved=!0}

13,{passive:!0}

14)),img.addEventListener("click",e=>{this.moved||this.show(e)}

15,{passive:!0}

16)}

17)}

18,recalc(width,height){this.sx=(window.innerWidth-width)/2,this.sy=(window.innerHeight-height)/2,this.zoom.style.left=this.sx+"px",this.zoom.style.top=this.sy+"px",this.zoom.style.width=width+"px",this.zoom.style.height=height+"px",this.cx=window.innerWidth/2,this.cy=window.innerHeight/2,this.kx=this.sx<0?width/window.innerWidth*this.ratio:0,this.ky=this.sy<0?height/window.innerHeight*this.ratio:0,this.zoom.style.transform="scale(1,1) translate(0,0)",this.zoom.style.visibility="visible",this.zoom.style.opacity=1}

19,down(e){this.k=2,this.kx=e.target.naturalWidth/window.innerWidth*this.ratio,this.ky=e.target.naturalHeight/window.innerHeight*this.ratio}

20,move(e){this.force=2===this.k,this.view(e.x,e.y)}

21,up(e){this.k=1,this.kx=this.sx<0?e.target.naturalWidth/window.innerWidth*this.ratio:0,this.ky=this.sy<0?e.target.naturalHeight/window.innerHeight*this.ratio:0}

22,show(e){this.busy||(document.body.classList.add("__zoom"),this.busy=!0,this.zoom.src=""===e.target.dataset.zoom?e.target.src:e.target.dataset.zoom)}

23,view(ex,ey){let x=(this.cx-ex)*this.kx*this.k,y=(this.cy-ey)*this.ky*this.k;this.zoom.style.transform=`translate(${x}

24px, ${y}

25px) scale(${this.k}

26, ${this.k}

27)`}

28,close(){this.busy=!1,this.zoom.style.transform="scale(0,0)",this.zoom.style.opacity=0,setTimeout(()=>{this.zoom.style.visibility="hidden",this.zoom.removeAttribute("src"),document.body.classList.remove("__zoom")}

29,250)}

30}

31;