@pdftron/webviewer-reading-mode/README.md

WebViewer reading mode for viewing PDF files.

# webviewer-reading-mode
A node module to view PDF in reading mode. It will convert the given PDF file to html, and then render it in given viewport.

## Installation
```
npm i @pdftron/webviewer-reading-mode
```

## Usage
### 1. Import
#### In standalone HTML page
Import `dist/webviewer-reading-mode.js` into your page.
#### Using NPM
```
import WebViewerReadingMode from "@pdftron/webviewer-reading-mode";
```
### 2. Call the 'initialize' API to initialize WebViewerReadingMode
Example:
```js
/**
 * Initialize a new instance of WebViewerReadingMode and return it.
 * @param {PDFNet} pdfNet The PDFNet lib.
 */
this.wvReadingMode = WebViewerReadingMode.initialize(PDFNet);
```
### 3. Call the 'render' API to render PDF in reading mode
Example:
```js
/**
 * Render ReadingModeComponent in the given viewer element.
 * @param {Promise<PDFDoc>} doc The PDFDoc object of the PDF file to render.
 * @param {Element} viewerElement The element that ReadingModeComponent is rendered in.
 * @param {object} options Render options. Note: All options are optional.
 * @param {function} options.pageNumberUpdateHandler Function to handle page number update event.
 * @param {number} options.pageNum The page number to go to after initialization. (1-indexed) If not set, will default to 1.
 * @param {boolean} options.isSinglePageMode Default: True. True will render in single-page mode, false will render in continuous-page mode.
 * @param {function} options.pageCountHandler Function to handle page count.
 * @param {function} options.editStyleHandler Function to handle Edit Style button click event.
 */
// Render a file from url in single-page mode, and go to the 3rd page after initial load.
this.wvReadingMode.render(
  PDFNet.PDFDoc.createFromURL(url),
  document.getElementById('web-viewer'),
  {
    pageNumberUpdateHandler: (pageNum) => { /* Handle page number updated */ },
    pageNum: 3,
    isSinglePageMode: true,
    pageCountHandler: (pageCount) => { /* Handle page count updated */ },
    editStyleHandler: (annotColor, annotType, setAnnotColor, doneSetAnnotColor) => { /* Handle Edit Style button click event */ }
  }
);
```
### 4. Call the 'goToPage' API to jump to specific page
Example:
```js
/**
 * Go to the page with given page number.
 * @param {number} pageNum The page number to go to.
 */
// Go to 5th page
this.wvReadingMode.goToPage(5);
```
### 5. Call the 'setZoom' API to zoom in/out
Example:
```js
/**
  * Set the zoom level for all pages.
  * @param {number} zoomLevel The zoom level to set.
  */
// Zoom to 150%
this.wvReadingMode.setZoom(1.5);
```
### 6. Call the 'setAddAnnotConfig' API to set configuration for adding new annotation
Example:
```js
/**
  * Set the configuration for adding new annotation.
  * @param {object} config Add annotation config. { type: AnnotationType, color: string }
  */
// Set the current add annotation configuration to be Highlight with red color.
this.wvReadingMode.setAddAnnotConfig({ type: WebViewerReadingMode.Highlight, color: '#ff0000' });
```
### 7. Call the 'unmount' API to unmount ReadingModeComponent
Example:
```js
/**
 * Unmount ReadingModeComponent from the current viewerElement.
 */
this.wvReadingMode.unmount();
```

## Running samples
Clone the project from https://github.com/XodoDocs/webviewer-reading-mode.git.
Go to the project directory and run:
```
npm i
npm run build
npm start
```
Then it will open the browser redirect to the samples page.