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";
|
||||
<!-- EPUBJS Renderer -->
|
||||
<script src="../build/epub.min.js"></script>
|
||||
<script src="../build/hooks.js"></script>
|
||||
|
||||
var Book = ePub("/reader/moby-dick/", { restore: true });
|
||||
</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>
|
||||
</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>
|
||||
<script>
|
||||
|
||||
<script>
|
||||
// Book.getMetadata().then(function(meta){
|
||||
|
||||
// Book.getMetadata().then(function(meta){
|
||||
// document.title = meta.bookTitle+" – "+meta.creator;
|
||||
|
||||
// document.title = meta.bookTitle+" – "+meta.creator;
|
||||
// });
|
||||
|
||||
// });
|
||||
// Book.getToc().then(function(toc){
|
||||
|
||||
// Book.getToc().then(function(toc){
|
||||
// var $select = document.getElementById("toc"),
|
||||
// docfrag = document.createDocumentFragment();
|
||||
|
||||
// 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;
|
||||
|
||||
// toc.forEach(function(chapter) {
|
||||
// var option = document.createElement("option");
|
||||
// option.textContent = chapter.label;
|
||||
// option.ref = chapter.href;
|
||||
// docfrag.appendChild(option);
|
||||
// });
|
||||
|
||||
// docfrag.appendChild(option);
|
||||
// });
|
||||
// $select.appendChild(docfrag);
|
||||
|
||||
// $select.appendChild(docfrag);
|
||||
// $select.onchange = function(){
|
||||
// var index = $select.selectedIndex,
|
||||
// url = $select.options[index].ref;
|
||||
|
||||
// $select.onchange = function(){
|
||||
// var index = $select.selectedIndex,
|
||||
// url = $select.options[index].ref;
|
||||
// Book.goto(url);
|
||||
// return false;
|
||||
// }
|
||||
|
||||
// Book.goto(url);
|
||||
// return false;
|
||||
// }
|
||||
// });
|
||||
|
||||
// });
|
||||
// Book.ready.all.then(function(){
|
||||
// document.getElementById("loader").style.display = "none";
|
||||
// });
|
||||
|
||||
// Book.ready.all.then(function(){
|
||||
// document.getElementById("loader").style.display = "none";
|
||||
// });
|
||||
// Book.renderTo("area");
|
||||
|
||||
// Book.renderTo("area");
|
||||
var BB = {};
|
||||
|
||||
var BB = {};
|
||||
var Library = new Backbone.Model();
|
||||
|
||||
// Router
|
||||
BB.Router = Backbone.Router.extend({
|
||||
routes: {
|
||||
"book/:p" : "details"
|
||||
},
|
||||
// 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);
|
||||
});
|
||||
}
|
||||
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();
|
||||
// Instantiate Router
|
||||
var router = new BB.Router();
|
||||
|
||||
// This will fetch the book template and render it.
|
||||
BB.Views.Details = Backbone.View.extend({
|
||||
template: "app/templates/books/details.html",
|
||||
BB.Views = {};
|
||||
|
||||
render: function(done) {
|
||||
var view = this;
|
||||
EPUBJS.Hooks.register("beforeChapterDisplay").transculsions = function(callback, renderer){
|
||||
$(renderer.element).contents().find('body').bind('mouseup', function(){
|
||||
|
||||
// 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());
|
||||
var selection = $('iframe').contents()[0].getSelection().toString();
|
||||
debugger;
|
||||
});
|
||||
callback();
|
||||
};
|
||||
|
||||
if (_.isFunction(done)) {
|
||||
done(view.el);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
// This will fetch the book template and render it.
|
||||
BB.Views.Details = Backbone.View.extend({
|
||||
|
||||
el: '#main',
|
||||
|
||||
model: Library,
|
||||
|
||||
book: null,
|
||||
|
||||
</script>
|
||||
</body>
|
||||
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