Link

IDRViewer JavaScript API

The IDRViewer is designed to be a simple viewing component that is easy to build a UI around. It implements all the complex tasks such as page loading, zoom, page display & layouts, etc and provides a clean API that can be used to interact with the viewer. Several example UIs are provided that can be used as they are, or can serve as a starting point or example of how to build your own user interface.

Viewer API:

  • IDRViewer.next(); - Go to the next page
  • IDRViewer.prev(); - Go to the previous page
  • IDRViewer.goToPage(page); - Go to the specified page

Zoom:

  • IDRViewer.zoomIn(); - Zoom the document in
  • IDRViewer.zoomOut(); - Zoom the document out
  • IDRViewer.setZoom(IDRViewer.ZOOM_AUTO); - Zoom to best fit the browser (dependant on document & layout mode)
  • IDRViewer.setZoom(IDRViewer.ZOOM_ACTUALSIZE); - Zoom the document to 100%
  • IDRViewer.setZoom(IDRViewer.ZOOM_FITWIDTH); - Zoom to fit width (largest page width used in continuous mode)
  • IDRViewer.setZoom(IDRViewer.ZOOM_FITHEIGHT); - Zoom to fit height (largest page height used in continuous mode)
  • IDRViewer.setZoom(IDRViewer.ZOOM_FITPAGE); - Zoom to fit the page (largest page used in continuous mode)
  • IDRViewer.setZoom(0.5); - Zoom the document to a specified zoom value

Layout:

  • IDRViewer.setLayout(IDRViewer.LAYOUT_CONTINUOUS); - Sets the layout to continuous mode
  • IDRViewer.setLayout(IDRViewer.LAYOUT_PRESENTATION); - Sets the layout to presentation mode
  • IDRViewer.setLayout(IDRViewer.LAYOUT_MAGAZINE); - Sets the layout to magazine mode

Selection:

  • IDRViewer.setSelectMode(IDRViewer.SELECT_PAN); - Sets selection mode to mouse panning
  • IDRViewer.setSelectMode(IDRViewer.SELECT_SELECT); - Sets the selection mode to select text

Events:

A variety of events are available to listen to as a way to update the UI based on user interaction. Event listeners can be added and removed using IDRViewer.on(‘eventtype’, eventListener); and IDRViewer.off(‘eventtype’, eventListener);

Example:

IDRViewer.on('pagechange', function(data) {
    console.log("navigated to page " + data.page);
});

ready:

  • page (number) - The current page
  • pagecount (number) - The number of pages in the document
  • bounds (array[[number, number]]) - An array of page bounds
  • thumbnailType (string) - The file type of thumbnails (jpg or png)
  • selectMode (string) - The current selection mode
  • isMobile (boolean) - Whether the user is browsing from a mobile or tablet
  • layout (string) - The current layout mode
  • availableLayouts (array[string]) - The layouts that are available to use
  • title (string) - The title of the converted file (if available)
  • bookmarks (object) - The bookmarks in the converted file (if available)
  • pageType (string) - The file type of the page (html or svg)
  • isFirstPage (boolean) - If the current page is the first
  • isLastPage (boolean) - If the current page is the last

pagechange:

  • page (number) - The current page
  • pagecount (number) - The number of pages in the document
  • isFirstPage (boolean) - If the current page is the first
  • isLastPage (boolean) - If the current page is the last

pageload:

  • page (number) - The page number that was loaded

pageunload:

  • page (number) - The page number that was unloaded

layoutchange:

  • layout (string) - The current layout mode

selectchange:

  • type (string) - The current select mode

zoomchange:

  • zoomType (string) - The current zoom mode
  • scale (number) - The actual scale value
  • isMinZoom (boolean) - If the current zoom is the minimum
  • isMaxZoom (boolean) - If the current zoom is the maximum

Default Settings:

To change the default settings, the Viewer API can be used before the setup function is called.

Example:

IDRViewer.goToPage(2); // Set default page
IDRViewer.setZoom(IDRViewer.ZOOM_FITPAGE); // Set default zoom
IDRViewer.setLayout(IDRViewer.LAYOUT_PRESENTATION); // Set default layout
IDRViewer.setSelecMode(IDRViewer.SELECT_SELECT); // Set default select mode
IDRViewer.setup(); // Load viewer with new default settings

Transitions:

Various transitions are available in the presentation and magazine layout modes. Transitions can be enabled by adding the relevant CSS class to the IDRViewer element.

Example:

Presentation Layout Transitions:

  • transition-flip
  • transition-slide
  • transition-throw
  • transition-fade

Magazine Layout Transitions:

  • transition-magazine