@fancyapps/ui/dist/carousel/carousel.zoomable.js

Robust JavaScript UI Component Library

/*! License details at fancyapps.com/license */
import{isPlainObject as t}from"../utils/isPlainObject.js";import{isString as e}from"../utils/isString.js";import{replaceAll as o}from"../utils/replaceAll.js";import{Panzoom as n,PanzoomAction as i}from"../panzoom/panzoom.js";const a={tpl:t=>`<img class="f-panzoom__content" \n    ${t.srcset?'data-lazy-srcset="{{srcset}}"':""} \n    ${t.sizes?'data-lazy-sizes="{{sizes}}"':""} \n    data-lazy-src="{{src}}" alt="{{alt}}" />`},s=()=>{let s;function c(e,o){const n=s?.getOptions().Zoomable;let i=(t(n)?{...a,...n}:a)[e];return i&&"function"==typeof i&&o?i(o):i}function r(){s&&!1!==s.getOptions().Zoomable&&(s.on("addSlide",d),s.on("removeSlide",m),s.on("attachSlideEl",p),s.on("click",f),s.on("change",l),s.on("ready",l))}function l(){u();const t=s?.getVisibleSlides()||[];if(t.length>1||"slide"===s?.getOption("transition"))for(const e of t){const t=e.panzoomRef;t&&(s?.getPage().slides||[]).indexOf(e)<0&&t.execute(i.ZoomTo,{...t.getStartPosition()})}}function f(t,e){const o=e.target;o&&!e.defaultPrevented&&o.dataset.panzoomAction&&g(o.dataset.panzoomAction)}function d(t,i){const a=i.el;if(!s||!a||i.panzoomRef)return;const r=i.src||i.lazySrc||"",l=i.alt||i.caption||`Image #${i.index}`,f=i.srcset||i.lazySrcset||"",d=i.sizes||i.lazySizes||"";if(r&&e(r)&&!i.html&&(!i.type||"image"===i.type)){i.type="image",i.thumbSrc=i.thumbSrc||r;let t=c("tpl",i);t=o(t,"{{src}}",r+""),t=o(t,"{{srcset}}",f+""),t=o(t,"{{sizes}}",d+""),a.insertAdjacentHTML("afterbegin",t)}const m=a.querySelector(".f-panzoom__content");if(!m)return;m.setAttribute("alt",l+"");const p=i.width&&"auto"!==i.width?parseFloat(i.width+""):"auto",g=i.height&&"auto"!==i.height?parseFloat(i.height+""):"auto",z=n(a,{width:p,height:g,classes:{container:"f-zoomable"},event:()=>s?.getLastMouseMove(),spinnerTpl:()=>s?.getOption("spinnerTpl")||"",...c("Panzoom")});z.on("*",(t,e,...o)=>{s&&("loading"===e&&(i.state=0),"loaded"===e&&(i.state=1),"error"===e&&(i.state=2,s?.showError(i,"{{IMAGE_ERROR}}")),s.emit(`panzoom:${e}`,i,...o),"loading"===e&&s.emit("contentLoading",i),"ready"===e&&s.emit("contentReady",i),i.index===s?.getPageIndex()&&u())}),i.panzoomRef=z}function m(t,e){e.panzoomRef&&(e.panzoomRef.destroy(),e.panzoomRef=void 0)}function p(t,e){const o=e.panzoomRef;if(o)switch(o.getState()){case 0:o.init();break;case 3:o.execute(i.ZoomTo,{...o.getStartPosition(),velocity:0})}}function u(){const t=s?.getContainer()||void 0,e=s?.getPage()?.slides[0]?.panzoomRef;if(t)if(e)e.updateControls(t);else for(const e of t.querySelectorAll("[data-panzoom-action]")||[])e.setAttribute("aria-disabled",""),e.setAttribute("tabindex","-1")}function g(t,...e){s?.getPage().slides[0].panzoomRef?.execute(t,...e)}return{init:function(t){s=t,s.on("initPlugins",r)},destroy:function(){if(s){s.off("initPlugins",r),s.off("addSlide",d),s.off("removeSlide",m),s.off("attachSlideEl",p),s.off("click",f),s.off("change",l),s.off("ready",l);for(const t of s.getSlides())m(0,t)}s=void 0},execute:g}};export{s as Zoomable};