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

Robust JavaScript UI Component Library

/*! License details at fancyapps.com/license */
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.window=e.window||{}))})(this,function(e){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});let t=e=>typeof e==`object`&&!!e&&e.constructor===Object&&Object.prototype.toString.call(e)===`[object Object]`,n=(e,...r)=>{let i=r.length;for(let a=0;a<i;a++){let i=r[a]||{};Object.entries(i).forEach(([r,i])=>{let a=Array.isArray(i)?[]:{};e[r]||Object.assign(e,{[r]:a}),t(i)?Object.assign(e[r],n(e[r],i)):Array.isArray(i)?Object.assign(e,{[r]:[...i]}):Object.assign(e,{[r]:i})})}return e},r=function(e=``,t=``,n=``){return e.split(t).join(n)},i=function(e=0,t=0,n=0){return Math.max(Math.min(t,n),e)},a=function(e){var t=new DOMParser().parseFromString(e,`text/html`).body;if(t.childElementCount>1){for(var n=document.createElement(`div`);t.firstChild;)n.appendChild(t.firstChild);return n}let r=t.firstChild;if(r&&!(r instanceof HTMLElement)){var n=document.createElement(`div`);return n.appendChild(r),n}return r},o={syncOnChange:!1,syncOnClick:!0,syncOnHover:!1},s=()=>{let e,n;function r(){let n=e?.getOptions().Sync;return t(n)?{...o,...n}:o}function i(t){!e||!t||(n=t,e.getOptions().classes={...e.getOptions().classes,isSelected:``},e.getOptions().initialSlide=n.getPage()?.slides[0]?.index||0,r().syncOnChange&&e.on(`change`,u),r().syncOnClick&&e.on(`click`,f),r().syncOnHover&&e.getViewport()?.addEventListener(`mouseover`,p),a())}function a(){!e||!n||(e.on(`ready`,l),e.on(`refresh`,m),n.on(`change`,d),n.on(`filter`,h))}function s(){e?.off(`ready`,l),e?.off(`refresh`,m),e?.off(`change`,u),e?.off(`click`,f),e?.getViewport()?.removeEventListener(`mouseover`,p),n?.off(`change`,d),n?.off(`filter`,h),n=void 0}function c(){let t=r().target;e&&t&&i(t)}function l(){g()}function u(){if(e&&n){let t=e.getPage()?.slides||[],r=n.getPageIndex(t[0].index||0);r>-1&&n.goTo(r,e.hasNavigated()?void 0:{tween:!1,transition:!1}),g()}}function d(){if(e&&n){let t=e.getPageIndex(n.getPage()?.slides[0].index||0);t>-1&&e.goTo(t,n.hasNavigated()?void 0:{tween:!1,transition:!1}),g()}}function f(t,r){if(!e||!n||e.getTween()?.isRunning())return;let i=e?.getOptions().classes.slide;if(!i)return;let a=r.target.closest(`.${i}`);if(a){let e=parseInt(a.getAttribute(`index`)||``)||0,t=n.getPageIndex(e);n.goTo(t)}}function p(t){e&&f(e,t)}function m(){if(e&&n){let t=e.getPageIndex(n.getPage()?.slides[0].index||0);t>-1&&e.goTo(t,{tween:!1,transition:!1}),g()}}function h(t,r){e&&n&&(e.filter(r),d())}function g(){if(!n)return;let t=n.getPage()?.slides[0]?.index||0;for(let n of e?.getSlides()||[])n.el?.classList.toggle(`is-selected`,n.index===t)}return{init:function(t){e=t,e.on(`initSlides`,c)},destroy:function(){s(),e?.off(`initSlides`,c),e=void 0},getTarget:function(){return n}}},c=(e,t=``)=>{e&&e.classList&&t.split(` `).forEach(t=>{t&&e.classList.add(t)})},l=(e,t=``)=>{e&&e.classList&&t.split(` `).forEach(t=>{t&&e.classList.remove(t)})},u={showLoading:!0,preload:1},d=`is-lazyloading`,f=`is-lazyloaded`,p=`has-lazyerror`,m=()=>{let e;function n(){let n=e?.getOptions().Lazyload;return t(n)?{...u,...n}:u}function r(t){let r=t.el;if(!r)return;let i=n(),a=`[data-lazy-src],[data-lazy-srcset],[data-lazy-bg]`,o=Array.from(r.querySelectorAll(a));r.matches(a)&&o.push(r);for(let n of o){let r=n.dataset.lazySrc,a=n.dataset.lazySrcset,o=n.dataset.lazySizes,s=n.dataset.lazyBg,u=(n instanceof HTMLImageElement||n instanceof HTMLSourceElement)&&(r||a),m=!!s;if(!(u||m))continue;let h=r||a||s;if(h){if(u){let s=n.parentElement?.classList.contains(`f-panzoom__wrapper`);i.showLoading&&e?.showLoading(t),n.addEventListener(`load`,()=>{e?.hideLoading(t),l(n,p),n instanceof HTMLImageElement?n.decode().finally(()=>{l(n,d),c(n,f)}).catch(()=>void 0):(l(n,d),c(n,f)),s||e?.emit(`lazyLoad:loaded`,t,n,h)}),n.addEventListener(`error`,()=>{e?.hideLoading(t),l(n,d),c(n,p),s||e?.emit(`lazyLoad:error`,t,n,h)}),n.classList.add(`f-lazyload`),n.classList.add(d),s||e?.emit(`lazyLoad:load`,t,n,h),r&&(n.src=r),a&&(n.srcset=a),o&&(n.sizes=o)}else m&&(n.style.backgroundImage=`url('${s}')`);delete n.dataset.lazySrc,delete n.dataset.lazySrcset,delete n.dataset.lazySizes,delete n.dataset.lazyBg}}}function i(){if(!e)return;let t=[...e.getVisibleSlides()],i=n().preload;if(i>0){let n=e.getPosition(),r=e.getViewportDim();t.push(...e.getVisibleSlides(n+r*i),...e.getVisibleSlides(n-r*i))}for(let e of t)r(e)}return{init:function(t){e=t,e.on(`render`,i)},destroy:function(){e?.off(`render`,i),e=void 0}}},h={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`},g;e.Thumbs=()=>{let e,o,l,u,d=0,f=0,p=!0,_;function v(n){let r=e?.getOptions().Thumbs,i=(t(r)?{...h,...r}:h)[n];return i&&typeof i==`function`&&e?i(e):i}function y(){if(!e||e?.getOptions().Thumbs===!1)return!1;let t=0;for(let n of e.getSlides())n.thumbSrc&&t++;return t>=v(`minCount`)}function b(){return v(`type`)===`modern`}function x(){return v(`type`)===`scrollable`}function S(){let t=[],n=e?.getSlides()||[];for(let e of n)t.push({index:e.index,class:e.thumbClass,html:C(e)});return t}function C(e){let t=e.thumb?e.thumb instanceof HTMLImageElement?e.thumb.src:e.thumb:e.thumbSrc||void 0,n=e.thumbAlt===void 0?`Thumbnail #${(e.index||0)+1}`:e.thumbAlt+``,i=v(`thumbTpl`);return i=r(i,`{{alt}}`,n),i=r(i,`{{src}}`,t+``),i=r(i,`{{index}}`,`${e.index||0}`),i=r(i,`{{page}}`,`${(e.index||0)+1}`),i}function w(e){return`<div index="${e.index||0}" class="f-thumbs__slide ${e.class||``}">${e.html||``}</div>`}function T(t=!1){let n=e?.getContainer();if(!e||!n||l||!y())return;let r=v(`Carousel`)?.classes||{};if(r.container=r.container||`f-thumbs`,!l){let e=n.nextElementSibling;e?.classList.contains(r.container)&&(l=e)}if(!l){l=document.createElement(`div`);let e=v(`parentEl`);e?e.insertAdjacentElement(`beforeend`,l):n.insertAdjacentElement(`afterend`,l)}c(l,r.container),c(l,`f-thumbs`),c(l,`is-${v(`type`)}`),t&&c(l,`is-hidden`)}function E(){if(!l||!x())return;u=document.createElement(`div`),c(u,`f-thumbs__viewport`);let t=``;for(let e of S())typeof(e.html||``)==`string`&&(t+=w(e));u.innerHTML=t,l.append(u),l.addEventListener(`click`,t=>{t.preventDefault();let n=t.target.closest(`[index]`),r=parseInt(n?.getAttribute(`index`)||`-1`);e&&r>-1&&e.goTo(r)}),_=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&e.target instanceof HTMLImageElement&&(e.target.src=e.target.getAttribute(`data-lazy-src`)+``,e.target.removeAttribute(`data-lazy-src`),_?.unobserve(e.target))})},{root:u,rootMargin:`100px`}),l.querySelectorAll(`[data-lazy-src]`).forEach(e=>{_?.observe(e)}),e?.emit(`thumbs:ready`)}function D(){if(!g||!e||!l||x()||o)return;let t=S();if(!t.length)return;let r=n({},{Sync:{target:e},Lazyload:{preload:1},slides:t,classes:{container:`f-thumbs`,viewport:`f-thumbs__viewport`,slide:`f-thumbs__slide`},center:!0,fill:!b(),infinite:!1,dragFree:!0,rtl:e.getOptions().rtl||!1,slidesPerPage:e=>{let t=0;return b()&&(z(),t=(d-f)*4),e&&e.getTotalSlideDim()<=e.getViewportDim()-t?1/0:1}},h.Carousel||{},v(`Carousel`)||{});o=g(l,r,{Sync:s,Lazyload:m}),o.on(`ready`,()=>{c(l,`is-syncing`),e?.emit(`thumbs:ready`),b()&&e?.on(`render`,M)}),o.on(`destroy`,()=>{e?.emit(`thumbs:destroy`)}),o.init(),o.getGestures()?.on(`start`,()=>{p=!1}),o.on(`click`,(e,t)=>{let n=t.target;if(n){let e=n.matches(`button`)?n:n.firstElementChild;e&&e.matches(`button`)&&(t.preventDefault(),e.focus({preventScroll:!0}))}}),c(e.getContainer(),`has-thumbs`),V()}function O(){l||(T(!0),E(),D()),l&&l.classList.toggle(`is-hidden`)}function k(){y()&&v(`showOnStart`)&&(T(),E())}function A(){y()&&(D(),e?.on(`addSlide`,P),e?.on(`removeSlide`,F),e?.on(`click`,I),e?.on(`refresh`,L),e?.getGestures()?.on(`start`,j),R(!0))}function j(){p=!0,document.activeElement?.closest(`.f-thumbs`)&&document.activeElement?.blur()}function M(){l?.classList.toggle(`is-syncing`,e?.hasNavigated()===!1||e?.getTween()?.isRunning()),V(),e?.getGestures()?.isPointerDown()&&B()}function N(){p=!0,R()}function P(e,t){let n={html:C(t)};if(o)o.add(n,t.index);else if(u){let e=a(w(n));if(e){u.append(e);let t=e.querySelector(`img`);t&&_?.observe(t)}}}function F(e,t){o?o.remove(t.index):u&&u.querySelector(`[index="${t.index}"]`)?.remove()}function I(e,t){let n=t.target;!t.defaultPrevented&&n?.dataset?.thumbsAction===`toggle`&&O()}function L(){R()}function R(t=!1){if(!e||!u||!x())return;let n=e.getPageIndex();u.querySelectorAll(`.is-selected`).forEach(e=>{e.classList.remove(`is-selected`)});let r=u.querySelector(`[index="${n}"]`);if(r){r.classList.add(`is-selected`);let e=u.getBoundingClientRect(),n=r.getBoundingClientRect(),i=r.offsetTop-u.offsetTop-e.height*.5+n.height*.5,a=r.scrollLeft-u.scrollLeft-e.width*.5+n.width*.5;u.scrollTo({top:i,left:a,behavior:t?`instant`:`smooth`})}}function z(){if(!b()||!l)return;let e=e=>l&&parseFloat(getComputedStyle(l).getPropertyValue(`--f-thumb-`+e))||0;d=e(`width`),f=e(`clip-width`)}function B(){if(!b()||!e||!o||!p)return;let t=o.getTween(),n=o.getPages(),r=e.getPageIndex()||0,a=e.getPageProgress()||0;if(!e||!n||!n[r]||!t)return;let s=t.isRunning()?t.getCurrentValues().pos:o.getPosition();if(s===void 0)return;let c=n[r].pos+a*(d-f);c=i(n[0].pos,c,n[n.length-1].pos),t.from({pos:s}).to({pos:c}).start()}function V(){if(!b()||!e||!o)return;let t=o?.getSlides()||[],n=d*-.5;for(let r of t){let t=r.el;if(!t)continue;let i=e.getPageProgress(r.index)||0;i=Math.max(-1,Math.min(1,i)),i>-1&&i<1&&(n+=d*.5*(1-Math.abs(i))),i=Math.round(i*1e4)/1e4,n=Math.round(n*1e4)/1e4,t.style.setProperty(`--progress`,`${Math.abs(i)}`),t.style.setProperty(`--shift`,`${e?.isRTL()?n*-1:n}px`),i>-1&&i<1&&(n+=d*.5*(1-Math.abs(i)))}}return{init:function(t,n){g=n,e=t,e.on(`ready`,A),e.on(`initSlides`,k),e.on(`change`,N)},destroy:function(){x()&&e?.emit(`thumbs:destroy`),e?.off(`ready`,A),e?.off(`initSlides`,k),e?.off(`change`,N),e?.off(`render`,M),e?.off(`addSlide`,P),e?.off(`click`,I),e?.off(`refresh`,L),e?.getGestures()?.off(`start`,j),e?.getContainer()?.classList.remove(`has-thumbs`),e=void 0,o?.destroy(),o=void 0,l?.remove(),l=void 0},getCarousel:function(){return o},getContainer:function(){return l},getType:function(){return v(`type`)},isEnabled:y}}});