@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 o}from"../utils/clamp.js";import{stringToHtml as i}from"../utils/strToHtml.js";import{Sync as l}from"./carousel.sync.js";import{Lazyload as r}from"./carousel.lazyload.js";import{addClass as s}from"../utils/addClass.js";const u={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 a;const c=()=>{let c,d,f,m,g,h=0,v=0,p=!0;function b(e){const n=null==c?void 0:c.getOptions().Thumbs;let o=(t(n)?Object.assign(Object.assign({},u),n):u)[e];return o&&"function"==typeof o&&c?o(c):o}function y(){if(!c)return!1;if(!1===(null==c?void 0:c.getOptions().Thumbs))return!1;let t=0;for(const e of c.getSlides())e.thumbSrc&&t++;return t>=b("minCount")}function x(){return"modern"===b("type")}function S(){return"scrollable"===b("type")}function C(){const t=[],e=(null==c?void 0:c.getSlides())||[];for(const n of e)t.push({index:n.index,class:n.thumbClass,html:T(n)});return t}function T(t){const e=t.thumb?t.thumb instanceof HTMLImageElement?t.thumb.src:t.thumb:t.thumbSrc||void 0,o=void 0===t.thumbAlt?`Thumbnail #${(t.index||0)+1}`:t.thumbAlt+"";let i=b("thumbTpl");return i=n(i,"{{alt}}",o),i=n(i,"{{src}}",e+""),i=n(i,"{{index}}",`${t.index||0}`),i=n(i,"{{page}}",`${(t.index||0)+1}`),i}function L(t){return`<div index="${t.index||0}" class="f-thumbs__slide ${t.class||""}">${t.html||""}</div>`}function E(t=!1){var e;const n=null==c?void 0:c.getContainer();if(!c||!n||f)return;if(!y())return;const o=(null===(e=b("Carousel"))||void 0===e?void 0:e.classes)||{};if(o.container=o.container||"f-thumbs",!f){const t=n.nextElementSibling;(null==t?void 0:t.classList.contains(o.container))&&(f=t)}if(!f){f=document.createElement("div");const t=b("parentEl");t?t.insertAdjacentElement("beforeend",f):n.insertAdjacentElement("afterend",f)}s(f,o.container),s(f,"f-thumbs"),s(f,`is-${b("type")}`),t&&s(f,"is-hidden")}function P(){if(!f||!S())return;m=document.createElement("div"),s(m,"f-thumbs__viewport");let t="";for(const e of C()){"string"==typeof(e.html||"")&&(t+=L(e))}m.innerHTML=t,f.append(m),f.addEventListener("click",(t=>{t.preventDefault();const e=t.target.closest("[index]"),n=parseInt((null==e?void 0:e.getAttribute("index"))||"-1");c&&n>-1&&c.goTo(n)})),g=new IntersectionObserver((t=>{t.forEach((t=>{t.isIntersecting&&t.target instanceof HTMLImageElement&&(t.target.src=t.target.getAttribute("data-lazy-src")+"",t.target.removeAttribute("data-lazy-src"),null==g||g.unobserve(t.target))}))}),{root:m,rootMargin:"100px"}),f.querySelectorAll("[data-lazy-src]").forEach((t=>{null==g||g.observe(t)})),null==c||c.emit("thumbs:ready")}function w(){var t;if(!a||!c||!f||S()||d)return;const n=C();if(!n.length)return;const o=e({},{Sync:{target:c},Lazyload:{preload:1},slides:n,classes:{container:"f-thumbs",viewport:"f-thumbs__viewport",slide:"f-thumbs__slide"},center:!0,fill:!x(),infinite:!1,dragFree:!0,rtl:c.getOptions().rtl||!1,slidesPerPage:t=>{let e=0;return x()&&(!function(){if(!x())return;if(!f)return;const t=t=>f&&parseFloat(getComputedStyle(f).getPropertyValue("--f-thumb-"+t))||0;h=t("width"),v=t("clip-width")}(),e=4*(h-v)),t&&t.getTotalSlideDim()<=t.getViewportDim()-e?1/0:1}},u.Carousel||{},b("Carousel")||{});d=a(f,o,{Sync:l,Lazyload:r}),d.on("ready",(()=>{s(f,"is-syncing"),null==c||c.emit("thumbs:ready"),x()&&(null==c||c.on("render",$))})),d.on("destroy",(()=>{null==c||c.emit("thumbs:destroy")})),d.init(),null===(t=d.getGestures())||void 0===t||t.on("start",(()=>{p=!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({preventScroll:!0}))}})),s(c.getContainer(),"has-thumbs"),R()}function j(){y()&&b("showOnStart")&&(E(),P())}function A(){var t;y()&&(w(),null==c||c.on("addSlide",z),null==c||c.on("removeSlide",_),null==c||c.on("click",I),null==c||c.on("refresh",q),null===(t=null==c?void 0:c.getGestures())||void 0===t||t.on("start",M),D(!0))}function M(){var t,e;p=!0;(null===(t=document.activeElement)||void 0===t?void 0:t.closest(".f-thumbs"))&&(null===(e=document.activeElement)||void 0===e||e.blur())}function $(){var t,e;null==f||f.classList.toggle("is-syncing",!1===(null==c?void 0:c.hasNavigated())||(null===(t=null==c?void 0:c.getTween())||void 0===t?void 0:t.isRunning())),R(),(null===(e=null==c?void 0:c.getGestures())||void 0===e?void 0:e.isPointerDown())&&function(){if(!x())return;if(!c||!d)return;if(!p)return;const t=d.getTween(),e=d.getPages(),n=c.getPageIndex()||0,i=c.getPageProgress()||0;if(!(c&&e&&e[n]&&t))return;const l=t.isRunning()?t.getCurrentValues().pos:d.getPosition();if(void 0===l)return;let r=e[n].pos+i*(h-v);r=o(e[0].pos,r,e[e.length-1].pos),t.from({pos:l}).to({pos:r}).start()}()}function O(){p=!0,D()}function z(t,e){const n={html:T(e)};if(d)d.add(n,e.index);else if(m){const t=i(L(n));if(t){m.append(t);const e=t.querySelector("img");e&&(null==g||g.observe(e))}}}function _(t,e){var n;d?d.remove(e.index):m&&(null===(n=m.querySelector(`[index="${e.index}"]`))||void 0===n||n.remove())}function I(t,e){var n;const o=e.target;e.defaultPrevented||"toggle"!==(null===(n=null==o?void 0:o.dataset)||void 0===n?void 0:n.thumbsAction)||(f||(E(!0),P(),w()),f&&f.classList.toggle("is-hidden"))}function q(){D()}function D(t=!1){if(!c||!m||!S())return;const e=c.getPageIndex();m.querySelectorAll(".is-selected").forEach((t=>{t.classList.remove("is-selected")}));const n=m.querySelector(`[index="${e}"]`);if(n){n.classList.add("is-selected");const e=m.getBoundingClientRect(),o=n.getBoundingClientRect(),i=n.offsetTop-m.offsetTop-.5*e.height+.5*o.height,l=n.scrollLeft-m.scrollLeft-.5*e.width+.5*o.width;m.scrollTo({top:i,left:l,behavior:t?"instant":"smooth"})}}function R(){if(!x())return;if(!c||!d)return;const t=(null==d?void 0:d.getSlides())||[];let e=-.5*h;for(const n of t){const t=n.el;if(!t)continue;let o=c.getPageProgress(n.index)||0;o=Math.max(-1,Math.min(1,o)),o>-1&&o<1&&(e+=.5*h*(1-Math.abs(o))),o=Math.round(1e4*o)/1e4,e=Math.round(1e4*e)/1e4,t.style.setProperty("--progress",`${Math.abs(o)}`),t.style.setProperty("--shift",`${(null==c?void 0:c.isRTL())?-1*e:e}px`),o>-1&&o<1&&(e+=.5*h*(1-Math.abs(o)))}}return{init:function(t,e){a=e,c=t,c.on("ready",A),c.on("initSlides",j),c.on("change",O)},destroy:function(){var t,e;S()&&(null==c||c.emit("thumbs:destroy")),null==c||c.off("ready",A),null==c||c.off("initSlides",j),null==c||c.off("change",O),null==c||c.off("render",$),null==c||c.off("addSlide",z),null==c||c.off("click",I),null==c||c.off("refresh",q),null===(t=null==c?void 0:c.getGestures())||void 0===t||t.off("start",M),null===(e=null==c?void 0:c.getContainer())||void 0===e||e.classList.remove("has-thumbs"),c=void 0,null==d||d.destroy(),d=void 0,null==f||f.remove(),f=void 0},getCarousel:function(){return d},getContainer:function(){return f},getType:function(){return b("type")},isEnabled:y}};export{c as Thumbs};