vistaview 0.7.7 → 0.10.9

package/README.md

@@ -1,12 +1,12 @@
 # VistaView
 
-⚠️ **This is still in development, do not use**
+> ⚠️ **Not Ready for Production** — This library is currently under active development and is not yet stable. APIs may change without notice. Use at your own risk.
 
 A lightweight, modern image lightbox library for the web. Zero dependencies, framework-agnostic, and highly customizable.
 
 ## Features
 
-- 🪶 **Lightweight** — ~43KB ESM (~10KB gzip), minimal footprint, zero dependencies
+- 🪶 **Lightweight** — ~41KB ESM (~10KB gzip), minimal footprint
 - 📱 **Touch-first** — Swipe gestures for navigation and closing, pinch-to-zoom support
 - 🎨 **Customizable** — Configurable controls, animations, and styling via CSS variables
 - ♿ **Accessible** — Keyboard navigation, ARIA labels, reduced motion support
@@ -14,6 +14,8 @@ A lightweight, modern image lightbox library for the web. Zero dependencies, fra
 - 🖼️ **Progressive loading** — Low-res thumbnails → high-res images with smooth transitions
 - 🔍 **Smart zoom** — Pan and zoom with momentum physics, respects actual image resolution
 - 🎯 **Pointer-aware** — Advanced multi-touch tracking with context menu prevention
+- 🎬 **Video embeds** — Support for YouTube, Vimeo, Dailymotion, Wistia, Vidyard, Streamable
+- 🗺️ **Map embeds** — Support for Google Maps, Mapbox, OpenStreetMap with interactive controls
 
 ## Installation
 
@@ -82,51 +84,46 @@ vistaView({
 });
 ```
 
-### Using a NodeList
-
-```js
-vistaView({
-  elements: document.querySelectorAll('.gallery-image'),
-});
-```
-
 ### Using an array of images
 
 ```js
 vistaView({
   elements: [
-    { src: '/images/photo1.jpg', thumb: '/images/thumb1.jpg', alt: 'Photo 1' },
-    { src: '/images/photo2.jpg', thumb: '/images/thumb2.jpg', alt: 'Photo 2' },
+    { src: '/images/photo1.jpg', alt: 'Photo 1' },
+    {
+      src: '/images/photo2-800.jpg',
+      alt: 'Photo 2',
+      srcSet: '/images/photo2-800.jpg 800w, /images/photo2-1200.jpg 1200w',
+    },
   ],
 });
 ```
 
+**Note:** When using an array of image objects, thumbnails are not supported. Use DOM elements (anchor tags or img tags) if you need progressive loading from thumbnails.
+
 ## Options
 
 ```ts
-import { vistaView, vistaViewDownload } from 'vistaview';
+import { vistaView } from 'vistaview';
 
 vistaView({
-  // Required: specify elements (string selector, NodeList, or array)
-  elements: string | NodeList | VistaImg[],
+  // Required: specify elements (string selector or array)
+  elements: string | VistaImgConfig[],
 
   // Optional configuration
   animationDurationBase: 333, // Base animation duration in ms (default: 333)
-  initialZIndex: 1, // Starting z-index for the lightbox (default: 1)
   maxZoomLevel: 2, // Maximum zoom multiplier (default: 2)
   preloads: 1, // Number of adjacent images to preload on each side (default: 1)
   keyboardListeners: true, // Enable keyboard navigation (default: true)
   arrowOnSmallScreens: false, // Show prev/next arrows on screens < 768px (default: false)
-  rapidLimit: 100, // Minimum time between rapid actions in ms (default: 100)
+  rapidLimit: 222, // Minimum time between rapid actions in ms (default: 222)
+  initialZIndex: 1, // Starting z-index for the lightbox (optional, no default)
 
   // Control placement (defaults shown)
   controls: {
     topLeft: ['indexDisplay'],
-    topRight: ['zoomIn', 'zoomOut', vistaViewDownload(), 'close'],
-    topCenter: [],
-    bottomLeft: [],
-    bottomCenter: ['description'],
-    bottomRight: [],
+    topRight: ['zoomIn', 'zoomOut', 'close'],
+    bottomLeft: ['description'],
   },
 
   // Events
@@ -137,78 +134,114 @@ vistaView({
   // Custom behavior functions (advanced)
   initFunction: (vistaView) => {}, // Custom initialization (runs on open)
   setupFunction: (data) => {}, // Custom setup when navigating
-  transitionFunction: (data, abortSignal) => Promise<void>, // Custom transition animation
+  transitionFunction: (data, abortSignal) => {}, // Custom transition animation (returns cleanup function and promise)
   closeFunction: (vistaView) => {}, // Custom cleanup on close
 });
 ```
 
 ## Default Controls
 
-| Control               | Description                               |
-| --------------------- | ----------------------------------------- |
-| `indexDisplay`        | Shows current image index (e.g., "1 / 5") |
-| `zoomIn`              | Zoom into the image                       |
-| `zoomOut`             | Zoom out of the image                     |
-| `vistaViewDownload()` | Download the current image                |
-| `close`               | Close the lightbox                        |
-| `description`         | Shows the image alt text                  |
+| Control        | Description                               |
+| -------------- | ----------------------------------------- |
+| `indexDisplay` | Shows current image index (e.g., "1 / 5") |
+| `zoomIn`       | Zoom into the image                       |
+| `zoomOut`      | Zoom out of the image                     |
+| `close`        | Close the lightbox                        |
+| `description`  | Shows the image alt text                  |
 
-## Custom Controls
+**Note:** Controls can be either built-in control names (strings) or extension instances. See the [Extensions](#extensions) section for adding additional functionality like download buttons or image stories.
 
-Controls are merged with defaults—only the positions you specify are replaced. Provide an object with `name`, `icon`, and `onClick`:
+## Extensions
 
-```js
-import { vistaView, vistaViewDownload } from 'vistaview';
+VistaView provides optional extensions for additional functionality. Extensions are available in both ESM and UMD formats.
 
-vistaView({
-  elements: '#gallery a',
-  controls: {
-    topRight: [
-      'zoomIn',
-      'zoomOut',
-      vistaViewDownload(), // Example: Built-in download helper
-      {
-        name: 'share',
-        icon: '<svg>...</svg>',
-        onClick: (image) => {
-          navigator.share({ url: image.src });
-        },
-      },
-      'close',
-    ],
-  },
-});
-```
+👉 **[View detailed extension documentation and usage examples](./extensions.md)**
+
+👉 **[Learn how to create your own extensions](./extensions-authoring.md)**
+
+### Available Extensions
+
+**UI Extensions:**
+
+- **`download`** — Adds a download button to save the current high-resolution image (1.42 KB ESM / 1.41 KB UMD)
+- **`image-story`** — Display rich HTML content alongside images with XSS protection (33.60 KB ESM / 25.28 KB UMD)
+
+**Video Platform Extensions:**
+
+- **`youtube-video`** — Embed YouTube videos (3.10 KB ESM / 14.07 KB UMD)
+- **`vimeo-video`** — Embed Vimeo videos (2.65 KB ESM / 13.69 KB UMD)
+- **`dailymotion-video`** — Embed Dailymotion videos (2.80 KB ESM / 13.82 KB UMD)
+- **`wistia-video`** — Embed Wistia videos (2.93 KB ESM / 13.92 KB UMD)
+- **`vidyard-video`** — Embed Vidyard videos (2.73 KB ESM / 13.75 KB UMD)
+- **`streamable-video`** — Embed Streamable videos (2.69 KB ESM / 13.73 KB UMD)
+
+**Map Extensions:**
+
+- **`google-maps`** — Embed Google Maps (requires API key) (3.65 KB ESM / 14.56 KB UMD)
+- **`mapbox`** — Embed Mapbox GL JS interactive maps (requires access token) (4.99 KB ESM / 15.63 KB UMD)
+- **`openstreetmap`** — Embed OpenStreetMap with Leaflet.js (free, no API key) (4.79 KB ESM / 15.43 KB UMD)
+
+**Development Extensions:**
+
+- **`logger`** — Debug extension that logs all lifecycle events (0.61 KB ESM / 0.76 KB UMD)
 
 ## Exported Types & Functions
 
-VistaView exports all types for TypeScript users, plus helper functions:
+VistaView exports all types for TypeScript users, plus helper functions and internal classes:
 
 ```ts
-import {
-  vistaView,
-  vistaViewDownload, // Helper function for download control
-  DefaultOptions, // Default configuration options
-  setup, // Default setup function
-  init, // Default init function
-  close, // Default close function
-  transition, // Default transition function
-} from 'vistaview';
+import { vistaView } from 'vistaview';
 
+// All types are exported via `export type *`
 import type {
-  VistaParams, // Full options including `elements`
+  // Configuration types
+  VistaParamsNeo, // Full options including `elements`
   VistaOpt, // Base options (without `elements`)
-  VistaImg, // Image object: { src, alt?, thumb? }
-  VistaImgIdx, // Image with index and DOM references
+
+  // Image types
+  VistaImgConfig, // Image configuration: { src, alt?, srcSet? }
+  VistaImgOrigin, // Origin element properties
+  VistaParsedElm, // Parsed element return type from parseElement
+
+  // Interface types
   VistaInterface, // Return type from vistaView()
   VistaData, // Data passed to events/functions
-  VistaSetupFn, // Type for setupFunction
+  VistaImageState, // Image state interface
+
+  // Function types
+  VistaImageSetupFn, // Type for imageSetupFunction
   VistaTransitionFn, // Type for transitionFunction
+  VistaOpenFn, // Type for openFunction
   VistaCloseFn, // Type for closeFunction
   VistaInitFn, // Type for initFunction
-  VistaCustomCtrl, // Custom control definition
+
+  // Control types
   VistaDefaultCtrl, // Built-in control names
-  VistaElmProps, // Element property interface
+  VistaExtension, // Extension interface for adding functionality
+
+  // Pointer types
+  VistaPointerArgs, // Pointer system arguments
+  VistaPointer, // Single pointer state
+  VistaPointerListenerArgs, // Internal pointer listener args
+  VistaPointerListener, // Internal pointer listener type
+  VistaExternalPointerListenerArgs, // External pointer listener args
+} from 'vistaview';
+
+// Optional: Default behavior functions and internal classes (advanced usage)
+import {
+  DefaultOptions, // Default configuration options
+  imageSetup, // Default image setup function
+  init, // Default init function (runs on class initialization)
+  open, // Default open function (runs when viewer opens)
+  close, // Default close function
+  transition, // Default transition function
+  VistaImageEvent, // Event handling system
+  VistaHiresTransition, // High-resolution image transition manager
+  VistaBox, // Base class for image containers
+  VistaImage, // Individual image instance class
+  VistaPointers, // Multi-pointer tracking system
+  VistaState, // State management class
+  VistaView, // Main view controller class
 } from 'vistaview';
 ```
 
@@ -233,7 +266,23 @@ import 'vistaview/styles/dark-rounded.css'; // Optional theme
 
 Available themes:
 
+- `autumn-amber` - Warm oranges and browns with earthy tones
+- `cotton-candy` - Playful pastel pink with soft styling
 - `dark-rounded` - Dark theme with rounded corners and animated navigation buttons
+- `ember-glow` - Dark theme with orange glow effects
+- `forest-moss` - Earthy greens inspired by nature
+- `green-lake` - Calming teal and green palette with smooth transitions
+- `ice-crystal` - Cool light blue palette with crisp styling
+- `lavender-fields` - Soft purple palette with gentle animations
+- `midnight-gold` - Elegant black background with gold accents
+- `midnight-ocean` - Deep navy blues with cyan accents
+- `mint-chocolate` - Brown and mint green combination
+- `neon-nights` - Cyberpunk-inspired magenta and cyan with glowing effects
+- `paper-light` - Light theme with subtle shadows and paper-like appearance
+- `retro-arcade` - Bold primary colors with classic arcade aesthetics
+- `soft-neutral` - Warm beige and cream tones with maximum roundness
+- `stark-minimal` - Pure black and white, zero border radius, minimalist design
+- `strawberry` - Vibrant pink and red gradient theme
 
 ### CSS Custom Properties
 
@@ -251,11 +300,13 @@ VistaView uses CSS custom properties for easy customization:
 
 ## Data Attributes
 
-| Attribute              | Description                                |
-| ---------------------- | ------------------------------------------ |
-| `data-vistaview-src`   | Full-size image URL (for `<img>` elements) |
-| `data-vistaview-alt`   | Alt text for the image                     |
-| `data-vistaview-thumb` | Thumbnail URL (optional)                   |
+| Attribute               | Description                                                                              |
+| ----------------------- | ---------------------------------------------------------------------------------------- |
+| `data-vistaview-src`    | Full-size image URL (overrides href/src)                                                 |
+| `data-vistaview-srcset` | Responsive image srcset (overrides native srcset)                                        |
+| `data-vistaview-alt`    | Alt text for lightbox (overrides the element's alt attribute if you want different text) |
+
+**Note:** Thumbnails are automatically detected from the element's `src` attribute or nested `<img>` element.
 
 ## Keyboard Navigation
 
@@ -269,13 +320,12 @@ VistaView uses CSS custom properties for easy customization:
 
 ## Touch Gestures
 
-| Gesture          | Action                    |
-| ---------------- | ------------------------- |
-| Swipe left/right | Navigate between images   |
-| Swipe up/down    | Close lightbox            |
-| Pinch in/out     | Zoom in/out (when zoomed) |
-| Drag             | Pan image (when zoomed)   |
-| Single tap       | Toggle UI visibility      |
+| Gesture          | Action                  |
+| ---------------- | ----------------------- |
+| Swipe left/right | Navigate between images |
+| Swipe up/down    | Close lightbox          |
+| Pinch in/out     | Zoom in/out             |
+| Drag             | Pan image (when zoomed) |
 
 ## Browser Support
 
@@ -327,27 +377,156 @@ VistaView is built with accessibility in mind:
 
 ```
 vite v6.4.1 building for production...
-✓ 19 modules transformed.
+✓ 60 modules transformed.
+
+[vite:dts] Start generate declaration files...
+dist/styles/stark-minimal.css            1.45 kB │ gzip:  0.36 kB
+dist/styles/dark-rounded.css             1.58 kB │ gzip:  0.38 kB
+dist/styles/autumn-amber.css             1.65 kB │ gzip:  0.41 kB
+dist/styles/forest-moss.css              1.65 kB │ gzip:  0.41 kB
+dist/styles/green-lake.css               1.65 kB │ gzip:  0.41 kB
+dist/styles/ice-crystal.css              1.65 kB │ gzip:  0.41 kB
+dist/styles/soft-neutral.css             1.65 kB │ gzip:  0.40 kB
+dist/styles/strawberry.css               1.65 kB │ gzip:  0.41 kB
+dist/styles/lavender-fields.css          1.65 kB │ gzip:  0.41 kB
+dist/styles/cotton-candy.css             1.68 kB │ gzip:  0.42 kB
+dist/styles/midnight-ocean.css           1.70 kB │ gzip:  0.42 kB
+dist/styles/midnight-gold.css            1.71 kB │ gzip:  0.42 kB
+dist/styles/mint-chocolate.css           1.72 kB │ gzip:  0.43 kB
+dist/styles/neon-nights.css              1.78 kB │ gzip:  0.45 kB
+dist/styles/paper-light.css              1.86 kB │ gzip:  0.45 kB
+dist/styles/ember-glow.css               1.89 kB │ gzip:  0.46 kB
+dist/styles/retro-arcade.css             2.03 kB │ gzip:  0.49 kB
+dist/styles/extensions/image-story.css   2.52 kB │ gzip:  0.72 kB
+dist/style.css                           7.06 kB │ gzip:  1.72 kB
+dist/extensions/logger.js                0.61 kB │ gzip:  0.23 kB
+dist/solid.js                            1.16 kB │ gzip:  0.51 kB
+dist/svelte.js                           1.23 kB │ gzip:  0.54 kB
+dist/extensions/download.js              1.65 kB │ gzip:  0.76 kB
+dist/vue.js                              1.84 kB │ gzip:  0.74 kB
+dist/react.js                            2.12 kB │ gzip:  0.70 kB
+dist/extensions/vimeo-video.js           2.91 kB │ gzip:  1.34 kB
+dist/extensions/streamable-video.js      2.95 kB │ gzip:  1.34 kB
+dist/extensions/vidyard-video.js         2.99 kB │ gzip:  1.35 kB
+dist/extensions/dailymotion-video.js     3.05 kB │ gzip:  1.37 kB
+dist/extensions/wistia-video.js          3.18 kB │ gzip:  1.46 kB
+dist/extensions/youtube-video.js         3.35 kB │ gzip:  1.52 kB
+dist/extensions/google-maps.js           3.91 kB │ gzip:  1.71 kB
+dist/extensions/openstreetmap.js         5.28 kB │ gzip:  2.06 kB
+dist/extensions/mapbox.js                5.48 kB │ gzip:  2.08 kB
+dist/vista-box-CQvGrjln.js              15.00 kB │ gzip:  3.93 kB
+dist/extensions/image-story.js          33.60 kB │ gzip: 10.84 kB
+dist/vistaview.js                       42.03 kB │ gzip: 10.28 kB
+[vite:dts] Declaration files built in 798ms.
+
+✓ built in 1.03s
+
+> vistaview@0.10.7 build:umd
+
+vite v6.4.1 building for production...
+✓ 21 modules transformed.
+
+[vite:dts] Start generate declaration files...
+dist/vistaview.umd.js  42.71 kB │ gzip: 11.57 kB
+[vite:dts] Declaration files built in 786ms.
+
+✓ built in 892ms
+vite v6.4.1 building for production...
+✓ 1 modules transformed.
+
+[vite:dts] Start generate declaration files...
+dist/extensions/download.umd.js  1.58 kB │ gzip: 0.84 kB
+[vite:dts] Declaration files built in 789ms.
+
+✓ built in 822ms
+vite v6.4.1 building for production...
+✓ 1 modules transformed.
+
+[vite:dts] Start generate declaration files...
+dist/extensions/logger.umd.js  0.76 kB │ gzip: 0.37 kB
+[vite:dts] Declaration files built in 767ms.
+
+✓ built in 793ms
+vite v6.4.1 building for production...
+✓ 5 modules transformed.
+
+[vite:dts] Start generate declaration files...
+dist/extensions/image-story.umd.js  25.28 kB │ gzip: 9.81 kB
+[vite:dts] Declaration files built in 771ms.
+
+✓ built in 865ms
+vite v6.4.1 building for production...
+✓ 4 modules transformed.
+
+[vite:dts] Start generate declaration files...
+dist/extensions/youtube-video.umd.js  14.28 kB │ gzip: 4.46 kB
+[vite:dts] Declaration files built in 782ms.
+
+✓ built in 845ms
+vite v6.4.1 building for production...
+✓ 4 modules transformed.
+
+[vite:dts] Start generate declaration files...
+dist/extensions/vimeo-video.umd.js  13.90 kB │ gzip: 4.29 kB
+[vite:dts] Declaration files built in 782ms.
+
+✓ built in 842ms
+vite v6.4.1 building for production...
+✓ 4 modules transformed.
+
+[vite:dts] Start generate declaration files...
+dist/extensions/dailymotion-video.umd.js  14.03 kB │ gzip: 4.31 kB
+[vite:dts] Declaration files built in 802ms.
+
+✓ built in 863ms
+vite v6.4.1 building for production...
+✓ 4 modules transformed.
+
+[vite:dts] Start generate declaration files...
+dist/extensions/wistia-video.umd.js  14.13 kB │ gzip: 4.38 kB
+[vite:dts] Declaration files built in 765ms.
+
+✓ built in 825ms
+vite v6.4.1 building for production...
+✓ 4 modules transformed.
+
+[vite:dts] Start generate declaration files...
+dist/extensions/vidyard-video.umd.js  13.97 kB │ gzip: 4.29 kB
+[vite:dts] Declaration files built in 763ms.
+
+✓ built in 824ms
+vite v6.4.1 building for production...
+✓ 4 modules transformed.
+
+[vite:dts] Start generate declaration files...
+dist/extensions/streamable-video.umd.js  13.94 kB │ gzip: 4.29 kB
+[vite:dts] Declaration files built in 770ms.
+
+✓ built in 831ms
+vite v6.4.1 building for production...
+✓ 4 modules transformed.
 
 [vite:dts] Start generate declaration files...
-dist/styles/dark-rounded.css   1.55 kB │ gzip:  0.41 kB
-dist/style.css                 6.88 kB │ gzip:  1.65 kB
-dist/svelte.js                 0.62 kB │ gzip:  0.29 kB
-dist/solid.js                  1.19 kB │ gzip:  0.54 kB
-dist/vue.js                    1.36 kB │ gzip:  0.59 kB
-dist/react.js                  1.67 kB │ gzip:  0.59 kB
-dist/vistaview.js             43.30 kB │ gzip: 10.43 kB
-[vite:dts] Declaration files built in 664ms.
-
-✓ built in 772ms
+dist/extensions/google-maps.umd.js  14.78 kB │ gzip: 4.66 kB
+[vite:dts] Declaration files built in 769ms.
+
+✓ built in 834ms
+vite v6.4.1 building for production...
+✓ 4 modules transformed.
+
+[vite:dts] Start generate declaration files...
+dist/extensions/mapbox.umd.js  16.07 kB │ gzip: 4.96 kB
+[vite:dts] Declaration files built in 801ms.
+
+✓ built in 863ms
 vite v6.4.1 building for production...
-✓ 13 modules transformed.
+✓ 4 modules transformed.
 
 [vite:dts] Start generate declaration files...
-dist/vistaview.umd.js  33.94 kB │ gzip: 9.29 kB
-[vite:dts] Declaration files built in 657ms.
+dist/extensions/openstreetmap.umd.js  15.87 kB │ gzip: 4.93 kB
+[vite:dts] Declaration files built in 792ms.
 
-✓ built in 751ms
+✓ built in 856ms
 ```
 
 ## License

package/dist/extensions/dailymotion-video.d.ts

@@ -0,0 +1,2 @@
+export * from '../lib/extensions/dailymotion-video'
+export {}

package/dist/extensions/dailymotion-video.js

@@ -0,0 +1,80 @@
+var u = Object.defineProperty;
+var f = (t, e, i) => e in t ? u(t, e, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[e] = i;
+var a = (t, e, i) => f(t, typeof e != "symbol" ? e + "" : e, i);
+import { V as y } from "../vista-box-CQvGrjln.js";
+function r(t) {
+  if (!t) return null;
+  const e = [
+    /dailymotion\.com\/video\/([a-zA-Z0-9]+)/,
+    /dai\.ly\/([a-zA-Z0-9]+)/,
+    /dailymotion\.com\/embed\/video\/([a-zA-Z0-9]+)/
+  ];
+  for (const i of e) {
+    const n = t.match(i);
+    if (n && n[1])
+      return n[1];
+  }
+  return null;
+}
+function p(t) {
+  const e = r(t);
+  if (!e)
+    throw new Error("Invalid Dailymotion video URL");
+  return `https://www.dailymotion.com/thumbnail/video/${e}`;
+}
+class h extends y {
+  constructor(i) {
+    var c;
+    super(i);
+    a(this, "element");
+    a(this, "url");
+    const n = i.elm.config.src;
+    this.url = n;
+    const l = document.createElement("div");
+    l.style.position = "relative";
+    const s = document.createElement("img");
+    l.appendChild(s), s.src = ((c = this.origin) == null ? void 0 : c.image.src) || p(n), s.style.width = "100%", s.style.height = "100%", s.style.objectFit = "cover", s.classList.add("vvw--pulsing"), this.element = l, this.element.classList.add("vvw-img-hi");
+    const { width: m, height: d } = this.getFullSizeDim();
+    if (this.fullH = d, this.fullW = m, this.minW = this.fullW * 0.5, this.maxW = this.fullW, this.element.style.width = `${m}px`, this.element.style.height = `${d}px`, this.setSizes({ stableSize: !1, initDimension: !0 }), this.pos === 0) {
+      const o = document.createElement("iframe");
+      o.frameBorder = "0", o.allow = "autoplay; fullscreen; picture-in-picture", o.allowFullscreen = !0, o.width = "100%", o.height = "100%", o.style.position = "absolute", o.style.top = "0", o.style.left = "0", o.style.opacity = "0", o.style.transition = "opacity 1s ease", o.src = `https://www.dailymotion.com/embed/video/${r(n)}?autoplay=1`, l.appendChild(o), o.onload = () => {
+        o.style.opacity = "1", s.classList.remove("vvw--pulsing");
+      };
+    }
+    this.isLoadedResolved(!0);
+  }
+  // the default full size is the scaled thumbnail size
+  // so we change it to 16:9 full window width size (or max 800px)
+  getFullSizeDim() {
+    const i = Math.min(window.innerWidth, 800);
+    return {
+      width: i,
+      height: i * 9 / 16
+    };
+  }
+  // override to avoid propagating content change event
+  // (because no change will happen on iframe)
+  setFinalTransform() {
+    return super.setFinalTransform({ propagateEvent: !1 });
+  }
+}
+function w() {
+  return {
+    name: "dailymotionVideo",
+    onInitializeImage: (t) => {
+      const e = t.elm.config.src;
+      if (r(e))
+        return new h(t);
+    },
+    onImageView: async (t, e) => {
+      const i = t.images.to[Math.floor(t.images.to.length / 2)];
+      i instanceof h && e.deactivateUi(["download", "zoomIn", "zoomOut"], i);
+    }
+  };
+}
+export {
+  h as VistaDailymotionVideo,
+  w as dailymotionVideo,
+  p as getDailymotionThumbnail,
+  r as parseDailymotionVideoId
+};

package/dist/extensions/dailymotion-video.umd.js

@@ -0,0 +1 @@
+(function(m,f){typeof exports=="object"&&typeof module<"u"?f(exports):typeof define=="function"&&define.amd?define(["exports"],f):(m=typeof globalThis<"u"?globalThis:m||self,f(m.VistaView=m.VistaView||{}))})(this,(function(m){"use strict";var F=Object.defineProperty;var P=(m,f,g)=>f in m?F(m,f,{enumerable:!0,configurable:!0,writable:!0,value:g}):m[f]=g;var h=(m,f,g)=>P(m,typeof f!="symbol"?f+"":f,g);function f(d){const i=window.getComputedStyle(d).objectFit||"",{width:s,height:a}=d.getBoundingClientRect(),e=d.naturalWidth,n=d.naturalHeight;if(!i)return{width:s,height:a};if(!e||!n)return{width:s,height:a};const c=e/n,r=s/a;switch(i){case"fill":return{width:s,height:a};case"none":return{width:e,height:n};case"contain":return c>r?{width:s,height:s/c}:{width:a*c,height:a};case"cover":return c<r?{width:s,height:s/c}:{width:a*c,height:a};case"scale-down":{const l={width:e,height:n},o=c>r?{width:s,height:s/c}:{width:a*c,height:a};return o.width<=l.width&&o.height<=l.height?o:l}}return{width:s,height:a}}class g{static ease(t,i,s){const a=i-t,e=t+a*.2;return Math.abs(a)<s?i:e}static play(t,i,s){if(s()){requestAnimationFrame(()=>{this.play(t,i,s)});return}this.map.get(t)&&(t.element.classList.contains("vvw--load-cancelled")||requestAnimationFrame(()=>{var o,u,w,S,x,b,W,_,C,L;const a=this.map.get(t);if(!a||!t.element||t.element.classList.contains("vvw--load-cancelled"))return;const{current:e,target:n,log:c}=a;let r={};n.width!==void 0&&(r.width=this.ease(e._width,n.width,1)),n.height!==void 0&&(r.height=this.ease(e._height,n.height,1)),((o=n.transform)==null?void 0:o.x)!==void 0&&(r.transform=r.transform||{},r.transform.x=this.ease(e._transform.x,n.transform.x,1)),((u=n.transform)==null?void 0:u.y)!==void 0&&(r.transform=r.transform||{},r.transform.y=this.ease(e._transform.y,n.transform.y,1)),((w=n.transform)==null?void 0:w.scale)!==void 0&&(r.transform=r.transform||{},r.transform.scale=this.ease(e._transform.scale,n.transform.scale,.005)),((S=n.translate)==null?void 0:S.x)!==void 0&&(r.translate=r.translate||{},r.translate.x=this.ease(e._translate.x,n.translate.x,1)),((x=n.translate)==null?void 0:x.y)!==void 0&&(r.translate=r.translate||{},r.translate.y=this.ease(e._translate.y,n.translate.y,1)),r.width!==void 0&&(e.width=r.width),r.height!==void 0&&(e.height=r.height),r.translate&&(e.translate={...e.translate,...r.translate}),r.transform&&(e.transform={...e.transform,...r.transform}),(n.width===void 0||e._width===n.width)&&(n.height===void 0||e._height===n.height)&&(((b=n.transform)==null?void 0:b.x)===void 0||e._transform.x===n.transform.x)&&(((W=n.transform)==null?void 0:W.y)===void 0||e._transform.y===n.transform.y)&&(((_=n.transform)==null?void 0:_.scale)===void 0||e._transform.scale===n.transform.scale)&&(((C=n.translate)==null?void 0:C.x)===void 0||e._translate.x===n.translate.x)&&(((L=n.translate)==null?void 0:L.y)===void 0||e._translate.y===n.translate.y)?(this.map.delete(t),i()):(this.map.set(t,{current:e,target:n,log:c}),this.play(t,i,s))}))}static stop(t){const i=this.map.get(t);return this.map.delete(t),i}static start({vistaImage:t,target:i,onComplete:s,shouldWait:a}){this.stop(t),this.map.set(t,{current:t.state,target:i}),this.play(t,s,a)}}h(g,"map",new Map);class R{constructor(t){h(this,"state");h(this,"parsedSrcSet");h(this,"isReady",!1);h(this,"isThrowing",!1);h(this,"thumb",null);h(this,"pos");h(this,"index");h(this,"config");h(this,"origin");h(this,"initH",0);h(this,"initW",0);h(this,"fullH",0);h(this,"fullW",0);h(this,"maxW",0);h(this,"minW",0);h(this,"defaultWH",200);h(this,"isZoomedIn",!1);h(this,"isCancelled",!1);h(this,"isLoadedResolved",null);h(this,"isLoadedRejected",null);h(this,"isLoaded",new Promise((t,i)=>{this.isLoadedResolved=t,this.isLoadedRejected=i}));h(this,"replacement",null);h(this,"originalParent",null);h(this,"originalNextSibling",null);h(this,"originalStyle","");h(this,"thumbImage",null);h(this,"fittedSize",null);h(this,"maxZoomLevel");h(this,"vistaView");h(this,"transitionState",null);h(this,"transitionShouldWait",()=>!1);h(this,"initPointerCenter",{x:0,y:0});h(this,"onScale");var s;this.state=this.createState(),this.pos=t.pos,this.index=t.index,this.config=t.elm.config,this.parsedSrcSet=t.elm.parsedSrcSet,this.origin=t.elm.origin,this.maxZoomLevel=t.maxZoomLevel,this.vistaView=t.vistaView,this.onScale=t.onScale,t.transitionState&&(this.transitionState=t.transitionState),t.transitionShouldWait&&(this.transitionShouldWait=t.transitionShouldWait),this.initPointerCenter={x:window.innerWidth/2,y:window.innerHeight/2};const i=this.pos===0?(s=this.origin)==null?void 0:s.image:null;if(this.originalParent=(i==null?void 0:i.parentElement)||null,this.originalNextSibling=(i==null?void 0:i.nextSibling)||null,i&&this.originalParent){this.originalStyle=i.style.cssText,this.thumbImage=i;const a=i.cloneNode(!0);this.originalParent.insertBefore(a,i),this.replacement=a,this.thumb=document.createElement("div"),this.thumb.classList.add("vvw-img-lo");const{width:e,height:n}=this.thumbImage?f(this.thumbImage):{width:0,height:0};this.fittedSize={width:e,height:n},this.thumb.appendChild(i),i.style.width="100%",i.style.height="100%",i.style.objectFit=this.origin.objectFit}}createState(){const t=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(i){this._width=i,t.onWidthChange(i)},get height(){return this._height},set height(i){this._height=i,t.onHeightChange(i)},get transform(){return this._transform},set transform(i){this._transform=i,t.onTransformChange(i)},get translate(){return this._translate},set translate(i){this._translate=i,t.onTranslateChange(i)},get lessThanMinWidth(){return this._lessThanMinWidth},set lessThanMinWidth(i){this._lessThanMinWidth=i,t.onLessThanMinWidthChange(i)}}}onLessThanMinWidthChange(t){t?this.element.style.opacity="0.5":this.element.style.opacity=""}onTranslateChange(t){this.element.style.translate=`calc(-50% + ${t.x}px) calc(-50% + ${t.y}px)`}onTransformChange(t){const i=`translate3d(${t.x}px, ${t.y}px, 0px) scale3d(${t.scale}, ${t.scale}, 1)`;this.element.style.transform=i}onWidthChange(t){this.element.style.width=`${t}px`}onHeightChange(t){this.element.style.height=`${t}px`}onImageReady(){}animateZoom(t,i){}scaleMove(t,i,s){}momentumThrow(t){return()=>{}}async init(){await this.isLoaded;const t=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):t.classList.contains("vvw--loaded")||(this.state.width=this.initW,this.state.height=this.initH);const i=()=>{this.isCancelled||g.start({vistaImage:this,target:{width:this.fullW,height:this.fullH},onComplete:()=>{this.isCancelled||(this.isReady=!0,t.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,t.classList.add("vvw--loaded"),t.classList.add("vvw--ready"),this.isReady=!0):t.classList.contains("vvw--loaded")?t.classList.contains("vvw--ready")?(this.isReady=!0,this.onImageReady()):i():(t.classList.add("vvw--loaded"),setTimeout(()=>{this.isCancelled||i()},333))}getFullSizeDim(){const{width:t,height:i}=this.thumb.getBoundingClientRect(),s=t/i;let a=window.innerWidth,e=window.innerHeight;return s>window.innerWidth/window.innerHeight?e=a/s:a=e*s,{width:a,height:e}}setSizes(t={}){var c,r,l;const{stableSize:i=!0,initDimension:s}=t;if(!this.origin)return;const a=this.thumb;let e={width:this.defaultWH,height:this.defaultWH,top:0,left:0};if(a){e=(((c=this.origin)==null?void 0:c.anchor)||this.replacement).getBoundingClientRect();const o=a.style;o.width=e.width+"px",o.height=e.height+"px",o.top="50%",o.left="50%",o.translate="-50% -50%",o.position="fixed",o.objectFit=this.origin.objectFit,o.borderRadius=this.origin.borderRadius;const u=Math.min(Math.max(e.left,-e.width),window.innerWidth+e.width)-window.innerWidth/2+e.width/2,w=Math.min(Math.max(e.top,-e.height),window.innerHeight+e.height)-window.innerHeight/2+e.height/2;o.setProperty("--vvw-init-radius",o.borderRadius),o.setProperty("--vvw-pulse-radius",`calc(1.3 * ${o.borderRadius})`),o.setProperty("--vvw-init-x",`${u}px`),o.setProperty("--vvw-init-y",`${w}px`),s&&(o.setProperty("--vvw-current-x",`${u}px`),o.setProperty("--vvw-current-y",`${w}px`))}if(!s){const{width:o,height:u}=this.thumbImage?f(this.thumbImage):{width:0,height:0};this.fittedSize={width:o,height:u}}const n=this.element;if(this.initW=Math.min(((r=this.fittedSize)==null?void 0:r.width)??0,e.width),this.initH=Math.min(((l=this.fittedSize)==null?void 0:l.height)??0,e.height),n.style.setProperty("--vvw-init-w",this.initW+"px"),n.style.setProperty("--vvw-init-h",this.initH+"px"),n.style.setProperty("--vvw-init-radius",this.origin.borderRadius),n.style.objectFit="cover",!s){if(this.isReady&&!this.isCancelled){const{width:o,height:u}=this.getFullSizeDim();this.fullH=u,this.fullW=o,this.minW=this.fullW*.5}!this.isZoomedIn&&i&&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(t){if(!this.parsedSrcSet||this.parsedSrcSet.length===0)return null;const i=t*(window.devicePixelRatio||1);let s=this.parsedSrcSet[this.parsedSrcSet.length-1];for(const a of this.parsedSrcSet)if(a.width>=i){s=a;break}return s.src}prepareClose(){g.stop(this),this.setFinalTransform()}cancelPendingLoad(){var t;this.isCancelled=!0,(t=this.element)==null||t.classList.add("vvw--load-cancelled")}setInitialCenter(t){this.initPointerCenter=t}destroy(){var t,i;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(),this.replacement=null),(t=this.thumb)==null||t.remove(),(i=this.element)==null||i.remove(),this.thumb=null,this.origin=void 0,this.config={src:"",alt:""}}cloneStyleFrom(t,i){t!=null&&t.element&&(i&&(this.transitionState=i||null),t.element.classList.contains("vvw--loaded")&&(this.element.classList.add("vvw--loaded"),this.state.width=t.state.width,this.state.height=t.state.height),t.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(t={}){const{propagateEvent:i=!0}=t;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},i){const s=this.toObject();this.vistaView.options.onContentChange&&this.vistaView.options.onContentChange(s,this.vistaView),this.vistaView.state.extensions.forEach(a=>{a.onContentChange&&a.onContentChange(s,this.vistaView)})}return{close:!0,cancel:()=>{}}}}}function y(d){if(!d)return null;const t=[/dailymotion\.com\/video\/([a-zA-Z0-9]+)/,/dai\.ly\/([a-zA-Z0-9]+)/,/dailymotion\.com\/embed\/video\/([a-zA-Z0-9]+)/];for(const i of t){const s=d.match(i);if(s&&s[1])return s[1]}return null}function v(d){const t=y(d);if(!t)throw new Error("Invalid Dailymotion video URL");return`https://www.dailymotion.com/thumbnail/video/${t}`}class p extends R{constructor(i){var r;super(i);h(this,"element");h(this,"url");const s=i.elm.config.src;this.url=s;const a=document.createElement("div");a.style.position="relative";const e=document.createElement("img");a.appendChild(e),e.src=((r=this.origin)==null?void 0:r.image.src)||v(s),e.style.width="100%",e.style.height="100%",e.style.objectFit="cover",e.classList.add("vvw--pulsing"),this.element=a,this.element.classList.add("vvw-img-hi");const{width:n,height:c}=this.getFullSizeDim();if(this.fullH=c,this.fullW=n,this.minW=this.fullW*.5,this.maxW=this.fullW,this.element.style.width=`${n}px`,this.element.style.height=`${c}px`,this.setSizes({stableSize:!1,initDimension:!0}),this.pos===0){const l=document.createElement("iframe");l.frameBorder="0",l.allow="autoplay; fullscreen; picture-in-picture",l.allowFullscreen=!0,l.width="100%",l.height="100%",l.style.position="absolute",l.style.top="0",l.style.left="0",l.style.opacity="0",l.style.transition="opacity 1s ease",l.src=`https://www.dailymotion.com/embed/video/${y(s)}?autoplay=1`,a.appendChild(l),l.onload=()=>{l.style.opacity="1",e.classList.remove("vvw--pulsing")}}this.isLoadedResolved(!0)}getFullSizeDim(){const i=Math.min(window.innerWidth,800);return{width:i,height:i*9/16}}setFinalTransform(){return super.setFinalTransform({propagateEvent:!1})}}function H(){return{name:"dailymotionVideo",onInitializeImage:d=>{const t=d.elm.config.src;if(y(t))return new p(d)},onImageView:async(d,t)=>{const i=d.images.to[Math.floor(d.images.to.length/2)];i instanceof p&&t.deactivateUi(["download","zoomIn","zoomOut"],i)}}}m.VistaDailymotionVideo=p,m.dailymotionVideo=H,m.getDailymotionThumbnail=v,m.parseDailymotionVideoId=y,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));

package/dist/extensions/download.d.ts

@@ -0,0 +1,2 @@
+export * from '../lib/extensions/download'
+export {}

package/dist/extensions/download.js

@@ -0,0 +1,35 @@
+const d = '<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>';
+function u() {
+  let o = null, r = null, e = null;
+  return {
+    name: "download",
+    control: () => (e = document.createElement("button"), e.setAttribute("aria-label", "Download"), e.innerHTML = d, e.addEventListener("click", async () => {
+      if (!o || e != null && e.classList.contains("vvw--pulsing")) return;
+      e == null || e.classList.add("vvw--pulsing");
+      let l = await fetch(o), i = await l.blob();
+      const n = l.url, t = r, s = n.split("?")[0].split("#")[0].split(".").pop(), c = t ? `${t}.${s}` : n.split("?")[0].split("#")[0].split("/").pop() || "download." + s, a = document.createElement("a");
+      a.href = URL.createObjectURL(i), a.download = c, document.body.appendChild(a), a.click(), document.body.removeChild(a), i = null, l = null, e == null || e.classList.remove("vvw--pulsing");
+    }), e),
+    onImageView: (l, i) => {
+      const n = l.images.to ? l.images.to[Math.floor(l.images.to.length / 2)] : null;
+      if (!n) {
+        o = null, r = null;
+        return;
+      }
+      const { parsedSrcSet: t, config: s } = n;
+      o = t && t.length > 0 ? t[t.length - 1].src : s.src || null, r = s.alt || null;
+    },
+    onDeactivateUi: (l, i, n) => {
+      l.includes("download") && e && e.setAttribute("disabled", "true");
+    },
+    onReactivateUi: (l, i, n) => {
+      l.includes("download") && e && e.removeAttribute("disabled");
+    },
+    onClose: (l) => {
+      e == null || e.remove(), e = null, o = null, r = null;
+    }
+  };
+}
+export {
+  u as download
+};

package/dist/extensions/download.umd.js

@@ -0,0 +1 @@
+(function(l,o){typeof exports=="object"&&typeof module<"u"?o(exports):typeof define=="function"&&define.amd?define(["exports"],o):(l=typeof globalThis<"u"?globalThis:l||self,o(l.VistaView=l.VistaView||{}))})(this,(function(l){"use strict";const o='<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>';function u(){let s=null,c=null,e=null;return{name:"download",control:()=>(e=document.createElement("button"),e.setAttribute("aria-label","Download"),e.innerHTML=o,e.addEventListener("click",async()=>{if(!s||e!=null&&e.classList.contains("vvw--pulsing"))return;e==null||e.classList.add("vvw--pulsing");let n=await fetch(s),d=await n.blob();const t=n.url,i=c,a=t.split("?")[0].split("#")[0].split(".").pop(),p=i?`${i}.${a}`:t.split("?")[0].split("#")[0].split("/").pop()||"download."+a,r=document.createElement("a");r.href=URL.createObjectURL(d),r.download=p,document.body.appendChild(r),r.click(),document.body.removeChild(r),d=null,n=null,e==null||e.classList.remove("vvw--pulsing")}),e),onImageView:(n,d)=>{const t=n.images.to?n.images.to[Math.floor(n.images.to.length/2)]:null;if(!t){s=null,c=null;return}const{parsedSrcSet:i,config:a}=t;s=i&&i.length>0?i[i.length-1].src:a.src||null,c=a.alt||null},onDeactivateUi:(n,d,t)=>{n.includes("download")&&e&&e.setAttribute("disabled","true")},onReactivateUi:(n,d,t)=>{n.includes("download")&&e&&e.removeAttribute("disabled")},onClose:n=>{e==null||e.remove(),e=null,s=null,c=null}}}l.download=u,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})}));

package/dist/extensions/google-maps.d.ts

@@ -0,0 +1,2 @@
+export * from '../lib/extensions/google-maps'
+export {}