DOM events and the JavaScript API

Events#

The viewer dispatches bubbling CustomEvents on its .flipset-viewer element. event.detail always includes fileUrl plus:

Event	Extra detail
flipset:ready	numPages, viewMode
flipset:pagechange	page, numPages
flipset:zoom	zoom, fitMode (page, width, none)
flipset:search	query, hitsCount, currentHit
flipset:print	page, pages
flipset:download	—
flipset:error	stage (render)

document.addEventListener( 'flipset:pagechange', function ( e ) {
	console.log( e.detail.page, 'of', e.detail.numPages );
} );

// Send a GA4 event when someone finishes a document.
document.addEventListener( 'flipset:pagechange', function ( e ) {
	if ( e.detail.page === e.detail.numPages && window.gtag ) {
		gtag( 'event', 'pdf_finished', { file: e.detail.fileUrl } );
	}
} );

Flipset Pro adds flipset:lead and, for EPUB, flipset:relocated. See Pro hooks.

FlipsetViewer#

Method	Use
FlipsetViewer.bind( element )	Start a .flipset-viewer added after page load (AJAX, tabs, popups).
FlipsetViewer.setViewMode( element, mode )	Switch to page, scroll, spread or flip.
FlipsetViewer.rebind( element )	Destroy and start again (for example after changing data-file).

var el = document.querySelector( '#my-modal .flipset-viewer' );
FlipsetViewer.bind( el );
FlipsetViewer.setViewMode( el, 'flip' );

Viewers marked data-flipset-defer are not started automatically — the library and the Pro lightbox use this to start viewers only when opened.

Flipset's PDF.js#

window.Flipset.pdfjsLib is Flipset's bundled PDF.js 3.11.174. Use it instead of window.pdfjsLib: Flipset restores the global to whatever it was before (another plugin's copy, or nothing), so it never collides with other PDF plugins. Point workerSrc at FlipsetConfig.workerSrc.