RiffleViewer

RiffleViewer

Description:

  • A Riffle viewer.

    A viewer is a DOM element (a <canvas>) with the viewer API mixed in. Create it with createViewer, append it to the document, then call these methods directly on it — there is no separate controller object or mounting step. Riffle imposes no wrapper element or layout styling; you decide how the element is positioned, scrolled, and decorated.

Source:

A Riffle viewer.

A viewer is a DOM element (a <canvas>) with the viewer API mixed in. Create it with createViewer, append it to the document, then call these methods directly on it — there is no separate controller object or mounting step. Riffle imposes no wrapper element or layout styling; you decide how the element is positioned, scrolled, and decorated.

Members

(readonly) contentZoom :number

Description:

  • Current visual zoom factor (1 = fit to viewport).

Source:

Current visual zoom factor (1 = fit to viewport).

Type:
  • number

(readonly) currentSpread :number

Description:

  • Index of the settled spread currently on screen.

Source:

Index of the settled spread currently on screen.

Type:
  • number

(readonly) effectiveSpread :number

Description:

  • The target spread, including any in-flight page turn. Use this for "where are we heading" reads (e.g. a page counter that updates the moment a turn starts rather than when it settles).

Source:

The target spread, including any in-flight page turn. Use this for "where are we heading" reads (e.g. a page counter that updates the moment a turn starts rather than when it settles).

Type:
  • number

(readonly) isAnimating :boolean

Description:

  • Whether a page turn is currently animating.

Source:

Whether a page turn is currently animating.

Type:
  • boolean

(readonly) numSpreads :number

Description:

  • Total number of two-page spreads in the current document.

Source:

Total number of two-page spreads in the current document.

Type:
  • number

(readonly) pageCount :number

Description:

  • Number of pages in the current document.

Source:

Number of pages in the current document.

Type:
  • number

Methods

adjustZoom(direction) → {void}

Description:

  • Zooms in or out by one step.

Source:
Parameters:
Name Type Description
direction number

Positive to zoom in, negative to zoom out.
Returns:
Type
void

goToPage(page) → {void}

Description:

  • Navigates so a given page is visible, focusing it within its spread. A no-op if the page is out of range.

Source:
Parameters:
Name Type Description
page number

1-based page number (1 is the first page).
Returns:
Type
void
Description:

  • Navigates by a relative number of spreads, animating a page turn. Respects a turn already in flight (it moves from the effective target, not the settled spread).

Source:
Parameters:
Name Type Description
delta number

Spreads to move, e.g. +1 (next) or -1 (previous).
Returns:
Type
void
Description:

  • Navigates to a spread by index, animating a page turn.

Source:
Parameters:
Name Type Description
spreadIndex number

Destination spread index.
Returns:
Type
void

off(event, handler) → {void}

Description:

  • Removes a previously registered event listener.

Source:
Parameters:
Name Type Description
event string

Event name.
handler function

The same handler reference passed to on.
Returns:
Type
void

on(event, handler) → {void}

Description:

  • Subscribes to a viewer event. See the Listen for events guide for the event names and their payloads.

Source:
Parameters:
Name Type Description
event string

Event name, e.g. "spreadchange".
handler function

Called with the event payload.
Returns:
Type
void

openHocr(fileOrText, optionsopt) → {Promise.<{pages: Array.<Object>, attached: number}>}

Description:
Source:
Parameters:
Name Type Attributes Default Description
fileOrText File | Blob | string

hOCR markup, or a file/blob containing it.
options Object <optional>
 {}

Text-attachment options.

Properties
Name Type Attributes Default Description
pageOffset number <optional>
 0

Index of the first document page the hOCR pages map to.
Returns:

Resolves with the parsed pages and the attached count (number of document pages updated).

Type
Promise.<{pages: Array.<Object>, attached: number}>

openImages(files) → {Promise.<void>}

Description:

  • Displays a list of image files, one page per image. Fits the layout to the first image. Non-image files in the list are ignored.

Source:
Parameters:
Name Type Description
files Array.<File> | FileList

The images to display.
Returns:

Resolves once the first spread is on screen.

Type
Promise.<void>

openPdf(source) → {Promise.<void>}

Description:

  • Loads a PDF and displays its first spread. To load from a URL, fetch() it first and pass the resulting ArrayBuffer.

Source:
Parameters:
Name Type Description
source File | Blob | ArrayBuffer

The PDF to display.
Returns:

Resolves once the first spread is on screen.

Type
Promise.<void>

pagesInSpread(spreadIndex) → {Array.<number>}

Description:

  • The 1-based page number(s) visible in a spread — e.g. [3, 4], or [1] for a single-page spread. Empty when the spread has no source pages. Handy for a "page N of M" readout: viewer.pagesInSpread(viewer.effectiveSpread).

Source:
Parameters:
Name Type Description
spreadIndex number

Spread to inspect.
Returns:

1-based page numbers on that spread.

Type
Array.<number>

resetZoom() → {void}

Description:

  • Restores the fit-to-viewport zoom.

Source:
Returns:
Type
void

setSource(source) → {void}

Description:
Source:
Parameters:
Name Type Description
source PageSource

The source to display.
Returns:
Type
void

setViewport(element) → {void}

Description:

  • Sets the element used for zoom measurement and scroll preservation. Defaults to the viewer's parent; set this when the viewer isn't a direct child of the element you scroll.

Source:
Parameters:
Name Type Description
element HTMLElement

The scroll/viewport element.
Returns:
Type
void

setZoom(zoom, anchoropt) → {void}

Description:

  • Sets the book zoom, clamped to 0.5–6. An optional point in browser client coordinates keeps that point on the book beneath a pinch gesture.

Source:
Parameters:
Name Type Attributes Description
zoom number

Absolute zoom (1 fits the spread).
anchor Object <optional>

Zoom focal point.
Returns:
Type
void