mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-05 15:32:55 +02:00
Backbone proof of concept
Zipped version support Backbone view wip Working backbone example Removed unnecessary files Backbone example clean up Removed .idea dir Fixed path for backbone.html example
This commit is contained in:
Mateusz Wilk
parent
8f2db632c4
commit
31bc395f30
1 changed files with 137 additions and 97 deletions
|
|
@ -1,117 +1,157 @@
|
|||
<!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">
|
||||
<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">
|
||||
<link rel="stylesheet" href="basic.css">
|
||||
|
||||
<script src="../libs/underscore/underscore-min.js"></script>
|
||||
<script src="../libs/backbone/backbone-min.js"></script>
|
||||
<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 src="../build/libs/zip.min.js"></script>
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
var Book = ePub("/reader/moby-dick/", { restore: true });
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<select id="toc"></select>
|
||||
</div>
|
||||
<!-- EPUBJS Renderer -->
|
||||
<script src="../build/epub.min.js"></script>
|
||||
<script src="../build/hooks.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
// Book.getMetadata().then(function(meta){
|
||||
</head>
|
||||
<body>
|
||||
<div id="main">
|
||||
<div id="loader"><img src="../reader/img/loader.gif"></div>
|
||||
<select id="toc"></select>
|
||||
</div>
|
||||
|
||||
// document.title = meta.bookTitle+" – "+meta.creator;
|
||||
|
||||
// });
|
||||
<script type="text/template" id="test-template">
|
||||
<div id="prev" class="arrow">‹</div>
|
||||
<div id="area"></div>
|
||||
<div id="next" class="arrow">›</div>
|
||||
</script>
|
||||
|
||||
// Book.getToc().then(function(toc){
|
||||
<script>
|
||||
|
||||
// var $select = document.getElementById("toc"),
|
||||
// docfrag = document.createDocumentFragment();
|
||||
// Book.getMetadata().then(function(meta){
|
||||
|
||||
// toc.forEach(function(chapter) {
|
||||
// var option = document.createElement("option");
|
||||
// option.textContent = chapter.label;
|
||||
// option.ref = chapter.href;
|
||||
// document.title = meta.bookTitle+" – "+meta.creator;
|
||||
|
||||
// docfrag.appendChild(option);
|
||||
// });
|
||||
// });
|
||||
|
||||
// $select.appendChild(docfrag);
|
||||
// Book.getToc().then(function(toc){
|
||||
|
||||
// $select.onchange = function(){
|
||||
// var index = $select.selectedIndex,
|
||||
// url = $select.options[index].ref;
|
||||
|
||||
// Book.goto(url);
|
||||
// return false;
|
||||
// }
|
||||
// var $select = document.getElementById("toc"),
|
||||
// docfrag = document.createDocumentFragment();
|
||||
|
||||
// });
|
||||
|
||||
// Book.ready.all.then(function(){
|
||||
// document.getElementById("loader").style.display = "none";
|
||||
// });
|
||||
// toc.forEach(function(chapter) {
|
||||
// var option = document.createElement("option");
|
||||
// option.textContent = chapter.label;
|
||||
// option.ref = chapter.href;
|
||||
|
||||
// Book.renderTo("area");
|
||||
// docfrag.appendChild(option);
|
||||
// });
|
||||
|
||||
var BB = {};
|
||||
|
||||
// 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);
|
||||
});
|
||||
}
|
||||
// $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 Book.Router();
|
||||
|
||||
// This will fetch the book template and render it.
|
||||
BB.Views.Details = Backbone.View.extend({
|
||||
template: "app/templates/books/details.html",
|
||||
|
||||
render: function(done) {
|
||||
var view = this;
|
||||
|
||||
// Fetch the template, render it to the View element and call done.
|
||||
namespace.fetchTemplate(this.template, function(tmpl) {
|
||||
view.el.innerHTML = tmpl(view.model.toJSON());
|
||||
|
||||
if (_.isFunction(done)) {
|
||||
done(view.el);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
// 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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue