vistaview 2.0.4 → 2.0.5

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.
package/README.md CHANGED
@@ -203,7 +203,7 @@ Available extensions:
203
203
  | `vistaview/extensions/vidyard-video` | Embed Vidyard videos |
204
204
  | `vistaview/extensions/wistia-video` | Embed Wistia videos |
205
205
  | `vistaview/extensions/google-maps` | Embed Google Maps |
206
- | `vistaview/extensions/mapbox` | Embed Mapbox maps |
206
+ | `vistaview/extensions/mapbox` | Embed Mapbox maps (access token required) |
207
207
  | `vistaview/extensions/openstreetmap` | Embed OpenStreetMap |
208
208
  | `vistaview/extensions/image-story` | Instagram-style story layout |
209
209
  | `vistaview/extensions/logger` | Debug logging |
@@ -189,8 +189,6 @@ export class VistaImage extends VistaBox {
189
189
  t.x += par.x;
190
190
  t.y += par.y;
191
191
  const bound = img.getBoundingClientRect();
192
- t.x = t.x + par.x;
193
- t.y = t.y + par.y;
194
192
  if (bound.right < window.innerWidth / 2) {
195
193
  t.x += (window.innerWidth / 2 - bound.right) * 0.1;
196
194
  par.x *= 0.7;
@@ -424,7 +424,7 @@ export class VistaView {
424
424
  if (GlobalVistaState.somethingOpened !== this) {
425
425
  return;
426
426
  }
427
- if (!this.root) {
427
+ if (!this.root || !this.eventHandlers) {
428
428
  return;
429
429
  }
430
430
  this.eventHandlers.stop();
@@ -433,50 +433,46 @@ export class VistaView {
433
433
  img.prepareClose();
434
434
  });
435
435
  if (animate) {
436
+ const animDur = this.options.animationDurationBase || 333;
437
+ // Mid-animation: reset source element opacity so it cross-fades
438
+ // with the overlay (root opacity starts fading at 2*anim-dur)
439
+ const revealSource = setTimeout(() => {
440
+ if (typeof this.elements === 'string') {
441
+ this.qsOrigin(this.elements).forEach((el) => {
442
+ el.style.opacity = '';
443
+ });
444
+ }
445
+ }, animDur * 2);
436
446
  await new Promise((resolve) => {
437
- const target = 3;
438
- let current = 0;
439
- this.root.addEventListener('transitionend', (e) => {
440
- if (e.target !== this.root)
447
+ const onTransitionEnd = (e) => {
448
+ if (e.target !== this.root || e.propertyName !== 'opacity')
441
449
  return;
442
- current++;
443
- if (current === 2) {
444
- if (typeof this.elements === 'string') {
445
- this.state.children.images.forEach((img) => {
446
- img.destroy();
447
- });
448
- this.qsOrigin(this.elements).forEach((el) => {
449
- el.style.opacity = '';
450
- });
451
- }
452
- }
453
- if (current === target) {
454
- resolve(null);
455
- }
456
- });
450
+ this.root.removeEventListener('transitionend', onTransitionEnd);
451
+ clearTimeout(revealSource);
452
+ resolve(null);
453
+ };
454
+ this.root.addEventListener('transitionend', onTransitionEnd);
457
455
  this.root.classList.add('vvw--closing');
456
+ setTimeout(resolve, animDur * 3 + 100);
458
457
  });
459
458
  }
460
- else {
461
- if (typeof this.elements === 'string') {
462
- this.state.children.images.forEach((img) => {
463
- img.destroy();
464
- });
465
- this.qsOrigin(this.elements).forEach((el) => {
466
- el.style.opacity = '';
467
- });
468
- }
459
+ // fallback: ensure source element opacity is reset
460
+ if (typeof this.elements === 'string') {
461
+ this.qsOrigin(this.elements).forEach((el) => {
462
+ el.style.opacity = '';
463
+ });
469
464
  }
470
- // this.eventHandlers.stop();
471
465
  this.root.remove();
472
466
  this.root = null;
473
467
  this.imageContainer = null;
474
- this.state.children = { htmls: [], images: [] };
475
- this.state.currentIndex = -1;
476
- //
477
468
  this.state.children.images.forEach((img) => {
478
469
  img.destroy();
479
470
  });
471
+ this.state.children.htmls.forEach((el) => {
472
+ el.remove();
473
+ });
474
+ this.state.children = { htmls: [], images: [] };
475
+ this.state.currentIndex = -1;
480
476
  // Restore body scrolling
481
477
  document.body.style.overflow = '';
482
478
  GlobalVistaState.somethingOpened = null;
@@ -1 +1 @@
1
- :root{--vvw-bg-color:#000;--vvw-text-color:#fff;--vvw-bg-blur:10px;--vvw-bg-opacity:.8;--vvw-anim-dur:333;--vvw-init-z:1;--vvw-dest-z:2147480000;--vvw-ui-outline-color:hsl(from var(--vvw-bg-color)h s calc(l + 30));--vvw-ui-bg-color:var(--vvw-bg-color);--vvw-ui-text-color:var(--vvw-text-color);--vvw-ui-hover-bg-color:hsl(from var(--vvw-bg-color)h s calc(l + 20));--vvw-ui-active-bg-color:hsl(from var(--vvw-bg-color)h s calc(l + 40));--vvw-ui-border-radius:0px;--vvw-ui-border-width:1px}@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:.8}to{opacity:1}}@keyframes vvw-gradient{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.vvw-root{width:100vw;width:100dvw;height:100vh;height:100dvh;z-index:var(--vvw-init-z);opacity:0;isolation:isolate;touch-action:none;position:fixed;top:0;left:0;overflow:hidden;transform:none}.vvw-container{width:100%;height:100%;position:relative;overflow:hidden}.vvw-bg{z-index:0;background-color:rgb(from var(--vvw-bg-color)r g b/var(--vvw-bg-opacity));width:100%;height:100%;-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;position:absolute;top:0;left:0}.vvw-image-container{isolation:isolate;height:100%;position:relative;overflow:hidden}.vvw-item{cursor:grab;width:100%;height:100%;position:relative;overflow:hidden}.vvw-item:active{cursor:grabbing}.vvw-item img,.vvw-item iframe.vvw-img-hi,.vvw-item div.vvw-img-hi{display:block;position:absolute;top:50%;left:50%;translate:-50% -50%}.vvw-item .vvw-img-err{color:#fff;text-align:center;z-index:2;background-color:red;margin:0;padding:8px 12px;font-size:14px;display:none;position:absolute;top:50%;left:50%;translate:-50% -50%}.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;z-index:0;opacity:1;border-radius:var(--vvw-init-radius);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) 0 0/400% 400%;outline:1px solid #fff3;animation:3s ease-in-out infinite vvw-gradient;overflow:hidden;max-width:none!important;max-height:none!important}.vvw-item .vvw-img-hi{--vvw-init-radius:0px;--vvw-init-w:0px;--vvw-init-h:0px;border-radius:var(--vvw-init-radius);z-index:1;object-fit:cover;opacity:0;overflow:hidden;max-width:none!important;max-height:none!important}.vvw-top-bar,.vvw-bottom-bar{z-index:6;pointer-events:none;justify-content:space-between;align-items:stretch;gap:1rem;width:100vw;display:flex;position:absolute;top:0;left:0}:is(.vvw-top-bar,.vvw-bottom-bar)>div{align-items:stretch;display:flex}:is(.vvw-top-bar,.vvw-bottom-bar)>div:nth-child(2){flex:auto}.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:var(--vvw-ui-border-width)solid var(--vvw-ui-outline-color);background-color:var(--vvw-ui-bg-color);color:var(--vvw-ui-text-color);pointer-events:auto}.vvw-ui.vvw-index{padding:8px 13px;font-size:16px}.vvw-ui.vvw-desc{text-overflow:ellipsis;white-space:nowrap;max-width:100%;padding:8px 15px;font-size:14px;overflow:hidden}.vvw-ui>button{color:inherit;font:inherit;cursor:pointer;box-sizing:border-box;background:0 0;border:0;border-radius:0;outline:none;justify-content:center;align-self:stretch;align-items:center;height:100%;margin:0;padding:8px 12px;display:flex}.vvw-ui>button:disabled{color:rgb(from var(--vvw-ui-text-color)r g b/.5);cursor:not-allowed}.vvw-ui>button:hover{background-color:var(--vvw-ui-hover-bg-color)}.vvw-ui>button:active{background-color:var(--vvw-ui-active-bg-color)}.vvw-ui>button svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}.vvw-ui.vvw-prev button,.vvw-ui.vvw-next button{padding:1rem .5rem}.vvw-ui.vvw-prev{z-index:2;border-top-right-radius:var(--vvw-ui-border-radius);border-bottom-right-radius:var(--vvw-ui-border-radius);justify-content:center;align-items:center;display:none;position:absolute;top:50%;left:0;translate:0 -50%}.vvw-ui.vvw-next{z-index:2;border-top-left-radius:var(--vvw-ui-border-radius);border-bottom-left-radius:var(--vvw-ui-border-radius);justify-content:center;align-items:center;display:none;position:absolute;top:50%;right:0;translate:0 -50%}@media (min-width:768px){.vvw-ui.vvw-prev,.vvw-ui.vvw-next{display:flex}}.vvw-bottom-bar>div:first-child>div:last-child,.vvw-bottom-bar>div:nth-child(2)>div:last-child{border-top-right-radius:var(--vvw-ui-border-radius);overflow:hidden}.vvw-bottom-bar>div:nth-child(2)>div:first-child,.vvw-bottom-bar>div:last-child>div:first-child{border-top-left-radius:var(--vvw-ui-border-radius);overflow:hidden}.vvw-top-bar>div:first-child>div:last-child,.vvw-top-bar>div:nth-child(2)>div:last-child{border-bottom-right-radius:var(--vvw-ui-border-radius);overflow:hidden}.vvw-top-bar>div:nth-child(2)>div:first-child,.vvw-top-bar>div:last-child>div:first-child{border-bottom-left-radius:var(--vvw-ui-border-radius);overflow:hidden}.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 0s 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:1s infinite vvw-pulse,3s ease-in-out infinite vvw-gradient;animation-delay:calc(var(--vvw-anim-dur)*2ms)}.vvw-root.vvw--settled .vvw-img-lo:has(+.vvw--loaded){opacity:0;animation:none}.vvw-root.vvw--settled .vvw-img-err:has(~img.vvw--loaderror){display:block}.vvw-root.vvw--settled .vvw-img-hi.vvw--loaded{transition:border-radius calc(var(--vvw-anim-dur)*1ms)ease;opacity:1;border-radius:0}.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;z-index:var(--vvw-init-z);transform:scale(1);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,translate calc(var(--vvw-anim-dur)*1ms)ease,opacity 0s calc(var(--vvw-anim-dur)*1ms)ease;opacity:0!important;width:var(--vvw-init-w)!important;height:var(--vvw-init-h)!important;border-radius:var(--vvw-init-radius)!important;top:50%!important;left:50%!important;translate:-50% -50%!important}.vvw-root.vvw--closing .vvw-img-lo{transition:opacity 0s 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}.vvw--hidden{display:none!important}.vvw--pulsing{animation:1s ease-in-out infinite vvw-simple-pulse}
1
+ :root{--vvw-bg-color:#000;--vvw-text-color:#fff;--vvw-bg-blur:10px;--vvw-bg-opacity:.8;--vvw-anim-dur:333;--vvw-init-z:1;--vvw-dest-z:2147480000;--vvw-ui-outline-color:hsl(from var(--vvw-bg-color)h s calc(l + 25));--vvw-ui-bg-color:var(--vvw-bg-color);--vvw-ui-text-color:var(--vvw-text-color);--vvw-ui-hover-bg-color:hsl(from var(--vvw-bg-color)h s calc(l + 20));--vvw-ui-active-bg-color:hsl(from var(--vvw-bg-color)h s calc(l + 40));--vvw-ui-border-radius:3px;--vvw-ui-border-width:1px}@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:.8}to{opacity:1}}@keyframes vvw-gradient{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.vvw-root{width:100vw;width:100dvw;height:100vh;height:100dvh;z-index:var(--vvw-init-z);opacity:0;isolation:isolate;touch-action:none;position:fixed;top:0;left:0;overflow:hidden;transform:none}.vvw-container{width:100%;height:100%;position:relative;overflow:hidden}.vvw-bg{z-index:0;background-color:rgb(from var(--vvw-bg-color)r g b/var(--vvw-bg-opacity));width:100%;height:100%;-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;position:absolute;top:0;left:0}.vvw-image-container{isolation:isolate;height:100%;position:relative;overflow:hidden}.vvw-item{cursor:grab;width:100%;height:100%;position:relative;overflow:hidden}.vvw-item:active{cursor:grabbing}.vvw-item img,.vvw-item iframe.vvw-img-hi,.vvw-item div.vvw-img-hi{display:block;position:absolute;top:50%;left:50%;translate:-50% -50%}.vvw-item .vvw-img-err{color:#fff;text-align:center;z-index:2;background-color:red;margin:0;padding:8px 12px;font-size:14px;display:none;position:absolute;top:50%;left:50%;translate:-50% -50%}.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;z-index:0;opacity:1;border-radius:var(--vvw-init-radius);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) 0 0/400% 400%;outline:1px solid #fff3;animation:3s ease-in-out infinite vvw-gradient;overflow:hidden;max-width:none!important;max-height:none!important}.vvw-item .vvw-img-hi{--vvw-init-radius:0px;--vvw-init-w:0px;--vvw-init-h:0px;border-radius:var(--vvw-init-radius);z-index:1;object-fit:cover;opacity:0;overflow:hidden;max-width:none!important;max-height:none!important}.vvw-top-bar,.vvw-bottom-bar{z-index:6;pointer-events:none;justify-content:space-between;align-items:stretch;gap:1rem;width:100vw;display:flex;position:absolute;top:0;left:0}:is(.vvw-top-bar,.vvw-bottom-bar)>div{align-items:stretch;display:flex}:is(.vvw-top-bar,.vvw-bottom-bar)>div:nth-child(2){flex:auto}.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:var(--vvw-ui-border-width)solid var(--vvw-ui-outline-color);background-color:var(--vvw-ui-bg-color);color:var(--vvw-ui-text-color);pointer-events:auto}.vvw-ui.vvw-index{padding:8px 13px;font-size:16px}.vvw-ui.vvw-desc{text-overflow:ellipsis;white-space:nowrap;max-width:100%;padding:8px 15px;font-size:14px;overflow:hidden}.vvw-ui>button{color:inherit;font:inherit;cursor:pointer;box-sizing:border-box;background:0 0;border:0;border-radius:0;outline:none;justify-content:center;align-self:stretch;align-items:center;height:100%;margin:0;padding:8px 12px;display:flex}.vvw-ui>button:disabled{color:rgb(from var(--vvw-ui-text-color)r g b/.5);cursor:not-allowed}.vvw-ui>button:hover{background-color:var(--vvw-ui-hover-bg-color)}.vvw-ui>button:active{background-color:var(--vvw-ui-active-bg-color)}.vvw-ui>button svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}.vvw-ui.vvw-prev button,.vvw-ui.vvw-next button{padding:1rem .5rem}.vvw-ui.vvw-prev{z-index:2;border-top-right-radius:var(--vvw-ui-border-radius);border-bottom-right-radius:var(--vvw-ui-border-radius);justify-content:center;align-items:center;display:none;position:absolute;top:50%;left:0;translate:0 -50%}.vvw-ui.vvw-next{z-index:2;border-top-left-radius:var(--vvw-ui-border-radius);border-bottom-left-radius:var(--vvw-ui-border-radius);justify-content:center;align-items:center;display:none;position:absolute;top:50%;right:0;translate:0 -50%}@media (min-width:768px){.vvw-ui.vvw-prev,.vvw-ui.vvw-next{display:flex}}.vvw-bottom-bar>div:first-child>div:last-child,.vvw-bottom-bar>div:nth-child(2)>div:last-child{border-top-right-radius:var(--vvw-ui-border-radius);overflow:hidden}.vvw-bottom-bar>div:nth-child(2)>div:first-child,.vvw-bottom-bar>div:last-child>div:first-child{border-top-left-radius:var(--vvw-ui-border-radius);overflow:hidden}.vvw-top-bar>div:first-child>div:last-child,.vvw-top-bar>div:nth-child(2)>div:last-child{border-bottom-right-radius:var(--vvw-ui-border-radius);overflow:hidden}.vvw-top-bar>div:nth-child(2)>div:first-child,.vvw-top-bar>div:last-child>div:first-child{border-bottom-left-radius:var(--vvw-ui-border-radius);overflow:hidden}.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 0s 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:1s infinite vvw-pulse,3s ease-in-out infinite vvw-gradient;animation-delay:calc(var(--vvw-anim-dur)*2ms)}.vvw-root.vvw--settled .vvw-img-lo:has(+.vvw--loaded){opacity:0;animation:none}.vvw-root.vvw--settled .vvw-img-err:has(~img.vvw--loaderror){display:block}.vvw-root.vvw--settled .vvw-img-hi.vvw--loaded{transition:border-radius calc(var(--vvw-anim-dur)*1ms)ease;opacity:1;border-radius:0}.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;z-index:var(--vvw-init-z);transform:scale(1);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,translate calc(var(--vvw-anim-dur)*1ms)ease,opacity 0s calc(var(--vvw-anim-dur)*1ms)ease;opacity:0!important;width:var(--vvw-init-w)!important;height:var(--vvw-init-h)!important;border-radius:var(--vvw-init-radius)!important;top:50%!important;left:50%!important;translate:-50% -50%!important}.vvw-root.vvw--closing .vvw-img-lo{transition:opacity 0s 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}.vvw--hidden{display:none!important}.vvw--pulsing{animation:1s ease-in-out infinite vvw-simple-pulse}
@@ -15,4 +15,4 @@
15
15
  <div class="vvw-prev vvw-ui"><button aria-label="Previous">${n}</button></div>
16
16
  <div class="vvw-next vvw-ui"><button aria-label="Next">${r}</button></div>
17
17
  </div>
18
- </div>`);return[...e?.topLeft||[],...e?.topCenter||[],...e?.topRight||[],...e?.bottomLeft||[],...e?.bottomCenter||[],...e?.bottomRight||[]].forEach(e=>{let t=i[e];if(t&&t.control){let e=o.querySelector(`[data-vvw-control="${t.name}"]`),n=t.control();e&&n&&e.appendChild(n)}}),o}function f(e,t){}function p(e){m(e)}function m(e){let t={x:0,y:0},n={x:0,y:0},r=null;e.registerPointerListener(i=>{if(!i.hasInternalExecution&&!(i.pointers.length>1)){if(i.event===`down`&&(t={x:i.pointer.x,y:i.pointer.y},n={x:i.pointer.x,y:i.pointer.y},i.abortController?.abort()),i.event===`move`){n={x:i.pointer.x,y:i.pointer.y};let a=n.x-t.x,o=n.y-t.y;if(!r&&Math.abs(o)>Math.abs(a)||r===`y`){let t=o/window.innerHeight*100;e.imageContainer.style.transition=`none`,e.imageContainer.style.transform=`translateY(${t}vh)`,r=`y`}else if(!r&&Math.abs(a)>Math.abs(o)||r===`x`&&i.state.elmLength>1){let t=a/window.innerWidth*100;e.imageContainer.style.transition=`none`,e.imageContainer.style.transform=`translateX(${t}vw)`,r=`x`}}if(i.event===`up`||i.event===`cancel`){function a(t){e.imageContainer?.addEventListener(`transitionend`,function t(){e.imageContainer?.removeEventListener(`transitionend`,t),e.imageContainer.style.transition=``,e.imageContainer.style.transform=``}),e.imageContainer.style.transition=`transform 222ms ease`,e.imageContainer.style.transform=t}if(r===`y`){let r=n.y-t.y;Math.abs(r)>144?(e.imageContainer.style.transition=`transform 222ms ease`,e.imageContainer.style.transform=`translateY(0vh)`,e.close()):a(`translateY(0vh)`)}if(r===`x`&&i.state.elmLength>1){let r=n.x-t.x;e.imageContainer.style.transition=``,r>64?e.prev():r<-64?e.next():a(`translateX(0vw)`)}r=null,t={x:0,y:0},n={x:0,y:0}}}})}function h(e){let t=e.options.preloads;e.imageContainer.style.width=`${(t*2+1)*100}vw`,e.imageContainer.style.left=`-${t*100}vw`,e.imageContainer.style.display=`flex`}function g(e){}function _({htmlElements:{to:e},index:{from:t,to:n}},r,i){let{imageContainer:a,options:o}=i,{isReducedMotion:s}=i.state;if(!(!e||r.aborted||s)&&(Math.abs(n-t)===1||t===0&&n===i.state.elmLength-1||t===i.state.elmLength-1&&n===0))return{cleanup:()=>{a.style.transition=``,a.style.transform=``},transitionEnded:new Promise(e=>{a.addEventListener(`transitionend`,()=>{e()},{once:!0}),a.addEventListener(`transitioncancel`,()=>{r.aborted&&e()},{once:!0});let s=Math.round(o.animationDurationBase*100)/100,c=n===t+1||t===i.state.elmLength-1&&n===0?`translateX(-100vw)`:`translateX(100vw)`;a.style.transition=`transform ${s}ms ease`,a.style.transform=c})}}function v(e){let t=window.innerWidth,n=window.innerHeight,r=e.naturalWidth,i=e.naturalHeight;if(!r||!i)throw console.error(`Error`,e),Error(`Image natural dimensions are zero`);if(r<t&&i<n)return{width:r,height:i};let a=r/i,o=t/n,s,c;return a>o?(s=t,c=t/a):(c=n,s=n*a),{width:s,height:c}}var y=class{static map=new Map;static ease(e,t,n){let r=t-e,i=e+r*.2;return Math.abs(r)<n?t:i}static play(e,t,n){if(n()){requestAnimationFrame(()=>{this.play(e,t,n)});return}this.map.get(e)&&(e.element.classList.contains(`vvw--load-cancelled`)||requestAnimationFrame(()=>{let r=this.map.get(e);if(!r||!e.element||e.element.classList.contains(`vvw--load-cancelled`))return;let{current:i,target:a,log:o}=r,s={};a.width!==void 0&&(s.width=this.ease(i._width,a.width,1)),a.height!==void 0&&(s.height=this.ease(i._height,a.height,1)),a.transform?.x!==void 0&&(s.transform=s.transform||{},s.transform.x=this.ease(i._transform.x,a.transform.x,1)),a.transform?.y!==void 0&&(s.transform=s.transform||{},s.transform.y=this.ease(i._transform.y,a.transform.y,1)),a.transform?.scale!==void 0&&(s.transform=s.transform||{},s.transform.scale=this.ease(i._transform.scale,a.transform.scale,.005)),a.translate?.x!==void 0&&(s.translate=s.translate||{},s.translate.x=this.ease(i._translate.x,a.translate.x,1)),a.translate?.y!==void 0&&(s.translate=s.translate||{},s.translate.y=this.ease(i._translate.y,a.translate.y,1)),s.width!==void 0&&(i.width=s.width),s.height!==void 0&&(i.height=s.height),s.translate&&(i.translate={...i.translate,...s.translate}),s.transform&&(i.transform={...i.transform,...s.transform}),(a.width===void 0||i._width===a.width)&&(a.height===void 0||i._height===a.height)&&(a.transform?.x===void 0||i._transform.x===a.transform.x)&&(a.transform?.y===void 0||i._transform.y===a.transform.y)&&(a.transform?.scale===void 0||i._transform.scale===a.transform.scale)&&(a.translate?.x===void 0||i._translate.x===a.translate.x)&&(a.translate?.y===void 0||i._translate.y===a.translate.y)?(this.map.delete(e),t()):(this.map.set(e,{current:i,target:a,log:o}),this.play(e,t,n))}))}static stop(e){let t=this.map.get(e);return this.map.delete(e),t}static start({vistaImage:e,target:t,onComplete:n,shouldWait:r}){this.stop(e),this.map.set(e,{current:e.state,target:t}),this.play(e,n,r)}};function b(e){let t=window.getComputedStyle(e).objectFit||``,{width:n,height:r}=e.getBoundingClientRect(),i=e.naturalWidth,a=e.naturalHeight;if(!t||!i||!a)return{width:n,height:r};let o=i/a,s=n/r;switch(t){case`fill`:return{width:n,height:r};case`none`:return{width:i,height:a};case`contain`:return o>s?{width:n,height:n/o}:{width:r*o,height:r};case`cover`:return o<s?{width:n,height:n/o}:{width:r*o,height:r};case`scale-down`:{let e={width:i,height:a},t=o>s?{width:n,height:n/o}:{width:r*o,height:r};return t.width<=e.width&&t.height<=e.height?t:e}}return{width:n,height:r}}var x=class{state;parsedSrcSet=void 0;isReady=!1;isThrowing=!1;thumb=null;pos;index;config;origin=void 0;initH=0;initW=0;fullH=0;fullW=0;maxW=0;minW=0;defaultWH=200;isZoomedIn=!1;isCancelled=!1;isLoadedResolved=null;isLoadedRejected=null;isLoaded=new Promise((e,t)=>{this.isLoadedResolved=e,this.isLoadedRejected=t});replacement=null;originalParent=null;originalNextSibling=null;originalStyle=``;thumbImage=null;originRect={width:this.defaultWH,height:this.defaultWH,top:0,left:0};fittedSize=null;maxZoomLevel;vistaView;transitionState=null;transitionShouldWait=()=>!1;initPointerCenter={x:0,y:0};onScale;constructor(e){this.state=this.createState(),this.pos=e.pos,this.index=e.index,this.config=e.elm.config,this.parsedSrcSet=e.elm.parsedSrcSet,this.origin=e.elm.origin,this.maxZoomLevel=e.maxZoomLevel,this.vistaView=e.vistaView,this.onScale=e.onScale,e.transitionState&&(this.transitionState=e.transitionState),e.transitionShouldWait&&(this.transitionShouldWait=e.transitionShouldWait),this.initPointerCenter={x:window.innerWidth/2,y:window.innerHeight/2};let t=this.pos===0?this.origin?.image:null;if(this.originalParent=t?.parentElement||null,this.originalNextSibling=t?.nextSibling||null,this.originRect=(this.origin?.anchor||t)?.getBoundingClientRect()||{width:this.defaultWH,height:this.defaultWH,top:0,left:0},t&&this.originalParent){this.originalStyle=t.style.cssText,this.thumbImage=t;let e=t.cloneNode(!0);this.originalParent.insertBefore(e,t),this.replacement=e,this.thumb=document.createElement(`div`),this.thumb.classList.add(`vvw-img-lo`);let{width:n,height:r}=this.thumbImage?b(this.thumbImage):{width:0,height:0};this.fittedSize={width:n,height:r},this.thumb.appendChild(t),t.style.width=`100%`,t.style.height=`100%`,t.style.objectFit=this.origin.objectFit}}createState(){let e=this;return{_t:this,_width:0,_height:0,_transform:{x:0,y:0,scale:1},_translate:{x:0,y:0},_lessThanMinWidth:!1,get width(){return this._width},set width(t){this._width=t,e.onWidthChange(t)},get height(){return this._height},set height(t){this._height=t,e.onHeightChange(t)},get transform(){return this._transform},set transform(t){this._transform=t,e.onTransformChange(t)},get translate(){return this._translate},set translate(t){this._translate=t,e.onTranslateChange(t)},get lessThanMinWidth(){return this._lessThanMinWidth},set lessThanMinWidth(t){this._lessThanMinWidth=t,e.onLessThanMinWidthChange(t)}}}onLessThanMinWidthChange(e){e?this.element.style.opacity=`0.5`:this.element.style.opacity=``}onTranslateChange(e){this.element.style.translate=`calc(-50% + ${e.x}px) calc(-50% + ${e.y}px)`}onTransformChange(e){let t=`translate3d(${e.x}px, ${e.y}px, 0px) scale3d(${e.scale}, ${e.scale}, 1)`;this.element.style.transform=t}onWidthChange(e){this.element.style.width=`${e}px`}onHeightChange(e){this.element.style.height=`${e}px`}onImageReady(){}animateZoom(e,t){}scaleMove(e,t,n){}momentumThrow(e){return()=>{}}async init(){await this.isLoaded;let e=this.element;this.transitionState&&this.transitionState.current.width&&this.transitionState.current.height?(this.state.width=this.transitionState.current.width,this.state.height=this.transitionState.current.height):e.classList.contains(`vvw--loaded`)||(this.state.width=this.initW,this.state.height=this.initH);let t=()=>{this.isCancelled||y.start({vistaImage:this,target:{width:this.fullW,height:this.fullH},onComplete:()=>{this.isCancelled||(this.isReady=!0,e.classList.add(`vvw--ready`),this.onImageReady())},shouldWait:this.transitionShouldWait})};this.pos<-1||this.pos>1?(this.state.width=this.fullW,this.state.height=this.fullH,e.classList.add(`vvw--loaded`),e.classList.add(`vvw--ready`),this.isReady=!0):e.classList.contains(`vvw--loaded`)?e.classList.contains(`vvw--ready`)?(this.isReady=!0,this.onImageReady()):t():(e.classList.add(`vvw--loaded`),setTimeout(()=>{this.isCancelled||t()},333))}getFullSizeDim(){let{width:e,height:t}=this.thumb.getBoundingClientRect(),n=e/t,r=window.innerWidth,i=window.innerHeight;return n>window.innerWidth/window.innerHeight?i=r/n:r=i*n,{width:r,height:i}}setSizes(e={}){let{stableSize:t=!0,initDimension:n}=e;if(!this.origin)return;let r=this.thumb;n||(this.originRect=(this.origin?.anchor||this.replacement)?.getBoundingClientRect()||{width:this.defaultWH,height:this.defaultWH,top:0,left:0});let i=this.originRect;if(r){let e=r.style;e.width=i.width+`px`,e.height=i.height+`px`,e.top=`50%`,e.left=`50%`,e.translate=`-50% -50%`,e.position=`fixed`,e.objectFit=this.origin.objectFit,e.borderRadius=this.origin.borderRadius;let t=Math.min(Math.max(i.left,-i.width),window.innerWidth+i.width)-window.innerWidth/2+i.width/2,a=Math.min(Math.max(i.top,-i.height),window.innerHeight+i.height)-window.innerHeight/2+i.height/2;e.setProperty(`--vvw-init-radius`,e.borderRadius),e.setProperty(`--vvw-pulse-radius`,`calc(1.3 * ${e.borderRadius})`),e.setProperty(`--vvw-init-x`,`${t}px`),e.setProperty(`--vvw-init-y`,`${a}px`),n&&(e.setProperty(`--vvw-current-x`,`${t}px`),e.setProperty(`--vvw-current-y`,`${a}px`))}if(!n){let{width:e,height:t}=this.thumbImage?b(this.thumbImage):{width:0,height:0};this.fittedSize={width:e,height:t}}let a=this.element;if(this.initW=Math.min(this.fittedSize?.width??0,i.width),this.initH=Math.min(this.fittedSize?.height??0,i.height),a.style.setProperty(`--vvw-init-w`,this.initW+`px`),a.style.setProperty(`--vvw-init-h`,this.initH+`px`),a.style.setProperty(`--vvw-init-radius`,this.origin.borderRadius),a.style.objectFit=`cover`,!n){if(this.isReady&&!this.isCancelled){let{width:e,height:t}=this.getFullSizeDim();this.fullH=t,this.fullW=e,this.minW=this.fullW*.5}!this.isZoomedIn&&t&&this.normalize()}}normalize(){this.state.transform={x:0,y:0,scale:1},this.state.translate={x:0,y:0},this.state.width=this.fullW,this.state.height=this.fullH,this.isZoomedIn=!1}getFromParsedSrcSet(e){if(!this.parsedSrcSet||this.parsedSrcSet.length===0)return null;let t=e*(window.devicePixelRatio||1),n=this.parsedSrcSet[this.parsedSrcSet.length-1];for(let e of this.parsedSrcSet)if(e.width>=t){n=e;break}return n.src}prepareClose(){y.stop(this),this.setFinalTransform()}cancelPendingLoad(){this.isCancelled=!0,this.element?.classList.add(`vvw--load-cancelled`)}setInitialCenter(e){this.initPointerCenter=e}destroy(){this.originalParent&&this.thumbImage&&(this.thumbImage.style.cssText=this.originalStyle,this.originalNextSibling?this.originalParent.insertBefore(this.thumbImage,this.originalNextSibling):this.originalParent.appendChild(this.thumbImage)),this.originalParent=null,this.originalNextSibling=null,this.originalStyle=``,this.thumbImage=null,this.replacement&&=(this.replacement.remove(),null),this.thumb?.remove(),this.element?.remove(),this.thumb=null,this.origin=void 0,this.config={src:``,alt:``}}cloneStyleFrom(e,t){e?.element&&(t&&(this.transitionState=t||null),e.element.classList.contains(`vvw--loaded`)&&(this.element.classList.add(`vvw--loaded`),this.state.width=e.state.width,this.state.height=e.state.height),e.element.classList.contains(`vvw--ready`)&&this.element.classList.add(`vvw--ready`))}toObject(){return structuredClone({config:{src:this.config.src,alt:this.config.alt,srcSet:this.config.srcSet},origin:this.origin?{src:this.origin.src,srcSet:this.origin.srcSet,borderRadius:this.origin.borderRadius,objectFit:this.origin.objectFit}:null,parsedSrcSet:this.parsedSrcSet,element:`src`in this.element?this.element.src:this.element.toString(),thumb:void 0,index:this.index,pos:this.pos,state:{width:this.state._width,height:this.state._height,transform:this.state._transform,translate:this.state._translate}})}setFinalTransform(e={}){let{propagateEvent:t=!0}=e;if(this.isReady){if(this.state.translate.x+=this.state.transform.x,this.state.translate.y+=this.state.transform.y,this.state.width*=this.state.transform.scale,this.state.height*=this.state.transform.scale,Math.abs(this.state.width-this.fullW)<1&&(this.state.width=this.fullW,this.state.height=this.fullH),Math.abs(this.state.translate.x)<1&&(this.state.translate.x=0),Math.abs(this.state.translate.y)<1&&(this.state.translate.y=0),this.state.translate={...this.state.translate},this.state.transform={x:0,y:0,scale:1},t){let e=this.toObject();this.vistaView.options.onContentChange&&this.vistaView.options.onContentChange(e,this.vistaView),this.vistaView.state.extensions.forEach(t=>{t.onContentChange&&t.onContentChange(e,this.vistaView)})}return{close:!0,cancel:()=>{}}}}},S=class extends x{element;rect=null;onWidthChange(e){super.onWidthChange(e);let t=this.getFromParsedSrcSet(e);if(t&&this.element.src!==t){let e=new Image;e.onload=()=>{e.decode().then(()=>{this.isCancelled||(this.element.src=t)})},e.src=t}}constructor(e){super(e);let t=document.createElement(`img`);t.alt=this.config.alt||``,t.classList.add(`vvw-img-hi`),this.element=t,t.onerror=e=>{this.isLoadedRejected(e)},t.src=this.config.src,t.decode().then(()=>{this.onLoad()}).catch(e=>{this.isLoadedRejected(e)}),this.setSizes({stableSize:!1,initDimension:!0})}onLoad(){if(this.isCancelled)return;let e=this.element;e.width=e.naturalWidth,e.height=e.naturalHeight,this.maxW=e.naturalWidth*this.maxZoomLevel;let{width:t,height:n}=v(e);this.fullH=n,this.fullW=t,this.minW=this.fullW*.5,this.isLoadedResolved(!0)}getFullSizeDim(){return v(this.element)}normalize(){super.normalize();let e=this.element;e.style.objectFit=`cover`,e.style.borderRadius=`0`}scaleMove(e,t,n=!1){if(!this.isReady||!this.element)return;this.rect||=this.element.getBoundingClientRect(),t||=this.initPointerCenter;let r=this.rect.left+this.rect.width/2,i=this.rect.top+this.rect.height/2,a=this.initPointerCenter.x-r,o=this.initPointerCenter.y-i,s=a*(1-e),c=o*(1-e),l=t.x-this.initPointerCenter.x,u=t.y-this.initPointerCenter.y;n?y.start({vistaImage:this,target:{transform:{x:s+l,y:c+u,scale:e}},onComplete:()=>{this.setFinalTransform()},shouldWait:()=>!1}):this.state.transform={x:s+l,y:c+u,scale:e};let d=this.element.getBoundingClientRect().width*e;this.isZoomedIn=d>this.fullW,this.state.lessThanMinWidth=d<=this.minW,this.onScale({vistaImage:this,scale:d/this.fullW,isMax:d>=this.maxW,isMin:d<=this.fullW})}animateZoom(e,t){this.state.width*e<this.minW||this.scaleMove(e,t,!0)}momentumThrow(e){if(!this.isReady)return()=>{};if(!this.isThrowing)return this.setFinalTransform(),()=>{};if(Math.abs(e.x)<.1&&Math.abs(e.y)<.1){let e=this.element.getBoundingClientRect();return y.start({vistaImage:this,target:{transform:{x:e.right<window.innerWidth/2?this.state.transform.x+(window.innerWidth/2-e.right):e.left>window.innerWidth/2?this.state.transform.x-(e.left-window.innerWidth/2):this.state.transform.x,y:e.bottom<window.innerHeight/2?this.state.transform.y+(window.innerHeight/2-e.bottom):e.top>window.innerHeight/2?this.state.transform.y-(e.top-window.innerHeight/2):this.state.transform.y}},onComplete:()=>{this.isThrowing=!1,this.setFinalTransform()},shouldWait:()=>!1}),()=>{}}return requestAnimationFrame(()=>{if(!this.isThrowing)return this.momentumThrow({x:0,y:0});let t=this.element,n=this.state.transform;n.x+=e.x,n.y+=e.y;let r=t.getBoundingClientRect();n.x+=e.x,n.y+=e.y,r.right<window.innerWidth/2&&(n.x+=(window.innerWidth/2-r.right)*.1,e.x*=.7),r.left>window.innerWidth/2&&(n.x-=(r.left-window.innerWidth/2)*.1,e.x*=.7),r.bottom<window.innerHeight/2&&(n.y+=(window.innerHeight/2-r.bottom)*.1,e.y*=.7),r.top>window.innerHeight/2&&(n.y-=(r.top-window.innerHeight/2)*.1,e.y*=.7),this.state.transform=n,this.momentumThrow({x:e.x*.9,y:e.y*.9})}),()=>{y.stop(this),this.isThrowing=!1,this.setFinalTransform()}}animateNormalizeTimeout=null;animateNormalize(){this.animateNormalizeTimeout&&clearTimeout(this.animateNormalizeTimeout),this.animateNormalizeTimeout=setTimeout(()=>{y.start({vistaImage:this,target:{width:this.fullW,height:this.fullH,translate:{x:0,y:0},transform:{x:0,y:0,scale:1}},onComplete:()=>{this.setFinalTransform()},shouldWait:()=>!1})},50)}setFinalTransform(){if(!this.isReady)return;this.rect=null,super.setFinalTransform({propagateEvent:!1});let e=this.state.width<=this.minW;if(this.state.width>this.maxW)this.animateZoom(this.maxW/this.state.width);else if(!e&&this.state.width<this.fullW)this.animateNormalize();else if(this.pos===0){let e=this.toObject();this.vistaView.options.onContentChange&&this.vistaView.options.onContentChange(e,this.vistaView),this.vistaView.state.extensions.forEach(t=>{t.onContentChange&&t.onContentChange(e,this.vistaView)})}return{close:e,cancel:()=>y.stop(this)}}},C=class{fiolast={};fio(e,t,n=50){let r=Date.now()-(this.fiolast[t]??0),i=()=>{this.fiolast[t]=Date.now(),e()};if(!this.fiolast[t]){i();return}r>=n&&i()}},w=class{open=!1;settled=!1;closing=!1;zoomedIn=!1;children={htmls:[],images:[]};currentIndex=-1;elmLength=0;abortController=new AbortController;isReducedMotion=!1;extensions=new Set};function T(e){return e&&!/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(e.trim())&&e}function E(e){let t=e instanceof HTMLAnchorElement?e:null,n=e instanceof HTMLImageElement?e:t?.querySelector(`img`),r=t?getComputedStyle(t):null,i=n?getComputedStyle(n):null,a=`0px`,o=i?i.objectFit:`contain`;return r&&T(r.borderRadius)?a=r.borderRadius:i&&T(i.borderRadius)&&(a=i.borderRadius),{borderRadius:a,objectFit:o}}function D(e){let t=e.split(`,`).map(e=>e.trim()),n=[];for(let e of t){let[t,r]=e.split(` `).map(e=>e.trim());if(t&&r&&r.endsWith(`w`)){let e=parseInt(r.slice(0,-1),10);isNaN(e)||n.push({src:t,width:e})}}return n}function O(e){let t=e instanceof HTMLImageElement?e:e.querySelector(`img`),n=e.dataset.vistaviewSrc||e.getAttribute(`href`)||e.getAttribute(`src`)||t?.getAttribute(`src`)||``,r=e.dataset.vistaviewSrcset||e.getAttribute(`srcset`)||t?.getAttribute(`srcset`)||``;if(!n&&!r)throw console.error(`VistaView Error: Element must have href, src, or srcSet`),Error(`VistaView: Element must have href, src, or srcSet`);let i=r?D(r):void 0,a=E(e);return{config:{src:n,alt:e.dataset.vistaviewAlt||e.getAttribute(`alt`)||t?.getAttribute(`alt`)||``,srcSet:r||void 0},parsedSrcSet:i?.length?i:void 0,origin:{anchor:e instanceof HTMLAnchorElement?e:void 0,image:t,src:n,srcSet:r,borderRadius:a.borderRadius,objectFit:a.objectFit}}}var k=class{pointers=[];elm;listeners=[];lastPointerDownId=null;constructor({elm:e,listeners:t}){this.elm=e??document,t&&(this.listeners=t),this.startListeners()}removeLastPointer=()=>{if(this.pointers.length&&this.lastPointerDownId!==null){let e=this.pointers.findIndex(e=>e.id===this.lastPointerDownId);e!==-1&&this.pointers.splice(e,1)}};onPointerDown=e=>{if(!this.listeners.length||e.button!==0)return;e.preventDefault(),this.lastPointerDownId=e.pointerId,window.addEventListener(`contextmenu`,this.removeLastPointer,{once:!0}),window.addEventListener(`auxclick`,this.removeLastPointer,{once:!0});let t={x:e.clientX,y:e.clientY,movementX:0,movementY:0,id:e.pointerId};this.pointers.push(t),this.listeners.forEach(e=>e({event:`down`,pointer:t,pointers:this.pointers,lastPointerLen:this.pointers.length-1}))};onPointerMove=e=>{if(!this.listeners.length)return;e.preventDefault();let t=this.pointers.find(t=>t.id===e.pointerId);t&&(t.movementX=e.movementX,t.movementY=e.movementY,t.x=e.clientX,t.y=e.clientY,this.listeners.forEach(e=>e({event:`move`,pointer:t,pointers:this.pointers,lastPointerLen:this.pointers.length-1})))};onPointerUp=e=>{if(!this.listeners.length||e.button!==0||(window.removeEventListener(`contextmenu`,this.removeLastPointer),window.removeEventListener(`auxclick`,this.removeLastPointer),e.target instanceof Node&&!this.elm.contains(e.target)&&e.target!==document.querySelector(`html`)&&e.target!==document))return;e.preventDefault();let t=this.pointers.findIndex(t=>t.id===e.pointerId);if(t===-1)return;let n=this.pointers[t];n.x=e.clientX,n.y=e.clientY;let r=this.pointers.length;this.pointers.splice(t,1),this.listeners.forEach(e=>e({event:`up`,pointer:n,pointers:this.pointers,lastPointerLen:r}))};onPointerCancel=e=>{if(!this.listeners.length||e.target instanceof Node&&!this.elm.contains(e.target)&&e.target!==document.querySelector(`html`)&&e.target!==document)return;e.preventDefault();let t=this.pointers.findIndex(t=>t.id===e.pointerId);if(t===-1)return;let n=this.pointers[t];n.x=e.clientX,n.y=e.clientY;let r=this.pointers.length;this.pointers.splice(t,1),this.listeners.forEach(e=>e({event:`cancel`,pointer:n,pointers:this.pointers,lastPointerLen:r}))};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(e){this.listeners.push(e)}removeEventListener(e){this.listeners=this.listeners.filter(t=>t!==e)}getPointerDistance(e,t){let n=e.x-t.x,r=e.y-t.y;return Math.sqrt(n*n+r*r)}getCentroid(){if(this.pointers.length===0)return null;let e=this.pointers.reduce((e,t)=>(e.x+=t.x,e.y+=t.y,e),{x:0,y:0});return{x:e.x/this.pointers.length,y:e.y/this.pointers.length}}},A=class{pointers=null;lastDistance=0;pinchMode=!1;lastPinchEndTime=0;PINCH_COOLDOWN=111;cancelMove=()=>{};pointerListeners=[];vvw;imageContainer=null;constructor(e){this.vvw=e}registerPointerListener(e){this.pointerListeners.push(e)}isPinching=()=>this.pinchMode||performance.now()-this.lastPinchEndTime<this.PINCH_COOLDOWN;internalPointerListener=e=>{let t=this.vvw.state.children.images.find(e=>e.pos===0);if(e.event===`down`){if(this.cancelMove(),this.vvw.state.zoomedIn&&e.pointers.length===1&&!this.isPinching()){let e=this.pointers.getCentroid();t.setInitialCenter(e)}if(e.pointers.length>=2){this.pinchMode=!0;let n=this.pointers.getCentroid();this.lastDistance=this.pointers.getPointerDistance(e.pointers[0],e.pointers[1]),t.setInitialCenter(n)}}else if(e.event===`move`){if(this.vvw.state.zoomedIn&&e.pointers.length===1&&e.lastPointerLen===0&&!this.isPinching()){let e=this.pointers.getCentroid();t.scaleMove(1,e)}if(e.pointers.length>=2&&this.pinchMode){let n=this.pointers.getCentroid(),r=this.pointers.getPointerDistance(e.pointers[0],e.pointers[1]);t.scaleMove(r/this.lastDistance,n)}}else if((e.event===`up`||e.event===`cancel`)&&(this.pinchMode||this.vvw.state.zoomedIn))if(this.pinchMode){this.lastPinchEndTime=performance.now(),this.pinchMode=!1;let e=t.setFinalTransform();e?.cancel&&(this.cancelMove=e.cancel),e?.close&&requestAnimationFrame(()=>{this.vvw.close()})}else this.vvw.state.zoomedIn&&e.pointers.length===0&&!this.isPinching()&&(t.isThrowing=!0,this.cancelMove=t.momentumThrow({x:e.pointer.movementX,y:e.pointer.movementY}));this.pointerListeners.forEach(t=>t({...e,state:this.vvw.state,hasInternalExecution:this.vvw.state.zoomedIn||this.isPinching(),abortController:this.vvw.state.abortController}))};onKeyDown=e=>{let t=this.vvw;switch(e.key){case`ArrowLeft`:e.preventDefault(),t.prev();break;case`ArrowRight`:e.preventDefault(),t.next();break;case`ArrowUp`:e.preventDefault(),t.zoomIn();break;case`ArrowDown`:e.preventDefault(),t.zoomOut();break;case`Escape`:e.preventDefault(),t.close();break}};onScroll=e=>{e.preventDefault();let t=this.vvw,n=this.vvw.state.children.images.find(e=>e.pos===0),r=e.deltaY;n.setInitialCenter({x:e.clientX,y:e.clientY}),r<0?t.zoomIn():r>0&&t.zoomOut()};onResizeHandler=()=>{this.vvw.state.children.images.forEach(e=>{e.setSizes()})};start(e){this.vvw.options.keyboardListeners&&window.addEventListener(`keydown`,this.onKeyDown),this.imageContainer=e,this.imageContainer.addEventListener(`wheel`,this.onScroll,{passive:!1}),window.addEventListener(`resize`,this.onResizeHandler),this.pointers=new k({elm:e,listeners:[this.internalPointerListener]})}stop(){this.vvw.options.keyboardListeners&&window.removeEventListener(`keydown`,this.onKeyDown),window.removeEventListener(`resize`,this.onResizeHandler),this.imageContainer.removeEventListener(`wheel`,this.onScroll),this.pointers.removeListeners(),this.pointerListeners=[]}};let j={somethingOpened:null};var M=class{options;state=new w;imageContainer=null;externalPointerListener=[];elements;eventHandlers=null;imageSetupFunction=f;initFunction=p;openFunction=h;closeFunction=g;transitionFunction=_;throttle=new C;root=null;onClickElements=e=>{e.preventDefault();let t=this.qsOrigin(this.elements),n=Array.prototype.indexOf.call(t,e.currentTarget);this.open(n)};defaultOnClickHandler=e=>e.preventDefault();constructor(e,n={}){this.elements=e,this.options={...t,...n,controls:{...t.controls,...n.controls}},this.options.imageSetupFunction&&(this.imageSetupFunction=this.options.imageSetupFunction),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.options.extensions?.forEach(e=>{this.state.extensions.add(e)}),this.state.isReducedMotion=window.matchMedia(`(prefers-reduced-motion: reduce)`).matches,this.reset(),this.initFunction(this)}reset(){if(typeof this.elements==`string`){let e=this.qsOrigin(this.elements);this.state.elmLength=e.length,e.forEach(e=>{let t=e;t.removeEventListener(`click`,this.defaultOnClickHandler),t.removeEventListener(`pointerup`,this.onClickElements),t.addEventListener(`click`,this.defaultOnClickHandler),t.addEventListener(`pointerup`,this.onClickElements)})}else this.state.elmLength=this.elements.length}qs(e){return this.root?this.root.querySelector(e):null}qsOrigin(e){return document.querySelectorAll(e)}registerPointerListener(e){this.externalPointerListener.push(e)}getChildElements(e,t){let n=[],r=[],i=typeof this.elements==`string`?this.qsOrigin(this.elements):this.elements;for(let a=-e;a<=e;a++){let e=(t+a+i.length)%i.length,o=i[e],s={elm:o instanceof HTMLElement?O(o):{config:o,origin:void 0,parsedSrcSet:void 0},pos:a,index:e,vistaView:this,maxZoomLevel:this.options.maxZoomLevel,transitionShouldWait:()=>this.isRapidSwap,onScale:({vistaImage:e,isMin:t,isMax:n})=>{e.index===this.state.currentIndex&&(this.state.zoomedIn=!t,t?this.qs(`.vvw-zoom-out`)?.setAttribute(`disabled`,`true`):this.qs(`.vvw-zoom-out`)?.removeAttribute(`disabled`),n?this.qs(`.vvw-zoom-in`)?.setAttribute(`disabled`,`true`):this.qs(`.vvw-zoom-in`)?.removeAttribute(`disabled`))}},c=null;this.state.extensions.forEach(e=>{!c&&e.onInitializeImage&&(c=e.onInitializeImage(s))});let l=c??new S(s),u=document.createElement(`div`);u.className=`vvw-item`,u.dataset.vvwPos=`${a}`,u.dataset.vvwIdx=`${e}`,l.thumb&&u.appendChild(l.thumb),u.appendChild(l.element),n.push(l),r.push(u)}return{htmls:r,images:n}}lastSwapTime=0;isRapidSwap=!1;isRapidSwapRelease=null;transitionCleanup=null;async swap(e,t){this.reactivateUi();let n=this.options.preloads||0,r=this.state.currentIndex,{htmls:i,images:a}=this.getChildElements(n,r),o=this.imageContainer,s=this.state.children,c={htmlElements:{from:s.htmls,to:i},images:{from:s.images,to:a},index:{from:e,to:this.state.currentIndex},via:t||{next:!1,prev:!1}};this.imageSetupFunction(c,this),this.state.zoomedIn=!1,this.qs(`.vvw-zoom-out`)?.setAttribute(`disabled`,`true`),this.qs(`.vvw-zoom-in`)?.removeAttribute(`disabled`);let l=performance.now()-this.lastSwapTime<this.options.rapidLimit;this.isRapidSwap=l;let{images:u}=this.state.children;if(this.state.children={htmls:i,images:a},this.displayCurrentInfo(),l)u.forEach(e=>{e.cancelPendingLoad(),e.destroy()});else{let e=this.state.abortController.signal,t=this.transitionFunction(c,e,this);t&&(this.transitionCleanup=t.cleanup,await t.transitionEnded),this.lastSwapTime=performance.now(),u.forEach(e=>{e.cancelPendingLoad()});let n=u.find(e=>e.index===r),i=n?y.stop(n):void 0,o=a.find(e=>e.index===r);o&&n&&o.cloneStyleFrom(n,i),u.forEach(e=>{e.destroy()})}o.innerHTML=``,this.transitionCleanup&&this.transitionCleanup(),i.forEach(e=>{o.appendChild(e)}),a.forEach(e=>{e.init()}),l?(this.isRapidSwapRelease&&clearTimeout(this.isRapidSwapRelease),this.isRapidSwapRelease=setTimeout(()=>{this.isRapidSwap=!1},333)):this.isRapidSwap=!1,this.options.onImageView&&this.options.onImageView(c,this),this.state.extensions.forEach(e=>{e.onImageView&&e.onImageView(c,this)})}displayCurrentInfo(){let e=this.state.currentIndex;typeof this.elements==`string`&&this.qsOrigin(this.elements).forEach((t,n)=>{t.style.opacity=``,n===e&&(t.style.opacity=`0`)});let t=this.qs(`.vvw-index`),n=`${e+1}`,r=`${this.state.elmLength}`;t&&(t.textContent=`${n} / ${r}`);let i=this.qs(`.vvw-desc`);if(i){let t=this.state.children.images.find(t=>t.index===e)?.config.alt||``;t?(i.textContent=t,i.setAttribute(`aria-label`,`Image ${n} of ${r}: ${t}`),i.style.opacity=``):(i.textContent=``,i.setAttribute(`aria-label`,`Image ${n} of ${r}`),i.style.opacity=`0`)}}tempDeactivatedUi=[];tempDeactivationRequestBy=null;deactivateUi(e,t){e.forEach(e=>{e===`zoomIn`?this.qs(`.vvw-zoom-in`)?.setAttribute(`disabled`,`true`):e===`zoomOut`&&this.qs(`.vvw-zoom-out`)?.setAttribute(`disabled`,`true`),this.tempDeactivatedUi.push(e)}),this.tempDeactivationRequestBy=t||null,this.state.extensions.forEach(t=>{t.onDeactivateUi&&t.onDeactivateUi(e,this.tempDeactivationRequestBy,this)})}reactivateUi(){this.tempDeactivatedUi.forEach(e=>{e===`zoomIn`?this.qs(`.vvw-zoom-in`)?.removeAttribute(`disabled`):e===`zoomOut`&&this.qs(`.vvw-zoom-out`)?.removeAttribute(`disabled`)}),this.state.extensions.forEach(e=>{e.onReactivateUi&&e.onReactivateUi(this.tempDeactivatedUi,this.tempDeactivationRequestBy,this)}),this.tempDeactivatedUi=[],this.tempDeactivationRequestBy=null}open(e=0){if(j.somethingOpened){console.warn(`Another VistaView instance is already opened. Close it first before opening a new one.`);return}j.somethingOpened=this,this.reset(),(e<0||e>=this.state.elmLength)&&(e=(e%this.state.elmLength+this.state.elmLength)%this.state.elmLength),this.state.currentIndex=e,document.body.style.overflow=`hidden`;let t=d({controls:this.options.controls,extensions:this.state.extensions});if(document.body.append(t),this.root=document.body.querySelector(`#vvw-root`),!this.root)throw 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`);let n=this.options.preloads||0,r=e,{images:i,htmls:a}=this.getChildElements(n,r),o={htmlElements:{from:null,to:a},images:{from:null,to:i},index:{from:null,to:this.state.currentIndex},via:{next:!1,prev:!1}};this.imageSetupFunction(o,this),this.state.children={htmls:a,images:i},a.forEach(e=>{this.imageContainer.appendChild(e)}),i.forEach(e=>{e.init()}),this.qs(`.vvw-close`)?.addEventListener(`click`,()=>this.close()),this.qs(`.vvw-zoom-in`)?.addEventListener(`click`,()=>this.zoomIn()),this.qs(`.vvw-zoom-out`)?.addEventListener(`click`,()=>this.zoomOut()),this.qs(`.vvw-prev>button`)?.addEventListener(`click`,()=>this.prev()),this.qs(`.vvw-next>button`)?.addEventListener(`click`,()=>this.next()),this.state.elmLength<2&&(this.qs(`.vvw-prev`)?.classList.add(`vvw--hidden`),this.qs(`.vvw-next`)?.classList.add(`vvw--hidden`)),this.openFunction(this),this.eventHandlers=new A(this),this.externalPointerListener.forEach(e=>{this.eventHandlers.registerPointerListener(e)}),this.eventHandlers.start(this.imageContainer),requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.root?.addEventListener(`transitionend`,()=>{this.root?.classList.add(`vvw--settled`)},{once:!0}),this.root.classList.add(`vvw--active`),this.displayCurrentInfo(),this.options.onOpen&&this.options.onOpen(this),this.options.onImageView&&this.options.onImageView(o,this),this.state.extensions.forEach(e=>{e.onOpen&&e.onOpen(this),e.onImageView&&e.onImageView(o,this)})})})}async close(e=!0){j.somethingOpened===this&&this.root&&(this.eventHandlers.stop(),this.eventHandlers=null,this.state.children.images.forEach(e=>{e.prepareClose()}),e?await new Promise(e=>{let t=0;this.root.addEventListener(`transitionend`,n=>{n.target===this.root&&(t++,t===2&&typeof this.elements==`string`&&(this.state.children.images.forEach(e=>{e.destroy()}),this.qsOrigin(this.elements).forEach(e=>{e.style.opacity=``})),t===3&&e(null))}),this.root.classList.add(`vvw--closing`)}):typeof this.elements==`string`&&(this.state.children.images.forEach(e=>{e.destroy()}),this.qsOrigin(this.elements).forEach(e=>{e.style.opacity=``})),this.root.remove(),this.root=null,this.imageContainer=null,this.state.children={htmls:[],images:[]},this.state.currentIndex=-1,this.state.children.images.forEach(e=>{e.destroy()}),document.body.style.overflow=``,j.somethingOpened=null,this.closeFunction(this),this.options.onClose&&this.options.onClose(this),this.state.extensions.forEach(e=>{e.onClose&&e.onClose(this)}))}destroy(){this.close(!1),this.externalPointerListener=[],typeof this.elements==`string`&&this.qsOrigin(this.elements).forEach(e=>{e.removeAttribute(`data-vista-idx`),e.removeEventListener(`click`,this.defaultOnClickHandler),e.removeEventListener(`pointerup`,this.onClickElements)})}next(){if(j.somethingOpened!==this){console.warn(`This VistaView instance is not opened.`);return}let e=(this.state.currentIndex+1)%this.state.elmLength;this.view(e,{next:!0,prev:!1})}prev(){if(j.somethingOpened!==this){console.warn(`This VistaView instance is not opened.`);return}let e=(this.state.currentIndex-1+this.state.elmLength)%this.state.elmLength;this.view(e,{next:!1,prev:!0})}view(e,t){if(j.somethingOpened!==this){console.warn(`This VistaView instance is not opened.`);return}if(this.state.elmLength<2)return;(e<0||e>=this.state.elmLength)&&(e=(e%this.state.elmLength+this.state.elmLength)%this.state.elmLength);let n=this.state.currentIndex;this.state.currentIndex=e,this.state.abortController?.abort(),this.state.abortController=new AbortController,this.swap(n,t)}isZoomedIn=!1;zoomIn(){if(j.somethingOpened!==this){console.warn(`This VistaView instance is not opened.`);return}this.tempDeactivatedUi.includes(`zoomIn`)||this.throttle.fio(()=>{this.state.children.images.find(e=>e.pos===0)?.animateZoom(1.68)},`zoom`,222)}zoomOut(){if(j.somethingOpened!==this){console.warn(`This VistaView instance is not opened.`);return}this.tempDeactivatedUi.includes(`zoomOut`)||this.throttle.fio(()=>{this.state.children.images.find(e=>e.pos===0)?.animateZoom(.68)},`zoom`,222)}getCurrentIndex(){return this.state.currentIndex}};function N(e){let t=null;if(typeof e==`string`){if(t=document.querySelectorAll(e),t.length===0)return Error(`No elements found in node list.`);for(let e=0;e<t.length;e++){let n=t[e],r=n.tagName.toLowerCase();if(r!==`img`&&r!==`a`)return Error(`Invalid element at index ${e}: expected <img>, <a>, got <${r}>`);if(r===`a`&&n.querySelector(`img`)===null)return Error(`Invalid <a> element at index ${e}: must contain <img>`)}}else{let t=e;for(let e=0;e<t.length;e++)if(!t[e].src)return Error(`Invalid image data at index ${e}: must have 'src'`)}return e}function P({elements:e,...t}){if(!e)return console.error(e),console.error(`no elements provided`),console.warn(`VistaView: silently returning.`),null;let n=N(e);if(n instanceof Error)return console.error(n),console.warn(`VistaView: silently returning.`),null;let r=new M(n,t);return{open:(e=0)=>r.open(e),reset:()=>r.reset(),close:()=>r.close(),next:()=>r.next(),prev:()=>r.prev(),zoomIn:()=>r.zoomIn(),zoomOut:()=>r.zoomOut(),destroy:()=>r.destroy(),getCurrentIndex:()=>r.getCurrentIndex(),view:e=>{r.view(e)}}}e.DefaultOptions=t,e.VistaBox=x,e.VistaHiresTransition=y,e.VistaImage=S,e.VistaImageEvent=A,e.VistaPointers=k,e.VistaState=w,e.VistaView=M,e.close=g,e.imageSetup=f,e.init=p,e.open=h,e.transition=_,e.vistaView=P});
18
+ </div>`);return[...e?.topLeft||[],...e?.topCenter||[],...e?.topRight||[],...e?.bottomLeft||[],...e?.bottomCenter||[],...e?.bottomRight||[]].forEach(e=>{let t=i[e];if(t&&t.control){let e=o.querySelector(`[data-vvw-control="${t.name}"]`),n=t.control();e&&n&&e.appendChild(n)}}),o}function f(e,t){}function p(e){m(e)}function m(e){let t={x:0,y:0},n={x:0,y:0},r=null;e.registerPointerListener(i=>{if(!i.hasInternalExecution&&!(i.pointers.length>1)){if(i.event===`down`&&(t={x:i.pointer.x,y:i.pointer.y},n={x:i.pointer.x,y:i.pointer.y},i.abortController?.abort()),i.event===`move`){n={x:i.pointer.x,y:i.pointer.y};let a=n.x-t.x,o=n.y-t.y;if(!r&&Math.abs(o)>Math.abs(a)||r===`y`){let t=o/window.innerHeight*100;e.imageContainer.style.transition=`none`,e.imageContainer.style.transform=`translateY(${t}vh)`,r=`y`}else if(!r&&Math.abs(a)>Math.abs(o)||r===`x`&&i.state.elmLength>1){let t=a/window.innerWidth*100;e.imageContainer.style.transition=`none`,e.imageContainer.style.transform=`translateX(${t}vw)`,r=`x`}}if(i.event===`up`||i.event===`cancel`){function a(t){e.imageContainer?.addEventListener(`transitionend`,function t(){e.imageContainer?.removeEventListener(`transitionend`,t),e.imageContainer.style.transition=``,e.imageContainer.style.transform=``}),e.imageContainer.style.transition=`transform 222ms ease`,e.imageContainer.style.transform=t}if(r===`y`){let r=n.y-t.y;Math.abs(r)>144?(e.imageContainer.style.transition=`transform 222ms ease`,e.imageContainer.style.transform=`translateY(0vh)`,e.close()):a(`translateY(0vh)`)}if(r===`x`&&i.state.elmLength>1){let r=n.x-t.x;e.imageContainer.style.transition=``,r>64?e.prev():r<-64?e.next():a(`translateX(0vw)`)}r=null,t={x:0,y:0},n={x:0,y:0}}}})}function h(e){let t=e.options.preloads;e.imageContainer.style.width=`${(t*2+1)*100}vw`,e.imageContainer.style.left=`-${t*100}vw`,e.imageContainer.style.display=`flex`}function g(e){}function _({htmlElements:{to:e},index:{from:t,to:n}},r,i){let{imageContainer:a,options:o}=i,{isReducedMotion:s}=i.state;if(!(!e||r.aborted||s)&&(Math.abs(n-t)===1||t===0&&n===i.state.elmLength-1||t===i.state.elmLength-1&&n===0))return{cleanup:()=>{a.style.transition=``,a.style.transform=``},transitionEnded:new Promise(e=>{a.addEventListener(`transitionend`,()=>{e()},{once:!0}),a.addEventListener(`transitioncancel`,()=>{r.aborted&&e()},{once:!0});let s=Math.round(o.animationDurationBase*100)/100,c=n===t+1||t===i.state.elmLength-1&&n===0?`translateX(-100vw)`:`translateX(100vw)`;a.style.transition=`transform ${s}ms ease`,a.style.transform=c})}}function v(e){let t=window.innerWidth,n=window.innerHeight,r=e.naturalWidth,i=e.naturalHeight;if(!r||!i)throw console.error(`Error`,e),Error(`Image natural dimensions are zero`);if(r<t&&i<n)return{width:r,height:i};let a=r/i,o=t/n,s,c;return a>o?(s=t,c=t/a):(c=n,s=n*a),{width:s,height:c}}var y=class{static map=new Map;static ease(e,t,n){let r=t-e,i=e+r*.2;return Math.abs(r)<n?t:i}static play(e,t,n){if(n()){requestAnimationFrame(()=>{this.play(e,t,n)});return}this.map.get(e)&&(e.element.classList.contains(`vvw--load-cancelled`)||requestAnimationFrame(()=>{let r=this.map.get(e);if(!r||!e.element||e.element.classList.contains(`vvw--load-cancelled`))return;let{current:i,target:a,log:o}=r,s={};a.width!==void 0&&(s.width=this.ease(i._width,a.width,1)),a.height!==void 0&&(s.height=this.ease(i._height,a.height,1)),a.transform?.x!==void 0&&(s.transform=s.transform||{},s.transform.x=this.ease(i._transform.x,a.transform.x,1)),a.transform?.y!==void 0&&(s.transform=s.transform||{},s.transform.y=this.ease(i._transform.y,a.transform.y,1)),a.transform?.scale!==void 0&&(s.transform=s.transform||{},s.transform.scale=this.ease(i._transform.scale,a.transform.scale,.005)),a.translate?.x!==void 0&&(s.translate=s.translate||{},s.translate.x=this.ease(i._translate.x,a.translate.x,1)),a.translate?.y!==void 0&&(s.translate=s.translate||{},s.translate.y=this.ease(i._translate.y,a.translate.y,1)),s.width!==void 0&&(i.width=s.width),s.height!==void 0&&(i.height=s.height),s.translate&&(i.translate={...i.translate,...s.translate}),s.transform&&(i.transform={...i.transform,...s.transform}),(a.width===void 0||i._width===a.width)&&(a.height===void 0||i._height===a.height)&&(a.transform?.x===void 0||i._transform.x===a.transform.x)&&(a.transform?.y===void 0||i._transform.y===a.transform.y)&&(a.transform?.scale===void 0||i._transform.scale===a.transform.scale)&&(a.translate?.x===void 0||i._translate.x===a.translate.x)&&(a.translate?.y===void 0||i._translate.y===a.translate.y)?(this.map.delete(e),t()):(this.map.set(e,{current:i,target:a,log:o}),this.play(e,t,n))}))}static stop(e){let t=this.map.get(e);return this.map.delete(e),t}static start({vistaImage:e,target:t,onComplete:n,shouldWait:r}){this.stop(e),this.map.set(e,{current:e.state,target:t}),this.play(e,n,r)}};function b(e){let t=window.getComputedStyle(e).objectFit||``,{width:n,height:r}=e.getBoundingClientRect(),i=e.naturalWidth,a=e.naturalHeight;if(!t||!i||!a)return{width:n,height:r};let o=i/a,s=n/r;switch(t){case`fill`:return{width:n,height:r};case`none`:return{width:i,height:a};case`contain`:return o>s?{width:n,height:n/o}:{width:r*o,height:r};case`cover`:return o<s?{width:n,height:n/o}:{width:r*o,height:r};case`scale-down`:{let e={width:i,height:a},t=o>s?{width:n,height:n/o}:{width:r*o,height:r};return t.width<=e.width&&t.height<=e.height?t:e}}return{width:n,height:r}}var x=class{state;parsedSrcSet=void 0;isReady=!1;isThrowing=!1;thumb=null;pos;index;config;origin=void 0;initH=0;initW=0;fullH=0;fullW=0;maxW=0;minW=0;defaultWH=200;isZoomedIn=!1;isCancelled=!1;isLoadedResolved=null;isLoadedRejected=null;isLoaded=new Promise((e,t)=>{this.isLoadedResolved=e,this.isLoadedRejected=t});replacement=null;originalParent=null;originalNextSibling=null;originalStyle=``;thumbImage=null;originRect={width:this.defaultWH,height:this.defaultWH,top:0,left:0};fittedSize=null;maxZoomLevel;vistaView;transitionState=null;transitionShouldWait=()=>!1;initPointerCenter={x:0,y:0};onScale;constructor(e){this.state=this.createState(),this.pos=e.pos,this.index=e.index,this.config=e.elm.config,this.parsedSrcSet=e.elm.parsedSrcSet,this.origin=e.elm.origin,this.maxZoomLevel=e.maxZoomLevel,this.vistaView=e.vistaView,this.onScale=e.onScale,e.transitionState&&(this.transitionState=e.transitionState),e.transitionShouldWait&&(this.transitionShouldWait=e.transitionShouldWait),this.initPointerCenter={x:window.innerWidth/2,y:window.innerHeight/2};let t=this.pos===0?this.origin?.image:null;if(this.originalParent=t?.parentElement||null,this.originalNextSibling=t?.nextSibling||null,this.originRect=(this.origin?.anchor||t)?.getBoundingClientRect()||{width:this.defaultWH,height:this.defaultWH,top:0,left:0},t&&this.originalParent){this.originalStyle=t.style.cssText,this.thumbImage=t;let e=t.cloneNode(!0);this.originalParent.insertBefore(e,t),this.replacement=e,this.thumb=document.createElement(`div`),this.thumb.classList.add(`vvw-img-lo`);let{width:n,height:r}=this.thumbImage?b(this.thumbImage):{width:0,height:0};this.fittedSize={width:n,height:r},this.thumb.appendChild(t),t.style.width=`100%`,t.style.height=`100%`,t.style.objectFit=this.origin.objectFit}}createState(){let e=this;return{_t:this,_width:0,_height:0,_transform:{x:0,y:0,scale:1},_translate:{x:0,y:0},_lessThanMinWidth:!1,get width(){return this._width},set width(t){this._width=t,e.onWidthChange(t)},get height(){return this._height},set height(t){this._height=t,e.onHeightChange(t)},get transform(){return this._transform},set transform(t){this._transform=t,e.onTransformChange(t)},get translate(){return this._translate},set translate(t){this._translate=t,e.onTranslateChange(t)},get lessThanMinWidth(){return this._lessThanMinWidth},set lessThanMinWidth(t){this._lessThanMinWidth=t,e.onLessThanMinWidthChange(t)}}}onLessThanMinWidthChange(e){e?this.element.style.opacity=`0.5`:this.element.style.opacity=``}onTranslateChange(e){this.element.style.translate=`calc(-50% + ${e.x}px) calc(-50% + ${e.y}px)`}onTransformChange(e){let t=`translate3d(${e.x}px, ${e.y}px, 0px) scale3d(${e.scale}, ${e.scale}, 1)`;this.element.style.transform=t}onWidthChange(e){this.element.style.width=`${e}px`}onHeightChange(e){this.element.style.height=`${e}px`}onImageReady(){}animateZoom(e,t){}scaleMove(e,t,n){}momentumThrow(e){return()=>{}}async init(){await this.isLoaded;let e=this.element;this.transitionState&&this.transitionState.current.width&&this.transitionState.current.height?(this.state.width=this.transitionState.current.width,this.state.height=this.transitionState.current.height):e.classList.contains(`vvw--loaded`)||(this.state.width=this.initW,this.state.height=this.initH);let t=()=>{this.isCancelled||y.start({vistaImage:this,target:{width:this.fullW,height:this.fullH},onComplete:()=>{this.isCancelled||(this.isReady=!0,e.classList.add(`vvw--ready`),this.onImageReady())},shouldWait:this.transitionShouldWait})};this.pos<-1||this.pos>1?(this.state.width=this.fullW,this.state.height=this.fullH,e.classList.add(`vvw--loaded`),e.classList.add(`vvw--ready`),this.isReady=!0):e.classList.contains(`vvw--loaded`)?e.classList.contains(`vvw--ready`)?(this.isReady=!0,this.onImageReady()):t():(e.classList.add(`vvw--loaded`),setTimeout(()=>{this.isCancelled||t()},333))}getFullSizeDim(){let{width:e,height:t}=this.thumb.getBoundingClientRect(),n=e/t,r=window.innerWidth,i=window.innerHeight;return n>window.innerWidth/window.innerHeight?i=r/n:r=i*n,{width:r,height:i}}setSizes(e={}){let{stableSize:t=!0,initDimension:n}=e;if(!this.origin)return;let r=this.thumb;n||(this.originRect=(this.origin?.anchor||this.replacement)?.getBoundingClientRect()||{width:this.defaultWH,height:this.defaultWH,top:0,left:0});let i=this.originRect;if(r){let e=r.style;e.width=i.width+`px`,e.height=i.height+`px`,e.top=`50%`,e.left=`50%`,e.translate=`-50% -50%`,e.position=`fixed`,e.objectFit=this.origin.objectFit,e.borderRadius=this.origin.borderRadius;let t=Math.min(Math.max(i.left,-i.width),window.innerWidth+i.width)-window.innerWidth/2+i.width/2,a=Math.min(Math.max(i.top,-i.height),window.innerHeight+i.height)-window.innerHeight/2+i.height/2;e.setProperty(`--vvw-init-radius`,e.borderRadius),e.setProperty(`--vvw-pulse-radius`,`calc(1.3 * ${e.borderRadius})`),e.setProperty(`--vvw-init-x`,`${t}px`),e.setProperty(`--vvw-init-y`,`${a}px`),n&&(e.setProperty(`--vvw-current-x`,`${t}px`),e.setProperty(`--vvw-current-y`,`${a}px`))}if(!n){let{width:e,height:t}=this.thumbImage?b(this.thumbImage):{width:0,height:0};this.fittedSize={width:e,height:t}}let a=this.element;if(this.initW=Math.min(this.fittedSize?.width??0,i.width),this.initH=Math.min(this.fittedSize?.height??0,i.height),a.style.setProperty(`--vvw-init-w`,this.initW+`px`),a.style.setProperty(`--vvw-init-h`,this.initH+`px`),a.style.setProperty(`--vvw-init-radius`,this.origin.borderRadius),a.style.objectFit=`cover`,!n){if(this.isReady&&!this.isCancelled){let{width:e,height:t}=this.getFullSizeDim();this.fullH=t,this.fullW=e,this.minW=this.fullW*.5}!this.isZoomedIn&&t&&this.normalize()}}normalize(){this.state.transform={x:0,y:0,scale:1},this.state.translate={x:0,y:0},this.state.width=this.fullW,this.state.height=this.fullH,this.isZoomedIn=!1}getFromParsedSrcSet(e){if(!this.parsedSrcSet||this.parsedSrcSet.length===0)return null;let t=e*(window.devicePixelRatio||1),n=this.parsedSrcSet[this.parsedSrcSet.length-1];for(let e of this.parsedSrcSet)if(e.width>=t){n=e;break}return n.src}prepareClose(){y.stop(this),this.setFinalTransform()}cancelPendingLoad(){this.isCancelled=!0,this.element?.classList.add(`vvw--load-cancelled`)}setInitialCenter(e){this.initPointerCenter=e}destroy(){this.originalParent&&this.thumbImage&&(this.thumbImage.style.cssText=this.originalStyle,this.originalNextSibling?this.originalParent.insertBefore(this.thumbImage,this.originalNextSibling):this.originalParent.appendChild(this.thumbImage)),this.originalParent=null,this.originalNextSibling=null,this.originalStyle=``,this.thumbImage=null,this.replacement&&=(this.replacement.remove(),null),this.thumb?.remove(),this.element?.remove(),this.thumb=null,this.origin=void 0,this.config={src:``,alt:``}}cloneStyleFrom(e,t){e?.element&&(t&&(this.transitionState=t||null),e.element.classList.contains(`vvw--loaded`)&&(this.element.classList.add(`vvw--loaded`),this.state.width=e.state.width,this.state.height=e.state.height),e.element.classList.contains(`vvw--ready`)&&this.element.classList.add(`vvw--ready`))}toObject(){return structuredClone({config:{src:this.config.src,alt:this.config.alt,srcSet:this.config.srcSet},origin:this.origin?{src:this.origin.src,srcSet:this.origin.srcSet,borderRadius:this.origin.borderRadius,objectFit:this.origin.objectFit}:null,parsedSrcSet:this.parsedSrcSet,element:`src`in this.element?this.element.src:this.element.toString(),thumb:void 0,index:this.index,pos:this.pos,state:{width:this.state._width,height:this.state._height,transform:this.state._transform,translate:this.state._translate}})}setFinalTransform(e={}){let{propagateEvent:t=!0}=e;if(this.isReady){if(this.state.translate.x+=this.state.transform.x,this.state.translate.y+=this.state.transform.y,this.state.width*=this.state.transform.scale,this.state.height*=this.state.transform.scale,Math.abs(this.state.width-this.fullW)<1&&(this.state.width=this.fullW,this.state.height=this.fullH),Math.abs(this.state.translate.x)<1&&(this.state.translate.x=0),Math.abs(this.state.translate.y)<1&&(this.state.translate.y=0),this.state.translate={...this.state.translate},this.state.transform={x:0,y:0,scale:1},t){let e=this.toObject();this.vistaView.options.onContentChange&&this.vistaView.options.onContentChange(e,this.vistaView),this.vistaView.state.extensions.forEach(t=>{t.onContentChange&&t.onContentChange(e,this.vistaView)})}return{close:!0,cancel:()=>{}}}}},S=class extends x{element;rect=null;onWidthChange(e){super.onWidthChange(e);let t=this.getFromParsedSrcSet(e);if(t&&this.element.src!==t){let e=new Image;e.onload=()=>{e.decode().then(()=>{this.isCancelled||(this.element.src=t)})},e.src=t}}constructor(e){super(e);let t=document.createElement(`img`);t.alt=this.config.alt||``,t.classList.add(`vvw-img-hi`),this.element=t,t.onerror=e=>{this.isLoadedRejected(e)},t.src=this.config.src,t.decode().then(()=>{this.onLoad()}).catch(e=>{this.isLoadedRejected(e)}),this.setSizes({stableSize:!1,initDimension:!0})}onLoad(){if(this.isCancelled)return;let e=this.element;e.width=e.naturalWidth,e.height=e.naturalHeight,this.maxW=e.naturalWidth*this.maxZoomLevel;let{width:t,height:n}=v(e);this.fullH=n,this.fullW=t,this.minW=this.fullW*.5,this.isLoadedResolved(!0)}getFullSizeDim(){return v(this.element)}normalize(){super.normalize();let e=this.element;e.style.objectFit=`cover`,e.style.borderRadius=`0`}scaleMove(e,t,n=!1){if(!this.isReady||!this.element)return;this.rect||=this.element.getBoundingClientRect(),t||=this.initPointerCenter;let r=this.rect.left+this.rect.width/2,i=this.rect.top+this.rect.height/2,a=this.initPointerCenter.x-r,o=this.initPointerCenter.y-i,s=a*(1-e),c=o*(1-e),l=t.x-this.initPointerCenter.x,u=t.y-this.initPointerCenter.y;n?y.start({vistaImage:this,target:{transform:{x:s+l,y:c+u,scale:e}},onComplete:()=>{this.setFinalTransform()},shouldWait:()=>!1}):this.state.transform={x:s+l,y:c+u,scale:e};let d=this.element.getBoundingClientRect().width*e;this.isZoomedIn=d>this.fullW,this.state.lessThanMinWidth=d<=this.minW,this.onScale({vistaImage:this,scale:d/this.fullW,isMax:d>=this.maxW,isMin:d<=this.fullW})}animateZoom(e,t){this.state.width*e<this.minW||this.scaleMove(e,t,!0)}momentumThrow(e){if(!this.isReady)return()=>{};if(!this.isThrowing)return this.setFinalTransform(),()=>{};if(Math.abs(e.x)<.1&&Math.abs(e.y)<.1){let e=this.element.getBoundingClientRect();return y.start({vistaImage:this,target:{transform:{x:e.right<window.innerWidth/2?this.state.transform.x+(window.innerWidth/2-e.right):e.left>window.innerWidth/2?this.state.transform.x-(e.left-window.innerWidth/2):this.state.transform.x,y:e.bottom<window.innerHeight/2?this.state.transform.y+(window.innerHeight/2-e.bottom):e.top>window.innerHeight/2?this.state.transform.y-(e.top-window.innerHeight/2):this.state.transform.y}},onComplete:()=>{this.isThrowing=!1,this.setFinalTransform()},shouldWait:()=>!1}),()=>{}}return requestAnimationFrame(()=>{if(!this.isThrowing)return this.momentumThrow({x:0,y:0});let t=this.element,n=this.state.transform;n.x+=e.x,n.y+=e.y;let r=t.getBoundingClientRect();r.right<window.innerWidth/2&&(n.x+=(window.innerWidth/2-r.right)*.1,e.x*=.7),r.left>window.innerWidth/2&&(n.x-=(r.left-window.innerWidth/2)*.1,e.x*=.7),r.bottom<window.innerHeight/2&&(n.y+=(window.innerHeight/2-r.bottom)*.1,e.y*=.7),r.top>window.innerHeight/2&&(n.y-=(r.top-window.innerHeight/2)*.1,e.y*=.7),this.state.transform=n,this.momentumThrow({x:e.x*.9,y:e.y*.9})}),()=>{y.stop(this),this.isThrowing=!1,this.setFinalTransform()}}animateNormalizeTimeout=null;animateNormalize(){this.animateNormalizeTimeout&&clearTimeout(this.animateNormalizeTimeout),this.animateNormalizeTimeout=setTimeout(()=>{y.start({vistaImage:this,target:{width:this.fullW,height:this.fullH,translate:{x:0,y:0},transform:{x:0,y:0,scale:1}},onComplete:()=>{this.setFinalTransform()},shouldWait:()=>!1})},50)}setFinalTransform(){if(!this.isReady)return;this.rect=null,super.setFinalTransform({propagateEvent:!1});let e=this.state.width<=this.minW;if(this.state.width>this.maxW)this.animateZoom(this.maxW/this.state.width);else if(!e&&this.state.width<this.fullW)this.animateNormalize();else if(this.pos===0){let e=this.toObject();this.vistaView.options.onContentChange&&this.vistaView.options.onContentChange(e,this.vistaView),this.vistaView.state.extensions.forEach(t=>{t.onContentChange&&t.onContentChange(e,this.vistaView)})}return{close:e,cancel:()=>y.stop(this)}}},C=class{fiolast={};fio(e,t,n=50){let r=Date.now()-(this.fiolast[t]??0),i=()=>{this.fiolast[t]=Date.now(),e()};if(!this.fiolast[t]){i();return}r>=n&&i()}},w=class{open=!1;settled=!1;closing=!1;zoomedIn=!1;children={htmls:[],images:[]};currentIndex=-1;elmLength=0;abortController=new AbortController;isReducedMotion=!1;extensions=new Set};function T(e){return e&&!/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(e.trim())&&e}function E(e){let t=e instanceof HTMLAnchorElement?e:null,n=e instanceof HTMLImageElement?e:t?.querySelector(`img`),r=t?getComputedStyle(t):null,i=n?getComputedStyle(n):null,a=`0px`,o=i?i.objectFit:`contain`;return r&&T(r.borderRadius)?a=r.borderRadius:i&&T(i.borderRadius)&&(a=i.borderRadius),{borderRadius:a,objectFit:o}}function D(e){let t=e.split(`,`).map(e=>e.trim()),n=[];for(let e of t){let[t,r]=e.split(` `).map(e=>e.trim());if(t&&r&&r.endsWith(`w`)){let e=parseInt(r.slice(0,-1),10);isNaN(e)||n.push({src:t,width:e})}}return n}function O(e){let t=e instanceof HTMLImageElement?e:e.querySelector(`img`),n=e.dataset.vistaviewSrc||e.getAttribute(`href`)||e.getAttribute(`src`)||t?.getAttribute(`src`)||``,r=e.dataset.vistaviewSrcset||e.getAttribute(`srcset`)||t?.getAttribute(`srcset`)||``;if(!n&&!r)throw console.error(`VistaView Error: Element must have href, src, or srcSet`),Error(`VistaView: Element must have href, src, or srcSet`);let i=r?D(r):void 0,a=E(e);return{config:{src:n,alt:e.dataset.vistaviewAlt||e.getAttribute(`alt`)||t?.getAttribute(`alt`)||``,srcSet:r||void 0},parsedSrcSet:i?.length?i:void 0,origin:{anchor:e instanceof HTMLAnchorElement?e:void 0,image:t,src:n,srcSet:r,borderRadius:a.borderRadius,objectFit:a.objectFit}}}var k=class{pointers=[];elm;listeners=[];lastPointerDownId=null;constructor({elm:e,listeners:t}){this.elm=e??document,t&&(this.listeners=t),this.startListeners()}removeLastPointer=()=>{if(this.pointers.length&&this.lastPointerDownId!==null){let e=this.pointers.findIndex(e=>e.id===this.lastPointerDownId);e!==-1&&this.pointers.splice(e,1)}};onPointerDown=e=>{if(!this.listeners.length||e.button!==0)return;e.preventDefault(),this.lastPointerDownId=e.pointerId,window.addEventListener(`contextmenu`,this.removeLastPointer,{once:!0}),window.addEventListener(`auxclick`,this.removeLastPointer,{once:!0});let t={x:e.clientX,y:e.clientY,movementX:0,movementY:0,id:e.pointerId};this.pointers.push(t),this.listeners.forEach(e=>e({event:`down`,pointer:t,pointers:this.pointers,lastPointerLen:this.pointers.length-1}))};onPointerMove=e=>{if(!this.listeners.length)return;e.preventDefault();let t=this.pointers.find(t=>t.id===e.pointerId);t&&(t.movementX=e.movementX,t.movementY=e.movementY,t.x=e.clientX,t.y=e.clientY,this.listeners.forEach(e=>e({event:`move`,pointer:t,pointers:this.pointers,lastPointerLen:this.pointers.length-1})))};onPointerUp=e=>{if(!this.listeners.length||e.button!==0||(window.removeEventListener(`contextmenu`,this.removeLastPointer),window.removeEventListener(`auxclick`,this.removeLastPointer),e.target instanceof Node&&!this.elm.contains(e.target)&&e.target!==document.querySelector(`html`)&&e.target!==document))return;e.preventDefault();let t=this.pointers.findIndex(t=>t.id===e.pointerId);if(t===-1)return;let n=this.pointers[t];n.x=e.clientX,n.y=e.clientY;let r=this.pointers.length;this.pointers.splice(t,1),this.listeners.forEach(e=>e({event:`up`,pointer:n,pointers:this.pointers,lastPointerLen:r}))};onPointerCancel=e=>{if(!this.listeners.length||e.target instanceof Node&&!this.elm.contains(e.target)&&e.target!==document.querySelector(`html`)&&e.target!==document)return;e.preventDefault();let t=this.pointers.findIndex(t=>t.id===e.pointerId);if(t===-1)return;let n=this.pointers[t];n.x=e.clientX,n.y=e.clientY;let r=this.pointers.length;this.pointers.splice(t,1),this.listeners.forEach(e=>e({event:`cancel`,pointer:n,pointers:this.pointers,lastPointerLen:r}))};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(e){this.listeners.push(e)}removeEventListener(e){this.listeners=this.listeners.filter(t=>t!==e)}getPointerDistance(e,t){let n=e.x-t.x,r=e.y-t.y;return Math.sqrt(n*n+r*r)}getCentroid(){if(this.pointers.length===0)return null;let e=this.pointers.reduce((e,t)=>(e.x+=t.x,e.y+=t.y,e),{x:0,y:0});return{x:e.x/this.pointers.length,y:e.y/this.pointers.length}}},A=class{pointers=null;lastDistance=0;pinchMode=!1;lastPinchEndTime=0;PINCH_COOLDOWN=111;cancelMove=()=>{};pointerListeners=[];vvw;imageContainer=null;constructor(e){this.vvw=e}registerPointerListener(e){this.pointerListeners.push(e)}isPinching=()=>this.pinchMode||performance.now()-this.lastPinchEndTime<this.PINCH_COOLDOWN;internalPointerListener=e=>{let t=this.vvw.state.children.images.find(e=>e.pos===0);if(e.event===`down`){if(this.cancelMove(),this.vvw.state.zoomedIn&&e.pointers.length===1&&!this.isPinching()){let e=this.pointers.getCentroid();t.setInitialCenter(e)}if(e.pointers.length>=2){this.pinchMode=!0;let n=this.pointers.getCentroid();this.lastDistance=this.pointers.getPointerDistance(e.pointers[0],e.pointers[1]),t.setInitialCenter(n)}}else if(e.event===`move`){if(this.vvw.state.zoomedIn&&e.pointers.length===1&&e.lastPointerLen===0&&!this.isPinching()){let e=this.pointers.getCentroid();t.scaleMove(1,e)}if(e.pointers.length>=2&&this.pinchMode){let n=this.pointers.getCentroid(),r=this.pointers.getPointerDistance(e.pointers[0],e.pointers[1]);t.scaleMove(r/this.lastDistance,n)}}else if((e.event===`up`||e.event===`cancel`)&&(this.pinchMode||this.vvw.state.zoomedIn))if(this.pinchMode){this.lastPinchEndTime=performance.now(),this.pinchMode=!1;let e=t.setFinalTransform();e?.cancel&&(this.cancelMove=e.cancel),e?.close&&requestAnimationFrame(()=>{this.vvw.close()})}else this.vvw.state.zoomedIn&&e.pointers.length===0&&!this.isPinching()&&(t.isThrowing=!0,this.cancelMove=t.momentumThrow({x:e.pointer.movementX,y:e.pointer.movementY}));this.pointerListeners.forEach(t=>t({...e,state:this.vvw.state,hasInternalExecution:this.vvw.state.zoomedIn||this.isPinching(),abortController:this.vvw.state.abortController}))};onKeyDown=e=>{let t=this.vvw;switch(e.key){case`ArrowLeft`:e.preventDefault(),t.prev();break;case`ArrowRight`:e.preventDefault(),t.next();break;case`ArrowUp`:e.preventDefault(),t.zoomIn();break;case`ArrowDown`:e.preventDefault(),t.zoomOut();break;case`Escape`:e.preventDefault(),t.close();break}};onScroll=e=>{e.preventDefault();let t=this.vvw,n=this.vvw.state.children.images.find(e=>e.pos===0),r=e.deltaY;n.setInitialCenter({x:e.clientX,y:e.clientY}),r<0?t.zoomIn():r>0&&t.zoomOut()};onResizeHandler=()=>{this.vvw.state.children.images.forEach(e=>{e.setSizes()})};start(e){this.vvw.options.keyboardListeners&&window.addEventListener(`keydown`,this.onKeyDown),this.imageContainer=e,this.imageContainer.addEventListener(`wheel`,this.onScroll,{passive:!1}),window.addEventListener(`resize`,this.onResizeHandler),this.pointers=new k({elm:e,listeners:[this.internalPointerListener]})}stop(){this.vvw.options.keyboardListeners&&window.removeEventListener(`keydown`,this.onKeyDown),window.removeEventListener(`resize`,this.onResizeHandler),this.imageContainer.removeEventListener(`wheel`,this.onScroll),this.pointers.removeListeners(),this.pointerListeners=[]}};let j={somethingOpened:null};var M=class{options;state=new w;imageContainer=null;externalPointerListener=[];elements;eventHandlers=null;imageSetupFunction=f;initFunction=p;openFunction=h;closeFunction=g;transitionFunction=_;throttle=new C;root=null;onClickElements=e=>{e.preventDefault();let t=this.qsOrigin(this.elements),n=Array.prototype.indexOf.call(t,e.currentTarget);this.open(n)};defaultOnClickHandler=e=>e.preventDefault();constructor(e,n={}){this.elements=e,this.options={...t,...n,controls:{...t.controls,...n.controls}},this.options.imageSetupFunction&&(this.imageSetupFunction=this.options.imageSetupFunction),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.options.extensions?.forEach(e=>{this.state.extensions.add(e)}),this.state.isReducedMotion=window.matchMedia(`(prefers-reduced-motion: reduce)`).matches,this.reset(),this.initFunction(this)}reset(){if(typeof this.elements==`string`){let e=this.qsOrigin(this.elements);this.state.elmLength=e.length,e.forEach(e=>{let t=e;t.removeEventListener(`click`,this.defaultOnClickHandler),t.removeEventListener(`pointerup`,this.onClickElements),t.addEventListener(`click`,this.defaultOnClickHandler),t.addEventListener(`pointerup`,this.onClickElements)})}else this.state.elmLength=this.elements.length}qs(e){return this.root?this.root.querySelector(e):null}qsOrigin(e){return document.querySelectorAll(e)}registerPointerListener(e){this.externalPointerListener.push(e)}getChildElements(e,t){let n=[],r=[],i=typeof this.elements==`string`?this.qsOrigin(this.elements):this.elements;for(let a=-e;a<=e;a++){let e=(t+a+i.length)%i.length,o=i[e],s={elm:o instanceof HTMLElement?O(o):{config:o,origin:void 0,parsedSrcSet:void 0},pos:a,index:e,vistaView:this,maxZoomLevel:this.options.maxZoomLevel,transitionShouldWait:()=>this.isRapidSwap,onScale:({vistaImage:e,isMin:t,isMax:n})=>{e.index===this.state.currentIndex&&(this.state.zoomedIn=!t,t?this.qs(`.vvw-zoom-out`)?.setAttribute(`disabled`,`true`):this.qs(`.vvw-zoom-out`)?.removeAttribute(`disabled`),n?this.qs(`.vvw-zoom-in`)?.setAttribute(`disabled`,`true`):this.qs(`.vvw-zoom-in`)?.removeAttribute(`disabled`))}},c=null;this.state.extensions.forEach(e=>{!c&&e.onInitializeImage&&(c=e.onInitializeImage(s))});let l=c??new S(s),u=document.createElement(`div`);u.className=`vvw-item`,u.dataset.vvwPos=`${a}`,u.dataset.vvwIdx=`${e}`,l.thumb&&u.appendChild(l.thumb),u.appendChild(l.element),n.push(l),r.push(u)}return{htmls:r,images:n}}lastSwapTime=0;isRapidSwap=!1;isRapidSwapRelease=null;transitionCleanup=null;async swap(e,t){this.reactivateUi();let n=this.options.preloads||0,r=this.state.currentIndex,{htmls:i,images:a}=this.getChildElements(n,r),o=this.imageContainer,s=this.state.children,c={htmlElements:{from:s.htmls,to:i},images:{from:s.images,to:a},index:{from:e,to:this.state.currentIndex},via:t||{next:!1,prev:!1}};this.imageSetupFunction(c,this),this.state.zoomedIn=!1,this.qs(`.vvw-zoom-out`)?.setAttribute(`disabled`,`true`),this.qs(`.vvw-zoom-in`)?.removeAttribute(`disabled`);let l=performance.now()-this.lastSwapTime<this.options.rapidLimit;this.isRapidSwap=l;let{images:u}=this.state.children;if(this.state.children={htmls:i,images:a},this.displayCurrentInfo(),l)u.forEach(e=>{e.cancelPendingLoad(),e.destroy()});else{let e=this.state.abortController.signal,t=this.transitionFunction(c,e,this);t&&(this.transitionCleanup=t.cleanup,await t.transitionEnded),this.lastSwapTime=performance.now(),u.forEach(e=>{e.cancelPendingLoad()});let n=u.find(e=>e.index===r),i=n?y.stop(n):void 0,o=a.find(e=>e.index===r);o&&n&&o.cloneStyleFrom(n,i),u.forEach(e=>{e.destroy()})}o.innerHTML=``,this.transitionCleanup&&this.transitionCleanup(),i.forEach(e=>{o.appendChild(e)}),a.forEach(e=>{e.init()}),l?(this.isRapidSwapRelease&&clearTimeout(this.isRapidSwapRelease),this.isRapidSwapRelease=setTimeout(()=>{this.isRapidSwap=!1},333)):this.isRapidSwap=!1,this.options.onImageView&&this.options.onImageView(c,this),this.state.extensions.forEach(e=>{e.onImageView&&e.onImageView(c,this)})}displayCurrentInfo(){let e=this.state.currentIndex;typeof this.elements==`string`&&this.qsOrigin(this.elements).forEach((t,n)=>{t.style.opacity=``,n===e&&(t.style.opacity=`0`)});let t=this.qs(`.vvw-index`),n=`${e+1}`,r=`${this.state.elmLength}`;t&&(t.textContent=`${n} / ${r}`);let i=this.qs(`.vvw-desc`);if(i){let t=this.state.children.images.find(t=>t.index===e)?.config.alt||``;t?(i.textContent=t,i.setAttribute(`aria-label`,`Image ${n} of ${r}: ${t}`),i.style.opacity=``):(i.textContent=``,i.setAttribute(`aria-label`,`Image ${n} of ${r}`),i.style.opacity=`0`)}}tempDeactivatedUi=[];tempDeactivationRequestBy=null;deactivateUi(e,t){e.forEach(e=>{e===`zoomIn`?this.qs(`.vvw-zoom-in`)?.setAttribute(`disabled`,`true`):e===`zoomOut`&&this.qs(`.vvw-zoom-out`)?.setAttribute(`disabled`,`true`),this.tempDeactivatedUi.push(e)}),this.tempDeactivationRequestBy=t||null,this.state.extensions.forEach(t=>{t.onDeactivateUi&&t.onDeactivateUi(e,this.tempDeactivationRequestBy,this)})}reactivateUi(){this.tempDeactivatedUi.forEach(e=>{e===`zoomIn`?this.qs(`.vvw-zoom-in`)?.removeAttribute(`disabled`):e===`zoomOut`&&this.qs(`.vvw-zoom-out`)?.removeAttribute(`disabled`)}),this.state.extensions.forEach(e=>{e.onReactivateUi&&e.onReactivateUi(this.tempDeactivatedUi,this.tempDeactivationRequestBy,this)}),this.tempDeactivatedUi=[],this.tempDeactivationRequestBy=null}open(e=0){if(j.somethingOpened){console.warn(`Another VistaView instance is already opened. Close it first before opening a new one.`);return}j.somethingOpened=this,this.reset(),(e<0||e>=this.state.elmLength)&&(e=(e%this.state.elmLength+this.state.elmLength)%this.state.elmLength),this.state.currentIndex=e,document.body.style.overflow=`hidden`;let t=d({controls:this.options.controls,extensions:this.state.extensions});if(document.body.append(t),this.root=document.body.querySelector(`#vvw-root`),!this.root)throw 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`);let n=this.options.preloads||0,r=e,{images:i,htmls:a}=this.getChildElements(n,r),o={htmlElements:{from:null,to:a},images:{from:null,to:i},index:{from:null,to:this.state.currentIndex},via:{next:!1,prev:!1}};this.imageSetupFunction(o,this),this.state.children={htmls:a,images:i},a.forEach(e=>{this.imageContainer.appendChild(e)}),i.forEach(e=>{e.init()}),this.qs(`.vvw-close`)?.addEventListener(`click`,()=>this.close()),this.qs(`.vvw-zoom-in`)?.addEventListener(`click`,()=>this.zoomIn()),this.qs(`.vvw-zoom-out`)?.addEventListener(`click`,()=>this.zoomOut()),this.qs(`.vvw-prev>button`)?.addEventListener(`click`,()=>this.prev()),this.qs(`.vvw-next>button`)?.addEventListener(`click`,()=>this.next()),this.state.elmLength<2&&(this.qs(`.vvw-prev`)?.classList.add(`vvw--hidden`),this.qs(`.vvw-next`)?.classList.add(`vvw--hidden`)),this.openFunction(this),this.eventHandlers=new A(this),this.externalPointerListener.forEach(e=>{this.eventHandlers.registerPointerListener(e)}),this.eventHandlers.start(this.imageContainer),requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.root?.addEventListener(`transitionend`,()=>{this.root?.classList.add(`vvw--settled`)},{once:!0}),this.root.classList.add(`vvw--active`),this.displayCurrentInfo(),this.options.onOpen&&this.options.onOpen(this),this.options.onImageView&&this.options.onImageView(o,this),this.state.extensions.forEach(e=>{e.onOpen&&e.onOpen(this),e.onImageView&&e.onImageView(o,this)})})})}async close(e=!0){if(j.somethingOpened===this&&!(!this.root||!this.eventHandlers)){if(this.eventHandlers.stop(),this.eventHandlers=null,this.state.children.images.forEach(e=>{e.prepareClose()}),e){let e=this.options.animationDurationBase||333,t=setTimeout(()=>{typeof this.elements==`string`&&this.qsOrigin(this.elements).forEach(e=>{e.style.opacity=``})},e*2);await new Promise(n=>{let r=e=>{e.target!==this.root||e.propertyName!==`opacity`||(this.root.removeEventListener(`transitionend`,r),clearTimeout(t),n(null))};this.root.addEventListener(`transitionend`,r),this.root.classList.add(`vvw--closing`),setTimeout(n,e*3+100)})}typeof this.elements==`string`&&this.qsOrigin(this.elements).forEach(e=>{e.style.opacity=``}),this.root.remove(),this.root=null,this.imageContainer=null,this.state.children.images.forEach(e=>{e.destroy()}),this.state.children.htmls.forEach(e=>{e.remove()}),this.state.children={htmls:[],images:[]},this.state.currentIndex=-1,document.body.style.overflow=``,j.somethingOpened=null,this.closeFunction(this),this.options.onClose&&this.options.onClose(this),this.state.extensions.forEach(e=>{e.onClose&&e.onClose(this)})}}destroy(){this.close(!1),this.externalPointerListener=[],typeof this.elements==`string`&&this.qsOrigin(this.elements).forEach(e=>{e.removeAttribute(`data-vista-idx`),e.removeEventListener(`click`,this.defaultOnClickHandler),e.removeEventListener(`pointerup`,this.onClickElements)})}next(){if(j.somethingOpened!==this){console.warn(`This VistaView instance is not opened.`);return}let e=(this.state.currentIndex+1)%this.state.elmLength;this.view(e,{next:!0,prev:!1})}prev(){if(j.somethingOpened!==this){console.warn(`This VistaView instance is not opened.`);return}let e=(this.state.currentIndex-1+this.state.elmLength)%this.state.elmLength;this.view(e,{next:!1,prev:!0})}view(e,t){if(j.somethingOpened!==this){console.warn(`This VistaView instance is not opened.`);return}if(this.state.elmLength<2)return;(e<0||e>=this.state.elmLength)&&(e=(e%this.state.elmLength+this.state.elmLength)%this.state.elmLength);let n=this.state.currentIndex;this.state.currentIndex=e,this.state.abortController?.abort(),this.state.abortController=new AbortController,this.swap(n,t)}isZoomedIn=!1;zoomIn(){if(j.somethingOpened!==this){console.warn(`This VistaView instance is not opened.`);return}this.tempDeactivatedUi.includes(`zoomIn`)||this.throttle.fio(()=>{this.state.children.images.find(e=>e.pos===0)?.animateZoom(1.68)},`zoom`,222)}zoomOut(){if(j.somethingOpened!==this){console.warn(`This VistaView instance is not opened.`);return}this.tempDeactivatedUi.includes(`zoomOut`)||this.throttle.fio(()=>{this.state.children.images.find(e=>e.pos===0)?.animateZoom(.68)},`zoom`,222)}getCurrentIndex(){return this.state.currentIndex}};function N(e){let t=null;if(typeof e==`string`){if(t=document.querySelectorAll(e),t.length===0)return Error(`No elements found in node list.`);for(let e=0;e<t.length;e++){let n=t[e],r=n.tagName.toLowerCase();if(r!==`img`&&r!==`a`)return Error(`Invalid element at index ${e}: expected <img>, <a>, got <${r}>`);if(r===`a`&&n.querySelector(`img`)===null)return Error(`Invalid <a> element at index ${e}: must contain <img>`)}}else{let t=e;for(let e=0;e<t.length;e++)if(!t[e].src)return Error(`Invalid image data at index ${e}: must have 'src'`)}return e}function P({elements:e,...t}){if(!e)return console.error(e),console.error(`no elements provided`),console.warn(`VistaView: silently returning.`),null;let n=N(e);if(n instanceof Error)return console.error(n),console.warn(`VistaView: silently returning.`),null;let r=new M(n,t);return{open:(e=0)=>r.open(e),reset:()=>r.reset(),close:()=>r.close(),next:()=>r.next(),prev:()=>r.prev(),zoomIn:()=>r.zoomIn(),zoomOut:()=>r.zoomOut(),destroy:()=>r.destroy(),getCurrentIndex:()=>r.getCurrentIndex(),view:e=>{r.view(e)}}}e.DefaultOptions=t,e.VistaBox=x,e.VistaHiresTransition=y,e.VistaImage=S,e.VistaImageEvent=A,e.VistaPointers=k,e.VistaState=w,e.VistaView=M,e.close=g,e.imageSetup=f,e.init=p,e.open=h,e.transition=_,e.vistaView=P});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vistaview",
3
- "version": "2.0.4",
3
+ "version": "2.0.5",
4
4
  "description": "A lightweight, zero-dependency image lightbox library with smooth animations and touch support",
5
5
  "keywords": [
6
6
  "image",