UNPKG

@fancyapps/ui

Version:

Robust JavaScript UI Component Library

fancyapps.com

fancyapps/ui

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