Package Exports

flipbook-viewer
flipbook-viewer/dist/flipbook-viewer.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (flipbook-viewer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Flipbook Viewer

Amazing flip book component with animated pages.

demo

This is a tiny library that can show flip books from any source (including PDF’s, images, etc).

Advantages

Tiny (18 Kb). For comparison, the amazing page-flip is 10 Mb (x1000 times bigger!).
Can use any input as a book simply by plugging in a “book provider”. An example PDF book using the amazing pdfjs from Mozilla can be found in the test folder—book-pdf.js (referenced usage: test-pdf.js)
Supports Panning, Zooming, Liking, Sharing, along with page turning effects.
Raises events to track which pages are being viewed by user.

Usage

Below shows the flip book on the given div with the id div-id:

'use strict'

import { init as flipbook } from 'flipbook-viewer';

...

flipbook(book, 'div-id', (err, viewer) => {
  if(err) console.error(err);

  console.log('Number of pages: ' + viewer.page_count);
  viewer.on('seen', n => console.log('page number: ' + n));

  next.onclick = () => viewer.flip_forward();
  prev.onclick = () => viewer.flip_back();
  zoom.onclick = () => viewer.zoom();

});

The viewer can show any flip book. All you need to do is provide a book interface:

{
  numPages: () => {
    /* return number of pages */
  },
  getPage: (num, cb) => {
    /* return page number 'num'
     * in the callback 'cb'
     * as any CanvasImageSource:
     * (CSSImageValue, HTMLImageElement, 
     *  SVGImageElement, HTMLVideoElement,
     *  HTMLCanvasElement, ImageBitmap,
     *  OffscreenCanvas)
     */
  }
}

Options

An optional opts parameter can be passed in to change the UI:

const opts = {
  backgroundColor: "#353535",
  boxColor: "#353535",
  width: 800,
  height: 600,
}

flipbook(book, 'div-id', opts, (err, viewer) => ...

Events

You can listen on the viewer for which pages were seen:

viewer.on('seen', n => ...)

Programmatic API

The returned viewer can be used to programmatically control the viewer:

viewer.flip_forward()
viewer.flip_back()
viewer.zoom()

Single Page View

Finally, sometimes it makes sense to just show the book as a simple, scrollable view. To pass in only a singlepage:true option:

flipbook(book, 'div-id', {singlepage:true}, (err, viewer) => ...

This will generate a series of canvases with class="flipbook__page" and id="flipbook__pgnum_<n>" that you can style using CSS. The single page view will raise the same seen event that the flipbook viewer does for tracking which pages the user actually flips through.

The single page viewer is currently experimental and very simple. It should work for many PDF's but is not optimized for handling PDF's with a large number of pages.

Enjoy!