VistaState Class

The VistaState class manages the internal state of a VistaView instance. It tracks the current state of the lightbox, including open/close status, current image, zoom level, and registered extensions.

Overview

VistaState is automatically instantiated by VistaView and accessible via the state property. It provides a centralized location for all runtime state information.

Access:

const viewer = new VistaView('.gallery-item');
viewer.open();

console.log(viewer.state.currentIndex); // Current image index
console.log(viewer.state.zoomedIn); // Zoom state
console.log(viewer.state.elmLength); // Total images

Properties

open

open: boolean;

Whether the lightbox is currently open. true when the lightbox is visible, false when closed.

settled

settled: boolean;

Whether the open transition animation has completed. Useful for determining if the lightbox is fully settled after opening.

closing

closing: boolean;

Whether the lightbox is currently in the process of closing. true during the close transition animation.

zoomedIn

zoomedIn: boolean;

Whether the current image is zoomed beyond its minimum scale. false when the image is at fit-to-viewport scale, true when zoomed in.

children

children: {
  htmls: HTMLElement[];
  images: VistaBox[];
}

Current DOM elements and image instances in the view.

Properties:

• htmls - Array of HTML container elements (.vvw-item divs)
• images - Array of VistaBox instances (images or custom content)

The arrays include the current image plus preloaded images based on the preloads configuration option.

Example:

const viewer = new VistaView('.gallery-item', { preloads: 2 });
viewer.open(5);

// With preloads: 2, children includes images at indices 3, 4, 5, 6, 7
console.log(viewer.state.children.images.length); // 5
console.log(viewer.state.children.images[2].index); // 5 (center image)

currentIndex

currentIndex: number;

Zero-based index of the currently displayed image. -1 when the lightbox is closed.

Example:

console.log(viewer.state.currentIndex); // 3 (viewing 4th image)

elmLength

elmLength: number;

Total number of images in the gallery. Updated automatically when reset() is called.

Example:

const viewer = new VistaView('.gallery-item');
console.log(viewer.state.elmLength); // 10 (total images)

abortController

abortController: AbortController;

Controller for canceling in-progress transitions. Automatically reset before each navigation to abort the previous transition.

Use Case: Extensions can listen to the abort signal to cancel long-running operations when the user navigates quickly.

Example:

const signal = viewer.state.abortController.signal;

signal.addEventListener('abort', () => {
  console.log('Transition was canceled');
});

isReducedMotion

isReducedMotion: boolean;

Whether the user has requested reduced motion via system preferences. Detected from the prefers-reduced-motion media query.

Example:

if (viewer.state.isReducedMotion) {
  console.log('User prefers reduced motion');
}

extensions

extensions: Set<VistaExtension>;

Set of registered extension instances. Populated from the extensions configuration option.

Example:

import { logger } from 'vistaview/extensions/logger';

const viewer = new VistaView('.gallery-item', {
  extensions: [logger()],
});

console.log(viewer.state.extensions.size); // 1

Related

• VistaView Class - Main controller class that uses VistaState
• VistaExtension - Extension interface type
• Extensions - Extension system documentation