react-image-gallery
Version:
React carousel image gallery component with thumbnail and mobile support
1 lines • 30.8 kB
JavaScript
import{Fragment as e,jsx as t,jsxs as n}from"react/jsx-runtime";import{default as r,forwardRef as l,memo as i,useCallback as a,useEffect as s,useImperativeHandle as o,useMemo as u,useRef as c,useState as d}from"react";var m={};function h(e){var t,n,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e)){var l=e.length;for(t=0;t<l;t++)e[t]&&(n=h(e[t]))&&(r&&(r+=" "),r+=n)}else for(n in e)e[n]&&(r&&(r+=" "),r+=n);return r}m.d=(e,t)=>{for(var n in t)m.o(t,n)&&!m.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},m.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);const g=function(){for(var e,t,n=0,r="",l=arguments.length;n<l;n++)(e=arguments[n])&&(t=h(e))&&(r&&(r+=" "),r+=t);return r},f=i((function({index:e,isActive:n=!1,bulletClass:r="",onClick:l}){const i=g("image-gallery-bullet",r,{active:n});return t("button",{"aria-label":`Go to Slide ${e+1}`,"aria-pressed":n?"true":"false",className:i,type:"button",onClick:l},`bullet-${e}`)})),b=i((function({bullets:e=[],slideVertically:n=!1,currentIndex:r=0,maxBullets:l}){const i=c(null),[a,o]=d(0),m=void 0!==l&&l<3?3:l,h=g("image-gallery-bullets",{"image-gallery-bullets-vertical":n});s((()=>{const t=()=>{if(i.current&&m&&e.length>0){const e=i.current.querySelector(".image-gallery-bullet");if(e){const t=window.getComputedStyle(e),r=e.offsetWidth,l=parseFloat(t.marginLeft)||0,i=parseFloat(t.marginRight)||0,a=e.offsetHeight,s=parseFloat(t.marginTop)||0,u=parseFloat(t.marginBottom)||0;o(n?a+s+u:r+l+i)}}};t();const r=new ResizeObserver((()=>{t()}));return i.current&&r.observe(i.current),()=>{r.disconnect()}}),[e.length,m,n]);const f=u((()=>{if(!m||m>=e.length||0===a)return{};const t=e.length,l=Math.floor(m/2);let i;return i=r<=l?0:r>=t-l-1?-(t-m)*a:-(r-l)*a,{transform:n?`translateY(${i}px)`:`translateX(${i}px)`,transition:"transform 0.3s ease-out"}}),[e.length,r,m,a,n]),b=u((()=>{if(!m||m>=e.length||0===a)return{};const t=m*a;return n?{height:`${t}px`,overflow:"hidden"}:{width:`${t}px`,overflow:"hidden"}}),[m,e.length,a,n]);return e&&0!==e.length?t("div",{className:h,children:t("div",{"aria-label":"Bullet Navigation",className:"image-gallery-bullets-container",role:"navigation",style:b,children:t("div",{ref:i,className:"image-gallery-bullets-inner",style:f,children:e})})}):null})),p=550,y=3e3,v=.4,w=30,S="cubic-bezier(0.4, 0, 0.2, 1)",T={left:t("polyline",{points:"15 18 9 12 15 6"}),right:t("polyline",{points:"9 18 15 12 9 6"}),top:t("polyline",{points:"6 15 12 9 18 15"}),bottom:t("polyline",{points:"6 9 12 15 18 9"}),maximize:t("path",{d:"M8 3H3v5m18 0V3h-5m0 18h5v-5M3 16v5h5"}),minimize:t("path",{d:"M8 3v5H3m18 0h-5V3m0 18v-5h5M3 16h5v5"}),play:t("polygon",{points:"5 3 19 12 5 21 5 3"}),pause:n(r.Fragment,{children:[t("rect",{height:"16",width:"4",x:"6",y:"4"}),t("rect",{height:"16",width:"4",x:"14",y:"4"})]})},x={strokeWidth:1,viewBox:"0 0 24 24"},C=e=>{const{strokeWidth:n,viewBox:r,icon:l}={...x,...e};return t("svg",{className:"image-gallery-svg",fill:"none",stroke:"currentColor",strokeLinecap:"square",strokeLinejoin:"miter",strokeWidth:n,viewBox:r,xmlns:"http://www.w3.org/2000/svg",children:T[l]})},I=r.memo((({disabled:e,onClick:n})=>t("button",{"aria-label":"Next Slide",className:"image-gallery-icon image-gallery-bottom-nav",disabled:e,type:"button",onClick:n,children:t(C,{icon:"bottom",viewBox:"6 0 12 24"})})));I.displayName="BottomNav";const R=I,F=r.memo((({isFullscreen:e,onClick:n})=>t("button",{"aria-label":"Open Fullscreen",className:"image-gallery-icon image-gallery-fullscreen-button",type:"button",onClick:n,children:t(C,{icon:e?"minimize":"maximize",strokeWidth:2})})));F.displayName="Fullscreen";const N=F,L=r.memo((({disabled:e,onClick:n})=>t("button",{"aria-label":"Previous Slide",className:"image-gallery-icon image-gallery-left-nav",disabled:e,type:"button",onClick:n,children:t(C,{icon:"left",viewBox:"6 0 12 24"})})));L.displayName="LeftNav";const k=L,M=r.memo((({isPlaying:e,onClick:n})=>t("button",{"aria-label":"Play or Pause Slideshow",className:"image-gallery-icon image-gallery-play-button",type:"button",onClick:n,children:t(C,{icon:e?"pause":"play",strokeWidth:2})})));M.displayName="PlayPause";const $=M,E=r.memo((({disabled:e,onClick:n})=>t("button",{"aria-label":"Next Slide",className:"image-gallery-icon image-gallery-right-nav",disabled:e,type:"button",onClick:n,children:t(C,{icon:"right",viewBox:"6 0 12 24"})})));E.displayName="RightNav";const W=E,P=r.memo((({disabled:e,onClick:n})=>t("button",{"aria-label":"Previous Slide",className:"image-gallery-icon image-gallery-top-nav",disabled:e,type:"button",onClick:n,children:t(C,{icon:"top",viewBox:"6 0 12 24"})})));P.displayName="TopNav";const D=P;function B(e,t,n={}){const{leading:r=!0,trailing:l=!0}=n;let i=0,a=null,s=null,o=null;function u(){null!==s&&(e.apply(o,s),i=Date.now(),s=null,o=null)}return function(...e){const n=Date.now(),c=n-i;s=e,o=this,c>=t?(a&&(clearTimeout(a),a=null),r?u():i=n):l&&!a&&(a=setTimeout((()=>{a=null,s&&u()}),t-c))}}function z(e,t){let n;return function(...r){clearTimeout(n),n=setTimeout((()=>{e.apply(this,r)}),t)}}const H=i((function({currentIndex:e,totalItems:r,indexSeparator:l=" / "}){return n("div",{className:"image-gallery-index",children:[t("span",{className:"image-gallery-index-current",children:e+1}),t("span",{className:"image-gallery-index-separator",children:l}),t("span",{className:"image-gallery-index-total",children:r})]})})),O={description:"",fullscreen:"",isFullscreen:!1,originalAlt:"",originalHeight:"",originalWidth:"",originalTitle:"",sizes:"",srcSet:"",loading:"eager"},A=r.memo((e=>{const{description:l,fullscreen:i,handleImageLoaded:a,isFullscreen:s,onImageError:o,original:u,originalAlt:c,originalHeight:d,originalWidth:m,originalTitle:h,sizes:g,srcSet:f,loading:b}={...O,...e},p=s&&i||u;return n(r.Fragment,{children:[t("img",{alt:c,className:"image-gallery-image",height:d,loading:b,sizes:g,src:p,srcSet:f,title:h,width:m,onError:o,onLoad:e=>a(e,u)}),l&&t("span",{className:"image-gallery-description",children:l})]})}));A.displayName="Item";const q=A,U=i((function({index:e,alignment:n="",originalClass:r="",style:l={},onClick:i,onKeyUp:a,onTouchMove:s,onTouchEnd:o,onTouchStart:u,onMouseOver:c,onMouseLeave:d,children:m=null}){return t("div",{"aria-label":`Go to Slide ${e+1}`,className:`image-gallery-slide ${n} ${r}`,role:"button",style:l,tabIndex:-1,onClick:i,onFocus:c,onKeyUp:a,onMouseLeave:d,onMouseOver:c,onTouchEnd:o,onTouchMove:s,onTouchStart:u,children:m},`slide-${e}`)}));function X(e,t){return Math.abs(e)>=Math.abs(t)?e>0?"Right":"Left":t>0?"Down":"Up"}function Y(e){if(e.length<2)return 0;const t=e[0],n=e[e.length-1],r=n.time-t.time;if(0===r)return 0;const l=n.x-t.x,i=n.y-t.y;return Math.sqrt(l*l+i*i)/r}const K={className:"",delta:0,onSwiping:()=>{},onSwiped:()=>{}},V=e=>{const{children:n,className:r,delta:l,onSwiping:i,onSwiped:s}={...K,...e},{ref:o}=function({delta:e=0,onSwiping:t,onSwiped:n}){const r=c({swiping:!1,startX:0,startY:0,samples:[]}),l=c({delta:e,onSwiping:t,onSwiped:n});l.current={delta:e,onSwiping:t,onSwiped:n};const i=c(null);if(!i.current){const e=e=>{const t=e.touches[0],n=r.current;n.startX=t.clientX,n.startY=t.clientY,n.swiping=!1,n.samples=[{x:t.clientX,y:t.clientY,time:Date.now()}]},t=e=>{const t=e.touches[0],n=r.current,{delta:i,onSwiping:a}=l.current,s=t.clientX-n.startX,o=t.clientY-n.startY,u=Math.abs(s),c=Math.abs(o),d=Date.now();n.samples.push({x:t.clientX,y:t.clientY,time:d});const m=d-100;for(;n.samples.length>1&&n.samples[0].time<m;)n.samples.shift();if(!n.swiping){if(Math.max(u,c)<i)return;n.swiping=!0}a&&a({event:e,absX:u,absY:c,dir:X(s,o),velocity:Y(n.samples)})},n=e=>{const t=r.current,{onSwiped:n}=l.current;if(t.swiping){if(t.swiping=!1,n){const r=(e.changedTouches[0]?.clientX??0)-t.startX,l=(e.changedTouches[0]?.clientY??0)-t.startY;n({event:e,absX:Math.abs(r),absY:Math.abs(l),dir:X(r,l),velocity:Y(t.samples)})}t.samples=[]}};i.current={touchstart:e,touchmove:t,touchend:n}}const s=c(null);return{ref:a((e=>{const t=i.current;s.current&&(s.current.removeEventListener("touchstart",t.touchstart),s.current.removeEventListener("touchmove",t.touchmove),s.current.removeEventListener("touchend",t.touchend)),s.current=e,e&&(e.addEventListener("touchstart",t.touchstart,{passive:!0}),e.addEventListener("touchmove",t.touchmove,{passive:!1}),e.addEventListener("touchend",t.touchend,{passive:!0}))}),[])}}({delta:l,onSwiping:i,onSwiped:s});return t("div",{ref:o,className:r,children:n})},j=i((function({index:e,isActive:n=!1,thumbnailClass:r="",onMouseLeave:l,onMouseOver:i,onFocus:a,onKeyUp:s,onClick:o,children:u=null}){const c=g("image-gallery-thumbnail",r,{active:n});return t("button",{"aria-label":`Go to Slide ${e+1}`,"aria-pressed":n?"true":"false",className:c,tabIndex:0,type:"button",onClick:o??void 0,onFocus:a??void 0,onKeyUp:s??void 0,onMouseLeave:l??void 0,onMouseOver:i??void 0,children:u},`thumbnail-${e}`)})),G=i((function({thumbnails:e=[],thumbnailPosition:n="bottom",thumbnailStyle:r={},thumbnailBarHeight:l={},isRTL:i=!1,disableThumbnailSwipe:a=!1,onSwiping:s,onSwiped:o,thumbnailsWrapperRef:u,thumbnailsRef:c}){const d="left"===n||"right"===n,m=g("image-gallery-thumbnails-wrapper",(e=>{const t={left:"image-gallery-thumbnails-left",right:"image-gallery-thumbnails-right",bottom:"image-gallery-thumbnails-bottom",top:"image-gallery-thumbnails-top"};return t[e]?` ${t[e]}`:""})(n),{"thumbnails-wrapper-rtl":!d&&i},{"thumbnails-swipe-horizontal":!d&&!a},{"thumbnails-swipe-vertical":d&&!a});return e&&0!==e.length?t(V,{className:m,delta:0,onSwiped:a?void 0:o??void 0,onSwiping:a?void 0:s??void 0,children:t("div",{ref:u,className:"image-gallery-thumbnails",style:l,children:t("nav",{ref:c,"aria-label":"Thumbnail Navigation",className:"image-gallery-thumbnails-container",style:r,children:e})})}):null}));const J=["fullscreenchange","MSFullscreenChange","mozfullscreenchange","webkitfullscreenchange"];function Q(e){const t=parseInt(String(e.keyCode||e.which||0),10);return 13===t||32===t}function Z(e){return{left:" image-gallery-thumbnails-left",right:" image-gallery-thumbnails-right",bottom:" image-gallery-thumbnails-bottom",top:" image-gallery-thumbnails-top"}[e]||""}const _=l((function(r,l){const{additionalClass:i="",autoPlay:m=!1,disableKeyDown:h=!1,disableSwipe:T=!1,disableThumbnailScroll:x=!1,disableThumbnailSwipe:C=!1,flickThreshold:I=v,indexSeparator:F=" / ",infinite:L=!0,isRTL:M=!1,items:E,lazyLoad:P=!1,onBeforeSlide:O,onBulletClick:A,onClick:X,onErrorImageURL:Y="",onImageError:K,onImageLoad:_,onMouseLeave:ee,onMouseOver:te,onPause:ne,onPlay:re,onScreenChange:le,onSlide:ie,onThumbnailClick:ae,onThumbnailError:se,onTouchEnd:oe,onTouchMove:ue,onTouchStart:ce,renderBottomNav:de=(e,n)=>t(R,{disabled:n,onClick:e}),renderCustomControls:me,renderFullscreenButton:he=(e,n)=>t(N,{isFullscreen:n,onClick:e}),renderItem:ge,renderLeftNav:fe=(e,n)=>t(k,{disabled:n,onClick:e}),renderPlayPauseButton:be=(e,n)=>t($,{isPlaying:n,onClick:e}),renderRightNav:pe=(e,n)=>t(W,{disabled:n,onClick:e}),renderThumbInner:ye,renderTopNav:ve=(e,n)=>t(D,{disabled:n,onClick:e}),showBullets:we=!1,maxBullets:Se,showFullscreenButton:Te=!0,showIndex:xe=!1,showNav:Ce=!0,showPlayButton:Ie=!0,showThumbnails:Re=!0,slideDuration:Fe=p,slideInterval:Ne=y,slideOnThumbnailOver:Le=!1,slideVertically:ke=!1,startIndex:Me=0,stopPropagation:$e=!1,swipeThreshold:Ee=w,thumbnailPosition:We="bottom",useBrowserFullscreen:Pe=!0,useTranslate3D:De=!0,useWindowKeyDown:Be=!0}=r,ze=c(null),He=c(null),Oe=c(null),Ae=c({}),qe=c([]),Ue=c(null),Xe=c(null),[Ye,Ke]=d(0),[Ve,je]=d(0),[Ge,Je]=d(0),Qe=c(!1),Ze=c(!1),_e=c(null),et=c(0),tt=c(null),nt=E.length,rt=nt>=2,{currentIndex:lt,displayIndex:it,isTransitioning:at,currentSlideOffset:st,canSlideLeft:ot,canSlideRight:ut,slideToIndex:ct,slideToIndexCore:dt,slideToIndexWithStyleReset:mt,slideLeft:ht,slideRight:gt,getContainerStyle:ft,getExtendedSlides:bt,getAlignmentClass:pt,setCurrentSlideOffset:yt,setSlideStyle:vt,setIsTransitioning:wt,totalDisplaySlides:St}=function({items:e,startIndex:t=0,infinite:n=!0,isRTL:r=!1,slideDuration:l=p,onSlide:i,onBeforeSlide:o}){const[u,m]=d(t),[h,g]=d(t),[f,b]=d(!1),[y,v]=d(0),[w,T]=d(n&&e.length>1?t+1:t),[x,C]=d({transition:`transform ${l}ms ${S}`}),I=c(null),R=c(null),F=c(!1),N=e.length,L=N>=2,k=n&&N>1?N+2:N;s((()=>()=>{I.current&&window.clearTimeout(I.current),R.current&&window.clearTimeout(R.current)}),[]),s((()=>{m(t),T(n&&e.length>1?t+1:t),C({transition:"none"})}),[e,t,n]);const M=a((()=>u>0),[u]),$=a((()=>u<N-1),[u,N]),E=a((()=>n||(r?$():M())),[n,r,$,M]),W=a((()=>n||(r?M():$())),[n,r,$,M]),P=a((()=>{I.current=window.setTimeout((()=>{f&&(b(!1),i&&i(u))}),l+50)}),[f,u,l,i]),D=a((e=>n&&N>1?e+1:e),[n,N]),z=a(((e,t)=>{F.current=!0,C({transition:"none"}),T(t),R.current=window.setTimeout((()=>{C({transition:`transform ${l}ms ${S}`}),F.current=!1}),50)}),[l]),H=a(((e,t,r=!1,a)=>{if((f||F.current)&&!r)return;const s=a??l,c=N-1;let d,h=e,p=!1,y=null;e<0?(h=c,p=!0,y="start"):e>c&&(h=0,p=!0,y="end"),d=n&&N>1?p&&"start"===y?0:p&&"end"===y?k-1:h+1:h,o&&h!==u&&o(h),g(u),m(h),T(d),b(h!==u||p),v(0),C({transition:`transform ${s}ms ${S}`}),n&&N>1&&p&&(I.current=window.setTimeout((()=>{b(!1),i&&i(h);const e=D(h);z(h,e)}),s+20))}),[u,N,k,l,o,i,f,n,D,z]),O=c(B(((e,t)=>{H(e,t,!1)}),l,{trailing:!1}));s((()=>{O.current=B(((e,t)=>{H(e,t,!1)}),l,{trailing:!1})}),[l,H]);const A=a(((e,t)=>{O.current(e,t)}),[]),q=a(((e,t)=>{v((t=>t+(u>e?.001:-.001))),C({transition:"none"}),window.setTimeout((()=>{H(e,t)}),25)}),[u,H]),U=a((e=>{const t=u+("left"==(r?"right":"left")?-1:1);f||F.current||(2===N?q(t,e):A(t,e))}),[r,u,f,N,q,A]),X=a((e=>{const t=u+("left"==(r?"left":"right")?-1:1);f||F.current||(2===N?q(t,e):A(t,e))}),[r,u,f,N,q,A]),Y=a((({useTranslate3D:e=!0,slideVertically:t=!1}={})=>{const n=-(100*w-y*(r?-1:1)),l=t?e?`translate3d(0, ${n}%, 0)`:`translate(0, ${n}%)`:e?`translate3d(${n}%, 0, 0)`:`translate(${n}%, 0)`;return{transform:l,WebkitTransform:l,MozTransform:l,msTransform:l,OTransform:l,...x}}),[w,y,x,r]),K=a((()=>{if(!n||N<=1)return{extendedItems:e,getSlideKey:e=>`slide-${e}`,getRealIndex:e=>e};const t=[e[N-1],...e,e[0]];return{extendedItems:t,getSlideKey:e=>0===e?"slide-clone-last":e===t.length-1?"slide-clone-first":"slide-"+(e-1),getRealIndex:e=>0===e?N-1:e===t.length-1?0:e-1}}),[e,N,n]),V=a((e=>{const{getRealIndex:t}=K(),n=t(e);return n===u?"image-gallery-center":n===(u-1+N)%N?"image-gallery-left":n===(u+1)%N?"image-gallery-right":""}),[u,N,K]);return s((()=>{f&&!F.current&&P()}),[f,P]),{currentIndex:u,previousIndex:h,displayIndex:w,isTransitioning:f,currentSlideOffset:y,slideStyle:x,canSlide:L,canSlideLeft:E,canSlideRight:W,canSlidePrevious:M,canSlideNext:$,slideToIndex:A,slideToIndexCore:H,slideToIndexWithStyleReset:q,slideLeft:U,slideRight:X,getContainerStyle:Y,getExtendedSlides:K,getAlignmentClass:V,setCurrentSlideOffset:v,setSlideStyle:C,setIsTransitioning:b,totalDisplaySlides:k}}({items:E,startIndex:Me,infinite:L,isRTL:M,slideDuration:Fe,onSlide:ie,onBeforeSlide:O}),{thumbsTranslate:Tt,setThumbsTranslate:xt,thumbsSwipedTranslate:Ct,setThumbsSwipedTranslate:It,setThumbsStyle:Rt,thumbnailsWrapperWidth:Ft,thumbnailsWrapperHeight:Nt,isSwipingThumbnail:Lt,setIsSwipingThumbnail:kt,thumbnailsWrapperRef:Mt,thumbnailsRef:$t,isThumbnailVertical:Et,getThumbnailStyle:Wt,getThumbnailBarHeight:Pt,initResizeObserver:Dt,removeResizeObserver:Bt}=function({currentIndex:e,items:t,thumbnailPosition:n="bottom",disableThumbnailScroll:r=!1,slideDuration:l=p,isRTL:i=!1,useTranslate3D:o=!0}){const[u,m]=d(0),[h,g]=d(0),[f,b]=d({transition:`all ${l}ms ease-out`}),[y,v]=d(0),[w,S]=d(0),[T,x]=d(!1),C=c(null),I=c(null),R=c(null),F=c(e),N=a((()=>"left"===n||"right"===n),[n]),L=a((e=>{if(r)return 0;const n=I.current;if(!n)return 0;let l;if(N()){if(n.scrollHeight<=w)return 0;l=n.scrollHeight-w}else{if(n.scrollWidth<=y||y<=0)return 0;l=n.scrollWidth-y}return e*(l/(t.length-1))}),[r,t.length,y,w,N]),k=a((()=>{if(T)return;const t=-L(e);b({transition:`all ${l}ms ease-out`}),0===e?(m(0),g(0)):(m(t),g(t))}),[e,L,T,l]);s((()=>{F.current!==e&&(F.current=e,k())}),[e,k]);const M=c(n);s((()=>{if(M.current!==n){M.current=n,b({transition:"none"}),m(0),g(0);const r=()=>{if(!C.current||!I.current)return;const r=C.current.getBoundingClientRect(),i=r.width,a=r.height;v(i),S(a);const s="left"===n||"right"===n,o=I.current;let u;if(s){if(o.scrollHeight<=a)return void b({transition:`all ${l}ms ease-out`});u=o.scrollHeight-a}else{if(o.scrollWidth<=i)return void b({transition:`all ${l}ms ease-out`});u=o.scrollWidth-i}const c=u/(t.length-1),d=-e*c;m(d),g(d),requestAnimationFrame((()=>{b({transition:`all ${l}ms ease-out`})}))};requestAnimationFrame((()=>{requestAnimationFrame((()=>{setTimeout(r,100)}))}))}}),[n,e,t.length,l]);const $=a((()=>{const e=i?-1*u:u;let t;return t=N()?o?`translate3d(0, ${u}px, 0)`:`translate(0, ${u}px)`:o?`translate3d(${e}px, 0, 0)`:`translate(${e}px, 0)`,{WebkitTransform:t,MozTransform:t,msTransform:t,OTransform:t,transform:t,...f}}),[u,f,i,o,N]),E=a((e=>N()?{height:e}:{}),[N]),W=a((e=>{e?.current&&(R.current=new ResizeObserver(z((e=>{e&&e.forEach((e=>{v(e.contentRect.width),S(e.contentRect.height)}))}),50)),R.current.observe(e.current))}),[]),P=a((()=>{R.current&&C.current&&(R.current.unobserve(C.current),R.current=null)}),[]),D=c({width:0,height:0});s((()=>{if(0===y&&0===w)return;if(D.current.width===y&&D.current.height===w)return;if(D.current={width:y,height:w},T)return;const n=I.current;if(!n)return;let r;if(N()){if(n.scrollHeight<=w)return m(0),void g(0);r=n.scrollHeight-w}else{if(n.scrollWidth<=y)return m(0),void g(0);r=n.scrollWidth-y}const l=r/(t.length-1),i=-e*l;m(i),g(i)}),[y,w,e,t.length,T,N]),s((()=>()=>{P()}),[P]);const B=a((()=>{x(!0),g(u),b({transition:`all ${l}ms ease-out`})}),[u,l]),H=a((()=>{x(!1)}),[]);return{thumbsTranslate:u,setThumbsTranslate:m,thumbsSwipedTranslate:h,setThumbsSwipedTranslate:g,thumbsStyle:f,setThumbsStyle:b,thumbnailsWrapperWidth:y,thumbnailsWrapperHeight:w,isSwipingThumbnail:T,setIsSwipingThumbnail:x,thumbnailsWrapperRef:C,thumbnailsRef:I,isThumbnailVertical:N,getThumbsTranslate:L,getThumbnailStyle:$,getThumbnailBarHeight:E,slideThumbnailBar:k,initResizeObserver:W,removeResizeObserver:P,handleThumbnailSwipeEnd:B,resetSwipingThumbnail:H}}({currentIndex:lt,items:E,thumbnailPosition:We,disableThumbnailScroll:x,slideDuration:Fe,isRTL:M,useTranslate3D:De}),{isFullscreen:zt,modalFullscreen:Ht,fullScreen:Ot,exitFullScreen:At,toggleFullScreen:qt,handleScreenChange:Ut}=function({useBrowserFullscreen:e=!0,onScreenChange:t,galleryRef:n}){const[r,l]=d(!1),[i,s]=d(!1),o=a((()=>{const r=document,i=r.fullscreenElement||r.msFullscreenElement||r.mozFullScreenElement||r.webkitFullscreenElement,a=n?.current===i;t&&t(a),e&&l(a)}),[n,e,t]),u=a((e=>{s(e),t&&t(e)}),[t]),c=a((()=>{const t=n?.current;t&&(e?t.requestFullscreen?t.requestFullscreen():t.msRequestFullscreen?t.msRequestFullscreen():t.mozRequestFullScreen?t.mozRequestFullScreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():u(!0):u(!0),l(!0))}),[n,e,u]),m=a((()=>{if(!r)return;const t=document;e?t.exitFullscreen?t.exitFullscreen():t.webkitExitFullscreen?t.webkitExitFullscreen():t.mozCancelFullScreen?t.mozCancelFullScreen():t.msExitFullscreen?t.msExitFullscreen():u(!1):u(!1),l(!1)}),[r,e,u]),h=a((()=>{r?m():c()}),[r,m,c]);return{isFullscreen:r,modalFullscreen:i,fullScreen:c,exitFullScreen:m,toggleFullScreen:h,handleScreenChange:o}}({useBrowserFullscreen:Pe,onScreenChange:le,galleryRef:ze}),{isPlaying:Xt,playPauseIntervalRef:Yt,play:Kt,pause:Vt,togglePlay:jt}=function({autoPlay:e=!1,slideInterval:t=y,slideDuration:n=p,infinite:r=!0,totalSlides:l,currentIndex:i,canSlideRight:o,slideToIndexCore:u,slideToIndexWithStyleReset:m,onPlay:h,onPause:g}){const[f,b]=d(!1),v=c(null),w=c(null),S=a((()=>{if(r||o()){const e=i+1;2===l?m(e):u(e)}else v.current&&(clearInterval(v.current),v.current=null,b(!1),g&&g(i))}),[r,o,i,l,u,m,g]);w.current=S;const T=a(((e=!0)=>{v.current||(b(!0),v.current=setInterval((()=>w.current?.()),Math.max(t,n)),h&&e&&h(i))}),[t,n,h,i]),x=a(((e=!0)=>{v.current&&(clearInterval(v.current),v.current=null,b(!1),g&&e&&g(i))}),[g,i]),C=a((()=>{v.current?x():T()}),[T,x]),I=c(T),R=c(x);return I.current=T,R.current=x,s((()=>{f&&(R.current(!1),I.current(!1))}),[t,n,f]),s((()=>{e&&!v.current&&I.current()}),[e]),s((()=>()=>{v.current&&(clearInterval(v.current),v.current=null)}),[]),{isPlaying:f,playPauseIntervalRef:v,play:T,pause:x,togglePlay:C}}({autoPlay:m,slideInterval:Ne,slideDuration:Fe,infinite:L,totalSlides:nt,currentIndex:lt,canSlideRight:ut,slideToIndexCore:dt,slideToIndexWithStyleReset:mt,onPlay:re,onPause:ne}),Gt=a((()=>{Qe.current=!1,Ze.current=!1}),[]),Jt=a((()=>{return e=et.current,t=Ee,Math.abs(e)>t;var e,t}),[Ee]),Qt=a((({event:e,absX:t,absY:n,dir:r})=>{const l=r,i=Qe.current,a=Ze.current;if(("Up"===l||"Down"===l||i)&&!a&&(i||(Qe.current=!0),!ke))return;if("Left"!==l&&"Right"!==l||a||(Ze.current=!0),T)return;(!ke&&Ze.current||ke&&Qe.current)&&e.preventDefault(),$e&&e.preventDefault();const s=!i&&!a;if(at&&!s)return void(et.current=0);if(at&&s&&wt(!1),function(e,t){return!("Left"!==e&&"Right"!==e||!t)||!("Up"!==e&&"Down"!==e||t)}(l,ke))return;const o=function(e,t,n,r,l,i){const a={Left:-1,Right:1,Up:-1,Down:1}[l];let s=i?t/r*100:e/n*100;return Math.abs(s)>=100&&(s=100),a*s}(t,n,Ye,Ve,l,ke);et.current=o;const u=_e.current;u&&(s&&(u.style.transition="none"),null!==tt.current&&cancelAnimationFrame(tt.current),tt.current=requestAnimationFrame((()=>{tt.current=null;const e=et.current*(M?-1:1),t=-(100*it-e),n=ke?De?`translate3d(0, ${t}%, 0)`:`translate(0, ${t}%)`:De?`translate3d(${t}%, 0, 0)`:`translate(${t}%, 0)`;u.style.transform=n})))}),[T,$e,at,Ye,Ve,ke,it,M,De,wt]),Zt=a(((e,t,n)=>{null!==tt.current&&(cancelAnimationFrame(tt.current),tt.current=null);const r=et.current,l=function(e,t,n,r,l,i,a){let s=e;return!n&&!r||l||(s+=t),-1!==t||i||(s=e),1!==t||a||(s=e),s}(lt,e,Jt(),t,at,ot(),ut()),i=function(e,t,n,r,l,i){const a=Math.abs(e),s=(t!==n?100-a:a)/100*i;return r>0?Math.min(l,Math.max(80,Math.round(s/r))):l}(r,l,lt,n,Fe,ke?Ve:Ye),a=function(e,t,n,r){const l=t-1;return e<0?0:e>l?r&&t>1?n-1:l:r&&t>1?e+1:e}(l,nt,St,L),s=_e.current;if(s){s.getBoundingClientRect(),s.style.transition=`transform ${i}ms ${S}`;const e=-100*a;s.style.transform=ke?De?`translate3d(0, ${e}%, 0)`:`translate(0, ${e}%)`:De?`translate3d(${e}%, 0, 0)`:`translate(${e}%, 0)`}yt(r),dt(l,void 0,!1,i),et.current=0}),[lt,nt,St,L,at,Fe,ke,De,Ye,Ve,Jt,ot,ut,dt,yt]),_t=a((({event:e,dir:t,velocity:n})=>{if(T)return;$e&&e.stopPropagation(),Gt();const r=t,l=function(e,t,n){return n?"Up"===e?1:-1:("Left"===e?1:-1)*(t?-1:1)}(r,M,ke),i=function(e,t,n,r){return r?e>t&&!("Left"===n||"Right"===n):e>t&&!("Up"===n||"Down"===n)}(n,I,r,ke);Zt(l,i,n)}),[T,$e,Gt,M,ke,I,Zt]),en=a((({event:e,absX:t,absY:n,dir:r})=>{const l=r,i=Et(),a=Qe.current,s=Ze.current;if(i){if(("Left"===l||"Right"===l||s)&&!a)return void(s||(Ze.current=!0));"Up"!==l&&"Down"!==l||a||(Qe.current=!0)}else{if(("Up"===l||"Down"===l||a)&&!s)return void(a||(Qe.current=!0));"Left"!==l&&"Right"!==l||s||(Ze.current=!0)}const o=$t.current;if(!o)return;let u,c,d,m,h;i?(u=Ct+("Down"===l?n:-n),c=o.scrollHeight-Nt+0,d=Math.abs(u)>c,m=u>0,h=o.scrollHeight<=Nt):(u=Ct+("Right"===l?t:-t),c=o.scrollWidth-Ft+0,d=Math.abs(u)>c,m=u>0,h=o.scrollWidth<=Ft),h||("Left"!==l&&"Up"!==l||!d)&&("Right"!==l&&"Down"!==l||!m)&&($e&&e.stopPropagation(),xt(u),Lt||(Rt({transition:"none"}),kt(!0)))}),[Et,Nt,Ft,Ct,$e,Lt,$t,xt,Rt,kt]),tn=a((({velocity:e,dir:t})=>{Gt();const n=$t.current,r=Et(),l=r?n?.scrollHeight??0:n?.scrollWidth??0,i=r?Nt:Ft,{targetTranslate:a,transitionStyle:s}=function(e){const{velocity:t,direction:n,isVertical:r,currentTranslate:l,scrollSize:i,wrapperSize:a,slideDuration:s,emptySpaceMargin:o=0,momentumMultiplier:u=150}=e,c=function(e,t=150){return e*t}(t,u),d=function(e,t){return t?"Down"===e?1:-1:"Right"===e?1:-1}(n,r);let m=l+c*d;const h=i-a+o;h>0&&(m=function(e,t,n=0){let r=Math.min(n,e);return r=Math.max(-t,r),r}(m,h,o));const g=function(e,t=p,n=700){return Math.min(n,t+100*e)}(t,s);return{targetTranslate:m,transitionDuration:g,transitionStyle:`all ${g}ms cubic-bezier(0.25, 0.46, 0.45, 0.94)`}}({velocity:e,direction:t,isVertical:r,currentTranslate:Tt,scrollSize:l,wrapperSize:i,slideDuration:Fe});Rt({transition:s}),xt(a),It(a),kt(!1)}),[Gt,Tt,xt,It,kt,Rt,Fe,Et,$t,Nt,Ft]),nn=a((e=>{if(ze.current?.classList.remove("image-gallery-using-mouse"),!h)switch(parseInt(String(e.keyCode||e.which||0),10)){case 37:ot()&&!Yt?.current&&ht(e);break;case 39:ut()&&!Yt?.current&>(e);break;case 27:zt&&!Pe&&At()}}),[h,ot,ut,ht,gt,zt,Pe,At,Yt]);Xe.current=nn;const rn=a((e=>{Xe.current?.(e)}),[]),ln=a((()=>{ze.current?.classList.add("image-gallery-using-mouse")}),[]),an=a((e=>{Q(e)&&X&&X(e)}),[X]),sn=a(((e,t)=>{Oe.current&&(window.clearTimeout(Oe.current),Oe.current=null),Oe.current=window.setTimeout((()=>{ct(t),Vt()}),300)}),[ct,Vt]),on=a((()=>{Oe.current&&(window.clearTimeout(Oe.current),Oe.current=null,m&&Kt())}),[m,Kt]),un=a(((e,t)=>{Le&&sn(e,t)}),[Le,sn]),cn=a(((e,t)=>{Q(e)&&ae?.(e,t)}),[ae]),dn=a(((e,t)=>{const n=e.target.parentNode?.parentNode;n?.blur&&n.blur(),lt!==t&&(2===nt?mt(t,e):ct(t,e)),ae&&ae(e,t)}),[lt,nt,ct,mt,ae]),mn=a(((e,t)=>{e.target.blur(),lt!==t&&(2===nt?mt(t,e):ct(t,e)),A&&A(e,t)}),[lt,nt,ct,mt,A]),hn=a((e=>{Y&&-1===e.currentTarget.src.indexOf(Y)&&(e.currentTarget.src=Y)}),[Y]),gn=a(((e,t)=>{Ae.current[t]||(Ae.current[t]=!0,_&&_(e),ke&&Cn.current?.())}),[_,ke]),fn=a((()=>{if(!ze.current)return;const e=ze.current.offsetWidth;if(Ke(e),je(ze.current.offsetHeight),He.current)if(ke){const t=He.current.offsetWidth||e,n=He.current.querySelector(".image-gallery-center .image-gallery-image")??He.current.querySelector(".image-gallery-image");if(n&&n.naturalWidth>0&&n.naturalHeight>0){const e=n.naturalHeight/n.naturalWidth,r=Math.round(t*e),l=window.innerHeight-80;Je(Math.min(r,l))}else Je(He.current.offsetHeight)}else Je(He.current.offsetHeight)}),[ke]),bn=a((e=>{e?.current&&(Ue.current=new ResizeObserver(z((e=>{e&&e.forEach((()=>{fn()}))}),50)),Ue.current.observe(e.current))}),[fn]),pn=a((()=>{Ue.current&&He.current&&(Ue.current.unobserve(He.current),Ue.current=null)}),[]),yn=c(null),vn=c(null),wn=c(null),Sn=c(null),Tn=c(null),xn=c(null),Cn=c(null);yn.current=ln,vn.current=Ut,wn.current=bn,Sn.current=Dt,Tn.current=pn,xn.current=Bt,Cn.current=fn;const In=a((()=>{yn.current?.()}),[]),Rn=a((()=>{vn.current?.()}),[]),Fn=a((e=>{const n=K||hn;return t(q,{description:e.description,fullscreen:e.fullscreen,handleImageLoaded:gn,isFullscreen:zt,loading:e.loading,original:e.original,originalAlt:e.originalAlt,originalHeight:e.originalHeight,originalTitle:e.originalTitle,originalWidth:e.originalWidth,sizes:e.sizes,srcSet:e.srcSet,onImageError:n})}),[zt,K,hn,gn]),Nn=a((e=>{const r=se||hn;return n("span",{className:"image-gallery-thumbnail-inner",children:[t("img",{alt:e.thumbnailAlt,className:"image-gallery-thumbnail-image",height:e.thumbnailHeight,loading:e.thumbnailLoading,src:e.thumbnail,title:e.thumbnailTitle,width:e.thumbnailWidth,onError:r}),e.thumbnailLabel&&t("div",{className:"image-gallery-thumbnail-label",children:e.thumbnailLabel})]})}),[se,hn]),Ln=u((()=>ft({useTranslate3D:De,slideVertically:ke})),[ft,De,ke]),kn=u((()=>{const e=[],n=[],r=[],{extendedItems:l,getSlideKey:i,getRealIndex:a}=bt();return l.forEach(((n,r)=>{const l=a(r),s=pt(r),o=n.originalClass?` ${n.originalClass}`:"",u=n.renderItem||ge||Fn,c=!P||s||qe.current[l];c&&P&&!qe.current[l]&&(qe.current[l]=!0),e.push(t(U,{alignment:s,index:l,originalClass:o,onClick:X,onKeyUp:an,onMouseLeave:ee,onMouseOver:te,onTouchEnd:oe,onTouchMove:ue,onTouchStart:ce,children:c?u(n):t("div",{style:{height:"100%"}})},i(r)))})),E.forEach(((e,l)=>{const i=e.thumbnailClass?` ${e.thumbnailClass}`:"",a=e.renderThumbInner||ye||Nn;Re&&e.thumbnail&&n.push(t(j,{index:l,isActive:lt===l,thumbnailClass:i,onClick:e=>dn(e,l),onFocus:e=>un(e,l),onKeyUp:e=>cn(e,l),onMouseLeave:Le?on:null,onMouseOver:e=>un(e,l),children:a(e)},`thumbnail-${l}`)),we&&r.push(t(f,{bulletClass:e.bulletClass,index:l,isActive:lt===l,onClick:e=>mn(e,l)},`bullet-${l}`))})),{slides:e,thumbnails:n,bullets:r}}),[E,lt,bt,pt,P,Re,we,Le,Fn,Nn,ge,ye,X,an,ue,oe,ce,te,ee,on,un,cn,dn,mn]);s((()=>{const e=ze.current;return Be?window.addEventListener("keydown",rn):e?.addEventListener("keydown",rn),window.addEventListener("mousedown",In),wn.current?.(He),Sn.current?.(Mt),J.forEach((e=>{document.addEventListener(e,Rn)})),()=>{window.removeEventListener("mousedown",In),window.removeEventListener("keydown",rn),e?.removeEventListener("keydown",rn),J.forEach((e=>{document.removeEventListener(e,Rn)})),Tn.current?.(),xn.current?.()}}),[Be,rn,In,Rn,Mt]),s((()=>{Tn.current?.(),xn.current?.(),wn.current?.(He),Sn.current?.(Mt)}),[We,Mt]),s((()=>{Re?Sn.current?.(Mt):xn.current?.(),Cn.current?.()}),[Re,Mt]),s((()=>{Tn.current?.(),xn.current?.(),wn.current?.(He),Sn.current?.(Mt),Cn.current?.()}),[ke,Mt]),s((()=>{P&&(qe.current=[]),Cn.current?.()}),[E,P]);const Mn=c(Kt),$n=c(Vt),En=c(jt),Wn=c(Ot),Pn=c(At),Dn=c(qt),Bn=c(dt),zn=c(lt);Mn.current=Kt,$n.current=Vt,En.current=jt,Wn.current=Ot,Pn.current=At,Dn.current=qt,Bn.current=dt,zn.current=lt,o(l,(()=>({play:e=>Mn.current(e),pause:e=>$n.current(e),togglePlay:()=>En.current(),fullScreen:()=>Wn.current(),exitFullScreen:()=>Pn.current(),toggleFullScreen:()=>Dn.current(),slideToIndex:(e,t)=>Bn.current(e,t),getCurrentIndex:()=>zn.current})),[]);const{slides:Hn,thumbnails:On,bullets:An}=kn,qn=g("image-gallery-slide-wrapper",Z(We),{"image-gallery-rtl":M}),Un=n("div",{ref:He,className:qn,children:[me&&me(),rt?n(e,{children:[Ce&&n(e,{children:[ke?ve(ht,!ot()):fe(ht,!ot()),ke?de(gt,!ut()):pe(gt,!ut())]}),t(V,{className:"image-gallery-swipe",delta:0,onSwiped:_t,onSwiping:Qt,children:t("div",{className:"image-gallery-slides",style:ke?{height:Ge}:void 0,children:t("div",{ref:_e,className:g("image-gallery-slides-container",{vertical:ke}),style:Ln,children:Hn})})})]}):t("div",{className:"image-gallery-slides",style:ke?{height:Ge}:void 0,children:t("div",{ref:_e,className:g("image-gallery-slides-container",{vertical:ke}),style:Ln,children:Hn})}),Ie&&be(jt,Xt),we&&t(b,{bullets:An,currentIndex:lt,maxBullets:Se,slideVertically:ke}),Te&&he(qt,zt),xe&&t(H,{currentIndex:lt,indexSeparator:F,totalItems:nt})]}),Xn=g("image-gallery",i,{"fullscreen-modal":Ht}),Yn=g("image-gallery-content",Z(We),{fullscreen:zt});return t("div",{ref:ze,"aria-live":"polite",className:Xn,children:n("div",{className:Yn,children:[("bottom"===We||"right"===We)&&Un,Re&&On.length>0&&t(G,{disableThumbnailSwipe:C,isRTL:M,thumbnailBarHeight:Pt(Ge),thumbnailPosition:We,thumbnails:On,thumbnailsRef:$t,thumbnailStyle:Wt(),thumbnailsWrapperRef:Mt,onSwiped:tn,onSwiping:en}),("top"===We||"left"===We)&&Un]})})}));export{_ as default};