mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-05 15:32:55 +02:00
168 lines
4.7 KiB
HTML
168 lines
4.7 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>
|
||
|
||
<!-- EPUBJS Renderer -->
|
||
<script src="/build/epub.min.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="abcdef">
|
||
<div id="prev" class="arrow">‹</div>
|
||
<div id="area"></div>
|
||
<div id="next" class="arrow">›</div>
|
||
<label><%= test %></label>
|
||
</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({test: 'test hey ho!'});
|
||
|
||
// 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 = {};
|
||
|
||
// This will fetch the book template and render it.
|
||
BB.Views.Details = Backbone.View.extend({
|
||
|
||
el: '#main',
|
||
|
||
book: ePub("/reader/moby-dick/", { restore: true }),
|
||
|
||
model: Library,
|
||
|
||
events: {
|
||
'click #next': 'nextPage',
|
||
'click #previous': 'previousPage'
|
||
},
|
||
|
||
template: _.template( $('#abcdef').html() ),
|
||
|
||
initialize: function() {
|
||
|
||
},
|
||
|
||
render: function(done) {
|
||
var view = this;
|
||
|
||
this.$el.html(this.template(this.model.toJSON()));
|
||
|
||
this.book.renderTo("area").then(function(){
|
||
view.bindIframe();
|
||
});
|
||
|
||
this.bindIframe();
|
||
|
||
return this;
|
||
},
|
||
|
||
bindIframe: function(){
|
||
$('#area iframe').contents().find('body').bind('mouseup', function(){
|
||
|
||
var selection = $('iframe').contents()[0].getSelection().toString();
|
||
debugger;
|
||
});
|
||
},
|
||
|
||
nextPage: function(e){
|
||
var view = this;
|
||
e.preventDefault();
|
||
|
||
this.book.nextPage().then(function(){
|
||
view.bindIframe();
|
||
})
|
||
},
|
||
|
||
previousPage: function(e){
|
||
e.preventDefault();
|
||
|
||
this.book.prevPage()
|
||
}
|
||
});
|
||
|
||
var view = new BB.Views.Details();
|
||
|
||
view.render();
|
||
|
||
</script>
|
||
</body>
|
||
</html>
|