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