@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,d,c=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&&!d&&h()){if(!d){const t=e.nextElementSibling;(null==t?void 0:t.classList.contains("f-thumbs"))&&(d=t)}if(!d){d=document.createElement("div"),d.classList.add("f-thumbs");const t=m("parentEl");t?t.insertAdjacentElement("beforeend",d):e.insertAdjacentElement("afterend",d)}d.classList.add(`is-${m("type")}`),d.classList.add("is-syncing"),t&&(d.style.maxHeight="0px")}}function b(t){let e=t.thumb?t.thumb instanceof HTMLImageElement?t.thumb.src:t.thumb:t.thumbSrc||void 0,i=m("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 y(){var t,n;if(!r)return;if(!u||!d||a)return;const i=[];for(const t of u.getSlides())i.push(b(t));i.length&&(a=r(d,e({},{Sync:{target:u},Lazyload:{preload:1},slides:i,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(!d)return;const t=t=>d&&parseFloat(getComputedStyle(d).getPropertyValue("--f-thumb-"+t))||0;c=t("width"),f=t("clip-width")}(),e=4*(c-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===(n=u.getContainer())||void 0===n||n.classList.add("has-thumbs"),w())}function x(){var t;h()&&(m("showOnStart")&&(v(),y()),null===(t=null==u?void 0:u.getGestures())||void 0===t||t.on("start",P),null==u||u.on("addSlide",L))}function P(){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 S(){var t,e;null==d||d.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())),w(),(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*(c-f);l=i(e[0].pos,l,e[e.length-1].pos),t.from({pos:s}).to({pos:l}).start()}()}function C(){g=!0}function L(t,e){null==a||a.add(b(e),e.index)}function j(t,e){const n=e.target;n&&!e.defaultPrevented&&"toggle"===n.dataset.thumbsAction&&function(){if(d||(v(!0),y()),!d)return;const t=d.style.maxHeight;d.style.maxHeight=t?"":"0px"}()}function w(){if(!p())return;if(!u||!a)return;const t=(null==a?void 0:a.getSlides())||[];let e=-.5*c;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*c*(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*c*(1-Math.abs(i)))}}return{init:function(t,e){r=e,u=t,u.on("ready",x),u.on("render",S),u.on("change",C)},destroy:function(){var t,e;null==u||u.off("ready",x),null==u||u.off("render",S),null==u||u.off("change",C),null==u||u.off("addSlide",L),null==u||u.off("click",j),null===(t=null==u?void 0:u.getGestures())||void 0===t||t.off("start",P),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==d||d.remove(),d=void 0},getContainer:function(){return d},isEnabled:function(){return h()}}};export{u as Thumbs};