DOM events and the JavaScript API

Events#

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

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

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

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

Foliora Pro adds foliora:lead and, for EPUB, foliora:relocated. See Pro hooks.

FolioraViewer#

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

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

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

Foliora's PDF.js#

window.Foliora.pdfjsLib is Foliora's bundled PDF.js 3.11.174. Use it instead of window.pdfjsLib: Foliora 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 FolioraConfig.workerSrc.