@fancyapps/ui
Version:
Robust JavaScript UI Component Library
3 lines (2 loc) • 3.31 kB
JavaScript
/*! License details at fancyapps.com/license */
import{isPlainObject as e}from"../utils/isPlainObject.js";import{isString as t}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:e=>`<img class="f-panzoom__content" \n ${e.srcset?'data-lazy-srcset="{{srcset}}"':""} \n ${e.sizes?'data-lazy-sizes="{{sizes}}"':""} \n data-lazy-src="{{src}}" alt="{{alt}}" />`},s=()=>{let s;function l(t,o){const n=null==s?void 0:s.getOptions().Zoomable;let i=(e(n)?Object.assign(Object.assign({},a),n):a)[t];return i&&"function"==typeof i&&o?i(o):i}function r(){s&&(s.on("addSlide",u),s.on("removeSlide",f),s.on("attachSlideEl",m),s.on("click",d),s.on("change",c))}function c(){g()}function d(e,t){const o=t.target;o&&!t.defaultPrevented&&o.dataset.panzoomAction&&p(o.dataset.panzoomAction)}function u(e,i){if(!s)return;const a=i.el;if(!a)return;const r=i.src||i.lazySrc||"",c=i.alt||i.caption||`Image #${i.index}`,d=i.srcset||i.lazySrcset||"",u=i.sizes||i.lazySizes||"";if(r&&t(r)&&!i.html&&(!i.type||"image"===i.type)){i.type="image";let e=l("tpl",i);e=o(e,"{{src}}",r+""),e=o(e,"{{alt}}",c+""),e=o(e,"{{srcset}}",d+""),e=o(e,"{{sizes}}",u+""),a.insertAdjacentHTML("afterbegin",e)}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("*",((e,t,...o)=>{s&&("loading"===t&&(i.state=0),"loaded"===t&&(i.state=1),"error"===t&&(i.state=2,null==s||s.showError(i,"{{IMAGE_ERROR}}")),s.emit(`panzoom:${t}`,i,...o),"ready"===t&&s.emit("contentReady",i),i.index===s.getPageIndex()&&g())})),i.panzoomRef=p}function f(e,t){t.panzoomRef&&(t.panzoomRef.destroy(),t.panzoomRef=void 0)}function m(e,t){const o=t.panzoomRef;if(o)switch(o.getState()){case 0:o.init();break;case 3:o.execute(i.Reset,{velocity:0})}}function g(){var e;const t=null==s?void 0:s.getContainer();if(!t)return;const o=null===(e=null==s?void 0:s.getPage())||void 0===e?void 0:e.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,r=!o||3!==(null==o?void 0:o.getState());for(const e of(null==t?void 0:t.querySelectorAll("[data-panzoom-action]"))||[]){const t=e.dataset.panzoomAction;let o=!1;if(r)o=!0;else switch(t){case i.ZoomIn:n||(o=!0);break;case i.ZoomOut:a||(o=!0);break;case i.ToggleFull:n||a||(o=!0);const t=e.querySelector("g");t&&(t.style.display=l?"none":"");break;case i.ToggleCover:case i.ToggleMax:n||a||(o=!0)}o?(e.setAttribute("aria-disabled",""),e.setAttribute("tabindex","-1")):(e.removeAttribute("aria-disabled"),e.removeAttribute("tabindex"))}}function p(e,...t){var o;null===(o=null==s?void 0:s.getPage().slides[0].panzoomRef)||void 0===o||o.execute(e,...t)}return{init:function(e){s=e,!1!==s.getOptions().Zoomable&&s.on("initPlugins",r)},destroy:function(){if(s){s.off("addSlide",u),s.off("removeSlide",f),s.off("attachSlideEl",m),s.off("change",c);for(const e of s.getSlides())f(0,e)}s=void 0},execute:p}};export{s as Zoomable};