IDRViewerは、UIを簡単に構築できるシンプルなビューアコンポーネントとして設計されています。これらは､ページの読み込み､ズーム､ページ表示､レイアウトなどの複雑なタスクをすべて実装し、ビューアとのやり取りに使用できるAPIを提供します｡これらのサンプルUIはそのまま使用することも、独自のUIを構築する方法の出発点または例として使用することもできます。

Viewer API：

ナビゲーション：

• IDRViewer.next(); – 次のページに進む
• IDRViewer.prev(); – 前のページに戻る
• IDRViewer.goToPage(page); – 指定したページに移動

ズーム：

• IDRViewer.zoomIn(); – ドキュメントをズームする
• IDRViewer.zoomOut(); – ドキュメントをズームアウトする
• IDRViewer.setZoom(IDRViewer.ZOOM_AUTO); – ブラウザに最適なズーム（ドキュメントとレイアウトモードに依存）
• IDRViewer.setZoom(IDRViewer.ZOOM_ACTUALSIZE); – ドキュメントを100％で表示
• IDRViewer.setZoom(IDRViewer.ZOOM_FITWIDTH); – 幅に合わせて拡大（連続モードで使用される最大ページ幅）
• IDRViewer.setZoom(IDRViewer.ZOOM_FITHEIGHT); – 高さに合わせてズーム（連続モードで使用される最大ページ高さ）
• IDRViewer.setZoom(IDRViewer.ZOOM_FITPAGE); – ページに合わせてズーム（連続モードで使用される最大ページ）
• IDRViewer.setZoom(0.5); – ドキュメントを指定されたズーム値にズーム

レイアウト：

• IDRViewer.setLayout(IDRViewer.LAYOUT_CONTINUOUS); – レイアウトを連続モードに設定
• IDRViewer.setLayout(IDRViewer.LAYOUT_PRESENTATION); – レイアウトをプレゼンテーションモードに設定
• IDRViewer.setLayout(IDRViewer.LAYOUT_MAGAZINE); – レイアウトをマガジンモードに設定

セレクション：

• IDRViewer.setSelectMode(IDRViewer.SELECT_PAN); – 選択モードをマウスで画面を動かせるパンに設定
• IDRViewer.setSelectMode(IDRViewer.SELECT_SELECT); – 選択モードをテキスト選択に設定

イベント：

ユーザーインタラクションに基づいてUIを更新する方法として、さまざまなイベントを取得することができます。イベントリスナーは IDRViewer.on('eventtype', eventListener); と IDRViewer.off('eventtype', eventListener); を使って追加、削除ができます｡

使用例：

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

ready:

• page (number) – 現在のページ
• pagecount (number) – ドキュメントのページ数
• bounds (array[[number, number]]) – An array of page bounds
• thumbnailType (string) – サムネイルのファイルタイプ (jpg or png)
• selectMode (string) – 現在のセレクションモード
• isMobile (boolean) – ユーザーがモバイルかタブレットからブラウズしているかどうか
• layout (string) – 現在のレイアウトモード
• availableLayouts (array[string]) – 使用可能なレイアウト
• title (string) – 変換されたファイルのタイトル（利用可能な場合）
• bookmarks (object) – 変換されたファイルのブックマーク（利用可能な場合）
• pageType (string) – ページのファイルタイプ (html or svg)
• isFirstPage (boolean)– 現在のページが最初のページの場合
• isLastPage (boolean) – 現在のページが最後のページの場合

pagechange:

• page (number) – 現在のページ
• pagecount (number) – ドキュメントのページ数
• isFirstPage (boolean) – 現在のページが最初のページの場合
• isLastPage (boolean) – 現在のページが最後のページの場合

pageload:

• page (number) – ロードされたページ番号

layoutchange:

• layout (string) – The current layout mode

selectchange:

• type (string) – 現在のレイアウトモード

zoomchange:

• zoomType (string) – 現在のズームモード
• scale (number) – 実際のスケール値
• isMinZoom (boolean) – 現在のズームが最小である場合
• isMaxZoom (boolean) – 現在のズームが最大である場合

デフォルトの設定：

デフォルト設定を変更するには、セットアップが呼び出される前にViewer APIを使用します。

使用例:

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

トランジション：

プレゼンテーションとマガジンのレイアウトモードでは、さまざまなトランジションを利用できます。 関連するCSSクラスをidrviewer要素に追加することで、トランジションを有効にすることができます。

使用例:

<div id=”idrviewer” class=”transition-flip”></div>

プレゼンテーションレイアウトのトランジション：

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

マガジンレイアウトのトランジション：

• transition-magazine