Minobi(蓑火) - A HTML5 Book Player
Minobi is a HTML5 book player.
Sample
Here: https://ledyba.github.io/Minobi/
All artworks come from 妖精⊸ロケット(fairy⊸rocket), painted by @ledyba and @momiji-san. Licensed under CC-BY-SA 4.0.
Requirement
Supported browsers
- iOS8 or later.
- Latest Chrome.
Dependencies
For client
Minobi does not depend on any external libraries or frameworks.
For development
Minobi uses npm, babel, webpack to transpile from es6 to es4.
To install,
npm install --save-dev webpack babel-loader babel-preset-es2015
# or
make inst
How to use
Compile
If you modify sources, you need to recompile sources for browsers.
To recompile,
`npm bin`/webpack
# or, just
make
Load a book
Please see example. In a nutshell, you need to prepare "chapter" object that contains information about the book.
Event handling
Viewer
pageenter / finish
This event will be fired when a user enters pages or finishes reading book. The 'pages' argument is a list of page numbers, and it may consist of more than one page numbers, since Minobi displays more than one pages in the screen if applicable.
var chapter = {/* page catalog in json */}/
Minobi.init(document.getElementById("minobi"), chapter, function(viewer) {
//...
/**
* @param {[number]} pages
* @param {string} cause
*/
var pageenterHandler = function(pages, cause) {
// ...
// cause := 'swipe' | 'touch' | 'mouse' | 'keyboard' | 'init' | 'resize' | 'reload' | '?';
};
viewer.addEventListener('pageenter', pageenterHandler);
viewer.removeEventListener('pageenter', pageenterHandler);
/**
* @param {string} cause
*/
var finishHandler = function(pages, cause) {
// ...
// cause is the same as pageenter
};
viewer.addEventListener('finish', finishHandler);
viewer.removeEventListener('finish', finishHandler);
});
Seekbar
activated/deactivated
This event will be fired when a seekbar is activated or deactivated.
var seekbar = new Minobi.Seekbar(/* ... */);
seekbar.addEventListener('activated', function(cause) {
console.log("seekbar activated, by ", cause);
//cause := 'mouse' | 'touch' | '?'
});
seekbar.addEventListener('deactivated', function(cause) {
console.log("seekbar deactivated, by " cause);
//cause := 'mouse' | 'touch' | '?'
});
Customizing behaviour
Viewer
transitionAreaRatio
/** @type {Minobi.Viewer} */
var viewer;
/**
* @type {number} transitionAreaRatioForTouch
* [non-dimension] MUST BE IN [0, 0.5]
* Tap actions will be treated as page transition actions
* when the user released their finger in this range from left/right.
*/
viewer.transitionAreaRatioForTouch = 0.35;
/**
* @type {number} transitionAreaRatioForTouch
* [non-dimension] MUST BE IN [0, 0.5]
* Click actions will be treated as page transition actions
* when the user released their cursor in this range from left/right.
*/
viewer.transitionAreaRatioForMouse = 0.35;
Seekbar
activationPeriod
A seekbar will automatically disappear after this period.
When set to 0, the seekbar won't automatically disappear at all.
var seekbar = new Minobi.Seekbar(/* ... */);
seekbar.activePeriod = 1000;
License
MIT
What 'Minobi' means?
Minobi is a Japanese creature.