@fancyapps/ui/dist/panzoom/panzoom.js

Robust JavaScript UI Component Library

/*! License details at fancyapps.com/license */
import{isString as e}from"../utils/isString.js";import{isNode as t}from"../utils/isNode.js";import{getScrollableParent as n}from"../utils/getScrollableParent.js";import{stringToHtml as i}from"../utils/strToHtml.js";import{clamp as o}from"../utils/clamp.js";import{Tween as a}from"../libs/tween.js";import{getMidpoint as s,getChangedPosition as l,Gestures as r}from"../libs/gestures.js";import{en_EN as c}from"./l10n/en_EN.js";import{addClass as u}from"../utils/addClass.js";const f=e=>{e.cancelable&&e.preventDefault()},d=(e,t=1e4)=>(e=parseFloat(e+"")||0,Math.round((e+Number.EPSILON)*t)/t);var g,h;!function(e){e.Reset="reset",e.Zoom="zoom",e.ZoomIn="zoomIn",e.ZoomOut="zoomOut",e.ZoomTo="zoomTo",e.ToggleCover="toggleCover",e.ToggleFull="toggleFull",e.ToggleMax="toggleMax",e.IterateZoom="iterateZoom",e.Pan="pan",e.Swipe="swipe",e.Move="move",e.MoveLeft="moveLeft",e.MoveRight="moveRight",e.MoveUp="moveUp",e.MoveDown="moveDown",e.RotateCCW="rotateCCW",e.RotateCW="rotateCW",e.FlipX="flipX",e.FlipY="flipY"}(g||(g={})),function(e){e.Cover="cover",e.Full="full",e.Max="max"}(h||(h={}));const m={x:0,y:0,scale:1,angle:0,flipX:1,flipY:1},p={bounds:!0,classes:{container:"f-panzoom",wrapper:"f-panzoom__wrapper",content:"f-panzoom__content",viewport:"f-panzoom__viewport"},clickAction:g.ToggleFull,dblClickAction:!1,gestures:{},height:"auto",l10n:c,maxScale:4,minScale:1,mouseMoveFactor:1,panMode:"drag",protected:!1,singleClickAction:!1,spinnerTpl:'<div class="f-spinner"></div>',wheelAction:g.Zoom,width:"auto"};let v,b=0,y=0,x=0;const w=(c,h={},w={})=>{let M,E,T,k,L,j,O,A=0,C=Object.assign(Object.assign({},p),h),S={},F=Object.assign({},m),Z=Object.assign({},m);const X=[];function Y(e){let t=C[e];return t&&"function"==typeof t?t(de):t}const P=new Map;function I(e,...t){const n=P.get(e)||[];C.on&&n.push(C.on[e]);for(const e of n)e&&e instanceof Function&&e(de,...t);"*"!==e&&I("*",e,...t)}function R(e){if(3!==A)return;const t=e.target;if(n(t))return;const i=Date.now(),a=[-e.deltaX||0,-e.deltaY||0,-e.detail||0].reduce((function(e,t){return Math.abs(t)>Math.abs(e)?t:e})),s=o(-1,a,1);I("wheel",e,s);const l=Y("wheelAction");if(!l)return;if(e.defaultPrevented)return;const r=Z.scale;let c=r*(s>0?1.5:.5);if(l===g.Zoom){const t=Math.abs(e.deltaY)<100&&Math.abs(e.deltaX)<100;if(i-y<(t?200:45))return void f(e);y=i;const n=N(),a=J();if(d(c)<d(n)&&d(r)<=d(n)?(x+=Math.abs(s),c=n):d(c)>d(a)&&d(r)>=d(a)?(x+=Math.abs(s),c=a):(x=0,c=o(n,c,a)),x>7)return}switch(f(e),l){case g.Pan:te(l,{srcEvent:e,deltaX:2*-e.deltaX,deltaY:2*-e.deltaY});break;case g.Zoom:te(g.ZoomTo,{srcEvent:e,scale:c,center:{x:e.clientX,y:e.clientY}});break;default:te(l,{srcEvent:e})}}function z(e){var n,i;const o=e.composedPath()[0];if(!r.isClickAllowed())return;if(!t(o)||e.defaultPrevented)return;if(!(null==c?void 0:c.contains(o)))return;if(o.hasAttribute("disabled")||o.hasAttribute("aria-disabled"))return;const a=o.closest("[data-panzoom-action]"),s=null===(n=null==a?void 0:a.dataset)||void 0===n?void 0:n.panzoomAction,l=(null===(i=null==a?void 0:a.dataset)||void 0===i?void 0:i.panzoomValue)||"";if(s){switch(s){case g.ZoomTo:case g.ZoomIn:case g.ZoomOut:te(s,{scale:parseFloat(l||"")||void 0});break;case g.MoveLeft:case g.MoveRight:te(s,{deltaX:parseFloat(l||"")||void 0});break;case g.MoveUp:case g.MoveDown:te(s,{deltaY:parseFloat(l||"")||void 0});break;default:te(s)}return}if(!(null==M?void 0:M.contains(o)))return;const u={srcEvent:e};if(te(Y("clickAction"),u),Y("dblClickAction")){const e=Date.now(),t=e-(b||e);b=e,t>0&&t<=250?(v&&(clearTimeout(v),v=void 0),te(Y("dblClickAction"),u)):v=setTimeout((()=>{te(Y("singleClickAction"),u)}),250)}}function D(e){if(O=e,!$())return;if(3!==A||F.scale<=1||Z.scale<=1)return;if(((null==M?void 0:M.dataset.animationName)||"").indexOf("zoom")>-1)return;const t=_(Z.scale);if(!t)return;const{x:n,y:i}=t;te(g.Pan,{deltaX:n-Z.x,deltaY:i-Z.y})}function H(){var e;if(c&&(null===(e=c.querySelector(".f-spinner"))||void 0===e||e.remove(),c.classList.remove("is-loading")),!c||!M)return;if(E instanceof HTMLImageElement&&(!E.complete||!E.naturalWidth))return A=2,null==M||M.classList.add("has-error"),void I("error");I("loaded");const{width:t,height:n}=q();E&&(E.setAttribute("width",t+""),E.setAttribute("height",n+"")),M&&(M.classList.remove("has-error"),M.setAttribute("width",t+""),M.setAttribute("height",n+""),M.style.aspectRatio=`${t/n||""}`),L=a().on("start",((e,t)=>{Z=Object.assign(Object.assign({},m),t),void 0!==t.angle&&(t.angle=90*Math.round(t.angle/90)),void 0!==t.flipX&&(t.flipX=t.flipX>0?1:-1),void 0!==t.flipY&&(t.flipY=t.flipY>0?1:-1),ee(),I("animationStart")})).on("pause",(e=>{Z=Object.assign(Object.assign({},m),e)})).on("step",(e=>{if(3!==A)return;if(!L)return;if(!c||!c.parentElement)return void L.end();if(F=Object.assign(Object.assign({},m),e),$()||!Y("bounds")||(null==k?void 0:k.isPointerDown())||Z.scale>F.scale||Z.scale<V())return void ne();const t=K(Z.scale);let n=!1,i=!1,a=!1,s=!1;F.x<t.x[0]&&(n=!0),F.x>t.x[1]&&(i=!0),F.y<t.y[0]&&(s=!0),F.y>t.y[1]&&(a=!0);let l=!1,r=!1,u=!1,f=!1;Z.x<t.x[0]&&(l=!0),Z.x>t.x[1]&&(r=!0),Z.y<t.y[0]&&(f=!0),Z.y>t.y[1]&&(u=!0);let d=!1;(i&&r||n&&l)&&(Z.x=o(t.x[0],Z.x,t.x[1]),d=!0),(a&&u||s&&f)&&(Z.y=o(t.y[0],Z.y,t.y[1]),d=!0),d&&L.spring({tension:94,friction:17,maxSpeed:555*Z.scale,restDelta:.1,restSpeed:.1,velocity:L.getCurrentVelocities()}).from(F).to(Z).start(),ne()})).on("end",(()=>{Q(),(null==L?void 0:L.isRunning())||(ee(),I("animationEnd"))})),function(){const e=Y("gestures");e&&T&&E&&(k=r(T,e).on("start",(e=>{if(!L)return;const t=e.srcEvent;$()||((F.scale>1||e.currentTouch.length>1)&&(null==t||t.stopPropagation(),L.pause()),1===e.currentTouch.length&&I("touchStart"))})).on("move",(e=>{$()||(1!==Z.scale||e.currentTouch.length>1)&&(e.srcEvent.preventDefault(),e.srcEvent.stopPropagation())})).on("pan",(e=>{if($())return;const t=e.srcEvent;(1!==Z.scale||e.currentTouch.length>1)&&(f(t),te(g.Pan,e))})).on("swipe",(e=>{$()||Z.scale>1&&te(g.Swipe,e)})).on("tap",(e=>{I("click",e)})).on("singleTap",(e=>{I("singleClick",e)})).on("doubleTap",(e=>{I("dblClick",e)})).on("pinch",(e=>{$()||(e.scale>V()?te(g.ZoomIn,e):e.scale<V()?te(g.ZoomOut,e):te(g.Pan,e))})).on("end",(e=>{$()||(e.currentTouch.length?(e.srcEvent.stopPropagation(),f(e.srcEvent),null==L||L.end()):(ee(),Q(),I("touchEnd")))})).init())}(),T&&(T.addEventListener("wheel",R,{passive:!1}),X.push((()=>{null==T||T.removeEventListener("wheel",R,{passive:!1})}))),null==c||c.addEventListener("click",z),null===document||void 0===document||document.addEventListener("mousemove",D),X.push((()=>{null==c||c.removeEventListener("click",z),null===document||void 0===document||document.removeEventListener("mousemove",D)}));const i=Object.assign(Object.assign({},Y("startPos")||{}),{scale:V()});if(F=Object.assign(Object.assign({},m),i),Z=Object.assign(Object.assign({},m),i),$()){const e=_(Z.scale);if(e){const{x:t,y:n}=e;F.x=t,F.y=n,Z.x=t,Z.y=n}}A=3,ne(),ee(),I("ready"),requestAnimationFrame((()=>{T&&(T.style.visibility="")}))}function W(){const e={top:0,left:0,width:0,height:0};if(M){const t=M.getBoundingClientRect();Z.angle%180==90?(e.top=t.top+.5*t.height-.5*t.width,e.left=t.left+.5*t.width-.5*t.height,e.width=t.height,e.height=t.width):(e.top=t.top,e.left=t.left,e.width=t.width,e.height=t.height)}return e}function q(){let t=Y("width"),n=Y("height");if(E&&"auto"===t){const e=E.getAttribute("width");t=e?parseFloat(e+""):void 0!==E.dataset.width?parseFloat(E.dataset.width+""):T instanceof HTMLImageElement?T.naturalWidth:E instanceof HTMLImageElement?E.naturalWidth:E.getBoundingClientRect().width}else t=e(t)?parseFloat(t):t;if(E&&"auto"===n){const e=E.getAttribute("height");n=e?parseFloat(e+""):void 0!==E.dataset.height?parseFloat(E.dataset.height+""):T instanceof HTMLImageElement?T.naturalHeight:E instanceof HTMLImageElement?E.naturalHeight:E.getBoundingClientRect().height}else n=e(n)?parseFloat(n):n;return{width:t,height:n}}function $(){return"mousemove"===Y("panMode")&&matchMedia("(hover: hover)").matches}function _(e){const t=O||Y("event"),n=null==M?void 0:M.getBoundingClientRect();if(!t||!n||e<=1)return{x:0,y:0};const i=(t.clientX||0)-n.left,a=(t.clientY||0)-n.top,s=n.width,l=n.height,r=K(e);if(e>1){const t=Y("mouseMoveFactor");t>1&&(e*=t)}let c=s*e,u=l*e,f=.5*(c-s)-i/s*100/100*(c-s),d=.5*(u-l)-a/l*100/100*(u-l);return f=o(r.x[0],f,r.x[1]),d=o(r.y[0],d,r.y[1]),{x:f,y:d}}function B(e="base"){if(!c)return 1;const t=c.getBoundingClientRect(),n=W(),{width:i,height:a}=q(),s=e=>{if("number"==typeof e)return e;switch(e){case"min":case"base":return 1;case"cover":return Math.max(t.height/n.height,t.width/n.width)||1;case"full":case"max":{const e=Z.angle%180==90?a:i;return e&&n.width?e/n.width:1}}},l=Y("minScale"),r=Y("maxScale"),u=Math.min(s("full"),s(l)),f="number"==typeof r?s("full")*r:Math.min(s("full"),s(r));switch(e){case"min":return u;case"base":return o(u,1,f);case"cover":return s("cover");case"full":return Math.min(f,s("full"));case"max":return f}}function N(){return B("min")}function V(){return B("base")}function U(){return B("cover")}function G(){return B("full")}function J(){return B("max")}function K(e){const t={x:[0,0],y:[0,0]},n=null==c?void 0:c.getBoundingClientRect();if(!n)return t;const i=W(),o=n.width,a=n.height;let s=i.width,l=i.height,r=e=void 0===e?Z.scale:e,u=e;if($()&&e>1){const t=Y("mouseMoveFactor");t>1&&(s*e>o+.01&&(r*=t),l*e>a+.01&&(u*=t))}return s*=r,l*=u,e>1&&(s>o&&(t.x[0]=.5*(o-s),t.x[1]=.5*(s-o)),t.x[0]-=.5*(i.left-n.left),t.x[1]-=.5*(i.left-n.left),t.x[0]-=.5*(i.left+i.width-n.right),t.x[1]-=.5*(i.left+i.width-n.right),l>a&&(t.y[0]=.5*(a-l),t.y[1]=.5*(l-a)),t.y[0]-=.5*(i.top-n.top),t.y[1]-=.5*(i.top-n.top),t.y[0]-=.5*(i.top+i.height-n.bottom),t.y[1]-=.5*(i.top+i.height-n.bottom)),t}function Q(){if(!Y("bounds"))return;if(3!==A)return;if(!(null==c?void 0:c.parentElement))return;if(!L||!k)return;const e=N(),t=J(),n=o(e,Z.scale,t);if(Z.scale<e-.01||Z.scale>t+.01)return void te(g.ZoomTo,{scale:n});if(L.isRunning())return;if(k.isPointerDown())return;const i=K(n);Z.x<i.x[0]||Z.x>i.x[1]||Z.y<i.y[0]||Z.y>i.y[1]?(Z.x=o(i.x[0],Z.x,i.x[1]),Z.y=o(i.y[0],Z.y,i.y[1]),L.spring({tension:170,friction:17,restDelta:.001,restSpeed:.001,maxSpeed:1/0,velocity:L.getCurrentVelocities()}),L.from(F).to(Z).start()):ne()}function ee(){if(!c||!c.parentElement||!M)return;const e=re(),t=ce(),n=ue(),i=fe(),o=oe(),a=ae();M.classList.toggle("is-fullsize",i),M.classList.toggle("is-expanded",n),M.classList.toggle("is-dragging",t),M.classList.toggle("can-drag",e),M.classList.toggle("will-zoom-in",o),M.classList.toggle("will-zoom-out",a);const s=se(),l=le(),r=3!==A;for(const e of(null==c?void 0:c.querySelectorAll("[data-panzoom-action]"))||[]){const t=e.dataset.panzoomAction;let n=!1;if(r)n=!0;else switch(t){case g.ZoomIn:s||(n=!0);break;case g.ZoomOut:l||(n=!0);break;case g.ToggleFull:s||l||(n=!0);const t=e.querySelector("g");t&&(t.style.display=i?"none":"");break;case g.ToggleCover:case g.ToggleMax:s||l||(n=!0)}n?(e.setAttribute("aria-disabled",""),e.setAttribute("tabindex","-1")):(e.removeAttribute("aria-disabled"),e.removeAttribute("tabindex"))}}function te(e,t){var n;if(!c||!E||!L)return;if(e===g.Swipe&&Math.abs(L.getCurrentVelocities().scale)>.01)return;let i=Object.assign({},Z),a=K($()?Z.scale:F.scale);const r=L.getCurrentVelocities(),u=W(),f=((null===(n=(t=t||{}).currentTouch)||void 0===n?void 0:n.length)||0)>1,d=t.velocityX||0,h=t.velocityY||0;let p=t.center;!p&&t.srcEvent&&(p=s(l(t.srcEvent)));let v=t.deltaX||0,b=t.deltaY||0;switch(e){case g.MoveRight:v=t.deltaX||100;break;case g.MoveLeft:v=t.deltaX||-100;break;case g.MoveUp:b=t.deltaY||-100;break;case g.MoveDown:b=t.deltaY||100}let y=[];switch(e){case g.Reset:Z=Object.assign({},m),Z.scale=V();break;case g.Pan:case g.Move:case g.MoveLeft:case g.MoveRight:case g.MoveUp:case g.MoveDown:if(null==k?void 0:k.isPointerDown()){let e=1,t=1;Z.x<=a.x[0]&&d<=0&&(e=Math.max(.01,1-Math.abs(1/u.width*Math.abs(Z.x-a.x[0]))),e*=.2),Z.x>=a.x[1]&&d>=0&&(e=Math.max(.01,1-Math.abs(1/u.width*Math.abs(Z.x-a.x[1]))),e*=.2),Z.y<=a.y[0]&&h<=0&&(t=Math.max(.01,1-Math.abs(1/u.height*Math.abs(Z.y-a.y[0]))),t*=.2),Z.y>=a.y[1]&&h>=0&&(t=Math.max(.01,1-Math.abs(1/u.height*Math.abs(Z.y-a.y[1]))),t*=.2),Z.x+=v*e,Z.y+=b*t}else Z.x=o(a.x[0],Z.x+v,a.x[1]),Z.y=o(a.y[0],Z.y+b,a.y[1]);break;case g.Swipe:const e=(e=0)=>Math.sign(e)*Math.pow(Math.abs(e),1.5);Z.x+=o(-1e3,e(d),1e3),Z.y+=o(-1e3,e(h),1e3),h&&!d&&(Z.x=o(a.x[0],Z.x,a.x[1])),!h&&d&&(Z.y=o(a.y[0],Z.y,a.y[1])),r.x=d,r.y=h;break;case g.ZoomTo:Z.scale=t.scale||1;break;case g.ZoomIn:Z.scale=Z.scale*(t.scale||2),f||(Z.scale=Math.min(Z.scale,J()));break;case g.ZoomOut:Z.scale=Z.scale*(t.scale||.5),f||(Z.scale=Math.max(Z.scale,N()));break;case g.ToggleCover:y=[V(),U()];break;case g.ToggleFull:y=[V(),G()];break;case g.ToggleMax:y=[V(),J()];break;case g.IterateZoom:y=[V(),G(),J()];break;case g.Zoom:const n=G();Z.scale>=n-.05?Z.scale=V():Z.scale=Math.min(n,Z.scale*(t.scale||2));break;case g.RotateCW:Z.angle+=90;break;case g.RotateCCW:Z.angle-=90;break;case g.FlipX:Z.flipX*=-1;break;case g.FlipY:Z.flipY*=-1}if(void 0!==F.angle&&Math.abs(F.angle)>=360&&(Z.angle-=360*Math.floor(F.angle/360),F.angle-=360*Math.floor(F.angle/360)),y.length){const e=y.findIndex((e=>e>Z.scale+1e-4));Z.scale=y[e]||y[0]}if(f&&(Z.scale=o(N()*(f?.8:1),Z.scale,J()*(f?1.6:1))),$()){const e=_(Z.scale);if(e){const{x:t,y:n}=e;Z.x=t,Z.y=n}}else if(Z.scale!==i.scale){let e=0,t=0;if(p)e=p.x,t=p.y;else{const n=c.getBoundingClientRect();e=n.x+.5*n.width,t=n.y+.5*n.height}let n=e-u.left,s=t-u.top;n-=.5*u.width,s-=.5*u.height;const l=(n-i.x)/i.scale,r=(s-i.y)/i.scale;Z.x=n-l*Z.scale,Z.y=s-r*Z.scale,!f&&Y("bounds")&&(a=K(Z.scale),Z.x=o(a.x[0],Z.x,a.x[1]),Z.y=o(a.y[0],Z.y,a.y[1]))}if(e===g.Swipe){let e=94,t=17,n=500*Z.scale,i=r;L.spring({tension:e,friction:t,maxSpeed:n,restDelta:.1,restSpeed:.1,velocity:i})}else e===g.Pan||f?L.spring({tension:750,friction:17,restDelta:.01,restSpeed:.01,maxSpeed:1}):L.spring({tension:170,friction:17,restDelta:.001,restSpeed:.001,maxSpeed:1/0,velocity:r});e===g.Reset&&0===t.velocity?F=Object.assign({},Z):L.from(F).to(Z).start(),I("action",e)}function ne(){if(!M||!E)return;if(E instanceof HTMLImageElement){const{width:e,height:t}=q();M.style.maxWidth=`min(${e}px, 100%)`,M.style.maxHeight=`min(${t}px, 100%)`}let{x:e,y:t,scale:n,angle:i,flipX:o,flipY:a}=F;const s=function(){const e=W(),t=e.width,n=e.height,{width:i,height:o}=q();if(!c)return{x:0,y:0,width:0,height:0,scale:0,flipX:0,flipY:0,angle:0,fitWidth:t,fitHeight:n,fullWidth:i,fullHeight:o};let{x:a,y:s,scale:l,angle:r,flipX:u,flipY:f}=F,d=1/G(),g=i,h=o,m=F.scale*d,p=Z.scale*d;const v=Math.max(t,n),b=Math.min(t,n);i>o?(g=v,h=b):(g=b,h=v);m=i>o?v*l/i||1:v*l/o||1;let y=g?i*p:0,x=h?o*p:0;return a=a+.5*g-.5*y,s=s+.5*h-.5*x,{x:a,y:s,width:y,height:x,scale:g&&h?i*m/y:0,flipX:u,flipY:f,angle:r,fitWidth:t,fitHeight:n,fullWidth:i,fullHeight:o}}();if(M&&s){const{x:e,y:t,width:n,height:o,scale:a,flipX:l,flipY:r}=s;let c=`translate(${d(e)}px, ${d(t)}px)`;c+=1!==l||1!==r?` scaleX(${d(a*l)}) scaleY(${d(a*r)})`:` scale(${d(a)})`,0!==i&&(c+=` rotate(${i}deg)`),T&&(T.style.width=`${d(n)}px`,T.style.height=`${d(o)}px`,T.style.transform=`${c}`)}I("render")}function ie(){let e=Z.scale;const t=Y("clickAction");let n=V();if(t){let i=[];switch(t){case g.ZoomIn:n=2*e;break;case g.ZoomOut:n=.5*e;break;case g.ToggleCover:i=[V(),U()];break;case g.ToggleFull:i=[V(),G()];break;case g.ToggleMax:i=[V(),J()];break;case g.IterateZoom:i=[V(),G(),J()];break;case g.Zoom:const t=G();n=e>=t-.05?V():Math.min(t,2*e)}if(i.length){const t=i.findIndex((t=>t>e+1e-4));n=i[t]||V()}}return n=o(N(),n,J()),n}function oe(){return 3===A&&ie()>Z.scale}function ae(){return 3===A&&ie()<Z.scale}function se(){return 3===A&&Z.scale<J()}function le(){return 3===A&&Z.scale>N()}function re(){return 3===A&&ue()&&!!k&&!$()}function ce(){return 3===A&&(null==k?void 0:k.isPointerDown())&&!$()}function ue(){return 3===A&&Z.scale>V()}function fe(){return 3===A&&Z.scale>=G()}const de={canDrag:re,canZoomIn:se,canZoomOut:le,destroy:function(){I("destroy");for(const e of Object.values(S))null==e||e.destroy(de);for(const e of X)e();return M&&(M.style.aspectRatio="",M.style.maxWidth="",M.style.maxHeight=""),T&&(T.style.width="",T.style.height="",T.style.transform=""),M=void 0,E=void 0,T=void 0,F=Object.assign({},m),Z=Object.assign({},m),null==L||L.destroy(),L=void 0,null==k||k.destroy(),k=void 0,A=4,de},emit:I,execute:te,getBoundaries:K,getContainer:function(){return c},getFullDim:q,getGestures:function(){return k},getMousemovePos:_,getOptions:function(){return C},getScale:B,getState:function(){return A},getTransform:function(e){return!0===e?Z:F},getTween:function(){return L},getViewport:function(){return T},getWrapper:function(){return M},init:function(){return A=0,I("init"),function(){for(const[e,t]of Object.entries(Object.assign(Object.assign({},w),C.plugins||{})))if(e&&!S[e]&&t instanceof Function){const n=t();n.init(de),S[e]=n}I("initPlugins")}(),function(){if(!c)return;const e=Object.assign(Object.assign({},p.classes),Y("classes"));if(u(c,e.container),E=c.querySelector("."+e.content),!E)return;E.setAttribute("draggable","false"),M=c.querySelector("."+e.wrapper),M||(M=document.createElement("div"),u(M,e.wrapper),E.insertAdjacentElement("beforebegin",M),M.insertAdjacentElement("afterbegin",E));if(!(E instanceof HTMLImageElement||E instanceof HTMLPictureElement))return;if(T=c.querySelector("."+e.viewport),!T){T=document.createElement("div"),u(T,e.viewport);const t=E.cloneNode(!0);t.classList.remove("is-lazyloading"),t.classList.remove("is-lazyloaded"),T.insertAdjacentElement("afterbegin",t),M.insertAdjacentElement("beforeend",T)}E instanceof HTMLPictureElement&&(E=E.querySelector("img"));T instanceof HTMLPictureElement&&(T=T.querySelector("img"));if(T.style.visibility="hidden",Y("protected")){T.addEventListener("contextmenu",(e=>{e.preventDefault()}));const e=document.createElement("div");u(e,"f-panzoom__protected"),T.appendChild(e)}I("initLayout")}(),function(){if(!(E&&E instanceof HTMLImageElement))return;const e=()=>{E&&E instanceof HTMLImageElement&&E.decode().then((()=>{requestAnimationFrame((()=>{H()}))})).catch((()=>{H()}))};if(E.src&&E.complete)return void e();A=1,function(){const e=null==c?void 0:c.querySelector(".f-spinner");if(!c||e)return;const t=Y("spinnerTpl"),n=i(t);n&&(n.classList.add("f-spinner"),c.classList.add("is-loading"),null==M||M.insertAdjacentElement("afterbegin",n))}(),I("loading"),E.addEventListener("load",e,!1),E.addEventListener("error",e,!1),X.push((()=>{null==E||E.removeEventListener("load",e,!1),null==E||E.removeEventListener("error",e,!1)}))}(),function(){if(c&&!j){let e=null;j=new ResizeObserver((()=>{e||(e=requestAnimationFrame((()=>{c&&c.parentElement&&3===A&&(ee(),Q(),I("refresh")),e=null})))})),j.observe(c),X.push((()=>{null==j||j.disconnect(),j=void 0,e&&(cancelAnimationFrame(e),e=null)}))}}(),de},isDragging:ce,isExpanded:ue,isFullsize:fe,localize:function(e,t=[]){const n=Y("l10n")||{};e=String(e).replace(/\{\{(\w+)\}\}/g,((e,t)=>n[t]||e));for(let n=0;n<t.length;n++)e=e.split(t[n][0]).join(t[n][1]);return e=e.replace(/\{\{(.*?)\}\}/g,((e,t)=>t))},off:function(e,t){for(const n of e instanceof Array?e:[e])P.has(n)&&P.set(n,P.get(n).filter((e=>e!==t)));return de},on:function(e,t){for(const n of e instanceof Array?e:[e])P.set(n,[...P.get(n)||[],t]);return de},version:"6.0.12",willZoomIn:oe,willZoomOut:ae};return de};w.l10n={en_EN:c},w.getDefaults=()=>p;export{m as PANZOOM_DEFAULT_POS,w as Panzoom,g as PanzoomAction,h as PanzoomZoomLevel};