UNPKG

@fancyapps/ui

Version:

Robust JavaScript UI Component Library

3 lines (2 loc) 3.25 kB
/*! 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 a}from"../panzoom/panzoom.js";const i={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 a=(e(n)?Object.assign(Object.assign({},i),n):i)[t];return a&&"function"==typeof a&&o?a(o):a}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(e,t){const o=t.target;o&&!t.defaultPrevented&&o.dataset.panzoomAction&&p(o.dataset.panzoomAction)}function u(e,a){if(!s)return;const i=a.el;if(!i)return;const c=a.src||a.lazySrc||"",r=a.srcset||a.lazySrcset||"",d=a.sizes||a.lazySizes||"";if(c&&t(c)&&!a.html&&(!a.type||"image"===a.type)){a.type="image";let e=l("tpl",a);e=o(e,"{{src}}",c+""),e=o(e,"{{srcset}}",r+""),e=o(e,"{{sizes}}",d+""),e=o(e,"{{alt}}",`${a.alt||a.caption||`Image #${a.index}`}`),i.insertAdjacentHTML("afterbegin",e)}if(!i.querySelector(".f-panzoom__content"))return;const u=a.width&&"auto"!==a.width?parseFloat(a.width+""):"auto",f=a.height&&"auto"!==a.height?parseFloat(a.height+""):"auto",m=n(i,Object.assign({width:u,height:f,event:()=>null==s?void 0:s.getLastMouseMove(),classes:{container:"f-zoomable"}},l("Panzoom")));m.on("*",((e,t,...o)=>{s&&("loading"===t&&(a.state=0),"loaded"===t&&(a.state=1),"error"===t&&(a.state=2,null==s||s.showError(a,"{{IMAGE_ERROR}}")),s.emit(`panzoom:${t}`,a,...o),"ready"===t&&s.emit("contentReady",a),a.index===s.getPageIndex()&&g())})),a.panzoomRef=m}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(a.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,i=(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 e of(null==t?void 0:t.querySelectorAll("[data-panzoom-action]"))||[]){const t=e.dataset.panzoomAction;let o=!1;if(c)o=!0;else switch(t){case a.ZoomIn:n||(o=!0);break;case a.ZoomOut:i||(o=!0);break;case a.ToggleFull:n||i||(o=!0);const t=e.querySelector("g");t&&(t.style.display=l?"none":"");break;case a.ToggleCover:case a.ToggleMax:n||i||(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",c)},destroy:function(){if(s){s.off("addSlide",u),s.off("removeSlide",f),s.off("attachSlideEl",m),s.off("change",r);for(const e of s.getSlides())f(0,e)}s=void 0},execute:p}};export{s as Zoomable};