yetangitu/epub.js
1
0
Fork 0
mirror of https://github.com/futurepress/epub.js.git synced 2025-10-05 15:32:55 +02:00
Code Issues Releases Wiki Activity

Backbone proof of concept

Browse source
This commit is contained in:
Mateusz Wilk 2015-06-06 22:01:24 +01:00
parent 89a9ade8df
commit a65784194e
3 changed files with 83 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -1,4 +1,6 @@
.DS_Store .DS_Store
*/**/.DS_Store */**/.DS_Store
node_modules/ node_modules/
bower_components/
components components
.idea

10
bower.json Normal file
View file

@ -0,0 +1,10 @@
{
"name": "epub.js",
"version": "0.0.1",
"dependencies": {
"jquery": "~2.1.0",
"backbone": "~1.1.0",
"handlebars": "~2.0.0"
},
"devDependencies": {}
}

81
examples/backbone.html
View file

@ -10,8 +10,9 @@
<link rel="stylesheet" href="basic.css"> <link rel="stylesheet" href="basic.css">
<script src="../libs/underscore/underscore-min.js"></script> <script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../libs/backbone/backbone-min.js"></script> <script src="../bower_components/underscore/underscore.js"></script>
<script src="../bower_components/backbone/backbone.js"></script>
<!-- EPUBJS Renderer --> <!-- EPUBJS Renderer -->
<script src="/build/epub.min.js"></script> <script src="/build/epub.min.js"></script>
@ -19,20 +20,25 @@
<script> <script>
"use strict"; "use strict";
var Book = ePub("/reader/moby-dick/", { restore: true }); //var Book = ePub("/reader/moby-dick/", { restore: true });
</script> </script>
</head> </head>
<body> <body>
<div id="main"> <div id="main">
<div id="prev" onclick="Book.prevPage();" class="arrow">‹</div>
<div id="area"></div>
<div id="next" onclick="Book.nextPage();"class="arrow">›</div>
<div id="loader"><img src="../reader/img/loader.gif"></div> <div id="loader"><img src="../reader/img/loader.gif"></div>
<select id="toc"></select> <select id="toc"></select>
</div> </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> <script>
// Book.getMetadata().then(function(meta){ // Book.getMetadata().then(function(meta){
@ -74,6 +80,8 @@
var BB = {}; var BB = {};
var Library = new Backbone.Model({test: 'test hey ho!'});
// Router // Router
BB.Router = Backbone.Router.extend({ BB.Router = Backbone.Router.extend({
routes: { routes: {
@ -89,28 +97,71 @@
}); });
// Instantiate Router // Instantiate Router
var router = new Book.Router(); var router = new BB.Router();
BB.Views = {};
// This will fetch the book template and render it. // This will fetch the book template and render it.
BB.Views.Details = Backbone.View.extend({ BB.Views.Details = Backbone.View.extend({
template: "app/templates/books/details.html",
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) { render: function(done) {
var view = this; var view = this;
// Fetch the template, render it to the View element and call done. this.$el.html(this.template(this.model.toJSON()));
namespace.fetchTemplate(this.template, function(tmpl) {
view.el.innerHTML = tmpl(view.model.toJSON());
if (_.isFunction(done)) { this.book.renderTo("area").then(function(){
done(view.el); 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> </script>
</body> </body>