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

Added polymer examples

Browse source
This commit is contained in:
Fred Chasen 2013-07-16 18:56:41 -07:00
parent 81f62a851f
commit 01552821ec
24 changed files with 761 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

77
build/epub.js
View file

@ -11,7 +11,6 @@ EPUBJS.Book = function(bookPath, options){
var book = this;
this.settings = _.defaults(options || {}, {
element : false,
storage: false, //-- true (auto) or false (none) | override: 'ram', 'websqldatabase', 'indexeddb', 'filesystem'
fromStorage : false,
saved : false,
@ -24,6 +23,7 @@ EPUBJS.Book = function(bookPath, options){
responsive: true,
version: 1,
restore: false,
reload : false,
styles : {}
});
@ -31,7 +31,7 @@ EPUBJS.Book = function(bookPath, options){
this.spinePos = 0;
this.stored = false;
//-- All Book events for listening
/*
book:resized
@ -76,12 +76,22 @@ EPUBJS.Book = function(bookPath, options){
}
// Likewise if an element is present start rendering process
if(bookPath && this.settings.element) {
this.opened.then(function(){
this.rendered = this.renderTo(el);
});
}
// if(bookPath && this.settings.element) {
// this.opened.then(function(){
// this.rendered = this.renderTo(el);
// });
// }
window.addEventListener("beforeunload", function(e) {
if(book.settings.restore) {
book.saveSettings();
book.saveContents();
}
book.trigger("book:unload");
}, false);
//-- Listen for these promises:
//-- book.opened.then()
//-- book.rendered.then()
@ -226,16 +236,6 @@ EPUBJS.Book.prototype.networkListeners = function(){
book.trigger("book:online");
}, false);
window.addEventListener("beforeunload", function(e) {
book.saveSettings();
if(book.settings.restore) {
book.saveContents();
}
book.trigger("book:unload");
}, false);
}
//-- Choose between a request from store or a request from network
@ -354,16 +354,29 @@ EPUBJS.Book.prototype.saveContents = function(){
}
EPUBJS.Book.prototype.removeSavedContents = function() {
var bookKey = this.settings.bookPath + ":contents:" + this.settings.version;
localStorage.removeItem(bookKey);
}
// EPUBJS.Book.prototype.chapterTitle = function(){
// return this.spine[this.spinePos].id; //-- TODO: clarify that this is returning title
// }
EPUBJS.Book.prototype.renderTo = function(el){
//-- Takes a string or a element
EPUBJS.Book.prototype.renderTo = function(elem){
var book = this;
//-- ...
this.settings.element = el;
if(_.isElement(elem)) {
this.element = elem;
} else if (typeof elem == "string") {
this.element = EPUBJS.core.getEl(elem);
} else {
console.error("Not an Element");
return;
}
return this.opened.
then(function(){
@ -386,16 +399,18 @@ EPUBJS.Book.prototype.startDisplay = function(){
return display;
}
EPUBJS.Book.prototype.restore = function(){
EPUBJS.Book.prototype.restore = function(reject){
var book = this,
contentsKey = this.settings.bookPath + ":contents:" + this.settings.version,
promise = new RSVP.Promise(),
fetch = ['manifest', 'spine', 'metadata', 'cover', 'toc', 'spineNodeIndex', 'spineIndexByURL'],
reject = false,
reject = reject || false,
fromStore = localStorage.getItem(contentsKey);
if(fromStore != 'undefined' && fromStore != 'null'){
if(this.settings.clearSaved) reject = true;
if(!reject && fromStore != 'undefined' && fromStore != 'null'){
this.contents = JSON.parse(fromStore);
fetch.forEach(function(item){
book[item] = book.contents[item];
@ -404,7 +419,7 @@ EPUBJS.Book.prototype.restore = function(){
}
});
}
if(reject || !fromStore || !this.contents || !this.settings.contentsPath){
// this.removeSavedSettings();
return this.open(this.settings.bookPath, true);
@ -1502,21 +1517,11 @@ EPUBJS.Parser.prototype.toc = function(tocXml){
EPUBJS.Renderer = function(book) {
var elem = book.settings.element;
this.el = book.element;
this.book = book;
this.settings = book.settings;
//-- Takes a string or a element
if(_.isElement(elem)) {
this.el = elem;
} else if (typeof elem == "string") {
this.el = EPUBJS.core.getEl(elem);
} else {
console.error("Not an Element");
return;
}
book.registerHook("beforeChapterDisplay",
[this.replaceLinks.bind(this),
this.replaceResources.bind(this),

4
build/epub.min.js vendored
View file

File diff suppressed because one or more lines are too long

4
demo/js/epub.min.js vendored
View file

File diff suppressed because one or more lines are too long

107
examples/custom-elements.html Normal file
View file

@ -0,0 +1,107 @@
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Polymer custom-elements ePubJS Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="../libs/polymer/custom-elements.min.js"></script>
<!-- EPUBJS Renderer -->
<script src="/build/epub.min.js"></script>
<link rel="stylesheet" href="basic.css">
<style type="text/css">
body {
overflow: auto;
background: #eee;
}
#wrapper {
width: 480px;
height: 640px;
overflow: hidden;
border: 1px solid #ccc;
margin: 50px auto;
background: #fff;
border-radius: 0 5px 5px 0;
-moz-box-shadow: 0px 5px 10px rgba(0,0,0,.1);
-webkit-box-shadow: 0px 5px 10px rgba(0,0,0,.1);
box-shadow: 0px 5px 10px rgba(0,0,0,.1);
}
epub iframe {
border: none;
padding: 40px 40px;
}
.arrow {
color: #777;
}
</style>
<script>
"use strict";
var epubPrototype = Object.create(HTMLElement.prototype);
epubPrototype.readyCallback = function() {
this.create();
this.Book.renderTo(this);
};
epubPrototype.create = function() {
var src = this.getAttribute("src"),
width = this.getAttribute("width") || false,
height = this.getAttribute("height") || false,
spreads = this.getAttribute("spreads") != null ? true : false,
restore = this.getAttribute("restore") != null ? true : false;
this.Book = new EPUBJS.Book(src, {
width: width,
height: height,
spreads : spreads,
restore : restore
});
};
epubPrototype.prevPage = function() {
this.Book.prevPage();
}
epubPrototype.nextPage = function() {
this.Book.nextPage();
}
document.register('epub', {
prototype: epubPrototype
});
</script>
</head>
<body>
<div id="main">
<div id="prev" onclick="Book.prevPage();" class="arrow">‹</div>
<div id="wrapper">
<epub id="book" src="/demo/moby-dick/" width="400" height="600" restore></epub>
</div>
<div id="next" onclick="Book.nextPage();"class="arrow">›</div>
</div>
<script>
Book = document.getElementById("book");
</script>
</body>
</html>

94
examples/polymer/epub-reader.html Normal file
View file

@ -0,0 +1,94 @@
<polymer-element name="epub-reader" on-keyup="keyup" attributes="src">
<template>
<link rel="stylesheet" href="../../demo/css/main.css">
<link rel="stylesheet" href="../../demo/css/popup.css">
<div id="sidebar">
<div id="controls">
<a id="network"><img id="store" src="../../demo/img/save.png" save="../../demo/img/save.png" data-saved="../../demo/img/saved.png"></a>
<a id="setting"><img id="settings" src="../../demo/img/settings.png"></a>
<a id="bookmark"><img id="bookmarks" src="../../demo/img/star.png"></a>
</div>
<div id="toc">
<ul>
<template id="tocTemplate" repeat="{{ toc }}">
<li id="toc-{{ id }}">
<a href="{{ href }}" class="toc_link{{ type }}">{{ label }}</a>
<ul>
<template ref="tocTemplate" repeat="{{ subitems }}"></template>
</ul>
<li>
</template>
</ul>
</div>
<div id="settingsPanel">
</div>
</div>
<div id="main">
<div id="opener">
<a id="open"><img src="../../demo/img/menu-icon.png" data-close="../../demo/img/close.png" data-open="../../demo/img/menu-icon.png"></a>
</div>
<div id="titlebar">
<span id="book-title"></span>
<span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span>
<span id="chapter-title"> </span>
</div>
<div id="divider"></div>
<div id="prev" onclick="Book.prevPage();" class="arrow">‹</div>
<epub src="/demo/moby-dick/" width="400" height="600"></epub>
<div id="next" onclick="Book.nextPage();"class="arrow">›</div>
<div id="loader"><img src="../../demo/img/loader.gif"></div>
</div>
</template>
<script>
Polymer('epub-reader', {
src: '',
ready: function() {
// var Book = new EPUBJS.Book("/demo/moby-dick/", { restore: true, reload: true });
// Book.getMetadata().then(function(meta){
// document.title = meta.bookTitle+" – "+meta.creator;
// });
// Book.getToc().then(function(toc){
// var $select = document.getElementById("toc");
// var $template = document.getElementById("tocTemplate");
// $template.model = { toc: toc };
// $select.onchange = function(){
// var index = $select.selectedIndex,
// url = $select.options[index].getAttribute('ref');
// Book.goto(url);
// return false;
// }
// });
// Book.ready.all.then(function(){
// document.getElementById("loader").style.display = "none";
// });
// Book.renderTo("area");
}
});
</script>
</polymer-element>

27
examples/polymer/epub.html Normal file
View file

@ -0,0 +1,27 @@
<polymer-element name="epub" attributes="src">
<script>
Polymer('epub', {
src: '',
ready: function() {
var src = this.getAttribute("src"),
width = this.getAttribute("width") || false,
height = this.getAttribute("height") || false,
spreads = this.getAttribute("spreads") != null ? true : false,
restore = this.getAttribute("restore") != null ? true : false;
var Book = new EPUBJS.Book(src, {
width: width,
height: height,
spreads : spreads,
restore : restore
});
Book.renderTo(this);
}
});
</script>
</polymer-element>

25
examples/polymer/index.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
<title>Polymer EpubJS</title>
<meta charset="UTF-8">
<script src="../../libs/polymer/polymer.min.js"></script>
<script src="/build/epub.min.js"></script>
<link rel="import" href="epub-reader.html">
<link rel="import" href="epub.html">
<link rel="stylesheet" href="../../demo/css/normalize.css">
<style>
</style>
</head>
<body>
<epub-reader id="reader"></epub-reader>
</body>
</html>

109
examples/polymer/index2.html Normal file
View file

@ -0,0 +1,109 @@
<!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="../../demo/css/normalize.css">
<link rel="stylesheet" href="../../demo/css/main.css">
<link rel="stylesheet" href="../../demo/css/popup.css">
<script src="../../libs/polymer/polymer.min.js"></script>
<!-- EPUBJS Renderer -->
<script src="/build/epub.min.js"></script>
<script>
"use strict";
var Book = new EPUBJS.Book("/demo/moby-dick/", { restore: true, reload: true });
</script>
</head>
<body>
<div id="sidebar">
<div id="controls">
<a id="network"><img id="store" src="../../demo/img/save.png" save="../../demo/img/save.png" data-saved="../../demo/img/saved.png"></a>
<a id="setting"><img id="settings" src="../../demo/img/settings.png"></a>
<a id="bookmark"><img id="bookmarks" src="../../demo/img/star.png"></a>
</div>
<div id="toc">
<ul>
<template id="tocTemplate" repeat="{{ toc }}">
<li id="toc-{{ id }}">
<a href="{{ href }}" class="toc_link{{ type }}">{{ label }}</a>
<ul>
<template ref="tocTemplate" repeat="{{ subitems }}"></template>
</ul>
<li>
</template>
</ul>
</div>
<div id="settingsPanel">
</div>
</div>
<div id="main">
<div id="opener">
<a id="open"><img src="../../demo/img/menu-icon.png" data-close="../../demo/img/close.png" data-open="../../demo/img/menu-icon.png"></a>
</div>
<div id="titlebar">
<span id="book-title"></span>
<span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span>
<span id="chapter-title"> </span>
</div>
<div id="divider"></div>
<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="../../demo/img/loader.gif"></div>
</div>
<script>
Book.getMetadata().then(function(meta){
document.title = meta.bookTitle+" – "+meta.creator;
});
Book.getToc().then(function(toc){
var $select = document.getElementById("toc");
var $template = document.getElementById("tocTemplate");
$template.model = { toc: toc };
$select.onchange = function(){
var index = $select.selectedIndex,
url = $select.options[index].getAttribute('ref');
Book.goto(url);
return false;
}
});
Book.ready.all.then(function(){
document.getElementById("loader").style.display = "none";
});
Book.renderTo("area");
// Needed to detect model changes if Object.observe
// is not available in the JS VM.
Platform.performMicrotaskCheckpoint();
</script>
</body>
</html>

71
examples/polymer/p-menu.html Normal file
View file

@ -0,0 +1,71 @@
<!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="../../libs/polymer/polymer.min.js"></script>
<!-- EPUBJS Renderer -->
<script src="/build/epub.min.js"></script>
<script>
"use strict";
var Book = new EPUBJS.Book("/demo/moby-dick/", { restore: true, reload: 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="../../demo/img/loader.gif"></div>
<select id="toc">
<template id="tocTemplate" repeat="{{ toc }}">
<option ref="{{ href }}">{{ label }}</option>
</template>
</select>
</div>
<script>
Book.getMetadata().then(function(meta){
document.title = meta.bookTitle+" – "+meta.creator;
});
Book.getToc().then(function(toc){
var $select = document.getElementById("toc");
var $template = document.getElementById("tocTemplate");
$template.model = { toc: toc };
$select.onchange = function(){
var index = $select.selectedIndex,
url = $select.options[index].getAttribute('ref');
Book.goto(url);
return false;
}
});
Book.ready.all.then(function(){
document.getElementById("loader").style.display = "none";
});
Book.renderTo("area");
</script>
</body>
</html>

29
libs/polymer/custom-elements.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

35
libs/polymer/platform.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
libs/polymer/platform.min.js.map Normal file
View file

File diff suppressed because one or more lines are too long

33
libs/polymer/platform.native.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
libs/polymer/platform.native.min.js.map Normal file
View file

File diff suppressed because one or more lines are too long

35
libs/polymer/platform.sandbox.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
libs/polymer/platform.sandbox.min.js.map Normal file
View file

File diff suppressed because one or more lines are too long

35
libs/polymer/polymer.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
libs/polymer/polymer.min.js.map Normal file
View file

File diff suppressed because one or more lines are too long

34
libs/polymer/polymer.native.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
libs/polymer/polymer.native.min.js.map Normal file
View file

File diff suppressed because one or more lines are too long

35
libs/polymer/polymer.sandbox.min.js vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
libs/polymer/polymer.sandbox.min.js.map Normal file
View file

File diff suppressed because one or more lines are too long

65
src/book.js
View file

@ -3,7 +3,6 @@ EPUBJS.Book = function(bookPath, options){
var book = this;
this.settings = _.defaults(options || {}, {
element : false,
storage: false, //-- true (auto) or false (none) | override: 'ram', 'websqldatabase', 'indexeddb', 'filesystem'
fromStorage : false,
saved : false,
@ -16,6 +15,7 @@ EPUBJS.Book = function(bookPath, options){
responsive: true,
version: 1,
restore: false,
reload : false,
styles : {}
});
@ -23,7 +23,7 @@ EPUBJS.Book = function(bookPath, options){
this.spinePos = 0;
this.stored = false;
//-- All Book events for listening
/*
book:resized
@ -68,12 +68,22 @@ EPUBJS.Book = function(bookPath, options){
}
// Likewise if an element is present start rendering process
if(bookPath && this.settings.element) {
this.opened.then(function(){
this.rendered = this.renderTo(el);
});
}
// if(bookPath && this.settings.element) {
// this.opened.then(function(){
// this.rendered = this.renderTo(el);
// });
// }
window.addEventListener("beforeunload", function(e) {
if(book.settings.restore) {
book.saveSettings();
book.saveContents();
}
book.trigger("book:unload");
}, false);
//-- Listen for these promises:
//-- book.opened.then()
//-- book.rendered.then()
@ -218,16 +228,6 @@ EPUBJS.Book.prototype.networkListeners = function(){
book.trigger("book:online");
}, false);
window.addEventListener("beforeunload", function(e) {
book.saveSettings();
if(book.settings.restore) {
book.saveContents();
}
book.trigger("book:unload");
}, false);
}
//-- Choose between a request from store or a request from network
@ -346,16 +346,29 @@ EPUBJS.Book.prototype.saveContents = function(){
}
EPUBJS.Book.prototype.removeSavedContents = function() {
var bookKey = this.settings.bookPath + ":contents:" + this.settings.version;
localStorage.removeItem(bookKey);
}
// EPUBJS.Book.prototype.chapterTitle = function(){
// return this.spine[this.spinePos].id; //-- TODO: clarify that this is returning title
// }
EPUBJS.Book.prototype.renderTo = function(el){
//-- Takes a string or a element
EPUBJS.Book.prototype.renderTo = function(elem){
var book = this;
//-- ...
this.settings.element = el;
if(_.isElement(elem)) {
this.element = elem;
} else if (typeof elem == "string") {
this.element = EPUBJS.core.getEl(elem);
} else {
console.error("Not an Element");
return;
}
return this.opened.
then(function(){
@ -378,16 +391,18 @@ EPUBJS.Book.prototype.startDisplay = function(){
return display;
}
EPUBJS.Book.prototype.restore = function(){
EPUBJS.Book.prototype.restore = function(reject){
var book = this,
contentsKey = this.settings.bookPath + ":contents:" + this.settings.version,
promise = new RSVP.Promise(),
fetch = ['manifest', 'spine', 'metadata', 'cover', 'toc', 'spineNodeIndex', 'spineIndexByURL'],
reject = false,
reject = reject || false,
fromStore = localStorage.getItem(contentsKey);
if(fromStore != 'undefined' && fromStore != 'null'){
if(this.settings.clearSaved) reject = true;
if(!reject && fromStore != 'undefined' && fromStore != 'null'){
this.contents = JSON.parse(fromStore);
fetch.forEach(function(item){
book[item] = book.contents[item];
@ -396,7 +411,7 @@ EPUBJS.Book.prototype.restore = function(){
}
});
}
if(reject || !fromStore || !this.contents || !this.settings.contentsPath){
// this.removeSavedSettings();
return this.open(this.settings.bookPath, true);

12
src/renderer.js
View file

@ -1,19 +1,9 @@
EPUBJS.Renderer = function(book) {
var elem = book.settings.element;
this.el = book.element;
this.book = book;
this.settings = book.settings;
//-- Takes a string or a element
if(_.isElement(elem)) {
this.el = elem;
} else if (typeof elem == "string") {
this.el = EPUBJS.core.getEl(elem);
} else {
console.error("Not an Element");
return;
}
book.registerHook("beforeChapterDisplay",
[this.replaceLinks.bind(this),
this.replaceResources.bind(this),