@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",g)))}function a(){u()}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}),u()}}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}),u()}}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}),u()}}function g(n,i){e&&t&&(e.filter(i),l())}function u(){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",g),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(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 g=i||s||r;g&&(c&&g?(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,g)}),a.addEventListener("error",()=>{e?.hideLoading(n),a.classList.remove(l),a.classList.add("has-lazyerror"),e?.emit("lazyLoad:error",n,a,g)}),a.classList.add("f-lazyload"),a.classList.add(l),e?.emit("lazyLoad:load",n,a,g),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)}}function s(){if(!e)return;let n=t().preload,s=e.getPages(),o=s.length,a=e.getPageIndex();for(let e=a-n;e<=a+n;e++){let t=(e%o+o)%o;for(let e of s[t]?.slides||[])i(e)}}function o(e,t){i(t)}return{init:function(t){(e=t).on(["ready","change"],s),e.on("attachSlideEl",o)},destroy:function(){e?.off(["ready","change"],s),e?.off("attachSlideEl",o),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,g=!0;function u(t){let i=e?.getOptions().Thumbs,s=(n(i)?{...f,...i}:f)[t];return s&&"function"==typeof s?s():s}function h(){if(!e||e?.getOptions().Thumbs===!1)return!1;let t=0;for(let n of e.getSlides())n.thumbSrc&&t++;return t>=u("minCount")}function m(){return"modern"===u("type")}function y(t=!1){let n=e?.getContainer();if(e&&n&&!r&&h()){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=u("parentEl");e?e.insertAdjacentElement("beforeend",r):n.insertAdjacentElement("afterend",r)}r.classList.add(`is-${u("type")}`),r.classList.add("is-syncing"),t&&(r.style.maxHeight="0px")}}function p(){if(!t||!e||!r||o)return;let n=[];for(let t of e.getSlides()){let e=t.thumb?t.thumb instanceof HTMLImageElement?t.thumb.src:t.thumb:t.thumbSrc||void 0,i=u("thumbTpl");i=s(i,"{{alt}}",`Thumbnail #${t.index}`),i=s(i,"{{src}}",e+""),i=s(i,"{{index}}",`${t.index}`),i=s(i,"{{page}}",`${t.index||1}`),n.push({html:i,class:t.thumbClass})}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:!m(),infinite:!1,dragFree:!0,rtl:e.getOptions().rtl||!1,slidesPerPage:e=>{let t=0;return(m()&&(function(){if(!m()||!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||{},u("Carousel")||{}),{Sync:a,Lazyload:c}).init(),o.getGestures()?.on("start",()=>{g=!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"),O())}function b(){h()&&(e?.getGestures()?.on("start",L),u("showOnStart")&&(y(),p()))}function L(){g=!0,document.activeElement?.closest(".f-thumbs")&&document.activeElement?.blur()}function v(){r?.classList.toggle("is-syncing",e?.hasNavigated()===!1||e?.getTween()?.isRunning()),O(),e?.getGestures()?.isPointerDown()&&function(){if(!m()||!e||!o||!g)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(){g=!0}function S(e,t){let n=t.target;n&&!t.defaultPrevented&&"toggle"===n.dataset.thumbsAction&&(r||(y(!0),p()),r&&(r.style.maxHeight?r.style.maxHeight="":r.style.maxHeight="0px"))}function O(){if(!m()||!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",b),e.on("render",v),e.on("change",x),e.on("click",S)},destroy:function(){e?.off("ready",b),e?.off("render",v),e?.off("change",x),e?.off("click",S),e?.getGestures()?.off("start",L),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 h()}}}});