epubjs

1.md

https://github.com/futurepress/epub.js ;)

info.md

Use default

const book = ePub("https://s3.amazonaws.com/moby-dick/");
const rendition = book.renderTo("area", {flow: "auto", width: 600, height: 400});

Use arry buffer

// require CORS
const myRequest = new Request('example.epub');
fetch(myRequest).then((res) => {
    return res.arrayBuffer();
}).then((buffer) => {
    const book = ePub(buffer);
    const rendition = book.renderTo("area", {flow: "auto", width: 300, height: 200});
    const displayed = rendition.display();
});

Get cover url

console.log(book.coverUrl().then(v => console.log(v)));

Display first view

const displayed = rendition.display();

// book.loaded.navigation.then(({ toc }) => {
//   console.log('[toc]', toc[0].href);
//   const displayed = rendition.display(toc[0].href);
// });

Write css

rendition.themes.default({
    body: {
        'background-color': '#f00'
    }
});

Write css (than default) Refresh if new section loaded

rendition.hooks.content.register((contents) => {
    return Promise.all([
        contents.addStylesheet('http://example.com/style.css')
    ]);
});

Write css (than others)

rendition.themes.override('background-color', 'blue');

info2.md

Jump next page

const next = document.getElementById('next');
next.addEventListener('click', (e) => {
    e.preventDefault();
    rendition.next();
}, false);

Jump next page

const prev = document.getElementById('prev');
prev.addEventListener('click', (e) => {
    e.preventDefault();
    rendition.prev();
}, false);

info3.md

wip

rendition.hooks.display.register((a, b) => {
        console.log('[hooks-display]', a, b)
    })
rendition.hooks.serialize.register((a, b) => {
        console.log('[hooks-serialize]', a, b)
    })
rendition.hooks.content.register((a, b) => {
        console.log('[hooks-content]', a, b)
    })
rendition.hooks.unloaded.register((a, b) => {
        console.log('[hooks-unloaded]', a, b)
    })
rendition.hooks.layout.register((a, b) => {
        console.log('[hooks-layout]', a, b)
    })
rendition.hooks.render.register((a, b) => {
        console.log('[hooks-render]', a, b)
    })
rendition.hooks.show.register((a, b) => {
        console.log('[hooks-show]', a, b)
    })