mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-04 15:09:16 +02:00
164 lines
4.9 KiB
HTML
164 lines
4.9 KiB
HTML
<!DOCTYPE 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>-->
|
||
|
||
<script>
|
||
"use strict";
|
||
|
||
//var Book = ePub("/reader/moby-dick/", { restore: true });
|
||
|
||
|
||
</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();
|
||
debugger;
|
||
});
|
||
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>
|