r2-navigator-web's Introduction

r2-navigator-web

A web-based Readium Navigator implementation, written in TypeScript.

Usage

(WIP, placeholder)

import ReadiumNavigator from '@readium/navigator-web';

Development

Requirements

Node.js 10+
npm / yarn

Getting started

Clone this repository
Run npm install
Use commands such as:
- npm run build Build project.
- npm run test Run the test suite.

r2-navigator-web's People

Contributors

Stargazers

Watchers

r2-navigator-web's Issues

Handle hyperlink navigation

Currently, click a element directly, will not "notify" the r2-navigator-web, the iframe will go to the link directly, and cause problems.

It looks like there is no implementation about this part.

How can I get updated cfi when scrolling

I'm testing the navigator-web, here is what I got so far.

I managed to render my Epub at spine of index 4, however I set the view as vertical and ScrollMode to be SpineItem. Here is the code

import * as ReadiumNavigator from '@readium/navigator-web'
let { ReadingSystem, Publication } = ReadiumNavigator
let baseUrl = "/path/to/json"
let hostContainer: HTMLElement = document.querySelector("#container");
(async function () {
    let pub = await Publication.fromURL(baseUrl)
    let readingSystem = new ReadingSystem()
    readingSystem.initRenderer(hostContainer);
    let rendition = readingSystem.openRendition(pub)
    rendition.setViewAsVertical(true)
    rendition.viewport.setViewportSize(600, 800);
    rendition.setPageLayout({
        spreadMode: ReadiumNavigator.SpreadMode.FitViewportSingleSpread,
    })
    await rendition.render()
    rendition.viewport.setScrollMode(ReadiumNavigator.ScrollMode.SpineItem)
    rendition.viewport.addLocationChangedListener(()=>{
        console.log('updated')
    })
    await rendition.viewport.renderAtSpineItem(4)
}());