(()=>{class t{constructor(){this.a11y=window.jvbA11y,this.index=0,this.images=[],this.zoom={scale:1,min:1,max:4,threshold:50,x:0,y:0,startX:0,startY:0,ease:.2,panning:!1},this.swipe=this.resetSwipe(),this.activePointers=new Map,this.lastTap=0,this.initElements(),this.initModal(),this.initListeners(),this.initSubscribers()}initElements(){this.elements={imageSelector:"img[data-gallery]",gallery:{modal:"dialog.gallery",wrap:".wrap",nextButton:".next",prevButton:".prev",image:".image",leftImage:".image-left",rightImage:".image-right",counter:".counter",caption:"details .item-info"}},this.ui=window.uiFromSelectors(this.elements)}initModal(){this.modal=new window.jvbModal(this.ui.gallery.modal,{openMessage:"Opened Gallery",closeMessage:"Closed Gallery"}),this.modal.subscribe(t=>{"modal-close"===t&&this.toggleGallery(!1)})}buildGalleryItems(t=null){let e=t?`[data-gallery="${t}"]`:this.elements.imageSelector;this.items=Array.from(document.querySelectorAll(e)).map((t,e)=>{let i="";return i=Object.hasOwn(t.dataset,"caption")?t.parentElement.querySelector(t.dataset.caption).cloneNode(!0):t.nextElementSibling&&"FIGCAPTION"===t.nextElementSibling.tagName?t.nextElementSibling.textContent:"",{id:t.dataset.id||e,srcset:t.srcset||t.src,sizes:t.sizes||"100vw",src:t.currentSrc||t.src,full:t.dataset.full||t.src,alt:t.alt||"",element:t,caption:i}})}initListeners(){this.clickHandler=this.handleClick.bind(this),this.pointerDownHandler=this.onPointerDown.bind(this),this.pointerMoveHandler=this.onPointerMove.bind(this),this.pointerUpHandler=this.onPointerUp.bind(this),this.wheelHandler=this.onWheel.bind(this),this.keyHandler=this.handleKeys.bind(this),document.addEventListener("click",this.clickHandler)}handleClick(t){let e=window.targetCheck(t,this.elements.imageSelector);e&&!this.modal.isOpen?(t.preventDefault(),this.buildGalleryItems(e.dataset.gallery||null),this.index=this.items.findIndex(t=>t.element===e),this.toggleGallery(!0)):this.modal.isOpen&&(window.targetCheck(t,this.elements.gallery.nextButton)?this.nextElement():window.targetCheck(t,this.elements.gallery.prevButton)&&this.prevElement())}handleKeys(t){if(this.modal.isOpen){switch(t.key){case"ArrowLeft":t.preventDefault(),this.prevElement();break;case"ArrowRight":t.preventDefault(),this.nextElement()}t.ctrlKey&&("+"!==t.key&&"="!==t.key||(t.preventDefault(),this.handleZoom(.2)),"-"===t.key&&(t.preventDefault(),this.handleZoom(-.2)),"0"===t.key&&(t.preventDefault(),this.resetZoom()))}}onPointerDown(t){t.preventDefault(),this.swipe.startX=t.clientX,this.swipe.startY=t.clientY,this.ui.gallery.image.setPointerCapture(t.pointerId),this.activePointers.set(t.pointerId,{x:t.clientX,y:t.clientY});const e=performance.now();if(e-this.lastTap<300&&1===this.activePointers.size)return this.zoom.scale>1?this.resetZoom():this.handleZoom(1,t.clientX,t.clientY),void(this.lastTap=0);if(this.lastTap=e,2===this.activePointers.size){const t=[...this.activePointers.values()];return this.pinchStartDist=Math.hypot(t[0].x-t[1].x,t[0].y-t[1].y),void(this.pinchStartScale=this.zoom.scale)}this.zoom.scale>1&&(this.zoom.panning=!0,this.zoom.startX=t.clientX-this.zoom.x,this.zoom.startY=t.clientY-this.zoom.y,this.ui.gallery.image.style.cursor="grabbing")}onPointerMove(t){if(this.activePointers.has(t.pointerId)){if(this.activePointers.set(t.pointerId,{x:t.clientX,y:t.clientY}),2===this.activePointers.size){const t=[...this.activePointers.values()],e=Math.hypot(t[0].x-t[1].x,t[0].y-t[1].y),i=this.pinchStartScale*(e/this.pinchStartDist)-this.zoom.scale,s=(t[0].x+t[1].x)/2,n=(t[0].y+t[1].y)/2;return void this.handleZoom(i,s,n)}this.zoom.panning&&(this.zoom.x=t.clientX-this.zoom.startX,this.zoom.y=t.clientY-this.zoom.startY,this.applyTransform())}}onPointerUp(t){const e=this.activePointers.get(t.pointerId);if(this.activePointers.delete(t.pointerId),this.activePointers.size<2&&(this.pinchStartDist=0),this.zoom.scale<=1&&!this.zoom.panning&&0===this.activePointers.size){const i=e?.x??t.clientX,s=e?.y??t.clientY,n=i-this.swipe.startX,o=s-this.swipe.startY;Math.abs(n)>this.zoom.threshold&&Math.abs(n)>Math.abs(o)&&(n>0?this.prevElement():this.nextElement())}0===this.activePointers.size&&(this.zoom.panning=!1,this.ui.gallery.image.style.cursor=this.zoom.scale>1?"grab":"default")}onWheel(t){if(!t.ctrlKey)return;t.preventDefault();const e=t.deltaY<0?.2:-.2;this.handleZoom(e,t.clientX,t.clientY)}handleZoom(t,e=null,i=null){const s=this.zoom.scale;let n=s+t;if(n=Math.min(this.zoom.max,Math.max(this.zoom.min,n)),n===s)return;const o=n/s;let l=this.ui.gallery.image.getBoundingClientRect();null!==e&&null!==i||(e=l.left+l.width/2,i=l.top+l.height/2);const a=e-l.left,r=i-l.top;this.zoom.x=(this.zoom.x-a)*o+a,this.zoom.y=(this.zoom.y-r)*o+r,this.zoom.scale=n,this.applyTransform(),this.notify("zoom",{scale:this.zoom.scale})}applyTransform(){this.clampPan();const t=this.ui.gallery.image;t.style.transform=`translate(${this.zoom.x}px, ${this.zoom.y}px) scale(${this.zoom.scale})`,t.style.cursor=this.zoom.scale>1?"grab":"default"}clampPan(){const t=this.ui.gallery.image,e=Math.max(0,(t.offsetWidth*this.zoom.scale-window.innerWidth)/2),i=Math.max(0,(t.offsetHeight*this.zoom.scale-window.innerHeight)/2);this.zoom.x=Math.max(-e,Math.min(e,this.zoom.x)),this.zoom.y=Math.max(-i,Math.min(i,this.zoom.y))}resetZoom(){this.zoom.scale=1,this.zoom.x=0,this.zoom.y=0,this.zoom.startX=0,this.zoom.startY=0,this.zoom.panning=!1,this.applyTransform()}resetSwipe(){return{startX:null,startY:null,endX:null,endY:null}}toggleGallery(t){t?(this.ui.gallery.image.draggable=!1,this.ui.gallery.image.style.userSelect="none",this.ui.gallery.image.addEventListener("pointerdown",this.pointerDownHandler),this.ui.gallery.image.addEventListener("pointermove",this.pointerMoveHandler),this.ui.gallery.image.addEventListener("pointerup",this.pointerUpHandler),this.ui.gallery.image.addEventListener("pointercancel",this.pointerUpHandler),window.addEventListener("wheel",this.wheelHandler,{passive:!1}),window.addEventListener("keydown",this.keyHandler),this.moveIntoView()):(this.ui.gallery.image.removeEventListener("pointerdown",this.pointerDownHandler),this.ui.gallery.image.removeEventListener("pointermove",this.pointerMoveHandler),this.ui.gallery.image.removeEventListener("pointerup",this.pointerUpHandler),this.ui.gallery.image.removeEventListener("pointercancel",this.pointerUpHandler),window.removeEventListener("wheel",this.wheelHandler),window.removeEventListener("keydown",this.keyHandler),this.resetZoom(),this.resetSwipe(),this.activePointers.clear(),this.lastTap=0),t&&!this.modal.isOpen&&this.modal.handleOpen()}moveIntoView(t=0){let e=this.index+t;e<0?e=this.items.length-1:e>=this.items.length?e=0:e===this.items.length-3&&this.notify("load-more"),this.index=e,this.updateDisplay(),this.preloadAdjacent(),this.a11y.announce(`Image ${this.index+1} of ${this.items.length}`)}nextElement(){this.resetZoom(),this.moveIntoView(1)}prevElement(){this.resetZoom(),this.moveIntoView(-1)}updateDisplay(){const t=this.items[this.index];if(!t)return;const e=this.ui.gallery.image;if(t.srcset&&(e.srcset=t.srcset,e.sizes=t.sizes),e.src=t.src,e.alt=t.alt,window.removeChildren(this.ui.gallery.caption),"object"==typeof t.caption?this.ui.gallery.caption.append(t.caption):this.ui.gallery.caption.textContent=t.caption,t.full&&t.full!==t.src){const i=new Image;i.onload=()=>{this.items[this.index]===t&&(e.src=t.full,e.removeAttribute("srcset"),e.removeAttribute("sizes"))},i.src=t.full}this.ui.gallery.counter.textContent=`${this.index+1} / ${this.items.length}`,this.ui.gallery.prevButton.disabled=this.items.length<=1,this.ui.gallery.nextButton.disabled=this.items.length<=1}preloadAdjacent(){[-1,1].forEach(t=>{const e=this.index+t;if(e>0&&e<this.items.length){const i=this.items[e];(t<0?this.ui.gallery.leftImage:this.ui.gallery.rightImage).src=i.full}})}initSubscribers(){this.subscribers=new Set}subscribe(t){return this.subscribers.add(t),()=>this.subscribers.delete(t)}notify(t,e={}){this.subscribers.forEach(i=>{try{i(t,e)}catch(t){console.error("Subscriber error:",t)}})}destroy(){this.subscribers.clear(),this.toggleGallery(!1),document.removeEventListener("click",this.clickHandler)}}document.addEventListener("DOMContentLoaded",function(){document.querySelector("dialog.gallery")&&(window.jvbGallery=new t)})})();
|
