lightgallery/plugins/thumbnail/lg-thumbnail.min.js

lightGallery is a feature-rich, modular JavaScript gallery plugin for building beautiful image and video galleries for the web and the mobile

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).lgThumbnail=e()}(this,function(){"use strict";const t={toggleThumbnails:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path transform="translate(0, 960) scale(1, -1)" d="M682 84.667v172h172v-172h-172zM682 340.667v172h172v-172h-172zM426 596.667v172h172v-172h-172zM682 768.667h172v-172h-172v172zM426 340.667v172h172v-172h-172zM170 340.667v172h172v-172h-172zM170 84.667v172h172v-172h-172zM426 84.667v172h172v-172h-172zM170 596.667v172h172v-172h-172z"/></svg>'};var e=Object.defineProperty,i=Object.defineProperties,s=Object.getOwnPropertyDescriptors,h=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable,a=(t,i,s)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[i]=s,o=(t,e)=>{for(var i in e||(e={}))n.call(e,i)&&a(t,i,e[i]);if(h)for(var i of h(e))r.call(e,i)&&a(t,i,e[i]);return t},l=(t,e)=>i(t,s(e));function u(t,e,i){return t*(e+i)}function m(t,e,i){const s=Math.max(0,e-i);return Math.min(Math.max(t,0),s)}function b(t){const{translate:e,stripWidth:i,thumbWidth:s,thumbMargin:h,count:n}=t,r=s+h;if(n<=0||r<=0)return{start:0,end:-1,leadingPad:0,trailingPad:0};const a="auto"===t.overscan||void 0===t.overscan?Math.max(1,Math.ceil(i/r)):Math.max(0,t.overscan),o=m(e,u(n,s,h),i),l=Math.floor(o/r),b=Math.ceil((o+i)/r)-1,d=Math.max(0,l-a),c=Math.min(n-1,b+a);return{start:d,end:c,leadingPad:d*r,trailingPad:(n-1-c)*r}}function d(t){const e=t,{from:i,to:s}=e,a=((t,e)=>{var i={};for(var s in t)n.call(t,s)&&e.indexOf(s)<0&&(i[s]=t[s]);if(null!=t&&h)for(var s of h(t))e.indexOf(s)<0&&r.call(t,s)&&(i[s]=t[s]);return i})(e,["from","to"]),u=b(l(o({},a),{translate:i})),m=b(l(o({},a),{translate:s})),d=Math.min(u.start,m.start),c=Math.max(u.end,m.end),g=t.thumbWidth+t.thumbMargin;return c<d?{start:0,end:-1,leadingPad:0,trailingPad:0}:{start:d,end:c,leadingPad:d*g,trailingPad:(t.count-1-c)*g}}function c(t,e,i=100){return[...t.filter(t=>e.t-t.t<=i),e]}function g(t,e,i){let s=0,h=Date.now();const n=t.map(t=>({position:t.from,velocity:t.velocity})),r=()=>{const a=Date.now(),o=Math.min(Math.max(a-h,0),64);h=a;let l=!0;if(t.forEach((t,e)=>{n[e]=function(t,e,i,{dampingRatio:s=1,naturalFrequency:h=12}={}){const n=i/1e3,r=h,a=Math.min(s,1),o=t.position-e,l=1e3*t.velocity,u=Math.exp(-a*r*n);let m,b;if(a<1){const t=r*Math.sqrt(1-a*a),e=o,i=(l+a*r*o)/t,s=Math.cos(t*n),h=Math.sin(t*n);m=u*(e*s+i*h),b=u*((i*t-a*r*e)*s-(e*t+a*r*i)*h)}else{const t=l+r*o;m=u*(o+t*n),b=u*(t-r*(o+t*n))}return{position:e+m,velocity:b/1e3}}(n[e],t.target,o,t),function(t,e,i=.3,s=.012){return Math.abs(t.position-e)<i&&Math.abs(t.velocity)<s}(n[e],t.target)||(l=!1)}),l)return e(t.map(t=>t.target)),void(null==i||i());e(n.map(t=>t.position)),s=requestAnimationFrame(r)};return s=requestAnimationFrame(r),()=>cancelAnimationFrame(s)}const T={thumbnail:!0,animateThumb:!0,currentPagerPosition:"middle",alignThumbnails:"middle",thumbWidth:100,thumbHeight:"80px",thumbMargin:5,appendThumbnailsTo:".lg-components",toggleThumb:!1,enableThumbDrag:!0,enableThumbSwipe:!0,thumbnailSwipeThreshold:10,scrubThumbnails:!1,loadYouTubeThumbnail:!0,youTubeThumbSize:1},p="lgContainerResize",v="lgUpdateSlides",f="lgBeforeOpen",w="lgAfterOpen",y="lgBeforeSlide";var M=Object.defineProperty,S=Object.defineProperties,O=Object.getOwnPropertyDescriptors,$=Object.getOwnPropertySymbols,X=Object.prototype.hasOwnProperty,W=Object.prototype.propertyIsEnumerable,x=(t,e,i)=>e in t?M(t,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[e]=i,C=(t,e)=>{for(var i in e||(e={}))X.call(e,i)&&x(t,i,e[i]);if($)for(var i of $(e))W.call(e,i)&&x(t,i,e[i]);return t};return class{constructor(t,e){return this.thumbOuterWidth=0,this.thumbTotalWidth=0,this.translateX=0,this.thumbClickable=!1,this.instantThumb=!1,this.dragSamples=[],this.liveTranslateX=0,this.scrubActive=!1,this.scrubIndex=-1,this.core=t,this.$LG=e,this}init(){this.core.registerDefaultIcons(t),this.settings=C(C({},T),this.core.settings),this.thumbOuterWidth=0,this.thumbTotalWidth=u(this.core.galleryItems.length,this.settings.thumbWidth,this.settings.thumbMargin),this.translateX=0,this.setAnimateThumbStyles(),this.core.settings.allowMediaOverlap||(this.settings.toggleThumb=!1),this.settings.thumbnail&&(this.build(),this.settings.animateThumb?(this.settings.enableThumbDrag&&this.enableThumbDrag(),this.settings.enableThumbSwipe&&this.enableThumbSwipe(),this.thumbClickable=!1):this.thumbClickable=!0,this.toggleThumbBar(),this.thumbKeyPress())}build(){this.setThumbMarkup(),this.manageActiveClassOnSlideChange(),this.$lgThumb.first().on("click.lg touchend.lg",t=>{const e=this.$LG(t.target);e.hasAttribute("data-lg-item-id")&&setTimeout(()=>{if(this.thumbClickable&&!this.core.lgBusy){const t=parseInt(e.attr("data-lg-item-id"));this.core.slide(t,!1,!0,!1)}},50)}),this.core.LGel.on(`${y}.thumb`,t=>{if(this.scrubActive)return;const{index:e}=t.detail;this.animateThumb(e)}),this.core.LGel.on(`${f}.thumb`,()=>{this.thumbOuterWidth=this.core.outer.get().offsetWidth,this.instantThumb=!0}),this.core.LGel.on(`${w}.thumb`,()=>{this.instantThumb=!1}),this.core.LGel.on(`${v}.thumb`,()=>{this.rebuildThumbnails()}),this.core.LGel.on(`${p}.thumb`,()=>{this.core.lgOpened&&setTimeout(()=>{this.thumbOuterWidth=this.core.outer.get().offsetWidth,this.animateThumb(this.core.index),this.thumbOuterWidth=this.core.outer.get().offsetWidth},50)})}setThumbMarkup(){let t="lg-thumb-outer ";this.settings.alignThumbnails&&(t+=`lg-thumb-align-${this.settings.alignThumbnails}`);const e=`<div class="${t}">\n        <div class="lg-thumb lg-group">\n        </div>\n        </div>`;this.core.outer.addClass("lg-has-thumb"),".lg-components"===this.settings.appendThumbnailsTo?this.core.$lgComponents.append(e):this.core.outer.append(e),this.$thumbOuter=this.core.outer.find(".lg-thumb-outer").first(),this.$lgThumb=this.core.outer.find(".lg-thumb").first(),this.settings.animateThumb&&this.core.outer.find(".lg-thumb").css("transition-duration",this.core.settings.speed+"ms").css("width",this.thumbTotalWidth+"px").css("position","relative"),this.renderThumbItems()}enableThumbDrag(){let t={cords:{startX:0,endX:0},isMoved:!1,newTranslateX:0,startTime:new Date,endTime:new Date,touchMoveTime:0},e=!1;this.$thumbOuter.addClass("lg-grab"),this.core.outer.find(".lg-thumb").first().on("mousedown.lg.thumb",i=>{this.thumbTotalWidth>this.thumbOuterWidth&&(i.preventDefault(),this.onThumbDragStart(i.pageX),t.cords.startX=i.pageX,t.startTime=new Date,this.thumbClickable=!1,e=!0,this.core.outer.get().scrollLeft+=1,this.core.outer.get().scrollLeft-=1,this.$thumbOuter.removeClass("lg-grab").addClass("lg-grabbing"))}),this.$LG(window).on(`mousemove.lg.thumb.global${this.core.lgId}`,i=>{this.core.lgOpened&&e&&(t.cords.endX=i.pageX,t=this.onThumbTouchMove(t))}),this.$LG(window).on(`mouseup.lg.thumb.global${this.core.lgId}`,()=>{this.core.lgOpened&&(t.isMoved?t=this.onThumbTouchEnd(t):(this.thumbClickable=!0,this.endScrub()),e&&(e=!1,this.$thumbOuter.removeClass("lg-grabbing").addClass("lg-grab")))})}enableThumbSwipe(){let t={cords:{startX:0,endX:0},isMoved:!1,newTranslateX:0,startTime:new Date,endTime:new Date,touchMoveTime:0};this.$lgThumb.on("touchstart.lg",e=>{this.thumbTotalWidth>this.thumbOuterWidth&&(e.preventDefault(),this.onThumbDragStart(e.targetTouches[0].pageX),t.cords.startX=e.targetTouches[0].pageX,this.thumbClickable=!1,t.startTime=new Date)}),this.$lgThumb.on("touchmove.lg",e=>{this.thumbTotalWidth>this.thumbOuterWidth&&(e.preventDefault(),t.cords.endX=e.targetTouches[0].pageX,t=this.onThumbTouchMove(t))}),this.$lgThumb.on("touchend.lg",()=>{t.isMoved?t=this.onThumbTouchEnd(t):(this.thumbClickable=!0,this.endScrub())})}rebuildThumbnails(){this.$thumbOuter.addClass("lg-rebuilding-thumbnails"),setTimeout(()=>{this.thumbTotalWidth=u(this.core.galleryItems.length,this.settings.thumbWidth,this.settings.thumbMargin),this.$lgThumb.css("width",this.thumbTotalWidth+"px"),this.$lgThumb.empty(),this.renderThumbItems(),this.animateThumb(this.core.index)},50),setTimeout(()=>{this.$thumbOuter.removeClass("lg-rebuilding-thumbnails")},200)}setTranslate(t){const e=this.isRtl()?t:-t;this.$lgThumb.css("transform","translate3d("+e+"px, 0px, 0px)")}isRtl(){return"rtl"===this.core.settings.direction}getPossibleTransformX(t){return m(t,this.thumbTotalWidth,this.thumbOuterWidth)}animateThumb(t){this.cancelThumbSpring&&(this.cancelThumbSpring(),this.cancelThumbSpring=void 0),this.$lgThumb.css("transition-duration",this.instantThumb?"0ms":this.core.settings.speed+"ms"),this.settings.animateThumb&&(this.translateX=function(t,e,i,s,h,n,r="ltr"){let a=0;switch("rtl"===r&&"middle"!==n?"left"===n?"right":"left":n){case"left":a=0;break;case"middle":a=s/2-e/2;break;case"right":a=s-e}return m((e+i)*t-1-a,h,s)}(t,this.settings.thumbWidth,this.settings.thumbMargin,this.thumbOuterWidth,this.thumbTotalWidth,this.settings.currentPagerPosition,this.isRtl()?"rtl":"ltr"),this.liveTranslateX=this.translateX,this.setTranslate(this.translateX),this.isThumbWindowed()&&this.renderThumbItems(t))}canScrub(){return this.settings.scrubThumbnails&&this.settings.animateThumb}beginScrub(){this.scrubActive||(this.scrubActive=!0,this.scrubIndex=this.core.index,this.scrubSavedSpeed=this.core.settings.speed,this.core.settings.speed=0,this.core.outer.addClass("lg-thumb-scrubbing"))}endScrub(){this.scrubActive&&(this.scrubActive=!1,this.scrubIndex=-1,void 0!==this.scrubSavedSpeed&&(this.core.settings.speed=this.scrubSavedSpeed,this.scrubSavedSpeed=void 0),this.core.outer.removeClass("lg-thumb-scrubbing"))}scrubTo(t){const e=function(t,e,i,s){const h=e-i;if(s<=1||h<=0)return 0;const n=m(t,e,i);return Math.round(n/h*(s-1))}(t,this.thumbTotalWidth,this.thumbOuterWidth,this.core.galleryItems.length);e!==this.scrubIndex&&(this.scrubIndex=e,this.core.lgBusy=!1,this.core.slide(e,!0,!0,!1))}onThumbDragStart(t){this.cancelThumbSpring&&(this.cancelThumbSpring(),this.cancelThumbSpring=void 0,this.translateX=this.liveTranslateX),this.liveTranslateX=this.translateX,this.dragSamples=c([],{x:t,y:0,t:Date.now()})}onThumbTouchMove(t){t.isMoved=!0,t.touchMoveTime=(new Date).valueOf(),this.dragSamples=c(this.dragSamples,{x:t.cords.endX,y:0,t:Date.now()});const e=t.cords.endX-t.cords.startX;if(t.newTranslateX=function(t,e,i,s=.35){const h=Math.max(0,e-i);return t<0?t*s:t>h?h+(t-h)*s:t}(this.translateX+(this.isRtl()?e:-e),this.thumbTotalWidth,this.thumbOuterWidth),this.liveTranslateX=t.newTranslateX,this.setTranslate(t.newTranslateX),this.$thumbOuter.addClass("lg-dragging"),this.canScrub()&&(this.scrubActive||Math.abs(e)>=this.settings.thumbnailSwipeThreshold)&&(this.beginScrub(),this.scrubTo(this.liveTranslateX)),this.isThumbWindowed()&&this.renderedThumbWindow){const t=this.renderedThumbWindow,e=this.getPossibleTransformX(this.liveTranslateX);(e<t.leadingPad||e+this.thumbOuterWidth>this.thumbTotalWidth-t.trailingPad)&&this.renderThumbItems(this.core.index,{from:this.liveTranslateX,to:this.liveTranslateX})}return t}onThumbTouchEnd(t){if(t.isMoved=!1,t.endTime=new Date,this.$thumbOuter.removeClass("lg-dragging"),Math.abs(t.cords.endX-t.cords.startX)<this.settings.thumbnailSwipeThreshold)return this.thumbClickable=!0,this.endScrub(),this.liveTranslateX=this.translateX,this.$lgThumb.css("transition-duration",this.core.settings.speed+"ms"),this.setTranslate(this.translateX),t;const e=function(t,e,i=100){const s=t.filter(t=>e-t.t<=i);if(s.length<2)return{x:0,y:0};const h=s[0],n=s[s.length-1],r=n.t-h.t;if(r<5)return{x:0,y:0};const a=n.x-h.x,o=n.y-h.y;return{x:Math.abs(a)>1?a/r:0,y:Math.abs(o)>1?o/r:0}}(this.dragSamples,Date.now()).x,i=this.isRtl()?e:-e,s=this.liveTranslateX,h=this.getPossibleTransformX(s+function(t,e=.995){return t*e/(1-e)}(i));return this.$lgThumb.css("transition-duration","0ms"),this.isThumbWindowed()&&this.renderThumbItems(this.core.index,{from:s,to:h}),this.cancelThumbSpring=g([{from:s,velocity:i,target:h}],([t])=>{this.liveTranslateX=t,this.setTranslate(t),this.scrubActive&&this.scrubTo(t)},()=>{this.cancelThumbSpring=void 0,this.translateX=h,this.endScrub(),this.$lgThumb.css("transition-duration",this.core.settings.speed+"ms"),this.isThumbWindowed()&&this.renderThumbItems()}),t}getThumbHtml(t,e,i,s=this.core.index){const h=this.core.galleryItems[e].__slideVideoInfo||{};let n;n=h.youtube&&this.settings.loadYouTubeThumbnail?"//img.youtube.com/vi/"+h.youtube[1]+"/"+this.settings.youTubeThumbSize+".jpg":t;const r=document.createElement("div");r.setAttribute("data-lg-item-id",e+""),r.className="lg-thumb-item "+(e===s?"active":"");const a=this.isRtl()?"margin-left":"margin-right";r.style.cssText=`width: ${this.settings.thumbWidth}px; height: ${this.settings.thumbHeight}; ${a}: ${this.settings.thumbMargin}px;`;const o=document.createElement("img");return o.alt=i||"",o.setAttribute("data-lg-item-id",e+""),o.setAttribute("loading","lazy"),o.setAttribute("decoding","async"),o.src=n,r.appendChild(o),r}isThumbWindowed(){var t;return void 0!==(null==(t=this.core.settings.virtualization)?void 0:t.thumbs)}renderThumbItems(t=this.core.index,e){var i;const s=this.core.galleryItems;if(!this.isThumbWindowed())return void this.setThumbItemHtml(s);const h={stripWidth:this.thumbOuterWidth,thumbWidth:this.settings.thumbWidth,thumbMargin:this.settings.thumbMargin,count:s.length,overscan:null==(i=this.core.settings.virtualization)?void 0:i.thumbs},n=e?d(C(C({},h),e)):b((r=C({},h),a={translate:this.translateX},S(r,O(a))));var r,a;this.renderedThumbWindow=n,this.$lgThumb.empty(),n.leadingPad>0&&this.$lgThumb.append(`<div class="lg-thumb-spacer" aria-hidden="true" style="width: ${n.leadingPad}px;"></div>`);for(let o=n.start;o<=n.end;o++)this.$lgThumb.append(this.getThumbHtml(s[o].thumb,o,s[o].alt,t));n.trailingPad>0&&this.$lgThumb.append(`<div class="lg-thumb-spacer" aria-hidden="true" style="width: ${n.trailingPad}px;"></div>`)}setThumbItemHtml(t){for(let e=0;e<t.length;e++){const i=this.getThumbHtml(t[e].thumb,e,t[e].alt);this.$lgThumb.append(i)}}setAnimateThumbStyles(){this.settings.animateThumb&&this.core.outer.addClass("lg-animate-thumb")}manageActiveClassOnSlideChange(){this.core.LGel.on(`${y}.thumb`,t=>{const{index:e}=t.detail;this.core.outer.find(".lg-thumb-item").removeClass("active"),this.core.outer.find(`.lg-thumb-item[data-lg-item-id="${e}"]`).addClass("active")})}toggleThumbBar(){var t,e;this.settings.toggleThumb&&(this.core.outer.addClass("lg-can-toggle"),this.core.$toolbar.append('<button type="button" aria-label="'+(null!=(e=null==(t=this.settings.thumbnailPluginStrings)?void 0:t.toggleThumbnails)?e:this.core.settings.strings.toggleThumbnails)+'" class="lg-toggle-thumb lg-icon"></button>'),this.core.outer.find(".lg-toggle-thumb").first().on("click.lg",()=>{this.core.outer.toggleClass("lg-components-open")}))}thumbKeyPress(){this.$LG(window).on(`keydown.lg.thumb.global${this.core.lgId}`,t=>{this.core.lgOpened&&this.settings.toggleThumb&&(38===t.keyCode?(t.preventDefault(),this.core.outer.addClass("lg-components-open")):40===t.keyCode&&(t.preventDefault(),this.core.outer.removeClass("lg-components-open")))})}destroy(){this.endScrub(),this.cancelThumbSpring&&(this.cancelThumbSpring(),this.cancelThumbSpring=void 0),this.settings.thumbnail&&(this.$LG(window).off(`.lg.thumb.global${this.core.lgId}`),this.core.LGel.off(".lg.thumb"),this.core.LGel.off(".thumb"),this.$thumbOuter.remove(),this.core.outer.removeClass("lg-has-thumb"))}}});