Viewer Events

The core viewer types include the Native, Image, Text, and Production viewers. They support registering event handlers for certain viewer-specific events.

This page contains the following information:

• Register viewer event handlers
• Common events

Register viewer event handlers

The core viewer types support registering event handlers on the viewer instance object as follows:

const viewerCollection = reviewApi.viewer.mainCollection;
const nativeViewer = viewerCollection.getViewer("native");
const zoomEventHandler = (e) => console.log(e);
nativeViewer.on("zoom", zoomEventHandler);

The following code sample unregisters the previous event handler:

nativeViewer.off("zoom", zoomEventHandler);

Alternatively, you could register the previous event handler as a one-time event handler. It is then automatically unregistered after the first event is emitted:

nativeViewer.once("zoom", zoomEventHandler);

Common events

The core viewer types generally share a common set of events with a few exceptions, such as the Text Viewer.

See the following section for information about event types:

• Page Events
• Zoom event

Page events

The Native, Image, and Production viewers all emit page-related events. These events indicate when the total page count for a document is changed or when the page currently displayed is changed. See Page Change event and Page Count Change event.

Note: The Text Viewer doesn't paginate document content, so it doesn't raise page-related events. Additionally, certain file types don't emit page-related events in the Native Viewer, including email, audio, video, and short-message files.

Page Change event

The Page Change event is emitted when a user successfully navigates to a new page in a specific document as follows:

• The user scrolls through the document with the mouse.
• The user navigates between pages via the Thumbnail Viewer Card.
• The user navigates with the page navigation buttons.
• The user zooms in or out.
• The Review API invokes a page navigation.

The following code sample illustrates how an event handler is passed a new 0-based page index:

const viewerCollection = reviewApi.viewer.mainCollection;
const imageViewer = viewerCollection.getViewer("image");
const pageChangeEventHandler = (newPageIndex) => console.log(newPageIndex + 1);
imageViewer.on("pageChange", pageChangeEventHandler);

Page Count Change event

The Page Count Change event is emitted when the total number of pages changes for a specific document. Conversion streaming causes this change by allowing the Review Interface to begin displaying content for a conversion that is in progress. During conversion streaming, the Review Interface loads new pages and increases the page count for a document until the conversion is complete.

The following code sample illustrates how the event handler is passed a new total page count:

const viewerCollection = reviewApi.viewer.mainCollection;
const nativeViewer = viewerCollection.getViewer("native");
const pageCountChangeEventHandler = (newPageCount) => console.log(newPageCount);
nativeViewer.on("pageCountChange", pageCountChangeEventHandler);

Zoom event

The zoom event is emitted when a user zooms in or out in a viewer.

The event handler is passed a IZoomEvent as an argument. The IZoomEvent includes the current zoom index and the current zoom mode as follows:

const viewerCollection = reviewApi.viewer.mainCollection;
const nativeViewer = viewerCollection.getViewer("native");
const zoomEventHandler = (e) => {
  console.log(e.zoomIndex);
  console.log(e.zoomMode);
};
nativeViewer.on("zoom", zoomEventHandler);