@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 o=t.length;for(let r=0;r<o;r++)Object.entries(t[r]||{}).forEach(([t,o])=>{let r=Array.isArray(o)?[]:{};e[t]||Object.assign(e,{[t]:r}),n(o)?Object.assign(e[t],i(e[t],o)):Array.isArray(o)?Object.assign(e,{[t]:[...o]}):Object.assign(e,{[t]:o})});return e},o=function(e="",t="",n=""){return e.split(t).join(n)},r=function(e){var t=new DOMParser().parseFromString(e,"text/html").body;if(t.childElementCount>1){for(var n=document.createElement("div");t.firstChild;)n.appendChild(t.firstChild);return n}let i=t.firstChild;if(i&&!(i instanceof HTMLElement)){var n=document.createElement("div");return n.appendChild(i),n}return i},s={syncOnChange:!1,syncOnClick:!0,syncOnHover:!1},l=()=>{let e,t;function i(){let t=e?.getOptions().Sync;return n(t)?{...s,...t}:s}function o(){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",l),i().syncOnClick&&e.on("click",d),i().syncOnHover&&e.getViewport()?.addEventListener("mouseover",c),e&&t&&(e.on("ready",r),e.on("refresh",f),t.on("change",a),t.on("filter",u)))}function r(){g()}function l(){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 a(){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 o=e?.getOptions().classes.slide;if(!o)return;let r=o?i.target.closest(`.${o}`):null;if(r){let e=parseInt(r.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),a())}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",o)},destroy:function(){e?.off("ready",r),e?.off("refresh",f),e?.off("change",l),e?.off("click",d),e?.getViewport()?.removeEventListener("mouseover",c),t?.off("change",a),t?.off("filter",u),t=void 0,e?.off("initSlides",o),e=void 0},getTarget:function(){return t}}},a=(e,t="")=>{e&&e.classList&&t.split(" ").forEach(t=>{t&&e.classList.add(t)})},d=(e,t="")=>{e&&e.classList&&t.split(" ").forEach(t=>{t&&e.classList.remove(t)})},c={showLoading:!0,preload:1},f="is-lazyloading",u="is-lazyloaded",g="has-lazyerror",m=()=>{let e;function t(){let t=e?.getOptions().Lazyload;return n(t)?{...c,...t}:c}function i(){if(!e)return;let n=[...e.getVisibleSlides()],i=t().preload;if(i>0){let t=e.getPosition(),o=e.getViewportDim();n.push(...e.getVisibleSlides(t+o*i),...e.getVisibleSlides(t-o*i))}for(let i of n)!function(n){let i=n.el;if(!i)return;let o="[data-lazy-src],[data-lazy-srcset],[data-lazy-bg]",r=Array.from(i.querySelectorAll(o));for(let s of(i.matches(o)&&r.push(i),r)){let i=s.dataset.lazySrc,o=s.dataset.lazySrcset,r=s.dataset.lazySizes,l=s.dataset.lazyBg,c=(s instanceof HTMLImageElement||s instanceof HTMLSourceElement)&&(i||o),m=s instanceof HTMLElement&&l;if(!(c||m))continue;let h=i||o||l;if(h){if(c&&h){let l=s.parentElement?.classList.contains("f-panzoom__wrapper");t().showLoading&&e?.showLoading(n),s.addEventListener("load",()=>{e?.hideLoading(n),d(s,g),s instanceof HTMLImageElement?s.decode().then(()=>{d(s,f),a(s,u)}):(d(s,f),a(s,u)),l||e?.emit("lazyLoad:loaded",n,s,h)}),s.addEventListener("error",()=>{e?.hideLoading(n),d(s,f),a(s,g),l||e?.emit("lazyLoad:error",n,s,h)}),s.classList.add("f-lazyload"),s.classList.add(f),l||e?.emit("lazyLoad:load",n,s,h),i&&(s.src=i),o&&(s.srcset=o),r&&(s.sizes=r)}else m&&(document.body.contains(s)||(document.createElement("img").src=l),s.style.backgroundImage=`url('${l}')`);delete s.dataset.lazySrc,delete s.dataset.lazySrcset,delete s.dataset.lazySizes,delete s.dataset.lazyBg}}}(i)}return{init:function(t){(e=t).on("render",i)},destroy:function(){e?.off("render",i),e=void 0}}},h={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,s,d,c,f,u=0,g=0,p=!0;function y(t){let i=e?.getOptions().Thumbs,o=(n(i)?{...h,...i}:h)[t];return o&&"function"==typeof o&&e?o(e):o}function b(){if(!e||e?.getOptions().Thumbs===!1)return!1;let t=0;for(let n of e.getSlides())n.thumbSrc&&t++;return t>=y("minCount")}function v(){return"modern"===y("type")}function L(){return"scrollable"===y("type")}function S(){let t=[];for(let n of e?.getSlides()||[])t.push({index:n.index,class:n.thumbClass,html:x(n)});return t}function x(e){let t=e.thumb?e.thumb instanceof HTMLImageElement?e.thumb.src:e.thumb:e.thumbSrc||void 0,n=void 0===e.thumbAlt?`Thumbnail #${(e.index||0)+1}`:e.thumbAlt+"",i=y("thumbTpl");return i=o(i,"{{alt}}",n),i=o(i,"{{src}}",t+""),i=o(i,"{{index}}",`${e.index||0}`),i=o(i,"{{page}}",`${(e.index||0)+1}`)}function E(e){return`<div index="${e.index||0}" class="f-thumbs__slide ${e.class||""}">${e.html||""}</div>`}function w(t=!1){let n=e?.getContainer();if(!e||!n||d||!b())return;let i=y("Carousel")?.classes||{};if(i.container=i.container||"f-thumbs",!d){let e=n.nextElementSibling;e?.classList.contains(i.container)&&(d=e)}if(!d){d=document.createElement("div");let e=y("parentEl");e?e.insertAdjacentElement("beforeend",d):n.insertAdjacentElement("afterend",d)}a(d,i.container),a(d,"f-thumbs"),a(d,`is-${y("type")}`),t&&a(d,"is-hidden")}function T(){if(!d||!L())return;a(c=document.createElement("div"),"f-thumbs__viewport");let t="";for(let e of S())"string"==typeof(e.html||"")&&(t+=E(e));c.innerHTML=t,d.append(c),d.addEventListener("click",t=>{t.preventDefault();let n=t.target.closest("[index]"),i=parseInt(n?.getAttribute("index")||"-1");e&&i>-1&&e.goTo(i)}),f=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&e.target instanceof HTMLImageElement&&(e.target.src=e.target.getAttribute("data-lazy-src")+"",e.target.removeAttribute("data-lazy-src"),f?.unobserve(e.target))})},{root:c,rootMargin:"100px"}),d.querySelectorAll("[data-lazy-src]").forEach(e=>{f?.observe(e)}),e?.emit("thumbs:ready")}function z(){if(!t||!e||!d||L()||s)return;let n=S();if(!n.length)return;let o=i({},{Sync:{target:e},Lazyload:{preload:1},slides:n,classes:{container:"f-thumbs",viewport:"f-thumbs__viewport",slide:"f-thumbs__slide"},center:!0,fill:!v(),infinite:!1,dragFree:!0,rtl:e.getOptions().rtl||!1,slidesPerPage:e=>{let t=0;return(v()&&(function(){if(!v()||!d)return;let e=e=>d&&parseFloat(getComputedStyle(d).getPropertyValue("--f-thumb-"+e))||0;u=e("width"),g=e("clip-width")}(),t=(u-g)*4),e&&e.getTotalSlideDim()<=e.getViewportDim()-t)?1/0:1}},h.Carousel||{},y("Carousel")||{});(s=t(d,o,{Sync:l,Lazyload:m})).on("ready",()=>{a(d,"is-syncing"),e?.emit("thumbs:ready"),v()&&e?.on("render",M)}),s.on("destroy",()=>{e?.emit("thumbs:destroy")}),s.init(),s.getGestures()?.on("start",()=>{p=!1}),s.on("click",(e,t)=>{let n=t.target;if(n){let e=n.matches("button")?n:n.firstElementChild;e&&e.matches("button")&&(t.preventDefault(),e.focus({preventScroll:!0}))}}),a(e.getContainer(),"has-thumbs"),k()}function C(){b()&&y("showOnStart")&&(w(),T())}function O(){b()&&(z(),e?.on("addSlide",I),e?.on("removeSlide",j),e?.on("click",$),e?.on("refresh",H),e?.getGestures()?.on("start",P),_(!0))}function P(){p=!0,document.activeElement?.closest(".f-thumbs")&&document.activeElement?.blur()}function M(){d?.classList.toggle("is-syncing",e?.hasNavigated()===!1||e?.getTween()?.isRunning()),k(),e?.getGestures()?.isPointerDown()&&function(){if(!v()||!e||!s||!p)return;let t=s.getTween(),n=s.getPages(),i=e.getPageIndex()||0,o=e.getPageProgress()||0;if(!e||!n||!n[i]||!t)return;let r=t.isRunning()?t.getCurrentValues().pos:s.getPosition();if(void 0===r)return;let l=n[i].pos+o*(u-g);l=function(e=0,t=0,n=0){return Math.max(Math.min(t,n),e)}(n[0].pos,l,n[n.length-1].pos),t.from({pos:r}).to({pos:l}).start()}()}function A(){p=!0,_()}function I(e,t){let n={html:x(t)};if(s)s.add(n,t.index);else if(c){let e=r(E(n));if(e){c.append(e);let t=e.querySelector("img");t&&f?.observe(t)}}}function j(e,t){s?s.remove(t.index):c&&c.querySelector(`[index="${t.index}"]`)?.remove()}function $(e,t){let n=t.target;!t.defaultPrevented&&n?.dataset?.thumbsAction==="toggle"&&(d||(w(!0),T(),z()),d&&d.classList.toggle("is-hidden"))}function H(){_()}function _(t=!1){if(!e||!c||!L())return;let n=e.getPageIndex();c.querySelectorAll(".is-selected").forEach(e=>{e.classList.remove("is-selected")});let i=c.querySelector(`[index="${n}"]`);if(i){i.classList.add("is-selected");let e=c.getBoundingClientRect(),n=i.getBoundingClientRect(),o=i.offsetTop-c.offsetTop-.5*e.height+.5*n.height,r=i.scrollLeft-c.scrollLeft-.5*e.width+.5*n.width;c.scrollTo({top:o,left:r,behavior:t?"instant":"smooth"})}}function k(){if(!v()||!e||!s)return;let t=s?.getSlides()||[],n=-.5*u;for(let i of t){let t=i.el;if(!t)continue;let o=e.getPageProgress(i.index)||0;(o=Math.max(-1,Math.min(1,o)))>-1&&o<1&&(n+=.5*u*(1-Math.abs(o))),o=Math.round(1e4*o)/1e4,n=Math.round(1e4*n)/1e4,t.style.setProperty("--progress",`${Math.abs(o)}`),t.style.setProperty("--shift",`${e?.isRTL()?-1*n:n}px`),o>-1&&o<1&&(n+=.5*u*(1-Math.abs(o)))}}return{init:function(n,i){t=i,(e=n).on("ready",O),e.on("initSlides",C),e.on("change",A)},destroy:function(){L()&&e?.emit("thumbs:destroy"),e?.off("ready",O),e?.off("initSlides",C),e?.off("change",A),e?.off("render",M),e?.off("addSlide",I),e?.off("click",$),e?.off("refresh",H),e?.getGestures()?.off("start",P),e?.getContainer()?.classList.remove("has-thumbs"),e=void 0,s?.destroy(),s=void 0,d?.remove(),d=void 0},getCarousel:function(){return s},getContainer:function(){return d},getType:function(){return y("type")},isEnabled:b}}});