@fancyapps/ui/dist/carousel/carousel.thumbs.umd.js

Robust JavaScript UI Component Library

!/*! License details at fancyapps.com/license */function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).window=e.window||{})}(this,function(e){"use strict";let t,n=e=>"object"==typeof e&&null!==e&&e.constructor===Object&&"[object Object]"===Object.prototype.toString.call(e),i=(e,...t)=>{let s=t.length;for(let o=0;o<s;o++)Object.entries(t[o]||{}).forEach(([t,s])=>{let o=Array.isArray(s)?[]:{};e[t]||Object.assign(e,{[t]:o}),n(s)?Object.assign(e[t],i(o,s)):Array.isArray(s)?Object.assign(e,{[t]:[...s]}):Object.assign(e,{[t]:s})});return e},s=function(e="",t="",n=""){return e.split(t).join(n)},o={syncOnChange:!1,syncOnClick:!0,syncOnHover:!1},a=()=>{let e,t;function i(){let t=e?.getOptions().Sync;return n(t)?{...o,...t}:o}function s(){let n=i().target;e&&n&&e&&n&&(t=n,e.getOptions().classes={...e.getOptions().classes,isSelected:""},e.getOptions().initialSlide=t.getPage()?.slides[0]?.index||0,i().syncOnChange&&e.on("change",r),i().syncOnClick&&e.on("click",d),i().syncOnHover&&e.getViewport()?.addEventListener("mouseover",c),e&&t&&(e.on("ready",a),e.on("refresh",f),t.on("change",l),t.on("filter",u)))}function a(){g()}function r(){if(e&&t){let n=e.getPage()?.slides||[],i=t.getPageIndex(n[0].index||0);i>-1&&t.goTo(i,e.hasNavigated()?void 0:{tween:!1,transition:!1}),g()}}function l(){if(e&&t){let n=e.getPageIndex(t.getPage()?.slides[0].index||0);n>-1&&e.goTo(n,t.hasNavigated()?void 0:{tween:!1,transition:!1}),g()}}function d(n,i){if(!e||!t||e.getTween()?.isRunning())return;let s=e?.getOptions().classes.slide;if(!s)return;let o=s?i.target.closest(`.${s}`):null;if(o){let e=parseInt(o.getAttribute("index")||"")||0,n=t.getPageIndex(e);t.goTo(n)}}function c(t){e&&d(e,t)}function f(){if(e&&t){let n=e.getPageIndex(t.getPage()?.slides[0].index||0);n>-1&&e.goTo(n,{tween:!1,transition:!1}),g()}}function u(n,i){e&&t&&(e.filter(i),l())}function g(){if(!t)return;let n=t.getPage()?.slides[0]?.index||0;for(let t of e?.getSlides()||[])t.el?.classList.toggle("is-selected",t.index===n)}return{init:function(t){(e=t).on("initSlides",s)},destroy:function(){e?.off("ready",a),e?.off("refresh",f),e?.off("change",r),e?.off("click",d),e?.getViewport()?.removeEventListener("mouseover",c),t?.off("change",l),t?.off("filter",u),t=void 0,e?.off("initSlides",s),e=void 0},getTarget:function(){return t}}},r={showLoading:!0,preload:1},l="is-lazyloading",d="is-lazyloaded",c=()=>{let e;function t(){let t=e?.getOptions().Lazyload;return n(t)?{...r,...t}:r}function i(){if(!e)return;let n=t().preload,i=[...e.getVisibleSlides()],s=e.getPosition(),o=e.getViewportDim();for(let a of(i.push(...e.getVisibleSlides(s+o*n),...e.getVisibleSlides(s-o*n)),i||[]))!function(n){let i=n.el;if(!i)return;let s="[data-lazy-src],[data-lazy-srcset],[data-lazy-bg]",o=Array.from(i.querySelectorAll(s));for(let a of(i.matches(s)&&o.push(i),o)){let i=a.dataset.lazySrc,s=a.dataset.lazySrcset,o=a.dataset.lazySizes,r=a.dataset.lazyBg,c=(a instanceof HTMLImageElement||a instanceof HTMLSourceElement)&&(i||s),f=a instanceof HTMLElement&&r;if(!(c||f))continue;let u=i||s||r;u&&(c&&u?(t().showLoading&&e?.showLoading(n),a.addEventListener("load",()=>{e?.hideLoading(n),a instanceof HTMLImageElement?a.decode().then(()=>{a.classList.remove(l),a.classList.add(d)}):(a.classList.remove(l),a.classList.add(d)),e?.emit("lazyLoad:loaded",n,a,u)}),a.addEventListener("error",()=>{e?.hideLoading(n),a.classList.remove(l),a.classList.add("has-lazyerror"),e?.emit("lazyLoad:error",n,a,u)}),a.classList.add("f-lazyload"),a.classList.add(l),e?.emit("lazyLoad:load",n,a,u),i&&(a.src=i),s&&(a.srcset=s),o&&(a.sizes=o)):f&&(document.body.contains(a)||(document.createElement("img").src=r),a.style.backgroundImage=`url('${r}')`),delete a.dataset.lazySrc,delete a.dataset.lazySrcset,delete a.dataset.lazySizes)}}(a)}return{init:function(t){(e=t).on("render",i)},destroy:function(){e?.off("render",i),e=void 0}}},f={Carousel:{Lazyload:{showLoading:!1}},minCount:2,showOnStart:!0,thumbTpl:'<button aria-label="Slide to #{{page}}"><img draggable="false" alt="{{alt}}" data-lazy-src="{{src}}" /></button>',type:"modern"};e.Thumbs=()=>{let e,o,r,l=0,d=0,u=!0;function g(t){let i=e?.getOptions().Thumbs,s=(n(i)?{...f,...i}:f)[t];return s&&"function"==typeof s?s():s}function m(){if(!e||e?.getOptions().Thumbs===!1)return!1;let t=0;for(let n of e.getSlides())n.thumbSrc&&t++;return t>=g("minCount")}function h(){return"modern"===g("type")}function y(t=!1){let n=e?.getContainer();if(e&&n&&!r&&m()){if(!r){let e=n.nextElementSibling;e?.classList.contains("f-thumbs")&&(r=e)}if(!r){(r=document.createElement("div")).classList.add("f-thumbs");let e=g("parentEl");e?e.insertAdjacentElement("beforeend",r):n.insertAdjacentElement("afterend",r)}r.classList.add(`is-${g("type")}`),r.classList.add("is-syncing"),t&&(r.style.maxHeight="0px")}}function p(e){let t=e.thumb?e.thumb instanceof HTMLImageElement?e.thumb.src:e.thumb:e.thumbSrc||void 0,n=g("thumbTpl");return n=s(n,"{{alt}}",`Thumbnail #${e.index}`),n=s(n,"{{src}}",t+""),n=s(n,"{{index}}",`${e.index}`),{html:n=s(n,"{{page}}",`${e.index||1}`),class:e.thumbClass}}function b(){if(!t||!e||!r||o)return;let n=[];for(let t of e.getSlides())n.push(p(t));n.length&&(o=t(r,i({},{Sync:{target:e},Lazyload:{preload:1},slides:n,classes:{container:"f-thumbs",viewport:"f-thumbs__viewport",slide:"f-thumbs__slide"},initialSlide:e.getOptions().initialPage,center:!0,fill:!h(),infinite:!1,dragFree:!0,rtl:e.getOptions().rtl||!1,slidesPerPage:e=>{let t=0;return(h()&&(function(){if(!h()||!r)return;let e=e=>r&&parseFloat(getComputedStyle(r).getPropertyValue("--f-thumb-"+e))||0;l=e("width"),d=e("clip-width")}(),t=(l-d)*4),e&&e.getTotalSlideDim()<=e.getViewportDim()-t)?1/0:1}},f.Carousel||{},g("Carousel")||{}),{Sync:a,Lazyload:c}).init(),o.getGestures()?.on("start",()=>{u=!1}),o.on("click",(e,t)=>{let n=t.target;if(n){let e=n.matches("button")?n:n.firstElementChild;e&&e.matches("button")&&e.focus({})}}),e.getContainer()?.classList.add("has-thumbs"),P())}function L(){m()&&(g("showOnStart")&&(y(),b()),e?.getGestures()?.on("start",v),e?.on("addSlide",O))}function v(){u=!0,document.activeElement?.closest(".f-thumbs")&&document.activeElement?.blur()}function S(){r?.classList.toggle("is-syncing",e?.hasNavigated()===!1||e?.getTween()?.isRunning()),P(),e?.getGestures()?.isPointerDown()&&function(){if(!h()||!e||!o||!u)return;let t=o.getTween(),n=o.getPages(),i=e.getPageIndex()||0,s=e.getPageProgress()||0;if(!e||!n||!n[i]||!t)return;let a=t.isRunning()?t.getCurrentValues().pos:o.getPosition();if(void 0===a)return;let r=n[i].pos+s*(l-d);r=function(e=0,t=0,n=0){return Math.max(Math.min(t,n),e)}(n[0].pos,r,n[n.length-1].pos),t.from({pos:a}).to({pos:r}).start()}()}function x(){u=!0}function O(e,t){o?.add(p(t),t.index)}function w(e,t){let n=t.target;n&&!t.defaultPrevented&&"toggle"===n.dataset.thumbsAction&&(r||(y(!0),b()),r&&(r.style.maxHeight?r.style.maxHeight="":r.style.maxHeight="0px"))}function P(){if(!h()||!e||!o)return;let t=o?.getSlides()||[],n=-.5*l;for(let i of t){let t=i.el;if(!t)continue;let s=e.getPageProgress(i.index)||0;(s=Math.max(-1,Math.min(1,s)))>-1&&s<1&&(n+=.5*l*(1-Math.abs(s))),s=Math.round(1e4*s)/1e4,n=Math.round(1e4*n)/1e4,t.style.setProperty("--progress",`${Math.abs(s)}`),t.style.setProperty("--shift",`${e?.isRTL()?-1*n:n}px`),s>-1&&s<1&&(n+=.5*l*(1-Math.abs(s)))}}return{init:function(n,i){t=i,(e=n).on("ready",L),e.on("render",S),e.on("change",x)},destroy:function(){e?.off("ready",L),e?.off("render",S),e?.off("change",x),e?.off("addSlide",O),e?.off("click",w),e?.getGestures()?.off("start",v),e?.getContainer()?.classList.remove("has-thumbs"),e=void 0,o?.destroy(),o=void 0,r?.remove(),r=void 0},getContainer:function(){return r},isEnabled:function(){return m()}}}});