@fancyapps/ui
Version:
Robust JavaScript UI Component Library
3 lines (2 loc) • 3.32 kB
JavaScript
/*! 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 l(e,o){const n=null==s?void 0:s.getOptions().Zoomable;let i=(t(n)?Object.assign(Object.assign({},a),n):a)[e];return i&&"function"==typeof i&&o?i(o):i}function c(){s&&!1!==s.getOptions().Zoomable&&(s.on("addSlide",f),s.on("removeSlide",u),s.on("attachSlideEl",g),s.on("click",d),s.on("change",r),s.on("ready",r))}function r(){m();const t=(null==s?void 0:s.getVisibleSlides())||[];if(t.length>1||"slide"===(null==s?void 0:s.getOption("transition")))for(const e of t){const t=e.panzoomRef;t&&((null==s?void 0:s.getPage().slides)||[]).indexOf(e)<0&&t.execute(i.ZoomTo,Object.assign({},t.getStartPosition()))}}function d(t,e){const o=e.target;o&&!e.defaultPrevented&&o.dataset.panzoomAction&&p(o.dataset.panzoomAction)}function f(t,i){const a=i.el;if(!s||!a||i.panzoomRef)return;const c=i.src||i.lazySrc||"",r=i.alt||i.caption||`Image #${i.index}`,d=i.srcset||i.lazySrcset||"",f=i.sizes||i.lazySizes||"";if(c&&e(c)&&!i.html&&(!i.type||"image"===i.type)){i.type="image",i.thumbSrc=i.thumbSrc||c;let t=l("tpl",i);t=o(t,"{{src}}",c+""),t=o(t,"{{srcset}}",d+""),t=o(t,"{{sizes}}",f+""),a.insertAdjacentHTML("afterbegin",t)}const u=a.querySelector(".f-panzoom__content");if(!u)return;u.setAttribute("alt",r+"");const g=i.width&&"auto"!==i.width?parseFloat(i.width+""):"auto",p=i.height&&"auto"!==i.height?parseFloat(i.height+""):"auto",z=n(a,Object.assign({width:g,height:p,classes:{container:"f-zoomable"},event:()=>null==s?void 0:s.getLastMouseMove(),spinnerTpl:()=>(null==s?void 0:s.getOption("spinnerTpl"))||""},l("Panzoom")));z.on("*",((t,e,...o)=>{s&&("loading"===e&&(i.state=0),"loaded"===e&&(i.state=1),"error"===e&&(i.state=2,null==s||s.showError(i,"{{IMAGE_ERROR}}")),s.emit(`panzoom:${e}`,i,...o),"ready"===e&&s.emit("contentReady",i),i.index===(null==s?void 0:s.getPageIndex())&&m())})),i.panzoomRef=z}function u(t,e){e.panzoomRef&&(e.panzoomRef.destroy(),e.panzoomRef=void 0)}function g(t,e){const o=e.panzoomRef;if(o)switch(o.getState()){case 0:o.init();break;case 3:o.execute(i.ZoomTo,Object.assign(Object.assign({},o.getStartPosition()),{velocity:0}))}}function m(){var t,e;const o=(null==s?void 0:s.getContainer())||void 0,n=null===(e=null===(t=null==s?void 0:s.getPage())||void 0===t?void 0:t.slides[0])||void 0===e?void 0:e.panzoomRef;if(o)if(n)n.updateControls(o);else for(const t of o.querySelectorAll("[data-panzoom-action]")||[])t.setAttribute("aria-disabled",""),t.setAttribute("tabindex","-1")}function p(t,...e){var o;null===(o=null==s?void 0:s.getPage().slides[0].panzoomRef)||void 0===o||o.execute(t,...e)}return{init:function(t){s=t,s.on("initPlugins",c)},destroy:function(){if(s){s.off("initPlugins",c),s.off("addSlide",f),s.off("removeSlide",u),s.off("attachSlideEl",g),s.off("click",d),s.off("change",r),s.off("ready",r);for(const t of s.getSlides())u(0,t)}s=void 0},execute:p}};export{s as Zoomable};