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

Robust JavaScript UI Component Library

/*! License details at fancyapps.com/license */
import{isPlainObject as t}from"../utils/isPlainObject.js";import{extend as e}from"../utils/extend.js";import{replaceAll as n}from"../utils/replaceAll.js";import{clamp as i}from"../utils/clamp.js";import{Sync as o}from"./carousel.sync.js";import{Lazyload as l}from"./carousel.lazyload.js";import{addClass as s}from"../utils/addClass.js";const r={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"};let u;const a=()=>{let a,d,c,f=0,m=0,g=!0;function h(e){const n=null==a?void 0:a.getOptions().Thumbs;let i=(t(n)?Object.assign(Object.assign({},r),n):r)[e];return i&&"function"==typeof i?i():i}function v(){if(!a)return!1;if(!1===(null==a?void 0:a.getOptions().Thumbs))return!1;let t=0;for(const e of a.getSlides())e.thumbSrc&&t++;return t>=h("minCount")}function p(){return"modern"===h("type")}function b(t=!1){var e;const n=null==a?void 0:a.getContainer();if(!a||!n||c)return;if(!v())return;if(!c){const t=n.nextElementSibling;(null==t?void 0:t.classList.contains("f-thumbs"))&&(c=t)}if(!c){c=document.createElement("div");const t=h("parentEl");t?t.insertAdjacentElement("beforeend",c):n.insertAdjacentElement("afterend",c)}const i=null===(e=h("Carousel"))||void 0===e?void 0:e.classes;(null==i?void 0:i.container)&&s(c,i.container),s(c,"f-thumbs"),s(c,`is-${h("type")}`),s(c,"is-syncing"),t&&(c.style.maxHeight="0px")}function y(t){let e=t.thumb?t.thumb instanceof HTMLImageElement?t.thumb.src:t.thumb:t.thumbSrc||void 0,i=h("thumbTpl");return i=n(i,"{{alt}}",`Thumbnail #${t.index}`),i=n(i,"{{src}}",e+""),i=n(i,"{{index}}",`${t.index}`),i=n(i,"{{page}}",`${t.index||1}`),{html:i,class:t.thumbClass}}function x(){var t;if(!u)return;if(!a||!c||d)return;const n=[];for(const t of a.getSlides())n.push(y(t));n.length&&(d=u(c,e({},{Sync:{target:a},Lazyload:{preload:1},slides:n,classes:{container:"f-thumbs",viewport:"f-thumbs__viewport",slide:"f-thumbs__slide"},initialSlide:a.getOptions().initialPage,center:!0,fill:!p(),infinite:!1,dragFree:!0,rtl:a.getOptions().rtl||!1,slidesPerPage:t=>{let e=0;return p()&&(!function(){if(!p())return;if(!c)return;const t=t=>c&&parseFloat(getComputedStyle(c).getPropertyValue("--f-thumb-"+t))||0;f=t("width"),m=t("clip-width")}(),e=4*(f-m)),t&&t.getTotalSlideDim()<=t.getViewportDim()-e?1/0:1}},r.Carousel||{},h("Carousel")||{}),{Sync:o,Lazyload:l}).init(),null===(t=d.getGestures())||void 0===t||t.on("start",(()=>{g=!1})),d.on("click",((t,e)=>{const n=e.target;if(n){const t=n.matches("button")?n:n.firstElementChild;t&&t.matches("button")&&(e.preventDefault(),t.focus({}))}})),s(a.getContainer(),"has-thumbs"),T())}function P(){var t;v()&&(h("showOnStart")&&(b(),x()),null===(t=null==a?void 0:a.getGestures())||void 0===t||t.on("start",S),null==a||a.on("addSlide",w),null==a||a.on("click",E))}function S(){var t,e;g=!0;(null===(t=document.activeElement)||void 0===t?void 0:t.closest(".f-thumbs"))&&(null===(e=document.activeElement)||void 0===e||e.blur())}function C(){var t,e;null==c||c.classList.toggle("is-syncing",!1===(null==a?void 0:a.hasNavigated())||(null===(t=null==a?void 0:a.getTween())||void 0===t?void 0:t.isRunning())),T(),(null===(e=null==a?void 0:a.getGestures())||void 0===e?void 0:e.isPointerDown())&&function(){if(!p())return;if(!a||!d)return;if(!g)return;const t=d.getTween(),e=d.getPages(),n=a.getPageIndex()||0,o=a.getPageProgress()||0;if(!(a&&e&&e[n]&&t))return;const l=t.isRunning()?t.getCurrentValues().pos:d.getPosition();if(void 0===l)return;let s=e[n].pos+o*(f-m);s=i(e[0].pos,s,e[e.length-1].pos),t.from({pos:l}).to({pos:s}).start()}()}function j(){g=!0}function w(t,e){null==d||d.add(y(e),e.index)}function E(t,e){const n=e.target;n&&!e.defaultPrevented&&"toggle"===n.dataset.thumbsAction&&function(){if(c||(b(!0),x()),!c)return;const t=(null==d?void 0:d.isVertical())?"maxWidth":"maxHeight",e=c.style[t];c.style[t]=e?"":"0px"}()}function T(){if(!p())return;if(!a||!d)return;const t=(null==d?void 0:d.getSlides())||[];let e=-.5*f;for(const n of t){const t=n.el;if(!t)continue;let i=a.getPageProgress(n.index)||0;i=Math.max(-1,Math.min(1,i)),i>-1&&i<1&&(e+=.5*f*(1-Math.abs(i))),i=Math.round(1e4*i)/1e4,e=Math.round(1e4*e)/1e4,t.style.setProperty("--progress",`${Math.abs(i)}`),t.style.setProperty("--shift",`${(null==a?void 0:a.isRTL())?-1*e:e}px`),i>-1&&i<1&&(e+=.5*f*(1-Math.abs(i)))}}return{init:function(t,e){u=e,a=t,a.on("ready",P),a.on("render",C),a.on("change",j)},destroy:function(){var t,e;null==a||a.off("ready",P),null==a||a.off("render",C),null==a||a.off("change",j),null==a||a.off("addSlide",w),null==a||a.off("click",E),null===(t=null==a?void 0:a.getGestures())||void 0===t||t.off("start",S),null===(e=null==a?void 0:a.getContainer())||void 0===e||e.classList.remove("has-thumbs"),a=void 0,null==d||d.destroy(),d=void 0,null==c||c.remove(),c=void 0},getContainer:function(){return c},isEnabled:function(){return v()}}};export{a as Thumbs};