Documentation

For download and basic HTML setup read the Getting startet page.
On this page you will find a list of all available Options, Methods, Events and CSS Variables.

Options

You can set the options for each vbook either using HTML attributes or in the initialization script.

Set options using the HTML attributes:

<div class="vbook" data-width="19" data-height="26.5"></div>

Set options in the initialization Script:

<script>
    const mybook = new Vbook('.vbook',{
        width:19,
        heihgt:26.5
    });
</script>

Note: We recommend using HTML attributes for book specific options such as size or color. Use the initialization script options for global settings and behaviors like uiButtons or uiPagination.

Option	Description	Type	Default
`width`	width of the book in millimetres	number	180
`height`	height of the book in millimetres	number	240
`spine`	thikness of the book in millimetres	number	24
`rotationX`	initial X-rotation in degrees	number	0
`rotationY`	initial Y-rotation in degrees	number	0
`rotationZ`	initial Z-rotation in degrees	number	0
`coverThikness`	Thikness of cover material in millimetres	number	2
`coverColor`	Color of cover material (front & back)	color	#dddddd
`spineThikness`	Thikness of the spine material in millimetres	number	2
`spineColor`	Color of spine materia	color	#dddddd
`pages`	Number of pages. `0` = user will not be able to open the book. `auto` = page number will adapt to the number of pages you have added in HTML	number	10
`pagesColor`	Color of the pages	color	#ffffff
`pagesOffset`	Offset of book pages to the cover in millimetres. 0 = no offset (soft cover binding)	number	2
`uiButtons`	`0` = hidden left/right navigation arrows `1` = visible buttons	boolean	false
`uiPagination`	`0` = no pagination `1` = visible pagination	boolean	false
`uiPaginationLimit`	limits the number of visible dots	number	0

Methods

After initialization we can control the book with some predefined methods.

Example of vbook initialization and call to the open method:

<script>
    const mybook = new Vbook('.vbook');
    mybook.open();
</script>

Method	Description
`init()`	initialize a vbook instance
`destroy()`	destroy a vbook insatance. HTML will be removed, events unbind
`resize()`	call the resize function
`disable()`	disable vbook interactions
`enable()`	enable vbook interactions
`setfocus()`	sets the `active` class and listen to keyboard interactions
`unfocus()`	removes the active class and removes the keyboard interactions
`pageNext()`	flip pages to next page
`pagePrev()`	flip pages to prev page
`pageNum(num)`	flip pages to page number `num`
`pageFirst()`	flip pages to first page
`pageLast()`	flip pages to last page
`hover()`	add `hover` class to vbook container
`leave()`	remove `hover` class from vbook container
`open()`	open the vbook
`close()`	close the vbook
`rotate(x,y,z)`	rotate the vbook `x` = X-rotation `y` = Y-rotation `z` = Z-rotation

Events

Vbook comes with a bunch of useful events you can listen. Events can be assigned in two ways:

1. Using on parameter on vbook initialization

const mybook = new Vbook('.vbook', {
  on: {
    init: function () {
      // do something
    }
  }
});

2. Using on method after vbook initialization.

const mybook = new Vbook('.vbook');
mybook.on('init', function () {
  // do something
});

Here a list of all events

Event	Description
`init`	Occurs after vbook initialization
`initBefore`	Occurs before vbook initialization
`activate`	Occurs on vbook activation
`deactivate`	Occures on vbook deactivation
`open`	Occurs on vbook open
`openBefore`	Occurs before vbook open
`close`	Occurs on vbook close
`closeBefore`	Occurs before vbook close
`resize`	Occurs on vbook resize `h` = vbook container height `w` = vbook container width
`rotation`	Occurs on vbook rotation `x` = X-Rotation `y` = Y-Rotation `z` = Z-Rotation
`pageFlip`	Occurs on page Flip
`pageFlipBefore`	Occurs before page Flip
`pageClick`	Occurs on page click `num` = page number `page` = 'left', 'right'
`bookInsideClick`	Occurs on book click
`bookOutsideClick`	Occurs on container click
`buttonClick`	Occurs on navigation button click `which` = 'left', 'right'
`paginationClick`	Occurs on pagination dot click