vistaview 0.0.1

package/README.md

@@ -0,0 +1,182 @@
+# VistaView
+
+A lightweight, modern image lightbox library for the web. Zero dependencies, framework-agnostic, and highly customizable.
+
+## Features
+
+- 🪶 **Lightweight** — Minimal footprint, no external dependencies
+- 📱 **Mobile-first** — Touch gestures, smooth animations, responsive design
+- 🎨 **Customizable** — Configurable controls, animations, and styling
+- ♿ **Accessible** — Keyboard navigation, reduced motion support
+- 🔧 **Framework-agnostic** — Works with vanilla JS, React, Vue, or any framework
+- 🖼️ **Progressive loading** — Low-res thumbnails → high-res images with smooth transitions
+- 🔍 **Zoom support** — Zoom in/out with buttons, respects actual image resolution
+
+## Installation
+
+```bash
+npm install vistaview
+```
+
+## Quick Start
+
+### Using anchor elements (recommended)
+
+```html
+<div id="gallery">
+  <a href="/images/photo1-full.jpg" data-vistaview-width="1920" data-vistaview-height="1080">
+    <img src="/images/photo1-thumb.jpg" alt="Photo 1" />
+  </a>
+  <a href="/images/photo2-full.jpg" data-vistaview-width="1280" data-vistaview-height="720">
+    <img src="/images/photo2-thumb.jpg" alt="Photo 2" />
+  </a>
+</div>
+
+<script type="module">
+  import { vistaView } from 'vistaview';
+  import 'vistaview/style.css';
+
+  vistaView({
+    parent: document.getElementById('gallery'),
+  });
+</script>
+```
+
+### Using data attributes on images
+
+```html
+<div id="gallery">
+  <img
+    src="/images/thumb1.jpg"
+    data-vistaview-src="/images/full1.jpg"
+    data-vistaview-width="1920"
+    data-vistaview-height="1080"
+    alt="Photo 1"
+  />
+</div>
+```
+
+### Using a CSS selector
+
+```js
+vistaView({
+  elements: '#gallery img',
+});
+```
+
+### Using a NodeList
+
+```js
+vistaView({
+  elements: document.querySelectorAll('.gallery-image'),
+});
+```
+
+### Using an array of images
+
+```js
+vistaView({
+  elements: [
+    { src: '/images/photo1.jpg', width: 1920, height: 1080, alt: 'Photo 1' },
+    { src: '/images/photo2.jpg', width: 1280, height: 720, alt: 'Photo 2' },
+  ],
+});
+```
+
+## Options
+
+```ts
+vistaView({
+  // Required: specify either parent OR elements
+  parent: HTMLElement, // Container element with images/anchors
+  elements: string | NodeList | VistaViewImage[], // Selector, NodeList, or array of images
+
+  // Optional configuration
+  animationDurationBase: 333, // Base animation duration in ms (default: 333)
+  initialZIndex: 1, // Starting z-index for the lightbox (default: 1)
+  detectReducedMotion: true, // Respect prefers-reduced-motion (default: true)
+  zoomStep: 500, // Pixels to zoom per step (default: 500)
+  maxZoomLevel: 2, // Maximum zoom multiplier (default: 2)
+  touchSpeedThreshold: 1, // Swipe speed threshold for navigation (default: 1)
+
+  // Control placement (defaults shown)
+  controls: {
+    topLeft: ['indexDisplay'],
+    topRight: ['zoomIn', 'zoomOut', getDownloadButton(), 'close'],
+    topCenter: [],
+    bottomLeft: [],
+    bottomCenter: ['description'],
+    bottomRight: [],
+  },
+});
+```
+
+## Default Controls
+
+| Control               | Description                               |
+| --------------------- | ----------------------------------------- |
+| `indexDisplay`        | Shows current image index (e.g., "1 / 5") |
+| `zoomIn`              | Zoom into the image                       |
+| `zoomOut`             | Zoom out of the image                     |
+| `getDownloadButton()` | Download the current image                |
+| `close`               | Close the lightbox                        |
+| `description`         | Shows the image alt text                  |
+
+## Custom Controls
+
+Controls are merged with defaults—only the positions you specify are replaced. Provide an object with `name`, `icon`, and `onClick`:
+
+```js
+import { vistaView, getDownloadButton } from 'vistaview';
+
+vistaView({
+  parent: document.getElementById('gallery'),
+  controls: {
+    topRight: [
+      'zoomIn',
+      'zoomOut',
+      getDownloadButton(), // Example: Built-in download helper
+      {
+        name: 'share',
+        icon: '<svg>...</svg>',
+        onClick: (image) => {
+          navigator.share({ url: image.src });
+        },
+      },
+      'close',
+    ],
+  },
+});
+```
+
+## Styling
+
+VistaView uses CSS custom properties for easy theming:
+
+```css
+:root {
+  --vistaview-bg-color: #000000;
+  --vistaview-text-color: #ffffff;
+  --vistaview-background-blur: 10px;
+  --vistaview-background-opacity: 0.8;
+  --vistaview-animation-duration: 333;
+}
+```
+
+## Data Attributes
+
+| Attribute                 | Description                                |
+| ------------------------- | ------------------------------------------ |
+| `data-vistaview-src`      | Full-size image URL (for `<img>` elements) |
+| `data-vistaview-width`    | Full-size image width in pixels            |
+| `data-vistaview-height`   | Full-size image height in pixels           |
+| `data-vistaview-alt`      | Alt text for the image                     |
+| `data-vistaview-smallsrc` | Thumbnail URL (optional)                   |
+
+## Browser Support
+
+VistaView works in all modern browsers (Chrome, Firefox, Safari, Edge).
+
+## License
+
+MIT

package/dist/lib/components.d.ts

@@ -0,0 +1,4 @@
+import { VistaViewCustomControl, VistaViewImage, VistaViewOptions } from './vista-view';
+export declare function getDownloadButton(): VistaViewCustomControl;
+export declare function vistaViewComponent(elements: VistaViewImage[], controls: VistaViewOptions['controls']): string;
+//# sourceMappingURL=components.d.ts.map

package/dist/lib/components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/lib/components.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,sBAAsB,EACtB,cAAc,EACd,gBAAgB,EACjB,MAAM,cAAc,CAAC;AAUtB,wBAAgB,iBAAiB,IAAI,sBAAsB,CAa1D;AAsBD,wBAAgB,kBAAkB,CAChC,QAAQ,EAAE,cAAc,EAAE,EAC1B,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,GACrC,MAAM,CAyBR"}

package/dist/lib/utils.d.ts

@@ -0,0 +1,20 @@
+import { VistaViewElm } from './vista-view';
+export declare function getElmProperties(elm: HTMLElement): VistaViewElm;
+export declare function createTrustedHtml(htmlString: string): DocumentFragment;
+export declare function isNotZeroCssValue(value?: string): false | string | undefined;
+export declare function getRenderedSize(image: HTMLImageElement): {
+    width: number;
+    height: number;
+};
+export declare function getFittedSize(img: HTMLImageElement): {
+    width: number;
+    height: number;
+};
+export declare function makeFullScreenContain(img: HTMLImageElement, setDataAttribute?: boolean): void;
+export declare function getMaxMinZoomLevels(currentWidth: number, currentHeight: number): {
+    maxDiffX: number;
+    minDiffY: number;
+    maxDiffY: number;
+    minDiffX: number;
+};
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,WAAW,GAAG,YAAY,CAQ/D;AAyBD,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,GAAG,gBAAgB,CAQtE;AAED,wBAAgB,iBAAiB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAI5E;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAM1F;AAED,wBAAgB,aAAa,CAAC,GAAG,EAAE,gBAAgB,GAAG;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CA8DA;AAED,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,gBAAgB,EAAE,gBAAgB,GAAE,OAAe,QAwC7F;AAED,wBAAgB,mBAAmB,CACjC,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,GACpB;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAgBA"}

package/dist/lib/vista-view.d.ts

@@ -0,0 +1,85 @@
+export type VistaViewElm = {
+    objectFit?: string;
+    borderRadius?: string;
+    objectPosition?: string;
+    overflow?: string;
+};
+export type VistaViewImage = {
+    src: string;
+    width: number;
+    height: number;
+    alt?: string;
+    smallSrc?: string;
+    anchor?: HTMLAnchorElement;
+    image?: HTMLImageElement;
+    onClick?: (e: Event) => void;
+};
+export type VistaViewOptions = {
+    animationDurationBase?: number;
+    initialZIndex?: number;
+    detectReducedMotion?: boolean;
+    zoomStep?: number;
+    maxZoomLevel?: number;
+    touchSpeedThreshold?: number;
+    controls?: {
+        topLeft?: (VistaViewDefaultControls | VistaViewCustomControl)[];
+        topRight?: (VistaViewDefaultControls | VistaViewCustomControl)[];
+        topCenter?: (VistaViewDefaultControls | VistaViewCustomControl)[];
+        bottomCenter?: (VistaViewDefaultControls | VistaViewCustomControl)[];
+        bottomLeft?: (VistaViewDefaultControls | VistaViewCustomControl)[];
+        bottomRight?: (VistaViewDefaultControls | VistaViewCustomControl)[];
+    };
+};
+export type VistaViewDefaultControls = 'indexDisplay' | 'zoomIn' | 'zoomOut' | 'download' | 'close' | 'description';
+export type VistaViewCustomControl = {
+    name: string;
+    icon: string;
+    onClick: (v: VistaViewImage) => void;
+};
+export declare const DefaultOptions: {
+    detectReducedMotion: boolean;
+    zoomStep: number;
+    maxZoomLevel: number;
+    touchSpeedThreshold: number;
+    controls: VistaViewOptions["controls"];
+};
+export declare class VistaView {
+    private options;
+    private elements;
+    private currentIndex;
+    private currentDescription;
+    private rootElement;
+    private containerElement;
+    private indexDisplayElement;
+    private descriptionElement;
+    private isActive;
+    private isZoomed;
+    private isReducedMotion;
+    private setInitialProperties;
+    private setFullScreenContain;
+    private onZoomedPointerDown;
+    private onZoomedPointerMove;
+    private onZoomedPointerUp;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    constructor(elements: VistaViewImage[], options?: VistaViewOptions);
+    private setZoomed;
+    private setIndexDisplay;
+    private setCurrentDescription;
+    private getAnimationDurationBase;
+    private zoomIn;
+    private zoomOut;
+    private clearZoom;
+    private resetImageOpacity;
+    private setTouchActions;
+    private removeTouchActions;
+    open(index?: number): void;
+    close(animate?: boolean): Promise<void>;
+    destroy(): void;
+    view(index: number): void;
+    next(): void;
+    prev(): void;
+    getCurrentIndex(): number;
+}
+//# sourceMappingURL=vista-view.d.ts.map

package/dist/lib/vista-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vista-view.d.ts","sourceRoot":"","sources":["../../src/lib/vista-view.ts"],"names":[],"mappings":"AAUA,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,EAAE;QACT,OAAO,CAAC,EAAE,CAAC,wBAAwB,GAAG,sBAAsB,CAAC,EAAE,CAAC;QAChE,QAAQ,CAAC,EAAE,CAAC,wBAAwB,GAAG,sBAAsB,CAAC,EAAE,CAAC;QACjE,SAAS,CAAC,EAAE,CAAC,wBAAwB,GAAG,sBAAsB,CAAC,EAAE,CAAC;QAClE,YAAY,CAAC,EAAE,CAAC,wBAAwB,GAAG,sBAAsB,CAAC,EAAE,CAAC;QACrE,UAAU,CAAC,EAAE,CAAC,wBAAwB,GAAG,sBAAsB,CAAC,EAAE,CAAC;QACnE,WAAW,CAAC,EAAE,CAAC,wBAAwB,GAAG,sBAAsB,CAAC,EAAE,CAAC;KACrE,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAChC,cAAc,GACd,QAAQ,GACR,SAAS,GACT,UAAU,GACV,OAAO,GACP,aAAa,CAAC;AAClB,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CACtC,CAAC;AAMF,eAAO,MAAM,cAAc;;;;;cAWpB,gBAAgB,CAAC,UAAU,CAAC;CAClC,CAAC;AAEF,qBAAa,SAAS;IACpB,OAAO,CAAC,OAAO,CAAmB;IAClC,OAAO,CAAC,QAAQ,CAAmB;IAEnC,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,kBAAkB,CAAc;IAExC,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,gBAAgB,CAA4B;IACpD,OAAO,CAAC,mBAAmB,CAA4B;IACvD,OAAO,CAAC,kBAAkB,CAA4B;IACtD,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,QAAQ,CAA2B;IAE3C,OAAO,CAAC,eAAe,CAAU;IAEjC,OAAO,CAAC,oBAAoB,CAA6B;IACzD,OAAO,CAAC,oBAAoB,CAA6B;IACzD,OAAO,CAAC,mBAAmB,CAA4C;IACvE,OAAO,CAAC,mBAAmB,CAA4C;IACvE,OAAO,CAAC,iBAAiB,CAA4C;IAErE,OAAO,CAAC,aAAa,CAA4C;IACjE,OAAO,CAAC,aAAa,CAA4C;IACjE,OAAO,CAAC,WAAW,CAA4C;gBAEnD,QAAQ,EAAE,cAAc,EAAE,EAAE,OAAO,CAAC,EAAE,gBAAgB;IA8BlE,OAAO,CAAC,SAAS;IAoHjB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,qBAAqB;IAS7B,OAAO,CAAC,wBAAwB;IAKhC,OAAO,CAAC,MAAM;IAwCd,OAAO,CAAC,OAAO;IA0Df,OAAO,CAAC,SAAS;IAwBjB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,eAAe;IA2FvB,OAAO,CAAC,kBAAkB;IAS1B,IAAI,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI;IAiOpB,KAAK,CAAC,OAAO,UAAO,GAAG,OAAO,CAAC,IAAI,CAAC;IA8B1C,OAAO,IAAI,IAAI;IAWf,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAczB,IAAI,IAAI,IAAI;IAKZ,IAAI,IAAI,IAAI;IAKZ,eAAe,IAAI,MAAM;CAG1B"}

package/dist/types.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/dist/vistaview.css

@@ -0,0 +1,2 @@
+:root{--vistaview-bg-color:#000;--vistaview-text-color:#fff;--vistaview-background-blur:10px;--vistaview-background-opacity:.8;--vistaview-initial-z-index:1;--vistaview-destination-z-index:2147480000;--vistaview-animation-duration:333;--vistaview-center-x:50%;--vistaview-center-y:50%;--vistaview-container-initial-width:0;--vistaview-container-initial-height:0;--vistaview-container-initial-top:0;--vistaview-container-initial-left:0;--vistaview-image-border-radius:0px;--vistaview-current-index:0;--vistaview-number-elements:0}@keyframes vistaview-pos-in{0%{top:var(--vistaview-container-initial-top);left:var(--vistaview-container-initial-left)}to{top:var(--vistaview-center-y);left:var(--vistaview-center-x)}}@keyframes vistaview-pos-out{0%{top:var(--vistaview-center-y);left:var(--vistaview-center-x)}to{top:var(--vistaview-container-initial-top);left:var(--vistaview-container-initial-left)}}@keyframes vistaview-anim-in{0%{width:var(--vistaview-container-initial-width);height:var(--vistaview-container-initial-height);background:rgb(from var(--vistaview-bg-color)r g b/0);-webkit-backdrop-filter:blur();backdrop-filter:blur();border-radius:var(--vistaview-image-border-radius);z-index:var(--vistaview-initial-z-index)}50%{width:var(--vistaview-container-initial-width);height:var(--vistaview-container-initial-height);background:rgb(from var(--vistaview-bg-color)r g b/0);-webkit-backdrop-filter:blur();backdrop-filter:blur();z-index:var(--vistaview-initial-z-index);border-radius:0}to{z-index:var(--vistaview-destination-z-index);background:rgb(from var(--vistaview-bg-color)r g b/var(--vistaview-background-opacity));width:100%;height:100%;-webkit-backdrop-filter:blur(var(--vistaview-background-blur));backdrop-filter:blur(var(--vistaview-background-blur))}}@keyframes vistaview-anim-out{0%{z-index:var(--vistaview-destination-z-index);background:rgb(from var(--vistaview-bg-color)r g b/var(--vistaview-background-opacity));width:100%;height:100%;-webkit-backdrop-filter:blur(var(--vistaview-background-blur));backdrop-filter:blur(var(--vistaview-background-blur))}50%{width:var(--vistaview-container-initial-width);height:var(--vistaview-container-initial-height);background:rgb(from var(--vistaview-bg-color)r g b/0);-webkit-backdrop-filter:blur();backdrop-filter:blur();border-radius:var(--vistaview-image-border-radius);z-index:var(--vistaview-initial-z-index)}to{width:var(--vistaview-container-initial-width);height:var(--vistaview-container-initial-height);background:rgb(from var(--vistaview-bg-color)r g b/0);-webkit-backdrop-filter:blur();backdrop-filter:blur();border-radius:var(--vistaview-image-border-radius);z-index:var(--vistaview-initial-z-index)}}@keyframes vistaview-ui-anim-in{0%{opacity:0}50%{opacity:0}to{opacity:1}}@keyframes vistaview-ui-anim-out{0%{opacity:1}50%{opacity:1}to{opacity:0}}@keyframes vistaview-pulse{0%{opacity:1;border-radius:3px;scale:1}50%{opacity:.8;border-radius:7px;scale:.99}to{opacity:1;border-radius:3px;scale:1}}.vistaview-root{margin:0;padding:0}.vistaview-root .vistaview-ui{opacity:0}.vistaview-root .vistaview-container{width:100%;height:100%;position:relative}.vistaview-root .vistaview-container button{color:var(--vistaview-text-color);font:inherit;cursor:pointer;outline:inherit;box-sizing:border-box;background:0 0;background-color:var(--vistaview-bg-color);border:none;border-radius:0;justify-content:center;align-items:center;margin:0;padding:8px;display:flex}.vistaview-root .vistaview-container button:disabled{color:rgb(from var(--vistaview-text-color)r g b/.5);cursor:not-allowed}.vistaview-root .vistaview-container button:hover{background-color:hsl(from var(--vistaview-bg-color)h s calc(l + 20))}.vistaview-root .vistaview-container button:active{background-color:hsl(from var(--vistaview-bg-color)h s calc(l + 40))}.vistaview-root .vistaview-container button svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:24px;height:24px}.vistaview-root .vistaview-container .vistaview-image-container{--vistaview-pointer-diff-x:0px;--vistaview-pointer-diff-y:0px;width:calc(var(--vistaview-number-elements)*100%);z-index:1;height:100%;top:0;left:calc(calc(var(--vistaview-current-index)*-100%) + var(--vistaview-pointer-diff-x));transition:left .3s;position:absolute;overflow-x:hidden}.vistaview-root .vistaview-container .vistaview-image-container.vistaview-image-container--pointer-down{transition:none}.vistaview-root .vistaview-container .vistaview-image-container{gap:0;display:flex}.vistaview-root .vistaview-container .vistaview-image-container .vistaview-item{width:calc(100/var(--vistaview-number-elements)*1%);flex-shrink:0;max-width:100%;height:100vh;max-height:100%;position:relative;overflow:hidden}.vistaview-root .vistaview-container .vistaview-image-container .vistaview-item img.vistaview-image-lowres{max-width:100%;max-height:100%;animation:1s ease-in-out infinite vistaview-pulse;display:block;position:absolute;top:50%;left:50%;translate:-50% -50%}.vistaview-root .vistaview-container .vistaview-image-container .vistaview-item img.vistaview-image-lowres:has(+img.vistaview-image-loaded){animation:none}.vistaview-root .vistaview-container .vistaview-image-container .vistaview-item img.vistaview-image-lowres.vistaview-image--hidden{opacity:0}.vistaview-root .vistaview-container .vistaview-image-container .vistaview-item img.vistaview-image-highres{--pointer-diff-x:0px;--pointer-diff-y:0px;top:calc(50% + var(--pointer-diff-y));left:calc(50% + var(--pointer-diff-x));object-fit:cover;opacity:0;transition:width calc(var(--vistaview-animation-duration)*1ms)ease calc(var(--vistaview-animation-duration)*.3ms),height calc(var(--vistaview-animation-duration)*1ms)ease calc(var(--vistaview-animation-duration)*.3ms),opacity calc(var(--vistaview-animation-duration)*.5ms)ease 0s;max-width:100%;max-height:100%;display:block;position:absolute;translate:-50% -50%}.vistaview-root .vistaview-container .vistaview-image-container .vistaview-item img.vistaview-image-highres.vistaview-image--zooming{transition:width calc(var(--vistaview-animation-duration)*1ms)ease 0s,height calc(var(--vistaview-animation-duration)*1ms)ease 0s,opacity calc(var(--vistaview-animation-duration)*1ms)ease 0s;max-width:unset;max-height:unset;cursor:grab}.vistaview-root .vistaview-container .vistaview-image-container .vistaview-item img.vistaview-image-highres.vistaview-image--zooming:active{cursor:grabbing}.vistaview-root .vistaview-container .vistaview-image-container .vistaview-item img.vistaview-image-highres.vistaview-image--zooming-out{transition:width calc(var(--vistaview-animation-duration)*1ms)ease 0s,height calc(var(--vistaview-animation-duration)*1ms)ease 0s,opacity calc(var(--vistaview-animation-duration)*1ms)ease 0s,top .3s ease 0s,left .3s ease 0s}.vistaview-root .vistaview-container .vistaview-image-container .vistaview-item img.vistaview-image-highres.vistaview-image-loaded{opacity:1}.vistaview-root .vistaview-container .vistaview-prev-btn{z-index:2;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:0;translate:0 -50%}.vistaview-root .vistaview-container .vistaview-next-btn{z-index:2;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;right:0;translate:0 -50%}.vistaview-root .vistaview-container .vistaview-top-bar,.vistaview-root .vistaview-container .vistaview-bottom-bar{z-index:2;justify-content:space-between;align-items:center;width:100%;display:flex;position:absolute;top:0;right:0}:is(.vistaview-root .vistaview-container .vistaview-top-bar,.vistaview-root .vistaview-container .vistaview-bottom-bar)>div{display:flex}:is(.vistaview-root .vistaview-container .vistaview-top-bar,.vistaview-root .vistaview-container .vistaview-bottom-bar) .vistaview-index-display{background-color:var(--vistaview-bg-color);color:var(--vistaview-text-color);padding:8px;font-size:16px}:is(.vistaview-root .vistaview-container .vistaview-top-bar,.vistaview-root .vistaview-container .vistaview-bottom-bar) .vistaview-image-description{background-color:var(--vistaview-bg-color);color:var(--vistaview-text-color);text-overflow:ellipsis;white-space:nowrap;max-width:100%;padding:8px 15px;font-size:14px;overflow:hidden}.vistaview-root .vistaview-container .vistaview-bottom-bar{bottom:0;top:unset}.vistaview-root{isolation:isolate;display:none;position:fixed;overflow:hidden;translate:-50% -50%}.vistaview-root.vistaview--initialized{animation:vistaview-anim-in calc(var(--vistaview-animation-duration)*1ms)ease-out forwards,vistaview-pos-in calc(var(--vistaview-animation-duration)*.6ms)ease-in forwards;display:block}.vistaview-root.vistaview--initialized .vistaview-ui{animation:vistaview-ui-anim-in calc(var(--vistaview-animation-duration)*1ms)ease-out calc(var(--vistaview-animation-duration)*1ms)forwards}.vistaview-root.vistaview--closing{animation:vistaview-pos-out calc(var(--vistaview-animation-duration)*.8ms)cubic-bezier(.7,-.4,.8,.6)forwards,vistaview-anim-out calc(var(--vistaview-animation-duration)*1ms)ease-out forwards}.vistaview-root.vistaview--closing .vistaview-ui{display:none}.vistaview-root.vistaview--closing .vistaview-container .vistaview-image-container .vistaview-item img.vistaview-image-lowres{border-radius:var(--vistaview-image-border-radius)}.vistaview-root.vistaview--closing .vistaview-container .vistaview-image-container .vistaview-item img.vistaview-image-lowres.vistaview-image--hidden{opacity:1}.vistaview-root.vistaview--closing .vistaview-container .vistaview-image-container .vistaview-item img.vistaview-image-highres{transition:width calc(var(--vistaview-animation-duration)*.5ms)ease 0s,height calc(var(--vistaview-animation-duration)*.5ms)ease 0s,opacity calc(var(--vistaview-animation-duration)*.5ms)ease calc(var(--vistaview-animation-duration)*.5ms);width:var(--vistaview-fitted-width)!important;height:var(--vistaview-fitted-height)!important}.vistaview-root.vistaview--closing .vistaview-container .vistaview-image-container .vistaview-item img.vistaview-image-highres.vistaview-image-loaded{opacity:0}@media (prefers-reduced-motion:reduce){.vistaview--reduced-motion,.vistaview--reduced-motion *{animation-duration:0s;transition-duration:0s!important;animation-name:none!important}}
+/*$vite$:1*/

package/dist/vistaview.d.ts

@@ -0,0 +1,19 @@
+import { DefaultOptions, VistaViewImage, VistaViewElm, VistaViewOptions as VistaViewOptionsBase } from './lib/vista-view';
+import { getDownloadButton } from './lib/components';
+export type { VistaViewImage, VistaViewElm, VistaViewOptionsBase };
+export { DefaultOptions, getDownloadButton };
+export type VistaViewOptions = {
+    parent?: HTMLElement;
+    elements?: string | NodeListOf<HTMLElement> | VistaViewImage[];
+} & VistaViewOptionsBase;
+export type VistaViewInterface = {
+    open: (startIndex?: number) => void;
+    close: () => void;
+    next: () => void;
+    prev: () => void;
+    destroy: () => void;
+    getCurrentIndex: () => number;
+    view: (index: number) => void;
+};
+export declare function vistaView({ parent, elements, ...opts }: VistaViewOptions): VistaViewInterface;
+//# sourceMappingURL=vistaview.d.ts.map

package/dist/vistaview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vistaview.d.ts","sourceRoot":"","sources":["../src/vistaview.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,KAAK,EACV,cAAc,EACd,YAAY,EACZ,gBAAgB,IAAI,oBAAoB,EACzC,MAAM,kBAAkB,CAAC;AAC1B,OAAO,aAAa,CAAC;AAErB,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,oBAAoB,EAAE,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC,WAAW,CAAC,GAAG,cAAc,EAAE,CAAC;CAChE,GAAG,oBAAoB,CAAC;AAEzB,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,eAAe,EAAE,MAAM,MAAM,CAAC;IAC9B,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/B,CAAC;AAiBF,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,GAAG,kBAAkB,CAmC7F"}

package/dist/vistaview.js

@@ -0,0 +1,433 @@
+var chevronLeft = "<svg viewBox=\"0 0 24 24\"><path d=\"m15 18-6-6 6-6\"/></svg>", chevronRight = "<svg viewBox=\"0 0 24 24\"><path d=\"m9 18 6-6-6-6\"/></svg>", zoomInIcon = "<svg viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" x2=\"16.65\" y1=\"21\" y2=\"16.65\"/><line x1=\"11\" x2=\"11\" y1=\"8\" y2=\"14\"/><line x1=\"8\" x2=\"14\" y1=\"11\" y2=\"11\"/></svg>", zoomOutIcon = "<svg viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><line x1=\"21\" x2=\"16.65\" y1=\"21\" y2=\"16.65\"/><line x1=\"8\" x2=\"14\" y1=\"11\" y2=\"11\"/></svg>", downloadIcon = "<svg viewBox=\"0 0 24 24\"><path d=\"M12 15V3\"/><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"/><path d=\"m7 10 5 5 5-5\"/></svg>", closeIcon = "<svg viewBox=\"0 0 24 24\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg>";
+function getDownloadButton() {
+	return {
+		name: "download",
+		icon: downloadIcon,
+		onClick: (e) => {
+			let c = document.createElement("a");
+			c.href = e.src, c.download = e.src.split("/").pop() || "download", document.body.appendChild(c), c.click(), document.body.removeChild(c);
+		}
+	};
+}
+function convertControlToHtml(e) {
+	if (typeof e == "string") switch (e) {
+		case "zoomIn": return `<button class="vistaview-zoom-in-button">${zoomInIcon}</button>`;
+		case "zoomOut": return `<button disabled class="vistaview-zoom-out-button">${zoomOutIcon}</button>`;
+		case "close": return `<button class="vistaview-close-button">${closeIcon}</button>`;
+		case "indexDisplay": return "<div class=\"vistaview-index-display\"></div>";
+		case "description": return "<div class=\"vistaview-image-description\"></div>";
+		default: return "";
+	}
+	return `<button data-vistaview-custom-control="${e.name}">${e.icon}</button>`;
+}
+function vistaViewComponent(l, u) {
+	let d = (e) => e ? e.map(convertControlToHtml).join("") : "";
+	return `<div class="vistaview-root" id="vistaview-root">
+<div class="vistaview-container">
+<div class="vistaview-image-container">
+${l.map((e) => {
+		let c = e.image ? getComputedStyle(e.image).objectFit : "", l = e.image?.width, u = e.image?.height;
+		return `<div class="vistaview-item">
+<img class="vistaview-image-lowres"${c ? ` style="object-fit:${c}"` : ""} src="${e.smallSrc || e.src}" alt="${e.alt || ""}" width="${l}" height="${u}">
+<img class="vistaview-image-highres" loading="lazy" style="width:${l}px;height:${u}px" src="${e.src}" alt="${e.alt || ""}" width="${e.width}" height="${e.height}">
+</div>`;
+	}).join("")}
+</div>
+<div class="vistaview-top-bar vistaview-ui"><div>${d(u?.topLeft)}</div><div>${d(u?.topCenter)}</div><div>${d(u?.topRight)}</div></div>
+<div class="vistaview-bottom-bar vistaview-ui"><div>${d(u?.bottomLeft)}</div><div>${d(u?.bottomCenter)}</div><div>${d(u?.bottomRight)}</div></div>
+<div class="vistaview-prev-btn vistaview-ui"><button>${chevronLeft}</button></div>
+<div class="vistaview-next-btn vistaview-ui"><button>${chevronRight}</button></div>
+</div>
+</div>`;
+}
+function getElmProperties(e) {
+	let c = getComputedStyle(e);
+	return {
+		objectFit: c.objectFit,
+		borderRadius: c.borderRadius,
+		objectPosition: c.objectPosition,
+		overflow: c.overflow
+	};
+}
+var cachedPolicy = null;
+function getPolicy() {
+	return cachedPolicy || (window.trustedTypes || (window.trustedTypes = { createPolicy: (e, c) => c }), cachedPolicy = window.trustedTypes.createPolicy("vistaView-policy", {
+		createHTML: (e) => e,
+		createScript: () => {
+			throw Error("Not implemented");
+		},
+		createScriptURL: () => {
+			throw Error("Not implemented");
+		}
+	}), cachedPolicy);
+}
+function createTrustedHtml(e) {
+	let c = getPolicy().createHTML(e), l = document.createElement("template");
+	l.innerHTML = c;
+	let u = l.content;
+	return l.remove(), u;
+}
+function isNotZeroCssValue(e) {
+	return e && !/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(e.trim()) && e;
+}
+function getFittedSize(e) {
+	let c = window.getComputedStyle(e).objectFit || "", { width: l, height: u } = e.getBoundingClientRect(), d = e.naturalWidth, f = e.naturalHeight;
+	if (!c || !d || !f) return {
+		width: l,
+		height: u
+	};
+	let p = d / f, m = l / u;
+	switch (c) {
+		case "fill": return {
+			width: l,
+			height: u
+		};
+		case "none": return {
+			width: d,
+			height: f
+		};
+		case "contain": return p > m ? {
+			width: l,
+			height: l / p
+		} : {
+			width: u * p,
+			height: u
+		};
+		case "cover": return p < m ? {
+			width: l,
+			height: l / p
+		} : {
+			width: u * p,
+			height: u
+		};
+		case "scale-down": {
+			let e = {
+				width: d,
+				height: f
+			}, c = p > m ? {
+				width: l,
+				height: l / p
+			} : {
+				width: u * p,
+				height: u
+			};
+			return c.width <= e.width && c.height <= e.height ? c : e;
+		}
+	}
+	return {
+		width: l,
+		height: u
+	};
+}
+function makeFullScreenContain(e, c = !1) {
+	let l = window.innerWidth, u = window.innerHeight, d = e.naturalWidth, f = e.naturalHeight;
+	if (!d || !f) return;
+	if (d < l && f < u) {
+		e.style.width = d + "px", e.style.height = f + "px";
+		return;
+	}
+	let p = d / f, m = l / u, h, g;
+	p > m ? (h = l, g = l / p) : (g = u, h = u * p), c ? (e.dataset.vistaviewInitialWidth = h.toString(), e.dataset.vistaviewInitialHeight = g.toString()) : (e.style.width = h + "px", e.style.height = g + "px");
+}
+function getMaxMinZoomLevels(e, c) {
+	let l = window.innerHeight, u = window.innerWidth, d = e, f = c, p = Math.max(0, (d - u) / 2) + u / 2, m = Math.max(0, (f - l) / 2) + l / 2, h = -p;
+	return {
+		maxDiffX: p,
+		minDiffY: -m,
+		maxDiffY: m,
+		minDiffX: h
+	};
+}
+var GlobalVistaState = { somethingOpened: !1 };
+const DefaultOptions = {
+	detectReducedMotion: !0,
+	zoomStep: 500,
+	maxZoomLevel: 2,
+	touchSpeedThreshold: 1,
+	controls: {
+		topLeft: ["indexDisplay"],
+		topRight: [
+			"zoomIn",
+			"zoomOut",
+			getDownloadButton(),
+			"close"
+		],
+		bottomCenter: ["description"]
+	}
+};
+var VistaView = class {
+	options;
+	elements;
+	currentIndex = 0;
+	currentDescription = "";
+	rootElement = null;
+	containerElement = null;
+	indexDisplayElement = null;
+	descriptionElement = null;
+	isActive = !1;
+	isZoomed = !1;
+	isReducedMotion;
+	setInitialProperties = null;
+	setFullScreenContain = null;
+	onZoomedPointerDown = null;
+	onZoomedPointerMove = null;
+	onZoomedPointerUp = null;
+	onPointerDown = null;
+	onPointerMove = null;
+	onPointerUp = null;
+	constructor(e, c) {
+		this.elements = e, this.options = {
+			...DefaultOptions,
+			...c || {},
+			controls: {
+				...DefaultOptions.controls,
+				...c?.controls || {}
+			}
+		}, this.isReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches, this.elements.forEach((e, c) => {
+			let l = e.anchor || e.image;
+			l && (e.onClick = (e) => {
+				e.preventDefault(), this.open(c);
+			}, l.addEventListener("click", e.onClick));
+		});
+	}
+	setZoomed(e) {
+		if (this.isZoomed === e) return;
+		let c = this.isZoomed === !1 ? null : this.containerElement?.querySelectorAll(".vistaview-image-highres")[this.isZoomed];
+		if (this.isZoomed = e, this.isZoomed === !1 && c) {
+			this.onZoomedPointerDown &&= (c.parentElement?.removeEventListener("pointerdown", this.onZoomedPointerDown), null), this.onZoomedPointerMove &&= (c.parentElement?.removeEventListener("pointermove", this.onZoomedPointerMove), null), this.onZoomedPointerUp &&= (c.parentElement?.removeEventListener("pointerup", this.onZoomedPointerUp), null), c?.style.removeProperty("--pointer-diff-x"), c?.style.removeProperty("--pointer-diff-y"), setTimeout(() => {
+				c?.classList.remove("vistaview-image--zooming");
+			}, 500);
+			return;
+		}
+		if (this.isZoomed !== !1) {
+			c = this.containerElement?.querySelectorAll(".vistaview-image-highres")[this.isZoomed], c.classList.add("vistaview-image--zooming"), c?.style.setProperty("--pointer-diff-x", "0px"), c?.style.setProperty("--pointer-diff-y", "0px");
+			let e = !1, l = 0, u = 0, d = 0, f = 0, p = 0, m = 0;
+			this.onZoomedPointerDown &&= (c.parentElement?.removeEventListener("pointerdown", this.onZoomedPointerDown), null), this.onZoomedPointerMove &&= (c.parentElement?.removeEventListener("pointermove", this.onZoomedPointerMove), null), this.onZoomedPointerUp &&= (c.parentElement?.removeEventListener("pointerup", this.onZoomedPointerUp), null), this.onZoomedPointerDown = (d) => {
+				d.preventDefault(), d.stopPropagation(), e = !0, l = d.pageX, u = d.pageY, c.setPointerCapture(d.pointerId);
+			}, this.onZoomedPointerMove = (h) => {
+				if (!e) return;
+				h.preventDefault(), p = h.pageX - l, m = h.pageY - u;
+				let { maxDiffX: g, minDiffY: _, maxDiffY: v, minDiffX: y } = getMaxMinZoomLevels(parseInt(c?.dataset.vistaviewCurrentWidth || "0"), parseInt(c?.dataset.vistaviewCurrentHeight || "0")), b = Math.min(g, Math.max(y, d + p)), x = Math.min(v, Math.max(_, f + m));
+				p = b - d, m = x - f, c?.style.setProperty("--pointer-diff-x", `${b}px`), c?.style.setProperty("--pointer-diff-y", `${x}px`);
+			}, this.onZoomedPointerUp = (l) => {
+				e = !1, c.releasePointerCapture(l.pointerId), d += p, f += m, p = 0, m = 0;
+			}, c?.parentElement?.addEventListener("pointerdown", this.onZoomedPointerDown), c?.parentElement?.addEventListener("pointermove", this.onZoomedPointerMove), c?.parentElement?.addEventListener("pointerup", this.onZoomedPointerUp);
+		}
+	}
+	setIndexDisplay() {
+		this.indexDisplayElement && (this.indexDisplayElement.textContent = `${this.currentIndex + 1} / ${this.elements.length}`);
+	}
+	setCurrentDescription() {
+		this.descriptionElement && (this.currentDescription = this.elements[this.currentIndex].alt || "", this.descriptionElement && (this.descriptionElement.textContent = this.currentDescription));
+	}
+	getAnimationDurationBase() {
+		let e = window.getComputedStyle(this.rootElement);
+		return parseInt(e.getPropertyValue("--vistaview-animation-duration"));
+	}
+	zoomIn() {
+		let e = this.containerElement?.querySelectorAll(".vistaview-image-highres")[this.currentIndex], c = e.width, l = e.height;
+		e.dataset.vistaviewInitialWidth || (e.dataset.vistaviewInitialWidth = c.toString()), e.dataset.vistaviewInitialHeight || (e.dataset.vistaviewInitialHeight = l.toString()), this.setZoomed(this.currentIndex);
+		let u = (e.naturalWidth || 0) * this.options.maxZoomLevel;
+		if (c && u && c < u) {
+			let d = Math.min(c + this.options.zoomStep, u);
+			e.style.width = `${d}px`;
+			let f = d / c * l;
+			e.style.height = `${f}px`, this.containerElement?.querySelector("button.vistaview-zoom-out-button")?.removeAttribute("disabled"), e.dataset.vistaviewCurrentWidth = d.toString(), e.dataset.vistaviewCurrentHeight = f.toString(), d === u && this.containerElement?.querySelector("button.vistaview-zoom-in-button")?.setAttribute("disabled", "true");
+		}
+	}
+	zoomOut() {
+		let e = this.containerElement?.querySelectorAll(".vistaview-image-highres")[this.currentIndex], c = e.width, l = e.height, u = e.dataset.vistaviewInitialWidth ? parseInt(e.dataset.vistaviewInitialWidth) : 0;
+		if (e.classList.add("vistaview-image--zooming-out"), setTimeout(() => {
+			e.classList.remove("vistaview-image--zooming-out");
+		}, 333), c && u && c > u) {
+			let d = Math.max(c - this.options.zoomStep, u);
+			e.style.width = `${d}px`;
+			let f = d / c * l;
+			e.style.height = `${f}px`, this.containerElement?.querySelector("button.vistaview-zoom-in-button")?.removeAttribute("disabled"), e.dataset.vistaviewCurrentWidth = d.toString(), e.dataset.vistaviewCurrentHeight = f.toString();
+			let { maxDiffX: p, minDiffY: m, maxDiffY: h, minDiffX: g } = getMaxMinZoomLevels(d, f), _ = parseInt(e?.style.getPropertyValue("--pointer-diff-x").replace("px", "") || "0"), v = parseInt(e?.style.getPropertyValue("--pointer-diff-y").replace("px", "") || "0");
+			_ = Math.min(p, Math.max(g, _)), v = Math.min(h, Math.max(m, v)), e?.style.setProperty("--pointer-diff-x", `${_}px`), e?.style.setProperty("--pointer-diff-y", `${v}px`), d === u && (this.containerElement?.querySelector("button.vistaview-zoom-out-button")?.setAttribute("disabled", "true"), e.removeAttribute("data-vistaview-current-width"), e.removeAttribute("data-vistaview-current-height"), e.removeAttribute("data-vistaview-initial-width"), e.removeAttribute("data-vistaview-initial-height"), this.setZoomed(!1));
+		}
+	}
+	clearZoom() {
+		let e = this.containerElement?.querySelectorAll(".vistaview-image-highres")[this.currentIndex];
+		e.dataset.vistaviewInitialWidth && (e.style.width = `${e.dataset.vistaviewInitialWidth}px`), e.dataset.vistaviewInitialHeight && (e.style.height = `${e.dataset.vistaviewInitialHeight}px`), this.containerElement?.querySelector("button.vistaview-zoom-in-button")?.removeAttribute("disabled"), this.containerElement?.querySelector("button.vistaview-zoom-out-button")?.setAttribute("disabled", "true"), e.removeAttribute("data-vistaview-current-width"), e.removeAttribute("data-vistaview-current-height"), e.removeAttribute("data-vistaview-initial-width"), e.removeAttribute("data-vistaview-initial-height"), this.setZoomed(!1);
+	}
+	resetImageOpacity(e = !1) {
+		this.elements.forEach((c, l) => {
+			c.image && (c.image?.dataset.vistaviewInitialOpacity || (c.image.dataset.vistaviewInitialOpacity = c.image.style.opacity || "1"), l === this.currentIndex && !e ? c.image.style.opacity = "0" : c.image.style.opacity = c.image.dataset.vistaviewInitialOpacity);
+		});
+	}
+	setTouchActions() {
+		this.removeTouchActions();
+		let e = this.containerElement?.querySelector(".vistaview-image-container");
+		if (!e) return;
+		let c = 0, l = 0, u = 0, d = 0, f = !1, p = this.currentIndex, m;
+		this.onPointerDown = (h) => {
+			if (h.preventDefault(), h.stopPropagation(), this.isZoomed !== !1) return;
+			p = this.currentIndex, f = !0, c = h.pageX, l = h.pageY, u = h.pageX, d = Date.now(), e.classList.add("vistaview-image-container--pointer-down");
+			let g = this.containerElement?.querySelector(".vistaview-image-container"), _ = Array.from(g.querySelectorAll(".vistaview-item"));
+			m = new IntersectionObserver((e) => {
+				e.forEach((e) => {
+					e.isIntersecting && (p = _.indexOf(e.target));
+				});
+			}, {
+				threshold: .5,
+				root: this.containerElement
+			}), _.forEach((e) => {
+				m.observe(e);
+			});
+		}, this.onPointerMove = (d) => {
+			if (d.preventDefault(), d.stopPropagation(), this.isZoomed !== !1 || !f) return;
+			let p = d.pageX - c, m = d.pageY - l;
+			u = d.pageX, e.style.setProperty("--vistaview-pointer-diff-x", `${p}px`), e.style.setProperty("--vistaview-pointer-diff-y", `${m}px`);
+		}, this.onPointerUp = (l) => {
+			if (l.preventDefault(), l.stopPropagation(), this.isZoomed !== !1 || !f) return;
+			f = !1, m.disconnect();
+			let h = (u - c) / (Date.now() - d), g = this.options.touchSpeedThreshold || 1;
+			h < -g && p === this.currentIndex ? p = Math.min(this.currentIndex + 1, this.elements.length - 1) : h > g && p === this.currentIndex && (p = Math.max(this.currentIndex - 1, 0)), e.style.setProperty("--vistaview-pointer-diff-x", "0px"), e.style.setProperty("--vistaview-pointer-diff-y", "0px"), e.classList.remove("vistaview-image-container--pointer-down"), p !== this.currentIndex && this.view(p);
+		}, e.addEventListener("pointermove", this.onPointerMove), e.addEventListener("pointerup", this.onPointerUp), e.addEventListener("pointerdown", this.onPointerDown);
+	}
+	removeTouchActions() {
+		let e = this.containerElement?.querySelector(".vistaview-image-container");
+		e && (this.onPointerMove && e.removeEventListener("pointermove", this.onPointerMove), this.onPointerUp && e.removeEventListener("pointerup", this.onPointerUp), this.onPointerDown && e.removeEventListener("pointerdown", this.onPointerDown));
+	}
+	open(e) {
+		if (GlobalVistaState.somethingOpened) return;
+		if (GlobalVistaState.somethingOpened = !0, this.isActive = !0, e ||= 0, e < 0 || e >= this.elements.length) throw Error("VistaView: Index out of bounds:" + e);
+		this.currentIndex = e;
+		let c = vistaViewComponent(this.elements, this.options.controls);
+		if (document.body.prepend(createTrustedHtml(c)), this.rootElement = document.querySelector("#vistaview-root"), !this.rootElement) throw Error("VistaView: Failed to create root element.");
+		if (this.options.detectReducedMotion && this.isReducedMotion && this.rootElement.classList.add("vistaview--reduced-motion"), this.containerElement = this.rootElement.querySelector(".vistaview-container"), !this.containerElement) throw Error("VistaView: Failed to create container element.");
+		this.indexDisplayElement = this.containerElement.querySelector(".vistaview-index-display"), this.descriptionElement = this.containerElement.querySelector(".vistaview-image-description"), this.options.animationDurationBase && this.rootElement.style.setProperty("--vistaview-animation-duration", `${this.options.animationDurationBase}`), this.options.initialZIndex !== void 0 && this.rootElement.style.setProperty("--vistaview-initial-z-index", `${this.options.initialZIndex}`);
+		let l = this.elements[e].image ? getElmProperties(this.elements[e].image) : void 0, u = this.elements[e].anchor ? getElmProperties(this.elements[e].anchor) : void 0, d = this.elements[e].anchor ? this.elements[e].anchor : this.elements[e].image;
+		if (d) {
+			let e = d.getBoundingClientRect();
+			this.rootElement.style.setProperty("--vistaview-container-initial-width", `${e?.width}px`), this.rootElement.style.setProperty("--vistaview-container-initial-height", `${e?.height}px`), this.rootElement.style.setProperty("--vistaview-container-initial-top", `${e.top + e.height / 2}px`), this.rootElement.style.setProperty("--vistaview-container-initial-left", `${e.left + e.width / 2}px`);
+		}
+		this.rootElement.style.setProperty("--vistaview-number-elements", `${this.elements.length}`), this.rootElement.style.setProperty("--vistaview-image-border-radius", isNotZeroCssValue(l?.borderRadius) || isNotZeroCssValue(u?.borderRadius) || "0px"), this.setInitialProperties = () => {
+			if (!this.isActive) return;
+			let e = this.elements[this.currentIndex].anchor ? this.elements[this.currentIndex].anchor : this.elements[this.currentIndex].image;
+			if (!e) return;
+			let c = e.getBoundingClientRect();
+			this.rootElement?.style.setProperty("--vistaview-container-initial-width", `${c?.width}px`), this.rootElement?.style.setProperty("--vistaview-container-initial-height", `${c?.height}px`), this.rootElement?.style.setProperty("--vistaview-container-initial-top", `${c.top + c.height / 2}px`), this.rootElement?.style.setProperty("--vistaview-container-initial-left", `${c.left + c.width / 2}px`);
+		}, window.addEventListener("resize", this.setInitialProperties);
+		let f = [
+			...this.options.controls.topLeft || [],
+			...this.options.controls.topCenter || [],
+			...this.options.controls.topRight || [],
+			...this.options.controls.bottomLeft || [],
+			...this.options.controls.bottomCenter || [],
+			...this.options.controls.bottomRight || []
+		].filter((e) => typeof e != "string");
+		this.containerElement.querySelectorAll("button").forEach((e) => {
+			let c = e.getAttribute("data-vistaview-custom-control");
+			if (c) {
+				let l = f.find((e) => e.name === c);
+				l && e.addEventListener("click", () => {
+					l.onClick(this.elements[this.currentIndex]);
+				});
+			} else e.classList.contains("vistaview-zoom-in-button") ? e.addEventListener("click", () => {
+				this.zoomIn();
+			}) : e.classList.contains("vistaview-zoom-out-button") ? e.addEventListener("click", () => {
+				this.zoomOut();
+			}) : e.classList.contains("vistaview-close-button") ? e.addEventListener("click", () => {
+				this.close();
+			}) : e.parentElement?.classList.contains("vistaview-prev-btn") ? e.addEventListener("click", () => {
+				this.prev();
+			}) : e.parentElement?.classList.contains("vistaview-next-btn") && e.addEventListener("click", () => {
+				this.next();
+			});
+		}), this.setIndexDisplay(), this.setCurrentDescription(), this.rootElement?.style.setProperty("--vistaview-current-index", `${this.currentIndex}`), this.containerElement.querySelectorAll(".vistaview-image-highres").forEach((e, c) => {
+			let l = e, u = this.elements[c].image;
+			if (u) {
+				let { width: e, height: c } = getFittedSize(u), d = Math.min(u.width, e), f = Math.min(u.height, c);
+				l.style.width = `${d}px`, l.style.height = `${f}px`, l.style.setProperty("--vistaview-fitted-width", `${d}px`), l.style.setProperty("--vistaview-fitted-height", `${f}px`);
+			}
+			function d() {
+				l.classList.add("vistaview-image-loaded"), setTimeout(() => {
+					makeFullScreenContain(l);
+				}, 100), setTimeout(() => {
+					l.parentElement?.querySelector(".vistaview-image-lowres")?.classList.add("vistaview-image--hidden");
+				}, 500);
+			}
+			l.complete ? d() : l.onload = d;
+		}), this.setFullScreenContain = () => {
+			this.isActive && (this.containerElement?.querySelectorAll(".vistaview-image-highres"))?.forEach((e) => {
+				let c = e;
+				makeFullScreenContain(c, c.classList.contains("vistaview-image--zooming"));
+			});
+		}, window.addEventListener("resize", this.setFullScreenContain), this.setTouchActions(), setTimeout(() => {
+			this.rootElement && this.rootElement.classList.add("vistaview--initialized"), this.resetImageOpacity();
+		}, 33);
+	}
+	async close(e = !0) {
+		if (this.isActive) {
+			if (this.isActive = !1, e) {
+				let e = this.getAnimationDurationBase();
+				this.rootElement?.classList.add("vistaview--closing"), this.options.detectReducedMotion && this.isReducedMotion || await new Promise((c) => {
+					setTimeout(() => {
+						c(!0);
+					}, e * 1.5);
+				});
+			}
+			this.removeTouchActions(), this.rootElement?.remove(), this.rootElement = null, this.containerElement = null, this.resetImageOpacity(!0), this.setInitialProperties && window.removeEventListener("resize", this.setInitialProperties), this.setFullScreenContain && window.removeEventListener("resize", this.setFullScreenContain), GlobalVistaState.somethingOpened = !1;
+		}
+	}
+	destroy() {
+		this.isActive && (this.close(!1), this.elements.forEach((e) => {
+			let c = e.anchor || e.image;
+			c && e.onClick && c.removeEventListener("click", e.onClick);
+		}));
+	}
+	view(e) {
+		if (this.isActive) {
+			if (e < 0 || e >= this.elements.length) throw Error("VistaView: Index out of bounds:" + e);
+			this.clearZoom(), this.currentIndex = e, this.resetImageOpacity(), this.setIndexDisplay(), this.setCurrentDescription(), this.setInitialProperties && this.setInitialProperties(), this.rootElement?.style.setProperty("--vistaview-current-index", `${this.currentIndex}`);
+		}
+	}
+	next() {
+		this.isActive && this.view((this.currentIndex + 1) % this.elements.length);
+	}
+	prev() {
+		this.isActive && this.view((this.currentIndex - 1 + this.elements.length) % this.elements.length);
+	}
+	getCurrentIndex() {
+		return this.isActive ? this.currentIndex : -1;
+	}
+}, toImage = (e) => {
+	let c = e instanceof HTMLImageElement ? e : e.querySelector("img");
+	return {
+		src: e.dataset.vistaviewSrc || e.getAttribute("href") || e.getAttribute("src") || "",
+		width: +(e.dataset.vistaviewWidth || c?.naturalWidth || 0),
+		height: +(e.dataset.vistaviewHeight || c?.naturalHeight || 0),
+		smallSrc: c?.src || e.dataset.vistaviewSmallsrc || e.getAttribute("src") || "",
+		alt: c?.alt || e.dataset.vistaviewAlt || e.getAttribute("alt") || "",
+		anchor: e instanceof HTMLAnchorElement ? e : void 0,
+		image: c || void 0
+	};
+};
+function vistaView({ parent: e, elements: c, ...l }) {
+	if (!e && !c) throw Error("No parent or elements");
+	let u;
+	if (e) {
+		let c = e.querySelector("img[data-vistaview-src]") ? "img[data-vistaview-src]" : "a[href]";
+		u = Array.from(e.querySelectorAll(c)).map(toImage);
+	} else if (typeof c == "string") u = Array.from(document.querySelectorAll(c)).map(toImage);
+	else if (c instanceof NodeList) u = Array.from(c).map(toImage);
+	else if (Array.isArray(c)) u = c;
+	else throw Error("Invalid elements");
+	if (!u.length) throw Error("No elements found");
+	let d = new VistaView(u, l);
+	return {
+		open: (e = 0) => d.open(e),
+		close: () => d.close(),
+		next: () => d.next(),
+		prev: () => d.prev(),
+		destroy: () => d.destroy(),
+		getCurrentIndex: () => d.getCurrentIndex(),
+		view: (e) => {
+			d.view(e);
+		}
+	};
+}
+export { DefaultOptions, getDownloadButton, vistaView };

package/dist/vistaview.umd.cjs

@@ -0,0 +1,14 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.VistaView={}))})(this,function(e){var t=`<svg viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></svg>`,n=`<svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>`,r=`<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="11" x2="11" y1="8" y2="14"/><line x1="8" x2="14" y1="11" y2="11"/></svg>`,i=`<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" x2="16.65" y1="21" y2="16.65"/><line x1="8" x2="14" y1="11" y2="11"/></svg>`,a=`<svg viewBox="0 0 24 24"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>`,o=`<svg viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`;function s(){return{name:`download`,icon:a,onClick:e=>{let t=document.createElement(`a`);t.href=e.src,t.download=e.src.split(`/`).pop()||`download`,document.body.appendChild(t),t.click(),document.body.removeChild(t)}}}function c(e){if(typeof e==`string`)switch(e){case`zoomIn`:return`<button class="vistaview-zoom-in-button">${r}</button>`;case`zoomOut`:return`<button disabled class="vistaview-zoom-out-button">${i}</button>`;case`close`:return`<button class="vistaview-close-button">${o}</button>`;case`indexDisplay`:return`<div class="vistaview-index-display"></div>`;case`description`:return`<div class="vistaview-image-description"></div>`;default:return``}return`<button data-vistaview-custom-control="${e.name}">${e.icon}</button>`}function l(e,r){let i=e=>e?e.map(c).join(``):``;return`<div class="vistaview-root" id="vistaview-root">
+<div class="vistaview-container">
+<div class="vistaview-image-container">
+${e.map(e=>{let t=e.image?getComputedStyle(e.image).objectFit:``,n=e.image?.width,r=e.image?.height;return`<div class="vistaview-item">
+<img class="vistaview-image-lowres"${t?` style="object-fit:${t}"`:``} src="${e.smallSrc||e.src}" alt="${e.alt||``}" width="${n}" height="${r}">
+<img class="vistaview-image-highres" loading="lazy" style="width:${n}px;height:${r}px" src="${e.src}" alt="${e.alt||``}" width="${e.width}" height="${e.height}">
+</div>`}).join(``)}
+</div>
+<div class="vistaview-top-bar vistaview-ui"><div>${i(r?.topLeft)}</div><div>${i(r?.topCenter)}</div><div>${i(r?.topRight)}</div></div>
+<div class="vistaview-bottom-bar vistaview-ui"><div>${i(r?.bottomLeft)}</div><div>${i(r?.bottomCenter)}</div><div>${i(r?.bottomRight)}</div></div>
+<div class="vistaview-prev-btn vistaview-ui"><button>${t}</button></div>
+<div class="vistaview-next-btn vistaview-ui"><button>${n}</button></div>
+</div>
+</div>`}function u(e){let t=getComputedStyle(e);return{objectFit:t.objectFit,borderRadius:t.borderRadius,objectPosition:t.objectPosition,overflow:t.overflow}}var d=null;function f(){return d||(window.trustedTypes||(window.trustedTypes={createPolicy:(e,t)=>t}),d=window.trustedTypes.createPolicy(`vistaView-policy`,{createHTML:e=>e,createScript:()=>{throw Error(`Not implemented`)},createScriptURL:()=>{throw Error(`Not implemented`)}}),d)}function p(e){let t=f().createHTML(e),n=document.createElement(`template`);n.innerHTML=t;let r=n.content;return n.remove(),r}function m(e){return e&&!/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(e.trim())&&e}function h(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}}function g(e,t=!1){let n=window.innerWidth,r=window.innerHeight,i=e.naturalWidth,a=e.naturalHeight;if(!i||!a)return;if(i<n&&a<r){e.style.width=i+`px`,e.style.height=a+`px`;return}let o=i/a,s=n/r,c,l;o>s?(c=n,l=n/o):(l=r,c=r*o),t?(e.dataset.vistaviewInitialWidth=c.toString(),e.dataset.vistaviewInitialHeight=l.toString()):(e.style.width=c+`px`,e.style.height=l+`px`)}function _(e,t){let n=window.innerHeight,r=window.innerWidth,i=e,a=t,o=Math.max(0,(i-r)/2)+r/2,s=Math.max(0,(a-n)/2)+n/2,c=-o;return{maxDiffX:o,minDiffY:-s,maxDiffY:s,minDiffX:c}}var v={somethingOpened:!1};let y={detectReducedMotion:!0,zoomStep:500,maxZoomLevel:2,touchSpeedThreshold:1,controls:{topLeft:[`indexDisplay`],topRight:[`zoomIn`,`zoomOut`,s(),`close`],bottomCenter:[`description`]}};var b=class{options;elements;currentIndex=0;currentDescription=``;rootElement=null;containerElement=null;indexDisplayElement=null;descriptionElement=null;isActive=!1;isZoomed=!1;isReducedMotion;setInitialProperties=null;setFullScreenContain=null;onZoomedPointerDown=null;onZoomedPointerMove=null;onZoomedPointerUp=null;onPointerDown=null;onPointerMove=null;onPointerUp=null;constructor(e,t){this.elements=e,this.options={...y,...t||{},controls:{...y.controls,...t?.controls||{}}},this.isReducedMotion=window.matchMedia(`(prefers-reduced-motion: reduce)`).matches,this.elements.forEach((e,t)=>{let n=e.anchor||e.image;n&&(e.onClick=e=>{e.preventDefault(),this.open(t)},n.addEventListener(`click`,e.onClick))})}setZoomed(e){if(this.isZoomed===e)return;let t=this.isZoomed===!1?null:this.containerElement?.querySelectorAll(`.vistaview-image-highres`)[this.isZoomed];if(this.isZoomed=e,this.isZoomed===!1&&t){this.onZoomedPointerDown&&=(t.parentElement?.removeEventListener(`pointerdown`,this.onZoomedPointerDown),null),this.onZoomedPointerMove&&=(t.parentElement?.removeEventListener(`pointermove`,this.onZoomedPointerMove),null),this.onZoomedPointerUp&&=(t.parentElement?.removeEventListener(`pointerup`,this.onZoomedPointerUp),null),t?.style.removeProperty(`--pointer-diff-x`),t?.style.removeProperty(`--pointer-diff-y`),setTimeout(()=>{t?.classList.remove(`vistaview-image--zooming`)},500);return}if(this.isZoomed!==!1){t=this.containerElement?.querySelectorAll(`.vistaview-image-highres`)[this.isZoomed],t.classList.add(`vistaview-image--zooming`),t?.style.setProperty(`--pointer-diff-x`,`0px`),t?.style.setProperty(`--pointer-diff-y`,`0px`);let e=!1,n=0,r=0,i=0,a=0,o=0,s=0;this.onZoomedPointerDown&&=(t.parentElement?.removeEventListener(`pointerdown`,this.onZoomedPointerDown),null),this.onZoomedPointerMove&&=(t.parentElement?.removeEventListener(`pointermove`,this.onZoomedPointerMove),null),this.onZoomedPointerUp&&=(t.parentElement?.removeEventListener(`pointerup`,this.onZoomedPointerUp),null),this.onZoomedPointerDown=i=>{i.preventDefault(),i.stopPropagation(),e=!0,n=i.pageX,r=i.pageY,t.setPointerCapture(i.pointerId)},this.onZoomedPointerMove=c=>{if(!e)return;c.preventDefault(),o=c.pageX-n,s=c.pageY-r;let{maxDiffX:l,minDiffY:u,maxDiffY:d,minDiffX:f}=_(parseInt(t?.dataset.vistaviewCurrentWidth||`0`),parseInt(t?.dataset.vistaviewCurrentHeight||`0`)),p=Math.min(l,Math.max(f,i+o)),m=Math.min(d,Math.max(u,a+s));o=p-i,s=m-a,t?.style.setProperty(`--pointer-diff-x`,`${p}px`),t?.style.setProperty(`--pointer-diff-y`,`${m}px`)},this.onZoomedPointerUp=n=>{e=!1,t.releasePointerCapture(n.pointerId),i+=o,a+=s,o=0,s=0},t?.parentElement?.addEventListener(`pointerdown`,this.onZoomedPointerDown),t?.parentElement?.addEventListener(`pointermove`,this.onZoomedPointerMove),t?.parentElement?.addEventListener(`pointerup`,this.onZoomedPointerUp)}}setIndexDisplay(){this.indexDisplayElement&&(this.indexDisplayElement.textContent=`${this.currentIndex+1} / ${this.elements.length}`)}setCurrentDescription(){this.descriptionElement&&(this.currentDescription=this.elements[this.currentIndex].alt||``,this.descriptionElement&&(this.descriptionElement.textContent=this.currentDescription))}getAnimationDurationBase(){let e=window.getComputedStyle(this.rootElement);return parseInt(e.getPropertyValue(`--vistaview-animation-duration`))}zoomIn(){let e=this.containerElement?.querySelectorAll(`.vistaview-image-highres`)[this.currentIndex],t=e.width,n=e.height;e.dataset.vistaviewInitialWidth||(e.dataset.vistaviewInitialWidth=t.toString()),e.dataset.vistaviewInitialHeight||(e.dataset.vistaviewInitialHeight=n.toString()),this.setZoomed(this.currentIndex);let r=(e.naturalWidth||0)*this.options.maxZoomLevel;if(t&&r&&t<r){let i=Math.min(t+this.options.zoomStep,r);e.style.width=`${i}px`;let a=i/t*n;e.style.height=`${a}px`,this.containerElement?.querySelector(`button.vistaview-zoom-out-button`)?.removeAttribute(`disabled`),e.dataset.vistaviewCurrentWidth=i.toString(),e.dataset.vistaviewCurrentHeight=a.toString(),i===r&&this.containerElement?.querySelector(`button.vistaview-zoom-in-button`)?.setAttribute(`disabled`,`true`)}}zoomOut(){let e=this.containerElement?.querySelectorAll(`.vistaview-image-highres`)[this.currentIndex],t=e.width,n=e.height,r=e.dataset.vistaviewInitialWidth?parseInt(e.dataset.vistaviewInitialWidth):0;if(e.classList.add(`vistaview-image--zooming-out`),setTimeout(()=>{e.classList.remove(`vistaview-image--zooming-out`)},333),t&&r&&t>r){let i=Math.max(t-this.options.zoomStep,r);e.style.width=`${i}px`;let a=i/t*n;e.style.height=`${a}px`,this.containerElement?.querySelector(`button.vistaview-zoom-in-button`)?.removeAttribute(`disabled`),e.dataset.vistaviewCurrentWidth=i.toString(),e.dataset.vistaviewCurrentHeight=a.toString();let{maxDiffX:o,minDiffY:s,maxDiffY:c,minDiffX:l}=_(i,a),u=parseInt(e?.style.getPropertyValue(`--pointer-diff-x`).replace(`px`,``)||`0`),d=parseInt(e?.style.getPropertyValue(`--pointer-diff-y`).replace(`px`,``)||`0`);u=Math.min(o,Math.max(l,u)),d=Math.min(c,Math.max(s,d)),e?.style.setProperty(`--pointer-diff-x`,`${u}px`),e?.style.setProperty(`--pointer-diff-y`,`${d}px`),i===r&&(this.containerElement?.querySelector(`button.vistaview-zoom-out-button`)?.setAttribute(`disabled`,`true`),e.removeAttribute(`data-vistaview-current-width`),e.removeAttribute(`data-vistaview-current-height`),e.removeAttribute(`data-vistaview-initial-width`),e.removeAttribute(`data-vistaview-initial-height`),this.setZoomed(!1))}}clearZoom(){let e=this.containerElement?.querySelectorAll(`.vistaview-image-highres`)[this.currentIndex];e.dataset.vistaviewInitialWidth&&(e.style.width=`${e.dataset.vistaviewInitialWidth}px`),e.dataset.vistaviewInitialHeight&&(e.style.height=`${e.dataset.vistaviewInitialHeight}px`),this.containerElement?.querySelector(`button.vistaview-zoom-in-button`)?.removeAttribute(`disabled`),this.containerElement?.querySelector(`button.vistaview-zoom-out-button`)?.setAttribute(`disabled`,`true`),e.removeAttribute(`data-vistaview-current-width`),e.removeAttribute(`data-vistaview-current-height`),e.removeAttribute(`data-vistaview-initial-width`),e.removeAttribute(`data-vistaview-initial-height`),this.setZoomed(!1)}resetImageOpacity(e=!1){this.elements.forEach((t,n)=>{t.image&&(t.image?.dataset.vistaviewInitialOpacity||(t.image.dataset.vistaviewInitialOpacity=t.image.style.opacity||`1`),n===this.currentIndex&&!e?t.image.style.opacity=`0`:t.image.style.opacity=t.image.dataset.vistaviewInitialOpacity)})}setTouchActions(){this.removeTouchActions();let e=this.containerElement?.querySelector(`.vistaview-image-container`);if(!e)return;let t=0,n=0,r=0,i=0,a=!1,o=this.currentIndex,s;this.onPointerDown=c=>{if(c.preventDefault(),c.stopPropagation(),this.isZoomed!==!1)return;o=this.currentIndex,a=!0,t=c.pageX,n=c.pageY,r=c.pageX,i=Date.now(),e.classList.add(`vistaview-image-container--pointer-down`);let l=this.containerElement?.querySelector(`.vistaview-image-container`),u=Array.from(l.querySelectorAll(`.vistaview-item`));s=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting&&(o=u.indexOf(e.target))})},{threshold:.5,root:this.containerElement}),u.forEach(e=>{s.observe(e)})},this.onPointerMove=i=>{if(i.preventDefault(),i.stopPropagation(),this.isZoomed!==!1||!a)return;let o=i.pageX-t,s=i.pageY-n;r=i.pageX,e.style.setProperty(`--vistaview-pointer-diff-x`,`${o}px`),e.style.setProperty(`--vistaview-pointer-diff-y`,`${s}px`)},this.onPointerUp=n=>{if(n.preventDefault(),n.stopPropagation(),this.isZoomed!==!1||!a)return;a=!1,s.disconnect();let c=(r-t)/(Date.now()-i),l=this.options.touchSpeedThreshold||1;c<-l&&o===this.currentIndex?o=Math.min(this.currentIndex+1,this.elements.length-1):c>l&&o===this.currentIndex&&(o=Math.max(this.currentIndex-1,0)),e.style.setProperty(`--vistaview-pointer-diff-x`,`0px`),e.style.setProperty(`--vistaview-pointer-diff-y`,`0px`),e.classList.remove(`vistaview-image-container--pointer-down`),o!==this.currentIndex&&this.view(o)},e.addEventListener(`pointermove`,this.onPointerMove),e.addEventListener(`pointerup`,this.onPointerUp),e.addEventListener(`pointerdown`,this.onPointerDown)}removeTouchActions(){let e=this.containerElement?.querySelector(`.vistaview-image-container`);e&&(this.onPointerMove&&e.removeEventListener(`pointermove`,this.onPointerMove),this.onPointerUp&&e.removeEventListener(`pointerup`,this.onPointerUp),this.onPointerDown&&e.removeEventListener(`pointerdown`,this.onPointerDown))}open(e){if(v.somethingOpened)return;if(v.somethingOpened=!0,this.isActive=!0,e||=0,e<0||e>=this.elements.length)throw Error(`VistaView: Index out of bounds:`+e);this.currentIndex=e;let t=l(this.elements,this.options.controls);if(document.body.prepend(p(t)),this.rootElement=document.querySelector(`#vistaview-root`),!this.rootElement)throw Error(`VistaView: Failed to create root element.`);if(this.options.detectReducedMotion&&this.isReducedMotion&&this.rootElement.classList.add(`vistaview--reduced-motion`),this.containerElement=this.rootElement.querySelector(`.vistaview-container`),!this.containerElement)throw Error(`VistaView: Failed to create container element.`);this.indexDisplayElement=this.containerElement.querySelector(`.vistaview-index-display`),this.descriptionElement=this.containerElement.querySelector(`.vistaview-image-description`),this.options.animationDurationBase&&this.rootElement.style.setProperty(`--vistaview-animation-duration`,`${this.options.animationDurationBase}`),this.options.initialZIndex!==void 0&&this.rootElement.style.setProperty(`--vistaview-initial-z-index`,`${this.options.initialZIndex}`);let n=this.elements[e].image?u(this.elements[e].image):void 0,r=this.elements[e].anchor?u(this.elements[e].anchor):void 0,i=this.elements[e].anchor?this.elements[e].anchor:this.elements[e].image;if(i){let e=i.getBoundingClientRect();this.rootElement.style.setProperty(`--vistaview-container-initial-width`,`${e?.width}px`),this.rootElement.style.setProperty(`--vistaview-container-initial-height`,`${e?.height}px`),this.rootElement.style.setProperty(`--vistaview-container-initial-top`,`${e.top+e.height/2}px`),this.rootElement.style.setProperty(`--vistaview-container-initial-left`,`${e.left+e.width/2}px`)}this.rootElement.style.setProperty(`--vistaview-number-elements`,`${this.elements.length}`),this.rootElement.style.setProperty(`--vistaview-image-border-radius`,m(n?.borderRadius)||m(r?.borderRadius)||`0px`),this.setInitialProperties=()=>{if(!this.isActive)return;let e=this.elements[this.currentIndex].anchor?this.elements[this.currentIndex].anchor:this.elements[this.currentIndex].image;if(!e)return;let t=e.getBoundingClientRect();this.rootElement?.style.setProperty(`--vistaview-container-initial-width`,`${t?.width}px`),this.rootElement?.style.setProperty(`--vistaview-container-initial-height`,`${t?.height}px`),this.rootElement?.style.setProperty(`--vistaview-container-initial-top`,`${t.top+t.height/2}px`),this.rootElement?.style.setProperty(`--vistaview-container-initial-left`,`${t.left+t.width/2}px`)},window.addEventListener(`resize`,this.setInitialProperties);let a=[...this.options.controls.topLeft||[],...this.options.controls.topCenter||[],...this.options.controls.topRight||[],...this.options.controls.bottomLeft||[],...this.options.controls.bottomCenter||[],...this.options.controls.bottomRight||[]].filter(e=>typeof e!=`string`);this.containerElement.querySelectorAll(`button`).forEach(e=>{let t=e.getAttribute(`data-vistaview-custom-control`);if(t){let n=a.find(e=>e.name===t);n&&e.addEventListener(`click`,()=>{n.onClick(this.elements[this.currentIndex])})}else e.classList.contains(`vistaview-zoom-in-button`)?e.addEventListener(`click`,()=>{this.zoomIn()}):e.classList.contains(`vistaview-zoom-out-button`)?e.addEventListener(`click`,()=>{this.zoomOut()}):e.classList.contains(`vistaview-close-button`)?e.addEventListener(`click`,()=>{this.close()}):e.parentElement?.classList.contains(`vistaview-prev-btn`)?e.addEventListener(`click`,()=>{this.prev()}):e.parentElement?.classList.contains(`vistaview-next-btn`)&&e.addEventListener(`click`,()=>{this.next()})}),this.setIndexDisplay(),this.setCurrentDescription(),this.rootElement?.style.setProperty(`--vistaview-current-index`,`${this.currentIndex}`),this.containerElement.querySelectorAll(`.vistaview-image-highres`).forEach((e,t)=>{let n=e,r=this.elements[t].image;if(r){let{width:e,height:t}=h(r),i=Math.min(r.width,e),a=Math.min(r.height,t);n.style.width=`${i}px`,n.style.height=`${a}px`,n.style.setProperty(`--vistaview-fitted-width`,`${i}px`),n.style.setProperty(`--vistaview-fitted-height`,`${a}px`)}function i(){n.classList.add(`vistaview-image-loaded`),setTimeout(()=>{g(n)},100),setTimeout(()=>{n.parentElement?.querySelector(`.vistaview-image-lowres`)?.classList.add(`vistaview-image--hidden`)},500)}n.complete?i():n.onload=i}),this.setFullScreenContain=()=>{this.isActive&&(this.containerElement?.querySelectorAll(`.vistaview-image-highres`))?.forEach(e=>{let t=e;g(t,t.classList.contains(`vistaview-image--zooming`))})},window.addEventListener(`resize`,this.setFullScreenContain),this.setTouchActions(),setTimeout(()=>{this.rootElement&&this.rootElement.classList.add(`vistaview--initialized`),this.resetImageOpacity()},33)}async close(e=!0){if(this.isActive){if(this.isActive=!1,e){let e=this.getAnimationDurationBase();this.rootElement?.classList.add(`vistaview--closing`),this.options.detectReducedMotion&&this.isReducedMotion||await new Promise(t=>{setTimeout(()=>{t(!0)},e*1.5)})}this.removeTouchActions(),this.rootElement?.remove(),this.rootElement=null,this.containerElement=null,this.resetImageOpacity(!0),this.setInitialProperties&&window.removeEventListener(`resize`,this.setInitialProperties),this.setFullScreenContain&&window.removeEventListener(`resize`,this.setFullScreenContain),v.somethingOpened=!1}}destroy(){this.isActive&&(this.close(!1),this.elements.forEach(e=>{let t=e.anchor||e.image;t&&e.onClick&&t.removeEventListener(`click`,e.onClick)}))}view(e){if(this.isActive){if(e<0||e>=this.elements.length)throw Error(`VistaView: Index out of bounds:`+e);this.clearZoom(),this.currentIndex=e,this.resetImageOpacity(),this.setIndexDisplay(),this.setCurrentDescription(),this.setInitialProperties&&this.setInitialProperties(),this.rootElement?.style.setProperty(`--vistaview-current-index`,`${this.currentIndex}`)}}next(){this.isActive&&this.view((this.currentIndex+1)%this.elements.length)}prev(){this.isActive&&this.view((this.currentIndex-1+this.elements.length)%this.elements.length)}getCurrentIndex(){return this.isActive?this.currentIndex:-1}},x=e=>{let t=e instanceof HTMLImageElement?e:e.querySelector(`img`);return{src:e.dataset.vistaviewSrc||e.getAttribute(`href`)||e.getAttribute(`src`)||``,width:+(e.dataset.vistaviewWidth||t?.naturalWidth||0),height:+(e.dataset.vistaviewHeight||t?.naturalHeight||0),smallSrc:t?.src||e.dataset.vistaviewSmallsrc||e.getAttribute(`src`)||``,alt:t?.alt||e.dataset.vistaviewAlt||e.getAttribute(`alt`)||``,anchor:e instanceof HTMLAnchorElement?e:void 0,image:t||void 0}};function S({parent:e,elements:t,...n}){if(!e&&!t)throw Error(`No parent or elements`);let r;if(e){let t=e.querySelector(`img[data-vistaview-src]`)?`img[data-vistaview-src]`:`a[href]`;r=Array.from(e.querySelectorAll(t)).map(x)}else if(typeof t==`string`)r=Array.from(document.querySelectorAll(t)).map(x);else if(t instanceof NodeList)r=Array.from(t).map(x);else if(Array.isArray(t))r=t;else throw Error(`Invalid elements`);if(!r.length)throw Error(`No elements found`);let i=new b(r,n);return{open:(e=0)=>i.open(e),close:()=>i.close(),next:()=>i.next(),prev:()=>i.prev(),destroy:()=>i.destroy(),getCurrentIndex:()=>i.getCurrentIndex(),view:e=>{i.view(e)}}}e.DefaultOptions=y,e.getDownloadButton=s,e.vistaView=S});

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "vistaview",
+  "version": "0.0.1",
+  "description": "A lightweight, zero-dependency image lightbox library with smooth animations and touch support",
+  "type": "module",
+  "main": "./dist/vistaview.umd.cjs",
+  "module": "./dist/vistaview.js",
+  "types": "./dist/vistaview.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/vistaview.d.ts",
+      "import": "./dist/vistaview.js",
+      "require": "./dist/vistaview.umd.cjs"
+    },
+    "./style.css": "./dist/vistaview.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "prepare": "husky",
+    "test": "echo \"no test specified\""
+  },
+  "lint-staged": {
+    "*.{js,ts,css,json,md}": "prettier --write"
+  },
+  "devDependencies": {
+    "@types/trusted-types": "^2.0.7",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.7",
+    "prettier": "^3.7.4",
+    "sharp": "^0.34.5",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.2.5",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.2.5"
+  },
+  "dependencies": {
+    "isomorphic-dompurify": "^2.33.0"
+  }
+}