@fancyapps/ui
Version:
Robust JavaScript UI Component Library
3 lines (2 loc) • 3.42 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&&(s.on("addSlide",u),s.on("removeSlide",f),s.on("attachSlideEl",m),s.on("click",d),s.on("change",r))}function r(){g()}function d(t,e){const o=e.target;o&&!e.defaultPrevented&&o.dataset.panzoomAction&&p(o.dataset.panzoomAction)}function u(t,i){if(!s)return;const a=i.el;if(!a)return;const c=i.src||i.lazySrc||"",r=i.alt||i.caption||`Image #${i.index}`,d=i.srcset||i.lazySrcset||"",u=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,"{{alt}}",r+""),t=o(t,"{{srcset}}",d+""),t=o(t,"{{sizes}}",u+""),a.insertAdjacentHTML("afterbegin",t)}if(!a.querySelector(".f-panzoom__content"))return;const f=i.width&&"auto"!==i.width?parseFloat(i.width+""):"auto",m=i.height&&"auto"!==i.height?parseFloat(i.height+""):"auto",p=n(a,Object.assign({width:f,height:m,classes:{container:"f-zoomable"},event:()=>null==s?void 0:s.getLastMouseMove(),spinnerTpl:()=>(null==s?void 0:s.getOption("spinnerTpl"))||""},l("Panzoom")));p.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())&&g())})),i.panzoomRef=p}function f(t,e){e.panzoomRef&&(e.panzoomRef.destroy(),e.panzoomRef=void 0)}function m(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 g(){var t;const e=null==s?void 0:s.getContainer();if(!e)return;const o=null===(t=null==s?void 0:s.getPage())||void 0===t?void 0:t.slides[0].panzoomRef,n=(null==o?void 0:o.canZoomIn())||!1,a=(null==o?void 0:o.canZoomOut())||!1,l=(null==o?void 0:o.isFullsize())||!1,c=!o||3!==(null==o?void 0:o.getState());for(const t of(null==e?void 0:e.querySelectorAll("[data-panzoom-action]"))||[]){const e=t.dataset.panzoomAction;let o=!1;if(c)o=!0;else switch(e){case i.ZoomIn:n||(o=!0);break;case i.ZoomOut:a||(o=!0);break;case i.ToggleFull:n||a||(o=!0);const e=t.querySelector("g");e&&(e.style.display=l?"none":"");break;case i.ToggleCover:case i.ToggleMax:n||a||(o=!0)}o?(t.setAttribute("aria-disabled",""),t.setAttribute("tabindex","-1")):(t.removeAttribute("aria-disabled"),t.removeAttribute("tabindex"))}}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,!1!==s.getOptions().Zoomable&&s.on("initPlugins",c)},destroy:function(){if(s){s.off("addSlide",u),s.off("removeSlide",f),s.off("attachSlideEl",m),s.off("click",d),s.off("change",r);for(const t of s.getSlides())f(0,t)}s=void 0},execute:p}};export{s as Zoomable};