Viewer API
@imposia/viewer が提供するページ表示、Reader、Inspector のコントローラーです。
@imposia/viewer は文書を表示します。mountPageViewer は確定済みの Core ページ文書の canonical iframe を表示します。ページ分割は実行しません。
mountPageViewer
mountPageViewer(container: HTMLElement, document: PageDocument, options?: PageViewerOptions): PageViewerController;
validatePageViewerOptions(document: PageDocument, options?: PageViewerOptions): void;検証は、文書、sandbox、テーマ、任意の reader を同期的に確認します。validatePageViewerOptions は、マウントせずに同じ検証だけを実行します。
マウントは Core の確定後に、iframe 自身のコンテナーで
mountPageViewer には確定済みの PageDocument が必要で、container は canonical iframe の現在の親要素でなければなりません。他の要素を渡すと例外をスローします。Viewer は Core の iframe をその場で表示します。移動も複製も再作成もしません。
PageViewerOptions は mode?: "continuous" | "single" | "spread"、spread?: { cover? }、zoom?、controls?、theme?、inspector?、reader? を受け取ります。controls の既定値は true です。false にすると、組み込みの操作バーなしで表示コントローラーだけを保てます。テーマは、名前が --imposia-viewer- で始まる CSS プロパティのマップです。
PageViewerController
| メンバー | 戻り値 | 効果と制約 |
|---|---|---|
goToPage(page)、nextPage()、previousPage() | void | 現在のページまたは実効的な見開きの範囲内に収めて移動します。 |
setZoom(zoom) | void | 有限の入力を丸めて範囲内に収めます。 |
setMode(mode)、setSpreadCover(cover) | void | 要求する表示モードと表紙レイアウトを変更します。 |
setTheme(theme?) | void | Viewer 変数を差し替え、またはクリアします。 |
subscribe(listener) | () => void | まず現在の状態を即時に通知し、以後の表示変更を通知します。戻り値は購読解除関数です。 |
refresh(document) | void | 同じ iframe と、より新しい世代が必要です。破棄後や不正な入力には例外をスローします。 |
print() | Promise<void> | 破棄後や iframe を利用できない場合は reject されます。 |
destroy() | void | Viewer の結び付きと UI を取り除き、Core の iframe コンテナーを復元します。何度でも呼べます。 |
state | PageViewerState | ページ、ページ数、ズーム、要求モードと実効モード、status、世代です。 |
reader | PublicationReaderController | undefined | reader オプションを渡した場合に存在します。 |
inspector | ViewerInspectorController | undefined | inspector: true の場合に存在します。 |
Viewer の CSS は .imposia-viewer にスコープされます。body のスタイル、プレビューの寸法、背景、周囲のスクロールはホストが所有します。
Publication Reader とディープリンク
Reader オプションには、表示中の PublicationDocument そのものを所有する PublicationController が必要です。initialDeepLink と onDeepLinkChange を含められます。
PublicationReaderController のメンバー | 戻り値・効果 |
|---|---|
openTableOfContents()、closeTableOfContents()、toggleTableOfContents() | 目次パネルを操作します。 |
openThumbnails()、closeThumbnails()、toggleThumbnails() | サムネイルを操作します。 |
selectThumbnail(thumbnail) | 現在の世代のサムネイルへ移動します。別の世代のサムネイルには例外をスローします。 |
openSearch()、closeSearch()、toggleSearch() | 検索を操作します。 |
search(query) | readonly PublicationSearchResult[] です。 |
nextSearchResult()、previousSearchResult() | PublicationSearchResult | undefined です。 |
selectSearchResult(result) | 結果を選択し、そこへ移動します。 |
navigate(destination) | 検証して移動し、ディープリンクを通知します。 |
restoreDeepLink(value) | PublicationDestination | undefined。解決して移動します。 |
state | パネルの状態、サムネイル、移動先とディープリンク、検索語、結果、選択中の結果インデックスです。 |
すべての Reader メソッドは、破棄後に例外をスローします。補助パネルは 1 つ開くと他が閉じます。PublicationThumbnail はページ、世代、寸法、previewLineCount を公開します。
serializePublicationDeepLink(destination: PublicationDestination): string;
restorePublicationDeepLink(value: string, controller: PublicationController): PublicationDestination | undefined;シリアライズは、移動先の ID からバージョン付きの値を作ります。単体の復元ヘルパーは正規のエンコードだけを受け入れ、現在の世代に対して解決します。Reader のメソッドと違い、移動は行いません。
Viewer Inspector
ViewerInspectorController のメンバー | 戻り値・効果 |
|---|---|
open()、close()、toggle() | 診断パネルを操作します。破棄後は例外をスローします。 |
select(warning) | 位置を特定できた警告へ移動して強調します。別の世代の警告には例外をスローします。 |
state | { open, warnings, selected } です。 |
Inspector パネルは、目次、検索、サムネイルと補助パネルの枠を共有します。どれか 1 つを開くと他は閉じます。印刷時には表示されず、EPUB 書き出しにも含まれません。