epubjs
Version:
Render ePub documents in the browser, across many devices
157 lines (111 loc) • 3.91 kB
HTML
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ePubJS Promises Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="basic.css">
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/underscore/underscore.js"></script>
<script src="../bower_components/backbone/backbone.js"></script>
<script src="../build/libs/zip.min.js"></script>
<!-- EPUBJS Renderer -->
<script src="../build/epub.min.js"></script>
<script src="../build/hooks.js"></script>
</head>
<body>
<div id="main">
<div id="loader"><img src="../reader/img/loader.gif"></div>
<select id="toc"></select>
</div>
<script type="text/template" id="test-template">
<div id="prev" class="arrow">‹</div>
<div id="area"></div>
<div id="next" class="arrow">›</div>
</script>
<script>
// Book.getMetadata().then(function(meta){
// document.title = meta.bookTitle+" – "+meta.creator;
// });
// Book.getToc().then(function(toc){
// var $select = document.getElementById("toc"),
// docfrag = document.createDocumentFragment();
// toc.forEach(function(chapter) {
// var option = document.createElement("option");
// option.textContent = chapter.label;
// option.ref = chapter.href;
// docfrag.appendChild(option);
// });
// $select.appendChild(docfrag);
// $select.onchange = function(){
// var index = $select.selectedIndex,
// url = $select.options[index].ref;
// Book.goto(url);
// return false;
// }
// });
// Book.ready.all.then(function(){
// document.getElementById("loader").style.display = "none";
// });
// Book.renderTo("area");
var BB = {};
var Library = new Backbone.Model();
// Router
BB.Router = Backbone.Router.extend({
routes: {
"book/:p" : "details"
},
details: function(hash){
var view = new Book.Views.Details({model: Library.get(hash)});
view.render(function(el){
$("#main").html(el);
});
}
});
// Instantiate Router
var router = new BB.Router();
BB.Views = {};
EPUBJS.Hooks.register("beforeChapterDisplay").transculsions = function(callback, renderer){
$(renderer.element).contents().find('body').bind('mouseup', function(){
var selection = $('iframe').contents()[0].getSelection().toString();
});
callback();
};
// This will fetch the book template and render it.
BB.Views.Details = Backbone.View.extend({
el: '#main',
model: Library,
book: null,
events: {
'click #next': 'nextPage',
'click #prev': 'previousPage'
},
template: _.template( $('#test-template').html() ),
//eventually pass book url as a param to initialize
initialize: function() {
this.area = $('<div style="height:100%;"></div>');
this.book = ePub("../reader/moby-dick.epub", { restore: true });
this.book.renderTo(this.area[0]);
},
render: function() {
this.$el.html(this.template());
this.$('#area').html(this.area);
return this;
},
nextPage: function(e){
e.preventDefault();
this.book.nextPage();
},
previousPage: function(e){
e.preventDefault();
this.book.prevPage();
}
});
var view = new BB.Views.Details();
view.render();
</script>
</body>
</html>