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