UNPKG

@fancyapps/ui

Version:

Robust JavaScript UI Component Library

fancyapps.com

fancyapps/ui

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