vistaview 0.7.1 → 0.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/lib/vista-view.d.ts.map +1 -1
  2. package/dist/style.css +1 -1
  3. package/dist/vistaview.js +47 -45
  4. package/dist/vistaview.umd.js +2 -2
  5. package/package.json +1 -1
package/dist/lib/vista-view.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"vista-view.d.ts","sourceRoot":"","sources":["../../src/lib/vista-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,QAAQ,EAGR,QAAQ,EAIR,gCAAgC,EACjC,MAAM,SAAS,CAAC;AAajB,eAAO,MAAM,gBAAgB,EAAE;IAAE,eAAe,EAAE,SAAS,GAAG,IAAI,CAAA;CAEjE,CAAC;AAEF,qBAAa,SAAS;IACpB,OAAO,EAAE,QAAQ,CAAC;IAClB,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,QAAQ,EAAE,CAAC;IAC/C,eAAe,EAAE,OAAO,CAAC;IAEzB,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,eAAe,CAAmE;IAE1F,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,kBAAkB,CAAiC;IAC3D,OAAO,CAAC,QAAQ,CAA8B;IAC9C,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,gBAAgB,CAMV;IAEd,IAAI,EAAE,WAAW,GAAG,IAAI,CAAQ;IAChC,cAAc,EAAE,WAAW,GAAG,IAAI,CAAQ;IAC1C,EAAE,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI;IAIrD,OAAO,CAAC,eAAe,CAIrB;IAEF,OAAO,CAAC,qBAAqB,CAAwD;IAErF,OAAO,CAAC,eAAe,CAAgC;IAEvD,OAAO,CAAC,QAAQ,CAAkB;gBAEtB,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,QAAQ,EAAE,EAAE,OAAO,GAAE,QAAa;IAsElF,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,iBAAiB,CAA6B;YACxC,IAAI;IAqHlB,OAAO,CAAC,gBAAgB;IAkDxB,UAAU,EAAE,OAAO,CAAS;IAC5B,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,kBAAkB;IAmC1B,OAAO,CAAC,eAAe;IAmCvB,OAAO,CAAC,mBAAmB;IA2D3B,OAAO,CAAC,SAAS,CAuBf;IAEF,OAAO,CAAC,QAAQ,CAYd;IAEF,OAAO,CAAC,eAAe,CAkBrB;IAGF,OAAO,CAAC,gBAAgB,CAAyD;IACjF,uBAAuB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,gCAAgC,KAAK,IAAI,GAAG,IAAI;IAGtF,OAAO,CAAC,0BAA0B;IAIlC,OAAO,CAAC,0BAA0B,CAwDhC;IAGF,IAAI,CAAC,UAAU,GAAE,MAAU,GAAG,IAAI;IA4I5B,KAAK,CAAC,OAAO,GAAE,OAAc,GAAG,OAAO,CAAC,IAAI,CAAC;IA0DnD,IAAI,IAAI,IAAI;IASZ,IAAI,IAAI,IAAI;IASZ,OAAO,IAAI,IAAI;IAcf,eAAe,IAAI,MAAM;IAOzB,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI;CAoBlE"}
1
+ {"version":3,"file":"vista-view.d.ts","sourceRoot":"","sources":["../../src/lib/vista-view.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,QAAQ,EAGR,QAAQ,EAIR,gCAAgC,EACjC,MAAM,SAAS,CAAC;AAajB,eAAO,MAAM,gBAAgB,EAAE;IAAE,eAAe,EAAE,SAAS,GAAG,IAAI,CAAA;CAEjE,CAAC;AAEF,qBAAa,SAAS;IACpB,OAAO,EAAE,QAAQ,CAAC;IAClB,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,QAAQ,EAAE,CAAC;IAC/C,eAAe,EAAE,OAAO,CAAC;IAEzB,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,eAAe,CAAmE;IAE1F,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,kBAAkB,CAAiC;IAC3D,OAAO,CAAC,QAAQ,CAA8B;IAC9C,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,gBAAgB,CAMV;IAEd,IAAI,EAAE,WAAW,GAAG,IAAI,CAAQ;IAChC,cAAc,EAAE,WAAW,GAAG,IAAI,CAAQ;IAC1C,EAAE,CAAC,CAAC,SAAS,WAAW,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI;IAIrD,OAAO,CAAC,eAAe,CAIrB;IAEF,OAAO,CAAC,qBAAqB,CAAwD;IAErF,OAAO,CAAC,eAAe,CAAgC;IAEvD,OAAO,CAAC,QAAQ,CAAkB;gBAEtB,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,QAAQ,EAAE,EAAE,OAAO,GAAE,QAAa;IAsElF,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,iBAAiB,CAA6B;YACxC,IAAI;IA2HlB,OAAO,CAAC,gBAAgB;IAkDxB,UAAU,EAAE,OAAO,CAAS;IAC5B,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,kBAAkB;IAmC1B,OAAO,CAAC,eAAe;IAmCvB,OAAO,CAAC,mBAAmB;IA4D3B,OAAO,CAAC,SAAS,CAuBf;IAEF,OAAO,CAAC,QAAQ,CAYd;IAEF,OAAO,CAAC,eAAe,CAkBrB;IAGF,OAAO,CAAC,gBAAgB,CAAyD;IACjF,uBAAuB,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,gCAAgC,KAAK,IAAI,GAAG,IAAI;IAGtF,OAAO,CAAC,0BAA0B;IAIlC,OAAO,CAAC,0BAA0B,CAwDhC;IAGF,IAAI,CAAC,UAAU,GAAE,MAAU,GAAG,IAAI;IA4I5B,KAAK,CAAC,OAAO,GAAE,OAAc,GAAG,OAAO,CAAC,IAAI,CAAC;IA0DnD,IAAI,IAAI,IAAI;IASZ,IAAI,IAAI,IAAI;IASZ,OAAO,IAAI,IAAI;IAcf,eAAe,IAAI,MAAM;IAOzB,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,OAAO,CAAA;KAAE,GAAG,IAAI;CAoBlE"}
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- :root{--vvw-bg-color: #000000;--vvw-text-color: #ffffff;--vvw-bg-blur: 10px;--vvw-bg-opacity: .8;--vvw-init-z: 1;--vvw-dest-z: 2147483647;--vvw-anim-dur: 333;--vvw-init-w: 0;--vvw-init-h: 0;--vvw-init-t: 0;--vvw-init-l: 0;--vvw-idx: 0;--vvw-radius: 0px}@keyframes vvw-pulse{0%{opacity:1;border-radius:var(--vvw-init-radius);scale:1}50%{opacity:.7;border-radius:var(--vvw-pulse-radius);scale:.99}to{opacity:1;border-radius:var(--vvw-init-radius);scale:1}}@keyframes vvw-simple-pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@keyframes vvw-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.vvw-root{position:fixed;top:0;left:0;width:100vw;width:100dvw;height:100vh;height:100dvh;overflow:hidden;z-index:var(--vvw-init-z);opacity:0;isolation:isolate;transform:none;touch-action:none}.vvw-container{position:relative;width:100%;height:100%;overflow:hidden}.vvw-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;background-color:rgb(from var(--vvw-bg-color) r g b / var(--vvw-bg-opacity));-webkit-backdrop-filter:blur(var(--vvw-bg-blur));backdrop-filter:blur(var(--vvw-bg-blur));opacity:0;transition:opacity calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 1ms) ease}.vvw-image-container{position:relative;height:100%;overflow:hidden;isolation:isolate}.vvw-item{position:relative;width:100%;height:100%;overflow:hidden}.vvw-item img{position:absolute;display:block;top:50%;left:50%;translate:-50% -50%}.vvw-item .vvw-img-err{position:absolute;top:50%;left:50%;translate:-50% -50%;color:#fff;background-color:red;font-size:14px;text-align:center;padding:8px 12px;margin:0;display:none;z-index:2}.vvw-item .vvw-img-lo{--vvw-init-radius: 0px;--vvw-pulse-radius: 0px;--vvw-init-x: 0px;--vvw-init-y: 0px;--vvw-current-x: 0px;--vvw-current-y: 0px;outline:1px solid rgba(255,255,255,.2);z-index:0;opacity:1;border-radius:var(--vvw-init-radius);overflow:hidden;transition:transform calc(var(--vvw-anim-dur) * 1ms) ease;transform:translate3d(var(--vvw-current-x),var(--vvw-current-y),0);background:linear-gradient(45deg,#1a1a1a,#333,#1a1a1a,#555);background-size:400% 400%;animation:vvw-gradient 3s ease-in-out infinite}.vvw-item .vvw-img-hi{cursor:zoom-in;--vvw-init-radius: 0px;--vvw-init-w: 0px;--vvw-init-h: 0px;--vvw-current-w: 0px;--vvw-current-h: 0px;--vvw-current-radius: 0px;width:var(--vvw-init-w);height:var(--vvw-init-h);border-radius:var(--vvw-init-radius);z-index:1;overflow:hidden;object-fit:cover;opacity:0}.vvw-top-bar,.vvw-bottom-bar{position:absolute;top:0;left:0;width:100%;z-index:6;display:flex;align-items:stretch;justify-content:space-between;pointer-events:none}.vvw-top-bar>div,.vvw-bottom-bar>div{display:flex;align-items:stretch}.vvw-bottom-bar{top:unset;bottom:0}.vvw-ui{opacity:0;transition:opacity calc(var(--vvw-anim-dur) * 1ms) ease calc(var(--vvw-anim-dur) * 2ms) ease;outline:1px solid hsl(from var(--vvw-bg-color) h s calc(l + 30));pointer-events:auto}.vvw-ui.vvw-index{font-size:16px;padding:8px 13px;background-color:var(--vvw-bg-color);color:var(--vvw-text-color)}.vvw-ui.vvw-desc{font-size:14px;padding:8px 15px;background-color:var(--vvw-bg-color);color:var(--vvw-text-color);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vvw-ui:is(button),.vvw-ui>button{background:none;color:inherit;border:0px;font:inherit;cursor:pointer;outline:inherit;box-sizing:border-box;margin:0;padding:8px 12px;align-self:stretch;border-radius:0;display:flex;align-items:center;justify-content:center;background-color:var(--vvw-bg-color);color:var(--vvw-text-color)}.vvw-ui:is(button):disabled,.vvw-ui>button:disabled{color:rgb(from var(--vvw-text-color) r g b / .5);cursor:not-allowed}.vvw-ui:is(button):hover,.vvw-ui>button:hover{background-color:hsl(from var(--vvw-bg-color) h s calc(l + 20))}.vvw-ui:is(button):active,.vvw-ui>button:active{background-color:hsl(from var(--vvw-bg-color) h s calc(l + 40))}.vvw-ui:is(button).vvw-button--loading,.vvw-ui>button.vvw-button--loading{animation:vvw-simple-pulse .5s ease-in-out infinite}.vvw-ui:is(button) svg,.vvw-ui>button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.vvw-ui:is(button){outline:1px solid hsl(from var(--vvw-bg-color) h s calc(l + 30))}.vvw-ui.vvw-prev{position:absolute;top:50%;left:0;translate:0 -50%;align-items:center;justify-content:center;z-index:2;display:none}.vvw-ui.vvw-next{position:absolute;top:50%;right:0;translate:0 -50%;align-items:center;justify-content:center;z-index:2;display:none}@media(min-width:768px){.vvw-ui.vvw-prev,.vvw-ui.vvw-next{display:flex}}.vvw-arrow-sm .vvw-ui.vvw-prev,.vvw-arrow-sm .vvw-ui.vvw-next{display:flex}.vvw-root.vvw--active{opacity:1;transition:z-index 0ms calc(var(--vvw-anim-dur) * 1ms) ease;z-index:var(--vvw-dest-z)}.vvw-root.vvw--active .vvw-bg{opacity:1}.vvw-root.vvw--active .vvw-img-lo{--vvw-current-x: 0px !important;--vvw-current-y: 0px !important}.vvw-root.vvw--active .vvw-ui{opacity:1}.vvw-root.vvw--settled .vvw-img-lo{animation:vvw-pulse 1s infinite,vvw-gradient 3s ease-in-out infinite;animation-delay:calc(var(--vvw-anim-dur) * 2ms)}.vvw-root.vvw--settled .vvw-img-lo:has(+img.vvw--loaded){animation:none;opacity:0}.vvw-root.vvw--settled .vvw-img-err:has(~img.vvw--loaderror){display:block}.vvw-root.vvw--settled .vvw-img-hi.vvw--loaded{opacity:1;width:var(--vvw-current-w);height:var(--vvw-current-h);border-radius:var(--vvw-current-radius)}.vvw-root.vvw--closing{transition:opacity calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 2ms) ease,transform 0s calc(var(--vvw-anim-dur) * 2ms) ease,z-index 0s calc(var(--vvw-anim-dur) * 1ms) ease;transform:scale(1);z-index:var(--vvw-init-z);opacity:0!important}.vvw-root.vvw--closing .vvw-img-err:has(~img.vvw--loaderror){display:none}.vvw-root.vvw--closing .vvw-img-hi.vvw--loaded,.vvw-root.vvw--closing .vvw-img-hi.vvw--ready{transition:width calc(var(--vvw-anim-dur) * 1ms) ease,height calc(var(--vvw-anim-dur) * 1ms) ease,border-radius calc(var(--vvw-anim-dur) * 1ms) ease,top calc(var(--vvw-anim-dur) * 1ms) ease,left calc(var(--vvw-anim-dur) * 1ms) ease,opacity 0ms calc(var(--vvw-anim-dur) * 1ms) ease;opacity:0;top:50%!important;left:50%!important;width:var(--vvw-init-w)!important;height:var(--vvw-init-h)!important;border-radius:var(--vvw-init-radius)!important}.vvw-root.vvw--closing .vvw-img-lo{transition:opacity 0ms calc(var(--vvw-anim-dur) * 1ms) ease,transform calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 1ms) ease;opacity:1!important;--vvw-current-x: var(--vvw-init-x) !important;--vvw-current-y: var(--vvw-init-y) !important}.vvw-root.vvw--closing .vvw-ui{transition:opacity calc(var(--vvw-anim-dur) * 1ms) ease;opacity:0}.vvw-root.vvw--closing .vvw-bg{transition:opacity calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 1ms) ease;opacity:0}
1
+ :root{--vvw-bg-color: #000000;--vvw-text-color: #ffffff;--vvw-bg-blur: 10px;--vvw-bg-opacity: .8;--vvw-init-z: 1;--vvw-dest-z: 2147483647;--vvw-anim-dur: 333;--vvw-init-w: 0;--vvw-init-h: 0;--vvw-init-t: 0;--vvw-init-l: 0;--vvw-idx: 0;--vvw-radius: 0px}@keyframes vvw-pulse{0%{opacity:1;border-radius:var(--vvw-init-radius);scale:1}50%{opacity:.7;border-radius:var(--vvw-pulse-radius);scale:.99}to{opacity:1;border-radius:var(--vvw-init-radius);scale:1}}@keyframes vvw-simple-pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@keyframes vvw-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.vvw-root{position:fixed;top:0;left:0;width:100vw;width:100dvw;height:100vh;height:100dvh;overflow:hidden;z-index:var(--vvw-init-z);opacity:0;isolation:isolate;transform:none;touch-action:none}.vvw-container{position:relative;width:100%;height:100%;overflow:hidden}.vvw-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;background-color:rgb(from var(--vvw-bg-color) r g b / var(--vvw-bg-opacity));-webkit-backdrop-filter:blur(var(--vvw-bg-blur));backdrop-filter:blur(var(--vvw-bg-blur));opacity:0;transition:opacity calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 1ms) ease}.vvw-image-container{position:relative;height:100%;overflow:hidden;isolation:isolate}.vvw-item{position:relative;width:100%;height:100%;overflow:hidden;cursor:grab}.vvw-item:active{cursor:grabbing}.vvw-item img{position:absolute;display:block;top:50%;left:50%;translate:-50% -50%}.vvw-item .vvw-img-err{position:absolute;top:50%;left:50%;translate:-50% -50%;color:#fff;background-color:red;font-size:14px;text-align:center;padding:8px 12px;margin:0;display:none;z-index:2}.vvw-item .vvw-img-lo{--vvw-init-radius: 0px;--vvw-pulse-radius: 0px;--vvw-init-x: 0px;--vvw-init-y: 0px;--vvw-current-x: 0px;--vvw-current-y: 0px;outline:1px solid rgba(255,255,255,.2);z-index:0;opacity:1;border-radius:var(--vvw-init-radius);overflow:hidden;transition:transform calc(var(--vvw-anim-dur) * 1ms) ease;transform:translate3d(var(--vvw-current-x),var(--vvw-current-y),0);background:linear-gradient(45deg,#1a1a1a,#333,#1a1a1a,#555);background-size:400% 400%;animation:vvw-gradient 3s ease-in-out infinite}.vvw-item .vvw-img-hi{--vvw-init-radius: 0px;--vvw-init-w: 0px;--vvw-init-h: 0px;--vvw-current-w: 0px;--vvw-current-h: 0px;--vvw-current-radius: 0px;width:var(--vvw-init-w);height:var(--vvw-init-h);border-radius:var(--vvw-init-radius);z-index:1;overflow:hidden;object-fit:cover;opacity:0}.vvw-top-bar,.vvw-bottom-bar{position:absolute;top:0;left:0;width:100%;z-index:6;display:flex;align-items:stretch;justify-content:space-between;pointer-events:none}.vvw-top-bar>div,.vvw-bottom-bar>div{display:flex;align-items:stretch}.vvw-bottom-bar{top:unset;bottom:0}.vvw-ui{opacity:0;transition:opacity calc(var(--vvw-anim-dur) * 1ms) ease calc(var(--vvw-anim-dur) * 2ms) ease;outline:1px solid hsl(from var(--vvw-bg-color) h s calc(l + 30));pointer-events:auto}.vvw-ui.vvw-index{font-size:16px;padding:8px 13px;background-color:var(--vvw-bg-color);color:var(--vvw-text-color)}.vvw-ui.vvw-desc{font-size:14px;padding:8px 15px;background-color:var(--vvw-bg-color);color:var(--vvw-text-color);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vvw-ui:is(button),.vvw-ui>button{background:none;color:inherit;border:0px;font:inherit;cursor:pointer;outline:inherit;box-sizing:border-box;margin:0;padding:8px 12px;align-self:stretch;border-radius:0;display:flex;align-items:center;justify-content:center;background-color:var(--vvw-bg-color);color:var(--vvw-text-color)}.vvw-ui:is(button):disabled,.vvw-ui>button:disabled{color:rgb(from var(--vvw-text-color) r g b / .5);cursor:not-allowed}.vvw-ui:is(button):hover,.vvw-ui>button:hover{background-color:hsl(from var(--vvw-bg-color) h s calc(l + 20))}.vvw-ui:is(button):active,.vvw-ui>button:active{background-color:hsl(from var(--vvw-bg-color) h s calc(l + 40))}.vvw-ui:is(button).vvw-button--loading,.vvw-ui>button.vvw-button--loading{animation:vvw-simple-pulse .5s ease-in-out infinite}.vvw-ui:is(button) svg,.vvw-ui>button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.vvw-ui:is(button){outline:1px solid hsl(from var(--vvw-bg-color) h s calc(l + 30))}.vvw-ui.vvw-prev{position:absolute;top:50%;left:0;translate:0 -50%;align-items:center;justify-content:center;z-index:2;display:none}.vvw-ui.vvw-next{position:absolute;top:50%;right:0;translate:0 -50%;align-items:center;justify-content:center;z-index:2;display:none}@media(min-width:768px){.vvw-ui.vvw-prev,.vvw-ui.vvw-next{display:flex}}.vvw-arrow-sm .vvw-ui.vvw-prev,.vvw-arrow-sm .vvw-ui.vvw-next{display:flex}.vvw-root.vvw--active{opacity:1;transition:z-index 0ms calc(var(--vvw-anim-dur) * 1ms) ease;z-index:var(--vvw-dest-z)}.vvw-root.vvw--active .vvw-bg{opacity:1}.vvw-root.vvw--active .vvw-img-lo{--vvw-current-x: 0px !important;--vvw-current-y: 0px !important}.vvw-root.vvw--active .vvw-ui{opacity:1}.vvw-root.vvw--settled .vvw-img-lo{animation:vvw-pulse 1s infinite,vvw-gradient 3s ease-in-out infinite;animation-delay:calc(var(--vvw-anim-dur) * 2ms)}.vvw-root.vvw--settled .vvw-img-lo:has(+img.vvw--loaded){animation:none;opacity:0}.vvw-root.vvw--settled .vvw-img-err:has(~img.vvw--loaderror){display:block}.vvw-root.vvw--settled .vvw-img-hi.vvw--loaded{opacity:1;width:var(--vvw-current-w);height:var(--vvw-current-h);border-radius:var(--vvw-current-radius)}.vvw-root.vvw--closing{transition:opacity calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 2ms) ease,transform 0s calc(var(--vvw-anim-dur) * 2ms) ease,z-index 0s calc(var(--vvw-anim-dur) * 1ms) ease;transform:scale(1);z-index:var(--vvw-init-z);opacity:0!important}.vvw-root.vvw--closing .vvw-img-err:has(~img.vvw--loaderror){display:none}.vvw-root.vvw--closing .vvw-img-hi.vvw--loaded,.vvw-root.vvw--closing .vvw-img-hi.vvw--ready{transition:width calc(var(--vvw-anim-dur) * 1ms) ease,height calc(var(--vvw-anim-dur) * 1ms) ease,border-radius calc(var(--vvw-anim-dur) * 1ms) ease,top calc(var(--vvw-anim-dur) * 1ms) ease,left calc(var(--vvw-anim-dur) * 1ms) ease,opacity 0ms calc(var(--vvw-anim-dur) * 1ms) ease;opacity:0;top:50%!important;left:50%!important;width:var(--vvw-init-w)!important;height:var(--vvw-init-h)!important;border-radius:var(--vvw-init-radius)!important}.vvw-root.vvw--closing .vvw-img-lo{transition:opacity 0ms calc(var(--vvw-anim-dur) * 1ms) ease,transform calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 1ms) ease;opacity:1!important;--vvw-current-x: var(--vvw-init-x) !important;--vvw-current-y: var(--vvw-init-y) !important}.vvw-root.vvw--closing .vvw-ui{transition:opacity calc(var(--vvw-anim-dur) * 1ms) ease;opacity:0}.vvw-root.vvw--closing .vvw-bg{transition:opacity calc(var(--vvw-anim-dur) * 1ms) calc(var(--vvw-anim-dur) * 1ms) ease;opacity:0}
package/dist/vistaview.js CHANGED
@@ -70,10 +70,10 @@ function W(s, t, e, i = !1) {
70
70
  br: c,
71
71
  top: m,
72
72
  left: p
73
- } = k(s), L = Math.min(Math.max(p, -o), window.innerWidth + o) - window.innerWidth / 2 + o / 2, g = Math.min(Math.max(m, -r), window.innerHeight + r) - window.innerHeight / 2 + r / 2, d = e.style;
74
- d.width = `${o}px`, d.height = `${r}px`, d.objectFit = n, e.width = a, e.height = l, d.setProperty("--vvw-init-radius", `${c}`), d.setProperty("--vvw-pulse-radius", `calc(1.3 * ${c})`), d.setProperty("--vvw-init-x", `${L}px`), d.setProperty("--vvw-init-y", `${g}px`), i && (d.setProperty("--vvw-current-x", `${L}px`), d.setProperty("--vvw-current-y", `${g}px`));
75
- const u = z(s.imageElm), y = Math.min(o, u.width), f = Math.min(r, u.height), v = t.style;
76
- v.setProperty("--vvw-init-radius", `${c}`), v.setProperty("--vvw-init-w", `${y}px`), v.setProperty("--vvw-init-h", `${f}px`), i && (v.setProperty("--vvw-current-radius", `${c}`), v.setProperty("--vvw-current-w", `${y}px`), v.setProperty("--vvw-current-h", `${f}px`), t.dataset.vvwWidth = y.toString(), t.dataset.vvwHeight = f.toString());
73
+ } = k(s), x = Math.min(Math.max(p, -o), window.innerWidth + o) - window.innerWidth / 2 + o / 2, b = Math.min(Math.max(m, -r), window.innerHeight + r) - window.innerHeight / 2 + r / 2, d = e.style;
74
+ d.width = `${o}px`, d.height = `${r}px`, d.objectFit = n, e.width = a, e.height = l, d.setProperty("--vvw-init-radius", `${c}`), d.setProperty("--vvw-pulse-radius", `calc(1.3 * ${c})`), d.setProperty("--vvw-init-x", `${x}px`), d.setProperty("--vvw-init-y", `${b}px`), i && (d.setProperty("--vvw-current-x", `${x}px`), d.setProperty("--vvw-current-y", `${b}px`));
75
+ const u = z(s.imageElm), f = Math.min(o, u.width), g = Math.min(r, u.height), v = t.style;
76
+ v.setProperty("--vvw-init-radius", `${c}`), v.setProperty("--vvw-init-w", `${f}px`), v.setProperty("--vvw-init-h", `${g}px`), i && (v.setProperty("--vvw-current-radius", `${c}`), v.setProperty("--vvw-current-w", `${f}px`), v.setProperty("--vvw-current-h", `${g}px`), t.dataset.vvwWidth = f.toString(), t.dataset.vvwHeight = g.toString());
77
77
  }
78
78
  function M(s) {
79
79
  const t = window.innerWidth, e = window.innerHeight, i = s.naturalWidth, n = s.naturalHeight;
@@ -94,7 +94,7 @@ function M(s) {
94
94
  function q(s, t, e) {
95
95
  return Math.min(Math.max(s, t), e);
96
96
  }
97
- function C(s, t = 2) {
97
+ function L(s, t = 2) {
98
98
  const e = Math.pow(10, t);
99
99
  return Math.round(s * e) / e;
100
100
  }
@@ -416,7 +416,7 @@ class it {
416
416
  this.initialCenter = t || { x: window.innerWidth / 2, y: window.innerHeight / 2 };
417
417
  }
418
418
  move(t) {
419
- this.image && (this.rect || (this.rect = this.image.getBoundingClientRect()), this.translate.x = C(t.x - this.initialCenter.x), this.translate.y = C(t.y - this.initialCenter.y), this.image.style.transform = `translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`);
419
+ this.image && (this.rect || (this.rect = this.image.getBoundingClientRect()), this.translate.x = L(t.x - this.initialCenter.x), this.translate.y = L(t.y - this.initialCenter.y), this.image.style.transform = `translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`);
420
420
  }
421
421
  snapToTargetIfClose(t, e, i = 1) {
422
422
  return Math.abs(t - e) <= i && (t = e), t;
@@ -432,9 +432,9 @@ class it {
432
432
  scale: i / (this.maxDimension.width / this.maxZoomLevel),
433
433
  isMax: i >= this.maxDimension.width,
434
434
  isMin: i <= this.minDimension.initialWidth
435
- }), this.scale = C(i / this.rect.width);
435
+ }), this.scale = L(i / this.rect.width);
436
436
  const n = this.rect.left + this.rect.width / 2, o = this.rect.top + this.rect.height / 2, r = this.initialCenter.x - n, a = this.initialCenter.y - o, l = r * (1 - this.scale), c = a * (1 - this.scale), m = e.x - this.initialCenter.x, p = e.y - this.initialCenter.y;
437
- this.translate.x = C(l + m), this.translate.y = C(c + p), this.image.style.transform = `translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`, i <= this.minDimension.closingWidth ? this.image.style.opacity = "0.5" : this.image.style.opacity = "";
437
+ this.translate.x = L(l + m), this.translate.y = L(c + p), this.image.style.transform = `translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`, i <= this.minDimension.closingWidth ? this.image.style.opacity = "0.5" : this.image.style.opacity = "";
438
438
  }
439
439
  moveAndNormalize(t) {
440
440
  let e = 0, i = !1;
@@ -445,7 +445,7 @@ class it {
445
445
  return this.normalize();
446
446
  o *= 0.9, r *= 0.9;
447
447
  const a = this.image.getBoundingClientRect();
448
- this.translate.x = C(this.translate.x + o), this.translate.y = C(this.translate.y + r), a.right < window.innerWidth / 2 && (this.translate.x += (window.innerWidth / 2 - a.right) * 0.1, o *= 0.7), a.left > window.innerWidth / 2 && (this.translate.x -= (a.left - window.innerWidth / 2) * 0.1, o *= 0.7), a.bottom < window.innerHeight / 2 && (this.translate.y += (window.innerHeight / 2 - a.bottom) * 0.1, r *= 0.7), a.top > window.innerHeight / 2 && (this.translate.y -= (a.top - window.innerHeight / 2) * 0.1, r *= 0.7), this.image.style.transform = `translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`, e = requestAnimationFrame(() => n({ x: o, y: r }));
448
+ this.translate.x = L(this.translate.x + o), this.translate.y = L(this.translate.y + r), a.right < window.innerWidth / 2 && (this.translate.x += (window.innerWidth / 2 - a.right) * 0.1, o *= 0.7), a.left > window.innerWidth / 2 && (this.translate.x -= (a.left - window.innerWidth / 2) * 0.1, o *= 0.7), a.bottom < window.innerHeight / 2 && (this.translate.y += (window.innerHeight / 2 - a.bottom) * 0.1, r *= 0.7), a.top > window.innerHeight / 2 && (this.translate.y -= (a.top - window.innerHeight / 2) * 0.1, r *= 0.7), this.image.style.transform = `translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`, e = requestAnimationFrame(() => n({ x: o, y: r }));
449
449
  };
450
450
  return n({
451
451
  x: t.movementX,
@@ -514,7 +514,7 @@ class nt {
514
514
  o >= i && r();
515
515
  }
516
516
  }
517
- const x = {
517
+ const y = {
518
518
  somethingOpened: null
519
519
  };
520
520
  class st {
@@ -653,23 +653,23 @@ class st {
653
653
  vistaView: this
654
654
  };
655
655
  this.setupFunction(c), this.currentChildren = { htmls: o, images: r }, this.displayActiveIndex();
656
- const m = this.abortController.signal;
657
- if (performance.now() - this.lastSwapTime < this.options.rapidLimit) {
658
- a.innerHTML = "", this.transitionCleanup && this.transitionCleanup(), o.forEach((b) => {
659
- a.appendChild(b);
656
+ const m = this.abortController.signal, x = performance.now() - this.lastSwapTime < this.options.rapidLimit, b = o[Math.floor(o.length / 2)].dataset.vvwIdx;
657
+ if (x) {
658
+ this.imageState.reset(), a.innerHTML = "", this.transitionCleanup && this.transitionCleanup(), o.forEach((C) => {
659
+ a.appendChild(C);
660
660
  }), this.lastSwapTime = performance.now(), this.waitForImagesToLoad(), this.options.onImageView && this.options.onImageView(c);
661
661
  return;
662
662
  }
663
- const g = this.transitionFunction(c, m);
664
- g && (this.transitionCleanup = g.cleanup, await g.transitionEnded), this.lastSwapTime = performance.now();
665
- const d = o[Math.floor(o.length / 2)].dataset.vvwIdx, u = a.querySelector(
666
- `.vvw-item[data-vvw-idx="${d}"] img.vvw-img-hi`
667
- ), y = this.imageTransitions.get(u);
663
+ const d = this.transitionFunction(c, m);
664
+ d && (this.transitionCleanup = d.cleanup, await d.transitionEnded), this.lastSwapTime = performance.now();
665
+ const u = a.querySelector(
666
+ `.vvw-item[data-vvw-idx="${b}"] img.vvw-img-hi`
667
+ ), f = this.imageTransitions.get(u);
668
668
  this.imageTransitions.delete(u);
669
- const f = u.getAttribute("style") || "", v = u.classList.contains("vvw--loaded"), E = u.classList.contains("vvw--ready"), I = u.width, T = u.height;
670
- this.imageState.reset(), a.innerHTML = "", this.transitionCleanup && this.transitionCleanup(), o.forEach((b) => {
671
- const w = b.querySelector("img.vvw-img-hi");
672
- b.dataset.vvwPos === "0" && !m.aborted && f && I && T && (v && (w.classList.add("vvw--loaded"), w.dataset.vvwWidth = u.dataset.vvwWidth || "", w.dataset.vvwHeight = u.dataset.vvwHeight || ""), E && (w.classList.add("vvw--ready"), w.width = I, w.height = T), w.setAttribute("style", f)), a.appendChild(b), b.dataset.vvwPos === "0" && !m.aborted && E ? (this.imageState.setCurrentImage(w), this.imageState.setInitialCenter()) : b.dataset.vvwPos === "0" && !m.aborted && f && I && T && v && y && (this.imageTransitions.set(w, y), this.transitionImage(w, () => {
669
+ const g = u.getAttribute("style") || "", v = u.classList.contains("vvw--loaded"), E = u.classList.contains("vvw--ready"), I = u.width, T = u.height;
670
+ this.imageState.reset(), a.innerHTML = "", this.transitionCleanup && this.transitionCleanup(), o.forEach((C) => {
671
+ const w = C.querySelector("img.vvw-img-hi");
672
+ C.dataset.vvwPos === "0" && !m.aborted && g && I && T && (v && (w.classList.add("vvw--loaded"), w.dataset.vvwWidth = u.dataset.vvwWidth || "", w.dataset.vvwHeight = u.dataset.vvwHeight || ""), E && (w.classList.add("vvw--ready"), w.width = I, w.height = T), w.setAttribute("style", g)), a.appendChild(C), C.dataset.vvwPos === "0" && !m.aborted && E ? (this.imageState.setCurrentImage(w), this.imageState.setInitialCenter()) : C.dataset.vvwPos === "0" && !m.aborted && g && I && T && v && f && (this.imageTransitions.set(w, f), this.transitionImage(w, () => {
673
673
  this.imageState.setCurrentImage(w), this.imageState.setInitialCenter(), w.classList.add("vvw--ready");
674
674
  }));
675
675
  }), this.waitForImagesToLoad(), this.options.onImageView && this.options.onImageView(c);
@@ -731,28 +731,30 @@ class st {
731
731
  const i = this.imageTransitions.get(t);
732
732
  i && requestAnimationFrame(() => {
733
733
  const { current: n, target: o } = i, r = {
734
- width: n.width + (o.width - n.width) * 0.1,
735
- height: n.height + (o.height - n.height) * 0.1,
736
- radius: n.radius + (o.radius - n.radius) * 0.1
734
+ width: n.width + (o.width - n.width) * 0.2,
735
+ height: n.height + (o.height - n.height) * 0.2,
736
+ radius: n.radius + (o.radius - n.radius) * 0.2
737
737
  };
738
- Math.abs(r.width - o.width) < 0.5 && Math.abs(r.height - o.height) < 0.5 && Math.abs(r.radius - o.radius) < 0.5 ? (t.style.setProperty("--vvw-current-w", `${o.width}px`), t.style.setProperty("--vvw-current-h", `${o.height}px`), t.style.setProperty("--vvw-current-radius", `${o.radius}px`), this.imageTransitions.delete(t), e()) : (t.style.setProperty("--vvw-current-w", `${r.width}px`), t.style.setProperty("--vvw-current-h", `${r.height}px`), t.style.setProperty("--vvw-current-radius", `${r.radius}px`), this.imageTransitions.set(t, { current: r, target: o }), this.transitionImage(t, e));
738
+ Math.abs(r.width - o.width) < 1 && Math.abs(r.height - o.height) < 1 && Math.abs(r.radius - o.radius) < 1 ? (t.style.setProperty("--vvw-current-w", `${o.width}px`), t.style.setProperty("--vvw-current-h", `${o.height}px`), t.style.setProperty("--vvw-current-radius", `${o.radius}px`), this.imageTransitions.delete(t), e()) : (t.style.setProperty("--vvw-current-w", `${r.width}px`), t.style.setProperty("--vvw-current-h", `${r.height}px`), t.style.setProperty("--vvw-current-radius", `${r.radius}px`), this.imageTransitions.set(t, { current: r, target: o }), this.transitionImage(t, e));
739
739
  });
740
740
  }
741
741
  waitForImagesToLoad() {
742
742
  this.imageContainer.querySelectorAll("img.vvw-img-hi:not(.vvw--loaded)").forEach((i) => {
743
743
  const n = i, o = () => {
744
- var c;
745
744
  n.width = n.naturalWidth, n.height = n.naturalHeight;
746
- const r = (c = n.parentElement) == null ? void 0 : c.matches(`[data-vvw-idx="${this.currentIndex}"]`), { width: a, height: l } = M(n);
747
- n.dataset.vvwWidth = a.toString(), n.dataset.vvwHeight = l.toString(), n.classList.add("vvw--loaded"), this.imageTransitions.set(n, {
745
+ const { width: r, height: a } = M(n);
746
+ n.dataset.vvwWidth = r.toString(), n.dataset.vvwHeight = a.toString(), n.classList.add("vvw--loaded"), this.imageTransitions.set(n, {
748
747
  current: {
749
748
  width: n.style.getPropertyValue("--vvw-current-w") ? parseFloat(n.style.getPropertyValue("--vvw-current-w")) : 0,
750
749
  height: n.style.getPropertyValue("--vvw-current-h") ? parseFloat(n.style.getPropertyValue("--vvw-current-h")) : 0,
751
750
  radius: n.style.getPropertyValue("--vvw-current-radius") ? parseFloat(n.style.getPropertyValue("--vvw-current-radius")) : 0
752
751
  },
753
- target: { width: a, height: l, radius: 0 }
752
+ target: { width: r, height: a, radius: 0 }
754
753
  }), this.transitionImage(n, () => {
755
- r && (this.imageState.setCurrentImage(n), this.imageState.setInitialCenter()), n.classList.add("vvw--ready");
754
+ var c;
755
+ ((c = n.parentElement) == null ? void 0 : c.matches(
756
+ `[data-vvw-idx="${this.currentIndex}"][data-vvw-pos="0"]`
757
+ )) && (this.imageState.setCurrentImage(n), this.imageState.setInitialCenter()), n.classList.add("vvw--ready");
756
758
  });
757
759
  };
758
760
  if (n.complete && n.naturalWidth !== 0) {
@@ -777,10 +779,10 @@ class st {
777
779
  }
778
780
  /// OPEN
779
781
  open(t = 0) {
780
- var c, m, p, L, g;
781
- if (x.somethingOpened)
782
+ var c, m, p, x, b;
783
+ if (y.somethingOpened)
782
784
  return;
783
- x.somethingOpened = this, this.currentIndex = t, document.body.style.overflow = "hidden";
785
+ y.somethingOpened = this, this.currentIndex = t, document.body.style.overflow = "hidden";
784
786
  const e = K({
785
787
  controls: this.options.controls
786
788
  });
@@ -796,7 +798,7 @@ class st {
796
798
  };
797
799
  this.setupFunction(a), this.currentChildren = { htmls: r, images: o }, r.forEach((d) => {
798
800
  this.imageContainer.appendChild(d);
799
- }), (c = this.qs(".vvw-close")) == null || c.addEventListener("click", () => this.close()), (m = this.qs(".vvw-zoom-in")) == null || m.addEventListener("click", () => this.zoomIn()), (p = this.qs(".vvw-zoom-out")) == null || p.addEventListener("click", () => this.zoomOut()), (L = this.qs(".vvw-prev>button")) == null || L.addEventListener("click", () => this.prev()), (g = this.qs(".vvw-next>button")) == null || g.addEventListener("click", () => this.next()), this.options.keyboardListeners && window.addEventListener("keydown", this.onKeyDown), window.addEventListener("wheel", this.onScroll, { passive: !1 }), window.addEventListener("resize", this.onResizeHandler), this.pointers = new et({
801
+ }), (c = this.qs(".vvw-close")) == null || c.addEventListener("click", () => this.close()), (m = this.qs(".vvw-zoom-in")) == null || m.addEventListener("click", () => this.zoomIn()), (p = this.qs(".vvw-zoom-out")) == null || p.addEventListener("click", () => this.zoomOut()), (x = this.qs(".vvw-prev>button")) == null || x.addEventListener("click", () => this.prev()), (b = this.qs(".vvw-next>button")) == null || b.addEventListener("click", () => this.next()), this.options.keyboardListeners && window.addEventListener("keydown", this.onKeyDown), window.addEventListener("wheel", this.onScroll, { passive: !1 }), window.addEventListener("resize", this.onResizeHandler), this.pointers = new et({
800
802
  elm: this.imageContainer,
801
803
  listeners: [this.getInternalPointerListener()]
802
804
  });
@@ -812,8 +814,8 @@ class st {
812
814
  typeof d != "string" && (l[d.name] = d);
813
815
  }), this.root.querySelectorAll("button[data-vvw-control]").forEach((d) => {
814
816
  const u = d;
815
- u.addEventListener("click", (y) => {
816
- const f = y.currentTarget.dataset.vvwControl, v = l[f], E = this.currentChildren.images.find(
817
+ u.addEventListener("click", (f) => {
818
+ const g = f.currentTarget.dataset.vvwControl, v = l[g], E = this.currentChildren.images.find(
817
819
  (I) => I.index === this.currentIndex
818
820
  );
819
821
  v && E && (v.onClick.constructor.name === "AsyncFunction" ? (u.classList.add("vvw--loading"), v.onClick(E, this).finally(() => {
@@ -826,7 +828,7 @@ class st {
826
828
  "transitionend",
827
829
  () => {
828
830
  var u;
829
- (u = this.root) == null || u.classList.add("vvw--settled"), this.waitForImagesToLoad(), this.imageState.reset();
831
+ (u = this.root) == null || u.classList.add("vvw--settled"), this.imageState.reset(), this.waitForImagesToLoad();
830
832
  },
831
833
  { once: !0 }
832
834
  ), this.root.classList.add("vvw--active"), this.displayActiveIndex(), this.options.onOpen && this.options.onOpen(this), this.options.onImageView && this.options.onImageView(a);
@@ -834,7 +836,7 @@ class st {
834
836
  }
835
837
  /// CLOSE
836
838
  async close(t = !0) {
837
- x.somethingOpened === this && this.root && (t ? await new Promise((e) => {
839
+ y.somethingOpened === this && this.root && (t ? await new Promise((e) => {
838
840
  let n = 0;
839
841
  this.root.addEventListener("transitionend", (o) => {
840
842
  o.target === this.root && (n++, n === 2 && this.elements instanceof NodeList && this.elements.forEach((r) => {
@@ -843,16 +845,16 @@ class st {
843
845
  }), this.root.classList.add("vvw--closing");
844
846
  }) : this.elements instanceof NodeList && this.elements.forEach((e) => {
845
847
  e.style.opacity = "";
846
- }), this.options.keyboardListeners && window.removeEventListener("keydown", this.onKeyDown), window.removeEventListener("resize", this.onResizeHandler), window.removeEventListener("wheel", this.onScroll), this.unregisterPointerListeners(), this.pointers.removeListeners(), this.root.remove(), this.root = null, this.imageContainer = null, this.currentChildren = null, this.currentIndex = -1, document.body.style.overflow = "", x.somethingOpened = null, this.closeFunction(this), this.options.onClose && this.options.onClose(this));
848
+ }), this.options.keyboardListeners && window.removeEventListener("keydown", this.onKeyDown), window.removeEventListener("resize", this.onResizeHandler), window.removeEventListener("wheel", this.onScroll), this.unregisterPointerListeners(), this.pointers.removeListeners(), this.root.remove(), this.root = null, this.imageContainer = null, this.currentChildren = null, this.currentIndex = -1, document.body.style.overflow = "", y.somethingOpened = null, this.closeFunction(this), this.options.onClose && this.options.onClose(this));
847
849
  }
848
850
  next() {
849
- if (x.somethingOpened !== this)
851
+ if (y.somethingOpened !== this)
850
852
  return;
851
853
  const t = (this.currentIndex + 1) % this.elements.length;
852
854
  this.view(t, { next: !0, prev: !1 });
853
855
  }
854
856
  prev() {
855
- if (x.somethingOpened !== this)
857
+ if (y.somethingOpened !== this)
856
858
  return;
857
859
  const t = (this.currentIndex - 1 + this.elements.length) % this.elements.length;
858
860
  this.view(t, { next: !1, prev: !0 });
@@ -863,10 +865,10 @@ class st {
863
865
  });
864
866
  }
865
867
  getCurrentIndex() {
866
- return x.somethingOpened !== this ? -1 : this.currentIndex;
868
+ return y.somethingOpened !== this ? -1 : this.currentIndex;
867
869
  }
868
870
  view(t, e) {
869
- if (x.somethingOpened !== this || t < 0 || t >= this.elements.length)
871
+ if (y.somethingOpened !== this || t < 0 || t >= this.elements.length)
870
872
  return;
871
873
  const i = this.currentIndex;
872
874
  this.currentIndex = t;
package/dist/vistaview.umd.js CHANGED
@@ -1,4 +1,4 @@
1
- (function(v,w){typeof exports=="object"&&typeof module<"u"?w(exports):typeof define=="function"&&define.amd?define(["exports"],w):(v=typeof globalThis<"u"?globalThis:v||self,w(v.VistaView={}))})(this,(function(v){"use strict";var rt=Object.defineProperty;var at=(v,w,I)=>w in v?rt(v,w,{enumerable:!0,configurable:!0,writable:!0,value:I}):v[w]=I;var h=(v,w,I)=>at(v,typeof w!="symbol"?w+"":w,I);function w(s){return s&&!/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(s.trim())&&s}function I(s){const e=window.getComputedStyle(s).objectFit||"",{width:i,height:n}=s.getBoundingClientRect(),o=s.naturalWidth,r=s.naturalHeight;if(!e)return{width:i,height:n};if(!o||!r)return{width:i,height:n};const a=o/r,l=i/n;switch(e){case"fill":return{width:i,height:n};case"none":return{width:o,height:r};case"contain":return a>l?{width:i,height:i/a}:{width:n*a,height:n};case"cover":return a<l?{width:i,height:i/a}:{width:n*a,height:n};case"scale-down":{const c={width:o,height:r},m=a>l?{width:i,height:i/a}:{width:n*a,height:n};return m.width<=c.width&&m.height<=c.height?m:c}}return{width:i,height:n}}function W(s){const t=getComputedStyle(s),e=s.getBoundingClientRect();return{objectFit:t.objectFit,borderRadius:t.borderRadius,objectPosition:t.objectPosition,overflow:t.overflow,top:e.top,left:e.left,width:e.width,height:e.height,naturalWidth:s.naturalWidth,naturalHeight:s.naturalHeight}}function k(s){const t=s.imageElm?W(s.imageElm):null,e=s.anchorElm?W(s.anchorElm):null,i=w(t==null?void 0:t.borderRadius),n=e&&w(e==null?void 0:e.borderRadius),o=(n?e==null?void 0:e.borderRadius:i?t==null?void 0:t.borderRadius:"")||"";return{fit:(t==null?void 0:t.objectFit)||(e==null?void 0:e.objectFit)||"",pos:(t==null?void 0:t.objectPosition)||"",br:o,overflow:n?e.overflow:i?t.overflow:"",nw:(t==null?void 0:t.naturalWidth)||0,nh:(t==null?void 0:t.naturalHeight)||0,w:(e==null?void 0:e.width)||(t==null?void 0:t.width)||0,h:(e==null?void 0:e.height)||(t==null?void 0:t.height)||0,top:(e==null?void 0:e.top)||(t==null?void 0:t.top)||0,left:(e==null?void 0:e.left)||(t==null?void 0:t.left)||0}}function P(s,t,e,i=!1){const{fit:n,w:o,h:r,nw:a,nh:l,br:c,top:m,left:f}=k(s),$=Math.min(Math.max(f,-o),window.innerWidth+o)-window.innerWidth/2+o/2,y=Math.min(Math.max(m,-r),window.innerHeight+r)-window.innerHeight/2+r/2,d=e.style;d.width=`${o}px`,d.height=`${r}px`,d.objectFit=n,e.width=a,e.height=l,d.setProperty("--vvw-init-radius",`${c}`),d.setProperty("--vvw-pulse-radius",`calc(1.3 * ${c})`),d.setProperty("--vvw-init-x",`${$}px`),d.setProperty("--vvw-init-y",`${y}px`),i&&(d.setProperty("--vvw-current-x",`${$}px`),d.setProperty("--vvw-current-y",`${y}px`));const u=I(s.imageElm),C=Math.min(o,u.width),x=Math.min(r,u.height),p=t.style;p.setProperty("--vvw-init-radius",`${c}`),p.setProperty("--vvw-init-w",`${C}px`),p.setProperty("--vvw-init-h",`${x}px`),i&&(p.setProperty("--vvw-current-radius",`${c}`),p.setProperty("--vvw-current-w",`${C}px`),p.setProperty("--vvw-current-h",`${x}px`),t.dataset.vvwWidth=C.toString(),t.dataset.vvwHeight=x.toString())}function F(s){const t=window.innerWidth,e=window.innerHeight,i=s.naturalWidth,n=s.naturalHeight;if(!i||!n)throw new Error("Image natural dimensions are zero");if(i<t&&n<e)return{width:i,height:n};const o=i/n,r=t/e;let a,l;return o>r?(a=t,l=t/o):(l=e,a=e*o),{width:a,height:l}}function q(s,t,e){return Math.min(Math.max(s,t),e)}function L(s,t=2){const e=Math.pow(10,t);return Math.round(s*e)/e}const R='<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>',O='<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>',Z='<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>',X='<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>',N='<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',Y='<svg viewBox="0 0 24 24"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>';let D=null;function B(){return D||(window.trustedTypes||(window.trustedTypes={createPolicy:(s,t)=>t}),D=window.trustedTypes.createPolicy("vistaView-policy",{createHTML:s=>s,createScript:()=>{throw new Error("Not implemented")},createScriptURL:()=>{throw new Error("Not implemented")}}),D)}function A(s){const e=B().createHTML(s),i=document.createElement("template");i.innerHTML=e;const n=i.content;return i.remove(),n}function z(){return{name:"download",icon:Y,onClick:async s=>{var o;const t=await fetch(s.src),e=await t.blob(),i=t.url,n=document.createElement("a");n.href=URL.createObjectURL(e),n.download=((o=i.split("/").pop())==null?void 0:o.split("?")[0].split("#")[0])||"download",document.body.appendChild(n),n.click(),document.body.removeChild(n)}}}function j(s){if(typeof s=="string")switch(s){case"zoomIn":return`<button aria-label="Zoom In" class="vvw-zoom-in vvw-ui">${Z}</button>`;case"zoomOut":return`<button aria-label="Zoom Out" disabled class="vvw-zoom-out vvw-ui">${X}</button>`;case"close":return`<button aria-label="Close" class="vvw-close vvw-ui">${N}</button>`;case"indexDisplay":return'<div class="vvw-index vvw-ui" aria-hidden="true"></div>';case"description":return'<div class="vvw-desc vvw-ui" role="status" aria-live="polite" aria-atomic="true"></div>';default:return""}return`<button class="vvw-ui" aria-label="${s.description||s.name}" data-vvw-control="${s.name}">${s.icon}</button>`}function V(s,t){const e=document.createElement("div");e.className="vvw-item",e.dataset.vvwPos=`${t!==void 0?t:""}`,e.dataset.vvwIdx=s.index.toString(),e.appendChild(A(`<img class="vvw-img-lo" src="${s.thumb||s.src}" alt="${s.alt||""}" />
1
+ (function(v,w){typeof exports=="object"&&typeof module<"u"?w(exports):typeof define=="function"&&define.amd?define(["exports"],w):(v=typeof globalThis<"u"?globalThis:v||self,w(v.VistaView={}))})(this,(function(v){"use strict";var rt=Object.defineProperty;var at=(v,w,$)=>w in v?rt(v,w,{enumerable:!0,configurable:!0,writable:!0,value:$}):v[w]=$;var h=(v,w,$)=>at(v,typeof w!="symbol"?w+"":w,$);function w(s){return s&&!/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(s.trim())&&s}function $(s){const e=window.getComputedStyle(s).objectFit||"",{width:i,height:n}=s.getBoundingClientRect(),o=s.naturalWidth,r=s.naturalHeight;if(!e)return{width:i,height:n};if(!o||!r)return{width:i,height:n};const a=o/r,l=i/n;switch(e){case"fill":return{width:i,height:n};case"none":return{width:o,height:r};case"contain":return a>l?{width:i,height:i/a}:{width:n*a,height:n};case"cover":return a<l?{width:i,height:i/a}:{width:n*a,height:n};case"scale-down":{const c={width:o,height:r},m=a>l?{width:i,height:i/a}:{width:n*a,height:n};return m.width<=c.width&&m.height<=c.height?m:c}}return{width:i,height:n}}function W(s){const t=getComputedStyle(s),e=s.getBoundingClientRect();return{objectFit:t.objectFit,borderRadius:t.borderRadius,objectPosition:t.objectPosition,overflow:t.overflow,top:e.top,left:e.left,width:e.width,height:e.height,naturalWidth:s.naturalWidth,naturalHeight:s.naturalHeight}}function k(s){const t=s.imageElm?W(s.imageElm):null,e=s.anchorElm?W(s.anchorElm):null,i=w(t==null?void 0:t.borderRadius),n=e&&w(e==null?void 0:e.borderRadius),o=(n?e==null?void 0:e.borderRadius:i?t==null?void 0:t.borderRadius:"")||"";return{fit:(t==null?void 0:t.objectFit)||(e==null?void 0:e.objectFit)||"",pos:(t==null?void 0:t.objectPosition)||"",br:o,overflow:n?e.overflow:i?t.overflow:"",nw:(t==null?void 0:t.naturalWidth)||0,nh:(t==null?void 0:t.naturalHeight)||0,w:(e==null?void 0:e.width)||(t==null?void 0:t.width)||0,h:(e==null?void 0:e.height)||(t==null?void 0:t.height)||0,top:(e==null?void 0:e.top)||(t==null?void 0:t.top)||0,left:(e==null?void 0:e.left)||(t==null?void 0:t.left)||0}}function P(s,t,e,i=!1){const{fit:n,w:o,h:r,nw:a,nh:l,br:c,top:m,left:f}=k(s),L=Math.min(Math.max(f,-o),window.innerWidth+o)-window.innerWidth/2+o/2,E=Math.min(Math.max(m,-r),window.innerHeight+r)-window.innerHeight/2+r/2,d=e.style;d.width=`${o}px`,d.height=`${r}px`,d.objectFit=n,e.width=a,e.height=l,d.setProperty("--vvw-init-radius",`${c}`),d.setProperty("--vvw-pulse-radius",`calc(1.3 * ${c})`),d.setProperty("--vvw-init-x",`${L}px`),d.setProperty("--vvw-init-y",`${E}px`),i&&(d.setProperty("--vvw-current-x",`${L}px`),d.setProperty("--vvw-current-y",`${E}px`));const u=$(s.imageElm),b=Math.min(o,u.width),y=Math.min(r,u.height),p=t.style;p.setProperty("--vvw-init-radius",`${c}`),p.setProperty("--vvw-init-w",`${b}px`),p.setProperty("--vvw-init-h",`${y}px`),i&&(p.setProperty("--vvw-current-radius",`${c}`),p.setProperty("--vvw-current-w",`${b}px`),p.setProperty("--vvw-current-h",`${y}px`),t.dataset.vvwWidth=b.toString(),t.dataset.vvwHeight=y.toString())}function F(s){const t=window.innerWidth,e=window.innerHeight,i=s.naturalWidth,n=s.naturalHeight;if(!i||!n)throw new Error("Image natural dimensions are zero");if(i<t&&n<e)return{width:i,height:n};const o=i/n,r=t/e;let a,l;return o>r?(a=t,l=t/o):(l=e,a=e*o),{width:a,height:l}}function q(s,t,e){return Math.min(Math.max(s,t),e)}function C(s,t=2){const e=Math.pow(10,t);return Math.round(s*e)/e}const R='<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>',O='<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>',Z='<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>',X='<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>',N='<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',Y='<svg viewBox="0 0 24 24"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>';let D=null;function B(){return D||(window.trustedTypes||(window.trustedTypes={createPolicy:(s,t)=>t}),D=window.trustedTypes.createPolicy("vistaView-policy",{createHTML:s=>s,createScript:()=>{throw new Error("Not implemented")},createScriptURL:()=>{throw new Error("Not implemented")}}),D)}function A(s){const e=B().createHTML(s),i=document.createElement("template");i.innerHTML=e;const n=i.content;return i.remove(),n}function z(){return{name:"download",icon:Y,onClick:async s=>{var o;const t=await fetch(s.src),e=await t.blob(),i=t.url,n=document.createElement("a");n.href=URL.createObjectURL(e),n.download=((o=i.split("/").pop())==null?void 0:o.split("?")[0].split("#")[0])||"download",document.body.appendChild(n),n.click(),document.body.removeChild(n)}}}function j(s){if(typeof s=="string")switch(s){case"zoomIn":return`<button aria-label="Zoom In" class="vvw-zoom-in vvw-ui">${Z}</button>`;case"zoomOut":return`<button aria-label="Zoom Out" disabled class="vvw-zoom-out vvw-ui">${X}</button>`;case"close":return`<button aria-label="Close" class="vvw-close vvw-ui">${N}</button>`;case"indexDisplay":return'<div class="vvw-index vvw-ui" aria-hidden="true"></div>';case"description":return'<div class="vvw-desc vvw-ui" role="status" aria-live="polite" aria-atomic="true"></div>';default:return""}return`<button class="vvw-ui" aria-label="${s.description||s.name}" data-vvw-control="${s.name}">${s.icon}</button>`}function V(s,t){const e=document.createElement("div");e.className="vvw-item",e.dataset.vvwPos=`${t!==void 0?t:""}`,e.dataset.vvwIdx=s.index.toString(),e.appendChild(A(`<img class="vvw-img-lo" src="${s.thumb||s.src}" alt="${s.alt||""}" />
2
2
  <img class="vvw-img-hi" src="${s.src}" alt="${s.alt||""}" />`));const i=e.querySelector("img.vvw-img-lo"),n=e.querySelector("img.vvw-img-hi");return P(s,n,i,t===0),e}function U({controls:s}){const t=i=>i?i.map(j).join(""):"";return A(`<div class="vvw-root" id="vvw-root">
3
3
  <div class="vvw-container">
4
4
  <div class="vvw-bg"></div>
@@ -8,4 +8,4 @@
8
8
  <div class="vvw-prev vvw-ui"><button aria-label="Previous">${R}</button></div>
9
9
  <div class="vvw-next vvw-ui"><button aria-label="Next">${O}</button></div>
10
10
  </div>
11
- </div>`)}const M={animationDurationBase:333,maxZoomLevel:2,preloads:1,keyboardListeners:!0,arrowOnSmallScreens:!1,rapidLimit:222,controls:{topLeft:["indexDisplay"],topRight:["zoomIn","zoomOut",z(),"close"],bottomLeft:["description"]}};function K(s){}function _(s){const t=s.options.preloads;s.imageContainer.style.width=`${(t*2+1)*100}vw`,s.imageContainer.style.left=`-${t*100}vw`,s.imageContainer.style.display="flex",G(s)}function G(s){let t={x:0,y:0},e={x:0,y:0},i=null;s.registerPointerListener(n=>{var o;if(!n.hasInternalExecution&&!(n.pointers.length>1)){if(n.event==="down"&&(t={x:n.pointer.x,y:n.pointer.y},e={x:n.pointer.x,y:n.pointer.y},(o=n.abortController)==null||o.abort()),n.event==="move"){e={x:n.pointer.x,y:n.pointer.y};const r=e.x-t.x,a=e.y-t.y;if(!i&&Math.abs(a)>Math.abs(r)||i==="y"){const l=a/window.innerHeight*100;s.imageContainer.style.transition="none",s.imageContainer.style.transform=`translateY(${l}vh)`,i="y"}else if(!i&&Math.abs(r)>Math.abs(a)||i==="x"){const l=r/window.innerWidth*100;s.imageContainer.style.transition="none",s.imageContainer.style.transform=`translateX(${l}vw)`,i="x"}}if(n.event==="up"||n.event==="cancel"){let r=function(a){var l;(l=s.imageContainer)==null||l.addEventListener("transitionend",function c(){var m;(m=s.imageContainer)==null||m.removeEventListener("transitionend",c),s.imageContainer.style.transition="",s.imageContainer.style.transform=""}),s.imageContainer.style.transition="transform 222ms ease",s.imageContainer.style.transform=a};if(i==="y"){const a=e.y-t.y;Math.abs(a)>144?(s.imageContainer.style.transition="transform 222ms ease",s.imageContainer.style.transform="translateY(0vh)",s.close()):r("translateY(0vh)")}if(i==="x"){const a=e.x-t.x,l=n.pointer.movementX,c=1;s.imageContainer.style.transition="",a>0&&Math.abs(l)>c?s.prev():a<0&&Math.abs(l)>c?s.next():r("translateX(0vw)")}i=null,t={x:0,y:0},e={x:0,y:0}}}})}function J(s){}function Q({vistaView:{isReducedMotion:s},htmlElements:{to:t},index:{from:e,to:i},vistaView:{elements:n,imageContainer:o,options:r}},a){if(!(!t||a.aborted||s||!(Math.abs(i-e)===1||e===0&&i===n.length-1||e===n.length-1&&i===0)))return{cleanup:()=>{o.style.transition="",o.style.transform=""},transitionEnded:new Promise(c=>{o.addEventListener("transitionend",()=>{c()},{once:!0}),o.addEventListener("transitioncancel",()=>{a.aborted&&c()},{once:!0});const m=Math.round(r.animationDurationBase*100)/100,f=i===e+1||e===n.length-1&&i===0?"translateX(-100vw)":"translateX(100vw)";o.style.transition=`transform ${m}ms ease`,o.style.transform=f})}}class tt{constructor({elm:t,listeners:e}){h(this,"pointers",[]);h(this,"elm");h(this,"listeners",[]);h(this,"lastPointerDownId",null);h(this,"removeLastPointer",()=>{if(this.pointers.length&&this.lastPointerDownId!==null){const t=this.pointers.findIndex(e=>e.id===this.lastPointerDownId);t!==-1&&this.pointers.splice(t,1)}});h(this,"onPointerDown",t=>{if(!this.listeners.length||t.button!==0)return;t.preventDefault(),this.lastPointerDownId=t.pointerId,window.addEventListener("contextmenu",this.removeLastPointer,{once:!0}),window.addEventListener("auxclick",this.removeLastPointer,{once:!0});let e={x:t.clientX,y:t.clientY,movementX:0,movementY:0,id:t.pointerId};this.pointers.push(e),this.listeners.forEach(i=>i({event:"down",pointer:e,pointers:this.pointers,lastPointerLen:this.pointers.length-1}))});h(this,"onPointerMove",t=>{if(!this.listeners.length)return;t.preventDefault();const e=this.pointers.find(i=>i.id===t.pointerId);e&&(e.movementX=t.movementX,e.movementY=t.movementY,e.x=t.clientX,e.y=t.clientY,this.listeners.forEach(i=>i({event:"move",pointer:e,pointers:this.pointers,lastPointerLen:this.pointers.length-1})))});h(this,"onPointerUp",t=>{if(!this.listeners.length||t.button!==0||(window.removeEventListener("contextmenu",this.removeLastPointer),window.removeEventListener("auxclick",this.removeLastPointer),t.target instanceof Node&&!this.elm.contains(t.target)&&t.target!==document.querySelector("html")&&t.target!==document))return;t.preventDefault();const e=this.pointers.findIndex(o=>o.id===t.pointerId);if(e===-1)return;const i=this.pointers[e];i.x=t.clientX,i.y=t.clientY;const n=this.pointers.length;this.pointers.splice(e,1),this.listeners.forEach(o=>o({event:"up",pointer:i,pointers:this.pointers,lastPointerLen:n}))});h(this,"onPointerCancel",t=>{if(!this.listeners.length||t.target instanceof Node&&!this.elm.contains(t.target)&&t.target!==document.querySelector("html")&&t.target!==document)return;t.preventDefault();const e=this.pointers.findIndex(o=>o.id===t.pointerId);if(e===-1)return;const i=this.pointers[e];i.x=t.clientX,i.y=t.clientY;const n=this.pointers.length;this.pointers.splice(e,1),this.listeners.forEach(o=>o({event:"cancel",pointer:i,pointers:this.pointers,lastPointerLen:n}))});this.elm=t??document,e&&(this.listeners=e),this.startListeners()}startListeners(){this.elm.addEventListener("pointerdown",this.onPointerDown),this.elm.addEventListener("pointermove",this.onPointerMove),document.addEventListener("pointerup",this.onPointerUp),document.addEventListener("pointercancel",this.onPointerCancel)}removeListeners(){this.elm.removeEventListener("pointerdown",this.onPointerDown),this.elm.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp),document.removeEventListener("pointercancel",this.onPointerCancel),this.pointers=[]}addEventListener(t){this.listeners.push(t)}removeEventListener(t){this.listeners=this.listeners.filter(e=>e!==t)}getPointerDistance(t,e){const i=t.x-e.x,n=t.y-e.y;return Math.sqrt(i*i+n*n)}getCentroid(){if(this.pointers.length===0)return null;const t=this.pointers.reduce((e,i)=>(e.x+=i.x,e.y+=i.y,e),{x:0,y:0});return{x:t.x/this.pointers.length,y:t.y/this.pointers.length}}}class et{constructor(t,e){h(this,"maxZoomLevel");h(this,"image",null);h(this,"rect",null);h(this,"initialCenter",{x:0,y:0});h(this,"maxDimension",{width:0});h(this,"minDimension",{initialWidth:0,initialHeight:0,minWidth:0,closingWidth:0});h(this,"accumulatedTranslate",{x:0,y:0});h(this,"scale",1);h(this,"translate",{x:0,y:0});h(this,"onScale",null);h(this,"animationTimestamp",0);this.maxZoomLevel=t,this.onScale=e}clean(){this.image&&(this.image.style.transform="",this.image.style.width="",this.image.style.height="",this.image.style.top="",this.image.style.left="",this.image.style.opacity="")}reset(){this.clean(),this.image=null,this.rect=null,this.initialCenter={x:window.innerWidth/2,y:window.innerHeight/2},this.maxDimension={width:0},this.minDimension={initialWidth:0,initialHeight:0,minWidth:0,closingWidth:0},this.accumulatedTranslate={x:0,y:0},this.scale=1,this.translate={x:0,y:0}}setCurrentImage(t){if(this.rect=null,this.image=t,this.maxDimension={width:t.naturalWidth*this.maxZoomLevel},!t.dataset.vvwWidth||!t.dataset.vvwHeight)throw new Error("VistaImageState: Image dataset vvwWidth or vvwHeight not set.");const e=parseFloat(t.dataset.vvwWidth),i=parseFloat(t.dataset.vvwHeight);this.minDimension={initialWidth:e,initialHeight:i,minWidth:e*.1,closingWidth:e*.5},this.accumulatedTranslate={x:0,y:0}}setInitialCenter(t){this.initialCenter=t||{x:window.innerWidth/2,y:window.innerHeight/2}}move(t){this.image&&(this.rect||(this.rect=this.image.getBoundingClientRect()),this.translate.x=L(t.x-this.initialCenter.x),this.translate.y=L(t.y-this.initialCenter.y),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`)}snapToTargetIfClose(t,e,i=1){return Math.abs(t-e)<=i&&(t=e),t}scaleMove(t,e){if(!this.image)return;this.rect||(this.rect=this.image.getBoundingClientRect()),e||(e=this.initialCenter);const i=this.snapToTargetIfClose(q(this.rect.width*t,this.minDimension.minWidth,this.maxDimension.width),this.minDimension.initialWidth);this.onScale&&this.onScale({scale:i/(this.maxDimension.width/this.maxZoomLevel),isMax:i>=this.maxDimension.width,isMin:i<=this.minDimension.initialWidth}),this.scale=L(i/this.rect.width);const n=this.rect.left+this.rect.width/2,o=this.rect.top+this.rect.height/2,r=this.initialCenter.x-n,a=this.initialCenter.y-o,l=r*(1-this.scale),c=a*(1-this.scale),m=e.x-this.initialCenter.x,f=e.y-this.initialCenter.y;this.translate.x=L(l+m),this.translate.y=L(c+f),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`,i<=this.minDimension.closingWidth?this.image.style.opacity="0.5":this.image.style.opacity=""}moveAndNormalize(t){let e=0,i=!1;const n=({x:o,y:r})=>{if(i)return;if(Math.abs(o)<.001&&Math.abs(r)<.001)return this.normalize();o*=.9,r*=.9;const a=this.image.getBoundingClientRect();this.translate.x=L(this.translate.x+o),this.translate.y=L(this.translate.y+r),a.right<window.innerWidth/2&&(this.translate.x+=(window.innerWidth/2-a.right)*.1,o*=.7),a.left>window.innerWidth/2&&(this.translate.x-=(a.left-window.innerWidth/2)*.1,o*=.7),a.bottom<window.innerHeight/2&&(this.translate.y+=(window.innerHeight/2-a.bottom)*.1,r*=.7),a.top>window.innerHeight/2&&(this.translate.y-=(a.top-window.innerHeight/2)*.1,r*=.7),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`,e=requestAnimationFrame(()=>n({x:o,y:r}))};return n({x:t.movementX,y:t.movementY}),()=>{i=!0,cancelAnimationFrame(e),this.normalize(!1)}}animateZoom(t){if(!this.image)return;this.rect||(this.rect=this.image.getBoundingClientRect());const e=Date.now(),i=this.image;this.rect.width*t<this.minDimension.closingWidth||i.width<Math.floor(this.minDimension.initialWidth)||(i.addEventListener("transitionend",()=>{this.animationTimestamp===e&&i&&(i.style.transition="",this.normalize())},{once:!0}),i.style.transition||(i.style.transition="all 222ms ease"),this.animationTimestamp=e,this.scaleMove(t))}normalize(t=!0){if(!this.image||!this.rect)return;const e=this.rect.width*this.scale,i=e<=this.minDimension.closingWidth,n=i?e:this.snapToTargetIfClose(this.rect.width*this.scale,this.minDimension.initialWidth),o=i?this.rect.height*this.scale:this.snapToTargetIfClose(this.rect.height*this.scale,this.minDimension.initialHeight);if(this.image.style.width=`${n}px`,this.image.style.height=`${o}px`,this.scale=1,this.image.style.opacity="",this.accumulatedTranslate.x+=this.translate.x,this.accumulatedTranslate.y+=this.translate.y,this.image.style.left=`calc(50% + ${this.accumulatedTranslate.x}px)`,this.image.style.top=`calc(50% + ${this.accumulatedTranslate.y}px)`,this.translate={x:0,y:0},this.image.style.transform="",this.rect=this.image.getBoundingClientRect(),i)return!0;if(n<this.minDimension.initialWidth)this.accumulatedTranslate.x=0,this.accumulatedTranslate.y=0,requestAnimationFrame(()=>{const r=this.image;r&&(r.addEventListener("transitionend",()=>{r&&(this.clean(),this.rect=null)},{once:!0}),r.style.transition="all 222ms ease",r.style.width=`${this.minDimension.initialWidth}px`,r.style.height=`${this.minDimension.initialHeight}px`,r.style.left="50%",r.style.top="50%")});else if(t){let r=!1;if(this.rect.right<window.innerWidth/2&&(r=!0,this.accumulatedTranslate.x+=window.innerWidth/2-this.rect.right),this.rect.left>window.innerWidth/2&&(r=!0,this.accumulatedTranslate.x-=this.rect.left-window.innerWidth/2),this.rect.bottom<window.innerHeight/2&&(r=!0,this.accumulatedTranslate.y+=window.innerHeight/2-this.rect.bottom),this.rect.top>window.innerHeight/2&&(r=!0,this.accumulatedTranslate.y-=this.rect.top-window.innerHeight/2),r){const a=this.image;a.addEventListener("transitionend",()=>{a&&(a.style.transition="",this.rect=null)},{once:!0}),a.style.transition="all 222ms ease",a.style.left=`calc(50% + ${this.accumulatedTranslate.x}px)`,a.style.top=`calc(50% + ${this.accumulatedTranslate.y}px)`}else this.rect=null}}}class it{constructor(){h(this,"fiolast",{})}fio(t,e,i=50){const o=Date.now()-(this.fiolast[e]??0),r=()=>{this.fiolast[e]=Date.now(),t()};if(!this.fiolast[e]){r();return}o>=i&&r()}}const b={somethingOpened:null};class nt{constructor(t,e={}){h(this,"options");h(this,"elements");h(this,"isReducedMotion");h(this,"currentIndex",-1);h(this,"currentChildren",null);h(this,"setupFunction",K);h(this,"initFunction",_);h(this,"closeFunction",J);h(this,"transitionFunction",Q);h(this,"pointers",null);h(this,"imageState");h(this,"imageTransitions",new Map);h(this,"root",null);h(this,"imageContainer",null);h(this,"onClickElements",t=>{t.preventDefault();const e=t.currentTarget;e.dataset.vistaIdx&&this.open(parseInt(e.dataset.vistaIdx))});h(this,"defaultOnClickHandler",t=>t.preventDefault());h(this,"abortController",null);h(this,"throttle",new it);h(this,"lastSwapTime",0);h(this,"transitionCleanup",null);h(this,"isZoomedIn",!1);h(this,"onKeyDown",t=>{switch(t.key){case"ArrowLeft":t.preventDefault(),this.prev();break;case"ArrowRight":t.preventDefault(),this.next();break;case"ArrowUp":t.preventDefault(),this.zoomIn();break;case"ArrowDown":t.preventDefault(),this.zoomOut();break;case"Escape":t.preventDefault(),this.close();break}});h(this,"onScroll",t=>{t.preventDefault();const e=t.deltaY;this.imageState.setInitialCenter({x:t.clientX,y:t.clientY}),e<0?this.zoomIn():e>0&&this.zoomOut()});h(this,"onResizeHandler",()=>{this.currentChildren.htmls.forEach((t,e)=>{const i=this.currentChildren.images[e],n=t.querySelector("img.vvw-img-hi"),o=t.querySelector("img.vvw-img-lo");if(P(i,n,o,!1),n.classList.contains("vvw--loaded")){const{width:r,height:a}=F(n);n.style.setProperty("--vvw-current-w",`${r}px`),n.style.setProperty("--vvw-current-h",`${a}px`),n.dataset.vvwWidth=r.toString(),n.dataset.vvwHeight=a.toString()}})});h(this,"pointerListeners",[]);h(this,"getInternalPointerListener",()=>{const t=this.imageState;let e=0,i=!1,n=()=>{};return o=>{if(o.event==="down"){if(n(),this.isZoomedIn&&o.pointers.length===1){const r=this.pointers.getCentroid();t.setInitialCenter(r)}if(o.pointers.length>=2){i=!0;const r=this.pointers.getCentroid();e=this.pointers.getPointerDistance(o.pointers[0],o.pointers[1]),t.setInitialCenter(r)}}else if(o.event==="move"){if(this.isZoomedIn&&o.pointers.length===1&&o.lastPointerLen===0){const r=this.pointers.getCentroid();t.move(r)}if(o.pointers.length>=2&&i){const r=this.pointers.getCentroid(),a=this.pointers.getPointerDistance(o.pointers[0],o.pointers[1]);t.scaleMove(a/e,r)}}else(o.event==="up"||o.event==="cancel")&&(i||this.isZoomedIn)&&(i?(i=!1,t.normalize()&&requestAnimationFrame(()=>{this.close()})):this.isZoomedIn&&o.pointers.length===0&&(n=t.moveAndNormalize(o.pointer)));this.pointerListeners.forEach(r=>r({...o,hasInternalExecution:this.isZoomedIn||i,abortController:this.abortController}))}});this.elements=t,this.options={...M,...e,controls:{...M.controls,...e.controls}},this.imageState=new et(this.options.maxZoomLevel,i=>{var n,o,r,a,l,c;i.isMin?(this.isZoomedIn=!1,(n=this.qs(".vvw-zoom-out"))==null||n.setAttribute("disabled","true"),(o=this.qs('.vvw-item[data-vvw-idx="'+this.currentIndex+'"]'))==null||o.style.setProperty("pointer-events","none")):(this.isZoomedIn=!0,(r=this.qs(".vvw-zoom-out"))==null||r.removeAttribute("disabled"),(a=this.qs('.vvw-item[data-vvw-idx="'+this.currentIndex+'"]'))==null||a.style.setProperty("pointer-events","auto")),i.isMax?(l=this.qs(".vvw-zoom-in"))==null||l.setAttribute("disabled","true"):(c=this.qs(".vvw-zoom-in"))==null||c.removeAttribute("disabled")}),this.options.setupFunction&&(this.setupFunction=this.options.setupFunction),this.options.closeFunction&&(this.closeFunction=this.options.closeFunction),this.options.initFunction&&(this.initFunction=this.options.initFunction),this.options.transitionFunction&&(this.transitionFunction=this.options.transitionFunction),this.isReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.elements instanceof NodeList&&this.elements.forEach((i,n)=>{i.dataset.vistaIdx=n.toString(),i.addEventListener("click",this.defaultOnClickHandler),i.addEventListener("pointerup",this.onClickElements)})}qs(t){return this.root?this.root.querySelector(t):null}async swap(t,e){const i=this.options.preloads||0,n=this.currentIndex,{htmls:o,images:r}=this.getChildElements(i,n),a=this.imageContainer,l=this.currentChildren,c={htmlElements:{from:l.htmls,to:o},images:{from:l.images,to:r},index:{from:t,to:this.currentIndex},via:e||{next:!1,prev:!1},vistaView:this};this.setupFunction(c),this.currentChildren={htmls:o,images:r},this.displayActiveIndex();const m=this.abortController.signal;if(performance.now()-this.lastSwapTime<this.options.rapidLimit){a.innerHTML="",this.transitionCleanup&&this.transitionCleanup(),o.forEach(E=>{a.appendChild(E)}),this.lastSwapTime=performance.now(),this.waitForImagesToLoad(),this.options.onImageView&&this.options.onImageView(c);return}const y=this.transitionFunction(c,m);y&&(this.transitionCleanup=y.cleanup,await y.transitionEnded),this.lastSwapTime=performance.now();const d=o[Math.floor(o.length/2)].dataset.vvwIdx,u=a.querySelector(`.vvw-item[data-vvw-idx="${d}"] img.vvw-img-hi`),C=this.imageTransitions.get(u);this.imageTransitions.delete(u);const x=u.getAttribute("style")||"",p=u.classList.contains("vvw--loaded"),T=u.classList.contains("vvw--ready"),S=u.width,H=u.height;this.imageState.reset(),a.innerHTML="",this.transitionCleanup&&this.transitionCleanup(),o.forEach(E=>{const g=E.querySelector("img.vvw-img-hi");E.dataset.vvwPos==="0"&&!m.aborted&&x&&S&&H&&(p&&(g.classList.add("vvw--loaded"),g.dataset.vvwWidth=u.dataset.vvwWidth||"",g.dataset.vvwHeight=u.dataset.vvwHeight||""),T&&(g.classList.add("vvw--ready"),g.width=S,g.height=H),g.setAttribute("style",x)),a.appendChild(E),E.dataset.vvwPos==="0"&&!m.aborted&&T?(this.imageState.setCurrentImage(g),this.imageState.setInitialCenter()):E.dataset.vvwPos==="0"&&!m.aborted&&x&&S&&H&&p&&C&&(this.imageTransitions.set(g,C),this.transitionImage(g,()=>{this.imageState.setCurrentImage(g),this.imageState.setInitialCenter(),g.classList.add("vvw--ready")}))}),this.waitForImagesToLoad(),this.options.onImageView&&this.options.onImageView(c)}getChildElements(t,e){const i=[],n=[];for(let o=-t;o<=t;o++){const r=(e+o+this.elements.length)%this.elements.length,a=this.elements[r],l=a instanceof HTMLImageElement?a:a instanceof HTMLAnchorElement&&a.querySelector("img")||void 0,c=a instanceof HTMLElement?{index:r,imageElm:l instanceof HTMLImageElement?l:void 0,anchorElm:a instanceof HTMLAnchorElement?a:void 0,src:a.dataset.vistaviewSrc||a.getAttribute("href")||a.getAttribute("src")||"",thumb:a.dataset.vistaviewThumb||(l instanceof HTMLImageElement?l.getAttribute("src"):void 0)||a.getAttribute("href")||void 0,alt:l instanceof HTMLImageElement&&l.getAttribute("alt")||void 0}:{index:r,...a};n.push(c),i.push(V(c,o))}return{htmls:i,images:n}}zoomIn(){this.throttle.fio(()=>{this.imageState.animateZoom(1.68)},"zoom",222)}zoomOut(){this.throttle.fio(()=>{this.imageState.animateZoom(.68)},"zoom",222)}displayActiveIndex(){var r;const t=this.currentIndex;this.elements instanceof NodeList&&this.elements.forEach((a,l)=>{a.style.opacity="",l===t&&(a.style.opacity="0")});const e=this.qs(".vvw-index"),i=`${t+1}`,n=`${this.elements.length}`;e&&(e.textContent=`${i} / ${n}`);const o=this.qs(".vvw-desc");if(o){const a=(r=this.currentChildren)==null?void 0:r.images.find(c=>c.index===t),l=(a==null?void 0:a.alt)||"";l?(o.textContent=l,o.setAttribute("aria-label",`Image ${i} of ${n}: ${l}`)):(o.textContent="",o.setAttribute("aria-label",`Image ${i} of ${n}`))}}transitionImage(t,e){const i=this.imageTransitions.get(t);i&&requestAnimationFrame(()=>{const{current:n,target:o}=i,r={width:n.width+(o.width-n.width)*.1,height:n.height+(o.height-n.height)*.1,radius:n.radius+(o.radius-n.radius)*.1};Math.abs(r.width-o.width)<.5&&Math.abs(r.height-o.height)<.5&&Math.abs(r.radius-o.radius)<.5?(t.style.setProperty("--vvw-current-w",`${o.width}px`),t.style.setProperty("--vvw-current-h",`${o.height}px`),t.style.setProperty("--vvw-current-radius",`${o.radius}px`),this.imageTransitions.delete(t),e()):(t.style.setProperty("--vvw-current-w",`${r.width}px`),t.style.setProperty("--vvw-current-h",`${r.height}px`),t.style.setProperty("--vvw-current-radius",`${r.radius}px`),this.imageTransitions.set(t,{current:r,target:o}),this.transitionImage(t,e))})}waitForImagesToLoad(){this.imageContainer.querySelectorAll("img.vvw-img-hi:not(.vvw--loaded)").forEach(i=>{const n=i,o=()=>{var c;n.width=n.naturalWidth,n.height=n.naturalHeight;const r=(c=n.parentElement)==null?void 0:c.matches(`[data-vvw-idx="${this.currentIndex}"]`),{width:a,height:l}=F(n);n.dataset.vvwWidth=a.toString(),n.dataset.vvwHeight=l.toString(),n.classList.add("vvw--loaded"),this.imageTransitions.set(n,{current:{width:n.style.getPropertyValue("--vvw-current-w")?parseFloat(n.style.getPropertyValue("--vvw-current-w")):0,height:n.style.getPropertyValue("--vvw-current-h")?parseFloat(n.style.getPropertyValue("--vvw-current-h")):0,radius:n.style.getPropertyValue("--vvw-current-radius")?parseFloat(n.style.getPropertyValue("--vvw-current-radius")):0},target:{width:a,height:l,radius:0}}),this.transitionImage(n,()=>{r&&(this.imageState.setCurrentImage(n),this.imageState.setInitialCenter()),n.classList.add("vvw--ready")})};if(n.complete&&n.naturalWidth!==0){o();return}n.addEventListener("load",()=>{o()}),n.addEventListener("error",()=>{var a;n.classList.add("vvw--loaderror");const r=document.createElement("p");r.className="vvw-img-err",r.setAttribute("role","alert"),r.textContent="Error loading image",(a=n.parentNode)==null||a.appendChild(r)})})}registerPointerListener(t){this.pointerListeners.push(t)}unregisterPointerListeners(){this.pointerListeners=[]}open(t=0){var c,m,f,$,y;if(b.somethingOpened)return;b.somethingOpened=this,this.currentIndex=t,document.body.style.overflow="hidden";const e=U({controls:this.options.controls});if(document.body.prepend(e),this.root=document.body.querySelector("#vvw-root"),!this.root)throw new Error("Failed to setup VistaView root element.");this.imageContainer=this.qs(".vvw-image-container"),this.options.animationDurationBase&&this.root.style.setProperty("--vvw-anim-dur",`${this.options.animationDurationBase}`),this.options.initialZIndex!==void 0&&this.root.style.setProperty("--vvw-init-z",`${this.options.initialZIndex??0}`),this.options.arrowOnSmallScreens&&this.root.classList.add("vvw-arrow-sm");const i=this.options.preloads||0,n=t,{images:o,htmls:r}=this.getChildElements(i,n),a={htmlElements:{from:null,to:r},images:{from:null,to:o},index:{from:null,to:this.currentIndex},via:{next:!1,prev:!1},vistaView:this};this.setupFunction(a),this.currentChildren={htmls:r,images:o},r.forEach(d=>{this.imageContainer.appendChild(d)}),(c=this.qs(".vvw-close"))==null||c.addEventListener("click",()=>this.close()),(m=this.qs(".vvw-zoom-in"))==null||m.addEventListener("click",()=>this.zoomIn()),(f=this.qs(".vvw-zoom-out"))==null||f.addEventListener("click",()=>this.zoomOut()),($=this.qs(".vvw-prev>button"))==null||$.addEventListener("click",()=>this.prev()),(y=this.qs(".vvw-next>button"))==null||y.addEventListener("click",()=>this.next()),this.options.keyboardListeners&&window.addEventListener("keydown",this.onKeyDown),window.addEventListener("wheel",this.onScroll,{passive:!1}),window.addEventListener("resize",this.onResizeHandler),this.pointers=new tt({elm:this.imageContainer,listeners:[this.getInternalPointerListener()]});const l={};[...this.options.controls.topLeft||[],...this.options.controls.topRight||[],...this.options.controls.topCenter||[],...this.options.controls.bottomCenter||[],...this.options.controls.bottomLeft||[],...this.options.controls.bottomRight||[]].forEach(d=>{typeof d!="string"&&(l[d.name]=d)}),this.root.querySelectorAll("button[data-vvw-control]").forEach(d=>{const u=d;u.addEventListener("click",C=>{const x=C.currentTarget.dataset.vvwControl,p=l[x],T=this.currentChildren.images.find(S=>S.index===this.currentIndex);p&&T&&(p.onClick.constructor.name==="AsyncFunction"?(u.classList.add("vvw--loading"),p.onClick(T,this).finally(()=>{u.classList.remove("vvw--loading")})):p.onClick(T,this))})}),this.initFunction(this),requestAnimationFrame(()=>{var d;(d=this.root)==null||d.addEventListener("transitionend",()=>{var u;(u=this.root)==null||u.classList.add("vvw--settled"),this.waitForImagesToLoad(),this.imageState.reset()},{once:!0}),this.root.classList.add("vvw--active"),this.displayActiveIndex(),this.options.onOpen&&this.options.onOpen(this),this.options.onImageView&&this.options.onImageView(a)})}async close(t=!0){b.somethingOpened===this&&this.root&&(t?await new Promise(e=>{let n=0;this.root.addEventListener("transitionend",o=>{o.target===this.root&&(n++,n===2&&this.elements instanceof NodeList&&this.elements.forEach(r=>{r.style.opacity=""}),n===3&&e(null))}),this.root.classList.add("vvw--closing")}):this.elements instanceof NodeList&&this.elements.forEach(e=>{e.style.opacity=""}),this.options.keyboardListeners&&window.removeEventListener("keydown",this.onKeyDown),window.removeEventListener("resize",this.onResizeHandler),window.removeEventListener("wheel",this.onScroll),this.unregisterPointerListeners(),this.pointers.removeListeners(),this.root.remove(),this.root=null,this.imageContainer=null,this.currentChildren=null,this.currentIndex=-1,document.body.style.overflow="",b.somethingOpened=null,this.closeFunction(this),this.options.onClose&&this.options.onClose(this))}next(){if(b.somethingOpened!==this)return;const t=(this.currentIndex+1)%this.elements.length;this.view(t,{next:!0,prev:!1})}prev(){if(b.somethingOpened!==this)return;const t=(this.currentIndex-1+this.elements.length)%this.elements.length;this.view(t,{next:!1,prev:!0})}destroy(){this.close(!1),this.elements instanceof NodeList&&this.elements.forEach(t=>{t.removeAttribute("data-vista-idx"),t.removeEventListener("click",this.defaultOnClickHandler),t.removeEventListener("pointerup",this.onClickElements)})}getCurrentIndex(){return b.somethingOpened!==this?-1:this.currentIndex}view(t,e){if(b.somethingOpened!==this||t<0||t>=this.elements.length)return;const i=this.currentIndex;this.currentIndex=t;const n=this.abortController;n==null||n.abort(),this.abortController=new AbortController,this.swap(i,e)}}function st(s){let t=null;if(typeof s=="string"?t=document.querySelectorAll(s):s instanceof NodeList&&(t=s),t)for(let e=0;e<t.length;e++){const i=t[e];if(!(i.dataset.vistaviewSrc||i.getAttribute("href")||i.getAttribute("src")||""))return`Element at index ${e} is missing 'src' / 'data-vistaview-src' / 'href' attribute.`}else{const e=s;for(let i=0;i<e.length;i++)if(!e[i].src)return`Element at index ${i} is missing 'src' attribute.`}return t||s}function ot({elements:s,...t}){if(!s)throw new Error("No elements");let e=st(s);if(typeof e=="string")return null;const i=new nt(e,t);return{open:(n=0)=>i.open(n),close:()=>i.close(),next:()=>i.next(),prev:()=>i.prev(),destroy:()=>i.destroy(),getCurrentIndex:()=>i.getCurrentIndex(),view:n=>{i.view(n)}}}v.DefaultOptions=M,v.vistaView=ot,v.vistaViewDownload=z,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));
11
+ </div>`)}const M={animationDurationBase:333,maxZoomLevel:2,preloads:1,keyboardListeners:!0,arrowOnSmallScreens:!1,rapidLimit:222,controls:{topLeft:["indexDisplay"],topRight:["zoomIn","zoomOut",z(),"close"],bottomLeft:["description"]}};function K(s){}function _(s){const t=s.options.preloads;s.imageContainer.style.width=`${(t*2+1)*100}vw`,s.imageContainer.style.left=`-${t*100}vw`,s.imageContainer.style.display="flex",G(s)}function G(s){let t={x:0,y:0},e={x:0,y:0},i=null;s.registerPointerListener(n=>{var o;if(!n.hasInternalExecution&&!(n.pointers.length>1)){if(n.event==="down"&&(t={x:n.pointer.x,y:n.pointer.y},e={x:n.pointer.x,y:n.pointer.y},(o=n.abortController)==null||o.abort()),n.event==="move"){e={x:n.pointer.x,y:n.pointer.y};const r=e.x-t.x,a=e.y-t.y;if(!i&&Math.abs(a)>Math.abs(r)||i==="y"){const l=a/window.innerHeight*100;s.imageContainer.style.transition="none",s.imageContainer.style.transform=`translateY(${l}vh)`,i="y"}else if(!i&&Math.abs(r)>Math.abs(a)||i==="x"){const l=r/window.innerWidth*100;s.imageContainer.style.transition="none",s.imageContainer.style.transform=`translateX(${l}vw)`,i="x"}}if(n.event==="up"||n.event==="cancel"){let r=function(a){var l;(l=s.imageContainer)==null||l.addEventListener("transitionend",function c(){var m;(m=s.imageContainer)==null||m.removeEventListener("transitionend",c),s.imageContainer.style.transition="",s.imageContainer.style.transform=""}),s.imageContainer.style.transition="transform 222ms ease",s.imageContainer.style.transform=a};if(i==="y"){const a=e.y-t.y;Math.abs(a)>144?(s.imageContainer.style.transition="transform 222ms ease",s.imageContainer.style.transform="translateY(0vh)",s.close()):r("translateY(0vh)")}if(i==="x"){const a=e.x-t.x,l=n.pointer.movementX,c=1;s.imageContainer.style.transition="",a>0&&Math.abs(l)>c?s.prev():a<0&&Math.abs(l)>c?s.next():r("translateX(0vw)")}i=null,t={x:0,y:0},e={x:0,y:0}}}})}function J(s){}function Q({vistaView:{isReducedMotion:s},htmlElements:{to:t},index:{from:e,to:i},vistaView:{elements:n,imageContainer:o,options:r}},a){if(!(!t||a.aborted||s||!(Math.abs(i-e)===1||e===0&&i===n.length-1||e===n.length-1&&i===0)))return{cleanup:()=>{o.style.transition="",o.style.transform=""},transitionEnded:new Promise(c=>{o.addEventListener("transitionend",()=>{c()},{once:!0}),o.addEventListener("transitioncancel",()=>{a.aborted&&c()},{once:!0});const m=Math.round(r.animationDurationBase*100)/100,f=i===e+1||e===n.length-1&&i===0?"translateX(-100vw)":"translateX(100vw)";o.style.transition=`transform ${m}ms ease`,o.style.transform=f})}}class tt{constructor({elm:t,listeners:e}){h(this,"pointers",[]);h(this,"elm");h(this,"listeners",[]);h(this,"lastPointerDownId",null);h(this,"removeLastPointer",()=>{if(this.pointers.length&&this.lastPointerDownId!==null){const t=this.pointers.findIndex(e=>e.id===this.lastPointerDownId);t!==-1&&this.pointers.splice(t,1)}});h(this,"onPointerDown",t=>{if(!this.listeners.length||t.button!==0)return;t.preventDefault(),this.lastPointerDownId=t.pointerId,window.addEventListener("contextmenu",this.removeLastPointer,{once:!0}),window.addEventListener("auxclick",this.removeLastPointer,{once:!0});let e={x:t.clientX,y:t.clientY,movementX:0,movementY:0,id:t.pointerId};this.pointers.push(e),this.listeners.forEach(i=>i({event:"down",pointer:e,pointers:this.pointers,lastPointerLen:this.pointers.length-1}))});h(this,"onPointerMove",t=>{if(!this.listeners.length)return;t.preventDefault();const e=this.pointers.find(i=>i.id===t.pointerId);e&&(e.movementX=t.movementX,e.movementY=t.movementY,e.x=t.clientX,e.y=t.clientY,this.listeners.forEach(i=>i({event:"move",pointer:e,pointers:this.pointers,lastPointerLen:this.pointers.length-1})))});h(this,"onPointerUp",t=>{if(!this.listeners.length||t.button!==0||(window.removeEventListener("contextmenu",this.removeLastPointer),window.removeEventListener("auxclick",this.removeLastPointer),t.target instanceof Node&&!this.elm.contains(t.target)&&t.target!==document.querySelector("html")&&t.target!==document))return;t.preventDefault();const e=this.pointers.findIndex(o=>o.id===t.pointerId);if(e===-1)return;const i=this.pointers[e];i.x=t.clientX,i.y=t.clientY;const n=this.pointers.length;this.pointers.splice(e,1),this.listeners.forEach(o=>o({event:"up",pointer:i,pointers:this.pointers,lastPointerLen:n}))});h(this,"onPointerCancel",t=>{if(!this.listeners.length||t.target instanceof Node&&!this.elm.contains(t.target)&&t.target!==document.querySelector("html")&&t.target!==document)return;t.preventDefault();const e=this.pointers.findIndex(o=>o.id===t.pointerId);if(e===-1)return;const i=this.pointers[e];i.x=t.clientX,i.y=t.clientY;const n=this.pointers.length;this.pointers.splice(e,1),this.listeners.forEach(o=>o({event:"cancel",pointer:i,pointers:this.pointers,lastPointerLen:n}))});this.elm=t??document,e&&(this.listeners=e),this.startListeners()}startListeners(){this.elm.addEventListener("pointerdown",this.onPointerDown),this.elm.addEventListener("pointermove",this.onPointerMove),document.addEventListener("pointerup",this.onPointerUp),document.addEventListener("pointercancel",this.onPointerCancel)}removeListeners(){this.elm.removeEventListener("pointerdown",this.onPointerDown),this.elm.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp),document.removeEventListener("pointercancel",this.onPointerCancel),this.pointers=[]}addEventListener(t){this.listeners.push(t)}removeEventListener(t){this.listeners=this.listeners.filter(e=>e!==t)}getPointerDistance(t,e){const i=t.x-e.x,n=t.y-e.y;return Math.sqrt(i*i+n*n)}getCentroid(){if(this.pointers.length===0)return null;const t=this.pointers.reduce((e,i)=>(e.x+=i.x,e.y+=i.y,e),{x:0,y:0});return{x:t.x/this.pointers.length,y:t.y/this.pointers.length}}}class et{constructor(t,e){h(this,"maxZoomLevel");h(this,"image",null);h(this,"rect",null);h(this,"initialCenter",{x:0,y:0});h(this,"maxDimension",{width:0});h(this,"minDimension",{initialWidth:0,initialHeight:0,minWidth:0,closingWidth:0});h(this,"accumulatedTranslate",{x:0,y:0});h(this,"scale",1);h(this,"translate",{x:0,y:0});h(this,"onScale",null);h(this,"animationTimestamp",0);this.maxZoomLevel=t,this.onScale=e}clean(){this.image&&(this.image.style.transform="",this.image.style.width="",this.image.style.height="",this.image.style.top="",this.image.style.left="",this.image.style.opacity="")}reset(){this.clean(),this.image=null,this.rect=null,this.initialCenter={x:window.innerWidth/2,y:window.innerHeight/2},this.maxDimension={width:0},this.minDimension={initialWidth:0,initialHeight:0,minWidth:0,closingWidth:0},this.accumulatedTranslate={x:0,y:0},this.scale=1,this.translate={x:0,y:0}}setCurrentImage(t){if(this.rect=null,this.image=t,this.maxDimension={width:t.naturalWidth*this.maxZoomLevel},!t.dataset.vvwWidth||!t.dataset.vvwHeight)throw new Error("VistaImageState: Image dataset vvwWidth or vvwHeight not set.");const e=parseFloat(t.dataset.vvwWidth),i=parseFloat(t.dataset.vvwHeight);this.minDimension={initialWidth:e,initialHeight:i,minWidth:e*.1,closingWidth:e*.5},this.accumulatedTranslate={x:0,y:0}}setInitialCenter(t){this.initialCenter=t||{x:window.innerWidth/2,y:window.innerHeight/2}}move(t){this.image&&(this.rect||(this.rect=this.image.getBoundingClientRect()),this.translate.x=C(t.x-this.initialCenter.x),this.translate.y=C(t.y-this.initialCenter.y),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`)}snapToTargetIfClose(t,e,i=1){return Math.abs(t-e)<=i&&(t=e),t}scaleMove(t,e){if(!this.image)return;this.rect||(this.rect=this.image.getBoundingClientRect()),e||(e=this.initialCenter);const i=this.snapToTargetIfClose(q(this.rect.width*t,this.minDimension.minWidth,this.maxDimension.width),this.minDimension.initialWidth);this.onScale&&this.onScale({scale:i/(this.maxDimension.width/this.maxZoomLevel),isMax:i>=this.maxDimension.width,isMin:i<=this.minDimension.initialWidth}),this.scale=C(i/this.rect.width);const n=this.rect.left+this.rect.width/2,o=this.rect.top+this.rect.height/2,r=this.initialCenter.x-n,a=this.initialCenter.y-o,l=r*(1-this.scale),c=a*(1-this.scale),m=e.x-this.initialCenter.x,f=e.y-this.initialCenter.y;this.translate.x=C(l+m),this.translate.y=C(c+f),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`,i<=this.minDimension.closingWidth?this.image.style.opacity="0.5":this.image.style.opacity=""}moveAndNormalize(t){let e=0,i=!1;const n=({x:o,y:r})=>{if(i)return;if(Math.abs(o)<.001&&Math.abs(r)<.001)return this.normalize();o*=.9,r*=.9;const a=this.image.getBoundingClientRect();this.translate.x=C(this.translate.x+o),this.translate.y=C(this.translate.y+r),a.right<window.innerWidth/2&&(this.translate.x+=(window.innerWidth/2-a.right)*.1,o*=.7),a.left>window.innerWidth/2&&(this.translate.x-=(a.left-window.innerWidth/2)*.1,o*=.7),a.bottom<window.innerHeight/2&&(this.translate.y+=(window.innerHeight/2-a.bottom)*.1,r*=.7),a.top>window.innerHeight/2&&(this.translate.y-=(a.top-window.innerHeight/2)*.1,r*=.7),this.image.style.transform=`translate3d(${this.translate.x}px, ${this.translate.y}px, 0px) scale(${this.scale})`,e=requestAnimationFrame(()=>n({x:o,y:r}))};return n({x:t.movementX,y:t.movementY}),()=>{i=!0,cancelAnimationFrame(e),this.normalize(!1)}}animateZoom(t){if(!this.image)return;this.rect||(this.rect=this.image.getBoundingClientRect());const e=Date.now(),i=this.image;this.rect.width*t<this.minDimension.closingWidth||i.width<Math.floor(this.minDimension.initialWidth)||(i.addEventListener("transitionend",()=>{this.animationTimestamp===e&&i&&(i.style.transition="",this.normalize())},{once:!0}),i.style.transition||(i.style.transition="all 222ms ease"),this.animationTimestamp=e,this.scaleMove(t))}normalize(t=!0){if(!this.image||!this.rect)return;const e=this.rect.width*this.scale,i=e<=this.minDimension.closingWidth,n=i?e:this.snapToTargetIfClose(this.rect.width*this.scale,this.minDimension.initialWidth),o=i?this.rect.height*this.scale:this.snapToTargetIfClose(this.rect.height*this.scale,this.minDimension.initialHeight);if(this.image.style.width=`${n}px`,this.image.style.height=`${o}px`,this.scale=1,this.image.style.opacity="",this.accumulatedTranslate.x+=this.translate.x,this.accumulatedTranslate.y+=this.translate.y,this.image.style.left=`calc(50% + ${this.accumulatedTranslate.x}px)`,this.image.style.top=`calc(50% + ${this.accumulatedTranslate.y}px)`,this.translate={x:0,y:0},this.image.style.transform="",this.rect=this.image.getBoundingClientRect(),i)return!0;if(n<this.minDimension.initialWidth)this.accumulatedTranslate.x=0,this.accumulatedTranslate.y=0,requestAnimationFrame(()=>{const r=this.image;r&&(r.addEventListener("transitionend",()=>{r&&(this.clean(),this.rect=null)},{once:!0}),r.style.transition="all 222ms ease",r.style.width=`${this.minDimension.initialWidth}px`,r.style.height=`${this.minDimension.initialHeight}px`,r.style.left="50%",r.style.top="50%")});else if(t){let r=!1;if(this.rect.right<window.innerWidth/2&&(r=!0,this.accumulatedTranslate.x+=window.innerWidth/2-this.rect.right),this.rect.left>window.innerWidth/2&&(r=!0,this.accumulatedTranslate.x-=this.rect.left-window.innerWidth/2),this.rect.bottom<window.innerHeight/2&&(r=!0,this.accumulatedTranslate.y+=window.innerHeight/2-this.rect.bottom),this.rect.top>window.innerHeight/2&&(r=!0,this.accumulatedTranslate.y-=this.rect.top-window.innerHeight/2),r){const a=this.image;a.addEventListener("transitionend",()=>{a&&(a.style.transition="",this.rect=null)},{once:!0}),a.style.transition="all 222ms ease",a.style.left=`calc(50% + ${this.accumulatedTranslate.x}px)`,a.style.top=`calc(50% + ${this.accumulatedTranslate.y}px)`}else this.rect=null}}}class it{constructor(){h(this,"fiolast",{})}fio(t,e,i=50){const o=Date.now()-(this.fiolast[e]??0),r=()=>{this.fiolast[e]=Date.now(),t()};if(!this.fiolast[e]){r();return}o>=i&&r()}}const x={somethingOpened:null};class nt{constructor(t,e={}){h(this,"options");h(this,"elements");h(this,"isReducedMotion");h(this,"currentIndex",-1);h(this,"currentChildren",null);h(this,"setupFunction",K);h(this,"initFunction",_);h(this,"closeFunction",J);h(this,"transitionFunction",Q);h(this,"pointers",null);h(this,"imageState");h(this,"imageTransitions",new Map);h(this,"root",null);h(this,"imageContainer",null);h(this,"onClickElements",t=>{t.preventDefault();const e=t.currentTarget;e.dataset.vistaIdx&&this.open(parseInt(e.dataset.vistaIdx))});h(this,"defaultOnClickHandler",t=>t.preventDefault());h(this,"abortController",null);h(this,"throttle",new it);h(this,"lastSwapTime",0);h(this,"transitionCleanup",null);h(this,"isZoomedIn",!1);h(this,"onKeyDown",t=>{switch(t.key){case"ArrowLeft":t.preventDefault(),this.prev();break;case"ArrowRight":t.preventDefault(),this.next();break;case"ArrowUp":t.preventDefault(),this.zoomIn();break;case"ArrowDown":t.preventDefault(),this.zoomOut();break;case"Escape":t.preventDefault(),this.close();break}});h(this,"onScroll",t=>{t.preventDefault();const e=t.deltaY;this.imageState.setInitialCenter({x:t.clientX,y:t.clientY}),e<0?this.zoomIn():e>0&&this.zoomOut()});h(this,"onResizeHandler",()=>{this.currentChildren.htmls.forEach((t,e)=>{const i=this.currentChildren.images[e],n=t.querySelector("img.vvw-img-hi"),o=t.querySelector("img.vvw-img-lo");if(P(i,n,o,!1),n.classList.contains("vvw--loaded")){const{width:r,height:a}=F(n);n.style.setProperty("--vvw-current-w",`${r}px`),n.style.setProperty("--vvw-current-h",`${a}px`),n.dataset.vvwWidth=r.toString(),n.dataset.vvwHeight=a.toString()}})});h(this,"pointerListeners",[]);h(this,"getInternalPointerListener",()=>{const t=this.imageState;let e=0,i=!1,n=()=>{};return o=>{if(o.event==="down"){if(n(),this.isZoomedIn&&o.pointers.length===1){const r=this.pointers.getCentroid();t.setInitialCenter(r)}if(o.pointers.length>=2){i=!0;const r=this.pointers.getCentroid();e=this.pointers.getPointerDistance(o.pointers[0],o.pointers[1]),t.setInitialCenter(r)}}else if(o.event==="move"){if(this.isZoomedIn&&o.pointers.length===1&&o.lastPointerLen===0){const r=this.pointers.getCentroid();t.move(r)}if(o.pointers.length>=2&&i){const r=this.pointers.getCentroid(),a=this.pointers.getPointerDistance(o.pointers[0],o.pointers[1]);t.scaleMove(a/e,r)}}else(o.event==="up"||o.event==="cancel")&&(i||this.isZoomedIn)&&(i?(i=!1,t.normalize()&&requestAnimationFrame(()=>{this.close()})):this.isZoomedIn&&o.pointers.length===0&&(n=t.moveAndNormalize(o.pointer)));this.pointerListeners.forEach(r=>r({...o,hasInternalExecution:this.isZoomedIn||i,abortController:this.abortController}))}});this.elements=t,this.options={...M,...e,controls:{...M.controls,...e.controls}},this.imageState=new et(this.options.maxZoomLevel,i=>{var n,o,r,a,l,c;i.isMin?(this.isZoomedIn=!1,(n=this.qs(".vvw-zoom-out"))==null||n.setAttribute("disabled","true"),(o=this.qs('.vvw-item[data-vvw-idx="'+this.currentIndex+'"]'))==null||o.style.setProperty("pointer-events","none")):(this.isZoomedIn=!0,(r=this.qs(".vvw-zoom-out"))==null||r.removeAttribute("disabled"),(a=this.qs('.vvw-item[data-vvw-idx="'+this.currentIndex+'"]'))==null||a.style.setProperty("pointer-events","auto")),i.isMax?(l=this.qs(".vvw-zoom-in"))==null||l.setAttribute("disabled","true"):(c=this.qs(".vvw-zoom-in"))==null||c.removeAttribute("disabled")}),this.options.setupFunction&&(this.setupFunction=this.options.setupFunction),this.options.closeFunction&&(this.closeFunction=this.options.closeFunction),this.options.initFunction&&(this.initFunction=this.options.initFunction),this.options.transitionFunction&&(this.transitionFunction=this.options.transitionFunction),this.isReducedMotion=window.matchMedia("(prefers-reduced-motion: reduce)").matches,this.elements instanceof NodeList&&this.elements.forEach((i,n)=>{i.dataset.vistaIdx=n.toString(),i.addEventListener("click",this.defaultOnClickHandler),i.addEventListener("pointerup",this.onClickElements)})}qs(t){return this.root?this.root.querySelector(t):null}async swap(t,e){const i=this.options.preloads||0,n=this.currentIndex,{htmls:o,images:r}=this.getChildElements(i,n),a=this.imageContainer,l=this.currentChildren,c={htmlElements:{from:l.htmls,to:o},images:{from:l.images,to:r},index:{from:t,to:this.currentIndex},via:e||{next:!1,prev:!1},vistaView:this};this.setupFunction(c),this.currentChildren={htmls:o,images:r},this.displayActiveIndex();const m=this.abortController.signal,L=performance.now()-this.lastSwapTime<this.options.rapidLimit,E=o[Math.floor(o.length/2)].dataset.vvwIdx;if(L){this.imageState.reset(),a.innerHTML="",this.transitionCleanup&&this.transitionCleanup(),o.forEach(I=>{a.appendChild(I)}),this.lastSwapTime=performance.now(),this.waitForImagesToLoad(),this.options.onImageView&&this.options.onImageView(c);return}const d=this.transitionFunction(c,m);d&&(this.transitionCleanup=d.cleanup,await d.transitionEnded),this.lastSwapTime=performance.now();const u=a.querySelector(`.vvw-item[data-vvw-idx="${E}"] img.vvw-img-hi`),b=this.imageTransitions.get(u);this.imageTransitions.delete(u);const y=u.getAttribute("style")||"",p=u.classList.contains("vvw--loaded"),T=u.classList.contains("vvw--ready"),S=u.width,H=u.height;this.imageState.reset(),a.innerHTML="",this.transitionCleanup&&this.transitionCleanup(),o.forEach(I=>{const g=I.querySelector("img.vvw-img-hi");I.dataset.vvwPos==="0"&&!m.aborted&&y&&S&&H&&(p&&(g.classList.add("vvw--loaded"),g.dataset.vvwWidth=u.dataset.vvwWidth||"",g.dataset.vvwHeight=u.dataset.vvwHeight||""),T&&(g.classList.add("vvw--ready"),g.width=S,g.height=H),g.setAttribute("style",y)),a.appendChild(I),I.dataset.vvwPos==="0"&&!m.aborted&&T?(this.imageState.setCurrentImage(g),this.imageState.setInitialCenter()):I.dataset.vvwPos==="0"&&!m.aborted&&y&&S&&H&&p&&b&&(this.imageTransitions.set(g,b),this.transitionImage(g,()=>{this.imageState.setCurrentImage(g),this.imageState.setInitialCenter(),g.classList.add("vvw--ready")}))}),this.waitForImagesToLoad(),this.options.onImageView&&this.options.onImageView(c)}getChildElements(t,e){const i=[],n=[];for(let o=-t;o<=t;o++){const r=(e+o+this.elements.length)%this.elements.length,a=this.elements[r],l=a instanceof HTMLImageElement?a:a instanceof HTMLAnchorElement&&a.querySelector("img")||void 0,c=a instanceof HTMLElement?{index:r,imageElm:l instanceof HTMLImageElement?l:void 0,anchorElm:a instanceof HTMLAnchorElement?a:void 0,src:a.dataset.vistaviewSrc||a.getAttribute("href")||a.getAttribute("src")||"",thumb:a.dataset.vistaviewThumb||(l instanceof HTMLImageElement?l.getAttribute("src"):void 0)||a.getAttribute("href")||void 0,alt:l instanceof HTMLImageElement&&l.getAttribute("alt")||void 0}:{index:r,...a};n.push(c),i.push(V(c,o))}return{htmls:i,images:n}}zoomIn(){this.throttle.fio(()=>{this.imageState.animateZoom(1.68)},"zoom",222)}zoomOut(){this.throttle.fio(()=>{this.imageState.animateZoom(.68)},"zoom",222)}displayActiveIndex(){var r;const t=this.currentIndex;this.elements instanceof NodeList&&this.elements.forEach((a,l)=>{a.style.opacity="",l===t&&(a.style.opacity="0")});const e=this.qs(".vvw-index"),i=`${t+1}`,n=`${this.elements.length}`;e&&(e.textContent=`${i} / ${n}`);const o=this.qs(".vvw-desc");if(o){const a=(r=this.currentChildren)==null?void 0:r.images.find(c=>c.index===t),l=(a==null?void 0:a.alt)||"";l?(o.textContent=l,o.setAttribute("aria-label",`Image ${i} of ${n}: ${l}`)):(o.textContent="",o.setAttribute("aria-label",`Image ${i} of ${n}`))}}transitionImage(t,e){const i=this.imageTransitions.get(t);i&&requestAnimationFrame(()=>{const{current:n,target:o}=i,r={width:n.width+(o.width-n.width)*.2,height:n.height+(o.height-n.height)*.2,radius:n.radius+(o.radius-n.radius)*.2};Math.abs(r.width-o.width)<1&&Math.abs(r.height-o.height)<1&&Math.abs(r.radius-o.radius)<1?(t.style.setProperty("--vvw-current-w",`${o.width}px`),t.style.setProperty("--vvw-current-h",`${o.height}px`),t.style.setProperty("--vvw-current-radius",`${o.radius}px`),this.imageTransitions.delete(t),e()):(t.style.setProperty("--vvw-current-w",`${r.width}px`),t.style.setProperty("--vvw-current-h",`${r.height}px`),t.style.setProperty("--vvw-current-radius",`${r.radius}px`),this.imageTransitions.set(t,{current:r,target:o}),this.transitionImage(t,e))})}waitForImagesToLoad(){this.imageContainer.querySelectorAll("img.vvw-img-hi:not(.vvw--loaded)").forEach(i=>{const n=i,o=()=>{n.width=n.naturalWidth,n.height=n.naturalHeight;const{width:r,height:a}=F(n);n.dataset.vvwWidth=r.toString(),n.dataset.vvwHeight=a.toString(),n.classList.add("vvw--loaded"),this.imageTransitions.set(n,{current:{width:n.style.getPropertyValue("--vvw-current-w")?parseFloat(n.style.getPropertyValue("--vvw-current-w")):0,height:n.style.getPropertyValue("--vvw-current-h")?parseFloat(n.style.getPropertyValue("--vvw-current-h")):0,radius:n.style.getPropertyValue("--vvw-current-radius")?parseFloat(n.style.getPropertyValue("--vvw-current-radius")):0},target:{width:r,height:a,radius:0}}),this.transitionImage(n,()=>{var c;((c=n.parentElement)==null?void 0:c.matches(`[data-vvw-idx="${this.currentIndex}"][data-vvw-pos="0"]`))&&(this.imageState.setCurrentImage(n),this.imageState.setInitialCenter()),n.classList.add("vvw--ready")})};if(n.complete&&n.naturalWidth!==0){o();return}n.addEventListener("load",()=>{o()}),n.addEventListener("error",()=>{var a;n.classList.add("vvw--loaderror");const r=document.createElement("p");r.className="vvw-img-err",r.setAttribute("role","alert"),r.textContent="Error loading image",(a=n.parentNode)==null||a.appendChild(r)})})}registerPointerListener(t){this.pointerListeners.push(t)}unregisterPointerListeners(){this.pointerListeners=[]}open(t=0){var c,m,f,L,E;if(x.somethingOpened)return;x.somethingOpened=this,this.currentIndex=t,document.body.style.overflow="hidden";const e=U({controls:this.options.controls});if(document.body.prepend(e),this.root=document.body.querySelector("#vvw-root"),!this.root)throw new Error("Failed to setup VistaView root element.");this.imageContainer=this.qs(".vvw-image-container"),this.options.animationDurationBase&&this.root.style.setProperty("--vvw-anim-dur",`${this.options.animationDurationBase}`),this.options.initialZIndex!==void 0&&this.root.style.setProperty("--vvw-init-z",`${this.options.initialZIndex??0}`),this.options.arrowOnSmallScreens&&this.root.classList.add("vvw-arrow-sm");const i=this.options.preloads||0,n=t,{images:o,htmls:r}=this.getChildElements(i,n),a={htmlElements:{from:null,to:r},images:{from:null,to:o},index:{from:null,to:this.currentIndex},via:{next:!1,prev:!1},vistaView:this};this.setupFunction(a),this.currentChildren={htmls:r,images:o},r.forEach(d=>{this.imageContainer.appendChild(d)}),(c=this.qs(".vvw-close"))==null||c.addEventListener("click",()=>this.close()),(m=this.qs(".vvw-zoom-in"))==null||m.addEventListener("click",()=>this.zoomIn()),(f=this.qs(".vvw-zoom-out"))==null||f.addEventListener("click",()=>this.zoomOut()),(L=this.qs(".vvw-prev>button"))==null||L.addEventListener("click",()=>this.prev()),(E=this.qs(".vvw-next>button"))==null||E.addEventListener("click",()=>this.next()),this.options.keyboardListeners&&window.addEventListener("keydown",this.onKeyDown),window.addEventListener("wheel",this.onScroll,{passive:!1}),window.addEventListener("resize",this.onResizeHandler),this.pointers=new tt({elm:this.imageContainer,listeners:[this.getInternalPointerListener()]});const l={};[...this.options.controls.topLeft||[],...this.options.controls.topRight||[],...this.options.controls.topCenter||[],...this.options.controls.bottomCenter||[],...this.options.controls.bottomLeft||[],...this.options.controls.bottomRight||[]].forEach(d=>{typeof d!="string"&&(l[d.name]=d)}),this.root.querySelectorAll("button[data-vvw-control]").forEach(d=>{const u=d;u.addEventListener("click",b=>{const y=b.currentTarget.dataset.vvwControl,p=l[y],T=this.currentChildren.images.find(S=>S.index===this.currentIndex);p&&T&&(p.onClick.constructor.name==="AsyncFunction"?(u.classList.add("vvw--loading"),p.onClick(T,this).finally(()=>{u.classList.remove("vvw--loading")})):p.onClick(T,this))})}),this.initFunction(this),requestAnimationFrame(()=>{var d;(d=this.root)==null||d.addEventListener("transitionend",()=>{var u;(u=this.root)==null||u.classList.add("vvw--settled"),this.imageState.reset(),this.waitForImagesToLoad()},{once:!0}),this.root.classList.add("vvw--active"),this.displayActiveIndex(),this.options.onOpen&&this.options.onOpen(this),this.options.onImageView&&this.options.onImageView(a)})}async close(t=!0){x.somethingOpened===this&&this.root&&(t?await new Promise(e=>{let n=0;this.root.addEventListener("transitionend",o=>{o.target===this.root&&(n++,n===2&&this.elements instanceof NodeList&&this.elements.forEach(r=>{r.style.opacity=""}),n===3&&e(null))}),this.root.classList.add("vvw--closing")}):this.elements instanceof NodeList&&this.elements.forEach(e=>{e.style.opacity=""}),this.options.keyboardListeners&&window.removeEventListener("keydown",this.onKeyDown),window.removeEventListener("resize",this.onResizeHandler),window.removeEventListener("wheel",this.onScroll),this.unregisterPointerListeners(),this.pointers.removeListeners(),this.root.remove(),this.root=null,this.imageContainer=null,this.currentChildren=null,this.currentIndex=-1,document.body.style.overflow="",x.somethingOpened=null,this.closeFunction(this),this.options.onClose&&this.options.onClose(this))}next(){if(x.somethingOpened!==this)return;const t=(this.currentIndex+1)%this.elements.length;this.view(t,{next:!0,prev:!1})}prev(){if(x.somethingOpened!==this)return;const t=(this.currentIndex-1+this.elements.length)%this.elements.length;this.view(t,{next:!1,prev:!0})}destroy(){this.close(!1),this.elements instanceof NodeList&&this.elements.forEach(t=>{t.removeAttribute("data-vista-idx"),t.removeEventListener("click",this.defaultOnClickHandler),t.removeEventListener("pointerup",this.onClickElements)})}getCurrentIndex(){return x.somethingOpened!==this?-1:this.currentIndex}view(t,e){if(x.somethingOpened!==this||t<0||t>=this.elements.length)return;const i=this.currentIndex;this.currentIndex=t;const n=this.abortController;n==null||n.abort(),this.abortController=new AbortController,this.swap(i,e)}}function st(s){let t=null;if(typeof s=="string"?t=document.querySelectorAll(s):s instanceof NodeList&&(t=s),t)for(let e=0;e<t.length;e++){const i=t[e];if(!(i.dataset.vistaviewSrc||i.getAttribute("href")||i.getAttribute("src")||""))return`Element at index ${e} is missing 'src' / 'data-vistaview-src' / 'href' attribute.`}else{const e=s;for(let i=0;i<e.length;i++)if(!e[i].src)return`Element at index ${i} is missing 'src' attribute.`}return t||s}function ot({elements:s,...t}){if(!s)throw new Error("No elements");let e=st(s);if(typeof e=="string")return null;const i=new nt(e,t);return{open:(n=0)=>i.open(n),close:()=>i.close(),next:()=>i.next(),prev:()=>i.prev(),destroy:()=>i.destroy(),getCurrentIndex:()=>i.getCurrentIndex(),view:n=>{i.view(n)}}}v.DefaultOptions=M,v.vistaView=ot,v.vistaViewDownload=z,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vistaview",
3
- "version": "0.7.1",
3
+ "version": "0.7.2",
4
4
  "description": "A lightweight, zero-dependency image lightbox library with smooth animations and touch support",
5
5
  "keywords": [
6
6
  "image",