yetangitu/epub.js
1
0
Fork 0
mirror of https://github.com/futurepress/epub.js.git synced 2025-10-03 14:59:18 +02:00
Code Issues Releases Wiki Activity

Updated examples

Browse source
This commit is contained in:
Fred Chasen 2016-09-24 00:21:20 +02:00
parent 89387f1ef2
commit e408a822e0
20 changed files with 468 additions and 699 deletions
Download patch file Download diff file Expand all files Collapse all files

9
dist/epub.js vendored
View file

@ -7989,11 +7989,18 @@ var RSVP = require('rsvp');
function Layout(settings){ function Layout(settings){
this.name = settings.layout || "reflowable"; this.name = settings.layout || "reflowable";
this._flow = (settings.flow === "paginated") ? "paginated" : "scrolled";
this._spread = (settings.spread === "none") ? false : true; this._spread = (settings.spread === "none") ? false : true;
this._minSpreadWidth = settings.spread || 800; this._minSpreadWidth = settings.spread || 800;
this._evenSpreads = settings.evenSpreads || false; this._evenSpreads = settings.evenSpreads || false;
if (settings.flow === "scrolled-continuous" ||
settings.flow === "scrolled-doc") {
this._flow = "scrolled";
} else {
this._flow = "paginated";
}
this.width = 0; this.width = 0;
this.height = 0; this.height = 0;
this.spreadWidth = 0; this.spreadWidth = 0;

2
dist/epub.js.map vendored
View file

File diff suppressed because one or more lines are too long

113
examples/annotator.html
View file

@ -10,124 +10,17 @@
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/annotator/1.2.9/annotator.min.js"></script> --> <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/annotator/1.2.9/annotator.min.js"></script> -->
<style type="text/css"> <link rel="stylesheet" type="text/css" href="examples.css">
body {
margin: 0;
background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
position: absolute;
height: 100%;
width: 100%;
display: flex;
-webkit-align-items: center;
-webkit-justify-content: center;
}
#viewer {
width: 900px;
/*width: 80%;*/
height: 600px;
background: white;
box-shadow: 0 0 4px #ccc;
border-radius: 5px;
padding: 20px 40px;
/*width: 100%;*/
/* height: 400px;*/
position: relative;
/* Center Content */
margin: 40px auto;
}
/*
#viewer > iframe {
overflow: scroll;
height: 400px;
-webkit-column-axis: horizontal;
-webkit-column-fill: auto;
-webkit-column-width: 400px;
-webkit-column-gap: 10px;
} */
#viewer iframe {
/*background: white;*/
/*box-shadow: 0 0 4px #ccc;*/
/*width: 590px;
margin: 10px auto;*/
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
.arrow {
position: fixed;
top: 50%;
margin-top: -32px;
font-size: 64px;
color: #E2E2E2;
font-family: arial, sans-serif;
font-weight: bold;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.arrow:hover {
color: #777;
}
.arrow:active {
color: #000;
}
#toc {
display: block;
margin: 10px auto;
}
::selection {
background: yellow;
}
@media (min-width: 1000px) {
.epub-container:before {
position: absolute;
width: 1px;
border-right: 1px #000 solid;
height: 90%;
z-index: auto;
left: 50%;
margin-left: -1px;
top: 5%;
opacity: .15;
box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
content: "";
}
}
</style>
</head> </head>
<body> <body>
<div id="viewer"></div> <div id="viewer" class="spreads"></div>
<div id="prev" class="arrow">‹</div> <div id="prev" class="arrow">‹</div>
<div id="next" class="arrow">›</div> <div id="next" class="arrow">›</div>
<script> <script>
// Load the opf // Load the opf
// var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf"); var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf");
var book = ePub("../books/alice/OPS/package.opf");
var rendition = book.renderTo("viewer", { var rendition = book.renderTo("viewer", {
method: "paginate",
width: "100%", width: "100%",
height: 600, height: 600,
ignoreClass: 'annotator-hl' ignoreClass: 'annotator-hl'

113
examples/archived.html
View file

@ -3,126 +3,21 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>EPUB.js Pagination Example</title> <title>EPUB.js Archived Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.1/jszip.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.1/jszip.min.js"></script>
<script src="../libs/jszip/jszip.js"></script>
<script src="../dist/epub.js"></script> <script src="../dist/epub.js"></script>
<style type="text/css"> <link rel="stylesheet" type="text/css" href="examples.css">
body {
margin: 0;
background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
position: absolute;
height: 100%;
width: 100%;
display: flex;
-webkit-align-items: center;
-webkit-justify-content: center;
}
#viewer {
width: 900px;
/*width: 80%;*/
height: 600px;
background: white;
box-shadow: 0 0 4px #ccc;
border-radius: 5px;
padding: 20px 40px;
/*width: 100%;*/
/* height: 400px;*/
position: relative;
/* Center Content */
margin: 40px auto;
}
/*
#viewer > iframe {
overflow: scroll;
height: 400px;
-webkit-column-axis: horizontal;
-webkit-column-fill: auto;
-webkit-column-width: 400px;
-webkit-column-gap: 10px;
} */
#viewer iframe {
background: white;
/*box-shadow: 0 0 4px #ccc;*/
/*width: 590px;
margin: 10px auto;*/
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
.arrow {
position: fixed;
top: 50%;
margin-top: -32px;
font-size: 64px;
color: #E2E2E2;
font-family: arial, sans-serif;
font-weight: bold;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.arrow:hover {
color: #777;
}
.arrow:active {
color: #000;
}
#toc {
display: block;
margin: 10px auto;
}
@media (min-width: 1000px) {
#viewer:after {
position: absolute;
width: 1px;
border-right: 1px #000 solid;
height: 90%;
z-index: 1;
left: 50%;
margin-left: -1px;
top: 5%;
opacity: .15;
box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
content: "";
}
}
</style>
</head> </head>
<body> <body>
<div id="viewer"></div> <div id="viewer" class="spreads"></div>
<div id="prev" class="arrow">‹</div> <div id="prev" class="arrow">‹</div>
<div id="next" class="arrow">›</div> <div id="next" class="arrow">›</div>
<script> <script>
// Load the opf var book = ePub("https://s3.amazonaws.com/moby-dick/moby-dick.epub");
// var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf");
var book = ePub("../books/moby-dick.epub");
var rendition = book.renderTo("viewer", { var rendition = book.renderTo("viewer", {
method: "paginate",
width: "100%", width: "100%",
height: 600 height: 600
}); });

56
examples/continuous-scrolled.html Normal file
View file

@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EPUB.js Continuous Example</title>
<script src="../dist/epub.js"></script>
<link rel="stylesheet" type="text/css" href="examples.css">
<style type="text/css">
.epub-container {
min-width: 320px;
margin: 0 auto;
}
.epub-container .epub-view > iframe {
background: white;
box-shadow: 0 0 4px #ccc;
margin: 10px;
padding: 20px;
}
</style>
</head>
<body>
<div id="viewer"></div>
<script>
var currentSectionIndex = 8;
// Load the opf
var book = ePub("https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf");
var rendition = book.renderTo(document.body, {
manager: "continuous",
flow: "scrolled",
width: "60%"
});
var displayed = rendition.display("epubcfi(/6/14[xchapter_001]!4/2/24/2[c001p0011]/1:799)");
displayed.then(function(renderer){
// -- do stuff
});
// Navigation loaded
book.loaded.navigation.then(function(toc){
// console.log(toc);
});
</script>
</body>
</html>

103
examples/continuous-spreads.html Normal file
View file

@ -0,0 +1,103 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EPUB.js Continuous Spreads Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.1/jszip.min.js"></script>
<script src="../dist/epub.js"></script>
<link rel="stylesheet" type="text/css" href="examples.css">
</head>
<body>
<select id="toc"></select>
<div id="viewer" class="spreads"></div>
<div id="prev" class="arrow">‹</div>
<div id="next" class="arrow">›</div>
<script>
// Load the opf
window.book = ePub("https://s3.amazonaws.com/moby-dick/moby-dick.epub");
var rendition = book.renderTo("viewer", {
manager: "continuous",
flow: "paginated",
width: "100%",
height: 600
});
var displayed = rendition.display(0);
displayed.then(function(renderer){
// -- do stuff
});
// Navigation loaded
book.loaded.navigation.then(function(toc){
// console.log(toc);
});
var next = document.getElementById("next");
next.addEventListener("click", function(){
rendition.next();
}, false);
var prev = document.getElementById("prev");
prev.addEventListener("click", function(){
rendition.prev();
}, false);
var keyListener = function(e){
// Left Key
if ((e.keyCode || e.which) == 37) {
rendition.prev();
}
// Right Key
if ((e.keyCode || e.which) == 39) {
rendition.next();
}
};
rendition.on("keyup", keyListener);
document.addEventListener("keyup", keyListener, false);
rendition.on("selected", function(range) {
console.log("selected", range);
});
rendition.on("locationChanged", function(location){
console.log(location);
});
book.loaded.navigation.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;
rendition.display(url);
return false;
};
});
</script>
</body>
</html>

98
examples/continuous.html
View file

@ -1,98 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EPUB.js Continuous Example</title>
<script src="../dist/epub.js"></script>
<style type="text/css">
body {
margin: 0;
background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
height: 100%;
width: 100%;
}
.epub-container {
min-width: 320px;
margin: 0 auto;
}
/*.epub-container > div {
padding: 0 20% 0 20%;
}*/
.epub-container .epub-view > iframe {
background: white;
box-shadow: 0 0 4px #ccc;
margin: 10px;
padding: 20px;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
.arrow {
position: fixed;
top: 50%;
margin-top: -32px;
font-size: 64px;
color: #E2E2E2;
font-family: arial, sans-serif;
font-weight: bold;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.arrow:hover {
color: #777;
}
.arrow:active {
color: #000;
}
#toc {
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<div id="viewer"></div>
<script>
var currentSectionIndex = 8;
// Load the opf
var book = ePub("../books/moby-dick/OPS/package.opf");
var rendition = book.renderTo(document.body, { manager: "continuous", width: "60%", flow: "scrolled" });
var displayed = rendition.display("epubcfi(/6/14[xchapter_001]!4/2/24/2[c001p0011]/1:799)");
displayed.then(function(renderer){
// -- do stuff
});
// Navigation loaded
book.loaded.navigation.then(function(toc){
// console.log(toc);
});
</script>
</body>
</html>

141
examples/examples.css Normal file
View file

@ -0,0 +1,141 @@
body {
margin: 0;
background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
position: absolute;
height: 100%;
width: 100%;
}
#title {
width: 900px;
min-height: 18px;
margin: 10px auto;
text-align: center;
font-size: 16px;
color: #E2E2E2;
}
#title:hover {
color: #777;
}
#viewer.spreads {
width: 900px;
height: 600px;
box-shadow: 0 0 4px #ccc;
border-radius: 5px;
padding: 20px 40px;
position: relative;
margin: 10px auto;
background: white url('ajax-loader.gif') center center no-repeat;
}
#viewer.spreads .epub-view > iframe {
background: white;
}
#viewer.scrolled {
overflow: hidden;
width: 800px;
margin: 0 auto;
position: relative;
background: url('ajax-loader.gif') center center no-repeat;
}
#viewer.scrolled .epub-container {
background: white;
box-shadow: 0 0 4px #ccc;
margin: 10px;
padding: 20px;
}
#viewer.scrolled .epub-view > iframe {
background: white;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
#toc {
display: block;
margin: 10px auto;
}
@media (min-width: 1000px) {
#viewer.spreads:after {
position: absolute;
width: 1px;
border-right: 1px #000 solid;
height: 90%;
z-index: 1;
left: 50%;
margin-left: -1px;
top: 5%;
opacity: .15;
box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
content: "";
}
}
.arrow {
position: fixed;
top: 50%;
margin-top: -32px;
font-size: 64px;
color: #E2E2E2;
font-family: arial, sans-serif;
font-weight: bold;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
text-decoration: none;
}
.navlink {
margin: 14px;
display: block;
text-align: center;
text-decoration: none;
color: #ccc;
}
.arrow:hover, .navlink:hover {
color: #777;
}
.arrow:active, .navlink:hover {
color: #000;
}
#book-wrapper {
width: 480px;
height: 640px;
overflow: hidden;
border: 1px solid #ccc;
margin: 28px auto;
background: #fff;
border-radius: 0 5px 5px 0;
}
#book-viewer {
width: 480px;
height: 660px;
margin: -30px auto;
-moz-box-shadow: inset 10px 0 20px rgba(0,0,0,.1);
-webkit-box-shadow: inset 10px 0 20px rgba(0,0,0,.1);
box-shadow: inset 10px 0 20px rgba(0,0,0,.1);
}
#book-viewer iframe {
padding: 40px 40px;
}

1
examples/highlights.html
View file

@ -140,7 +140,6 @@
var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf"); var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf");
var rendition = book.renderTo("viewer", { var rendition = book.renderTo("viewer", {
method: "paginate",
width: "100%", width: "100%",
height: 600, height: 600,
ignoreClass: 'annotator-hl' ignoreClass: 'annotator-hl'

55
examples/hooks.html
View file

@ -7,62 +7,19 @@
<script src="../dist/epub.js"></script> <script src="../dist/epub.js"></script>
<style type="text/css"> <link rel="stylesheet" type="text/css" href="examples.css">
body {
margin: 0;
background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
}
#viewer {
overflow: hidden;
width: 800px;
margin: 0 auto;
}
#viewer .epub-view {
background: white;
box-shadow: 0 0 4px #ccc;
margin: 10px;
padding: 20px;
}
.arrow {
margin: 14px;
display: block;
text-align: center;
text-decoration: none;
color: #ccc;
}
.arrow:hover {
color: #777;
}
.arrow:active {
color: #000;
}
#toc {
display: block;
margin: 10px auto;
}
</style>
</head> </head>
<body> <body>
<a id="prev" href="#prev" class="arrow">...</a> <a id="prev" href="#prev" class="navlink">...</a>
<div id="viewer"></div> <div id="viewer" class="scrolled"></div>
<a id="next" href="#next" class="arrow">...</a> <a id="next" href="#next" class="navlink">...</a>
<script> <script>
var currentSectionIndex = 8; var currentSectionIndex = 8;
// Load the opf // Load the opf
var book = ePub("../books/alice/OPS/package.opf"); var book = ePub("https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf");
var rendition = book.renderTo("viewer"); var rendition = book.renderTo("viewer", { flow: "scrolled-doc" });
rendition.display("chapter_001.xhtml"); rendition.display("chapter_001.xhtml");

4
examples/hypothesis-continuous.html
View file

@ -80,8 +80,8 @@
<script> <script>
// var currentSectionIndex = 8; // var currentSectionIndex = 8;
// Load the opf // Load the opf
var book = ePub("../books/alice/OPS/package.opf"); var book = ePub("https://s3.amazonaws.com/epubjs/books/alice/OPS/package.opf");
var rendition = book.renderTo(document.body, { method: "continuous", width: "60%" }); var rendition = book.renderTo(document.body, { method: "continuous", flow: "scrolled-continuous", width: "60%" });
var displayed = rendition.display(); var displayed = rendition.display();

2
examples/hypothesis.html
View file

@ -181,7 +181,7 @@
<script> <script>
var currentSectionIndex = 8; var currentSectionIndex = 8;
// Load the opf // Load the opf
var book = ePub("../books/11-3-117-1-10-20141029.epub"); var book = ePub("https://s3.amazonaws.com/epubjs/books/alice/OPS/package.opf");
var rendition = book.renderTo("viewer"); var rendition = book.renderTo("viewer");
// var hash = window.location.hash.slice(2); // var hash = window.location.hash.slice(2);

74
examples/index.html Normal file
View file

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ePubJS Examples</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" type="text/css" href="examples.css">
<style type="text/css">
body {
font-size: 1em;
line-height: 1.33em;
font-family: serif;
}
h1 {
text-align: center;
font-size: 1.5em;
line-height: 1.33em;
text-align: center;
padding-bottom: 0em;
text-align: center;
text-transform: uppercase;
font-weight: normal;
letter-spacing: 4px;
padding-top: 60px;
}
ol {
width: 350px;
margin: 50px auto;
}
a {
font-size: 1.2em;
line-height: 1.33em;
color: #000;
}
</style>
</head>
<body>
<div id="main">
<div id="book-wrapper">
<div id="book-viewer">
<h1>Examples</h1>
<ol>
<li><a href="spreads.html">Spreads</a></li>
<li><a href="archived.html">Archived</a></li>
<li><a href="scrolled.html">Scrolled Doc</a></li>
<li><a href="continuous-spreads.html">Spreads Continuous</a></li>
<li><a href="continuous-scrolled.html">Scrolled Continuous</a></li>
<li><a href="swipe.html">Swipe</a></li>
<li><a href="renderless.html">Renderless</a></li>
<li><a href="hooks.html">Hooks</a></li>
<li><a href="highlights.html">Highlights</a></li>
<li><a href="annotator.html">Annotator</a></li>
<!-- <li><a href="hypothesis.html">Annotations with Hypothes.is</a></li> -->
</ol>
</div>
</div>
</div>
</body>
</html>

56
examples/renderless.html
View file

@ -6,62 +6,12 @@
<script src="../dist/epub.js"></script> <script src="../dist/epub.js"></script>
<link rel="stylesheet" type="text/css" href="examples.css">
<style type="text/css">
body {
margin: 0;
height: 100%;
}
#viewer {
display: block;
margin: 5% auto;
width: 80%;
height: 80%;
border: none;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
.arrow {
position: absolute;
top: 50%;
margin-top: -32px;
font-size: 64px;
color: #E2E2E2;
font-family: arial, sans-serif;
font-weight: bold;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.arrow:hover {
color: #777;
}
.arrow:active {
color: #000;
}
#toc {
display: block;
margin: 10px auto;
}
</style>
</head> </head>
<body> <body>
<select id="toc"></select> <select id="toc"></select>
<!-- <iframe id="viewer"></iframe> --> <div id="viewer" class="scrolled"></div>
<div id="viewer"></div>
<div id="prev" class="arrow">‹</div> <div id="prev" class="arrow">‹</div>
<div id="next" class="arrow">›</div> <div id="next" class="arrow">›</div>
@ -72,7 +22,7 @@
var currentSection; var currentSection;
var currentSectionIndex = 6; var currentSectionIndex = 6;
var book = ePub("../books/moby-dick/OPS/package.opf"); var book = ePub("https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf");
book.loaded.navigation.then(function(toc){ book.loaded.navigation.then(function(toc){
var $select = document.getElementById("toc"), var $select = document.getElementById("toc"),
docfrag = document.createDocumentFragment(); docfrag = document.createDocumentFragment();

53
examples/single.html → examples/scrolled.html
View file

@ -3,60 +3,17 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>EPUB.js Single Example</title> <title>EPUB.js Scrolled Example</title>
<script src="../dist/epub.js"></script> <script src="../dist/epub.js"></script>
<style type="text/css"> <link rel="stylesheet" type="text/css" href="examples.css">
body {
margin: 0;
background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
}
#viewer {
overflow: hidden;
width: 800px;
margin: 0 auto;
position: relative;
}
#viewer .epub-container {
background: white;
box-shadow: 0 0 4px #ccc;
margin: 10px;
padding: 20px;
}
.arrow {
margin: 14px;
display: block;
text-align: center;
text-decoration: none;
color: #ccc;
}
.arrow:hover {
color: #777;
}
.arrow:active {
color: #000;
}
#toc {
display: block;
margin: 10px auto;
}
</style>
</head> </head>
<body> <body>
<a id="prev" href="#prev" class="arrow">...</a> <a id="prev" href="#prev" class="navlink">...</a>
<div id="viewer"></div> <div id="viewer" class="scrolled"></div>
<a id="next" href="#next" class="arrow">...</a> <a id="next" href="#next" class="navlink">...</a>
<script> <script>
var currentSectionIndex = 8; var currentSectionIndex = 8;

10
examples/single-full.html
View file

@ -3,12 +3,11 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>EPUB.js Basic Example</title> <title>EPUB.js Scrolled Full Example</title>
<script src="../dist/epub.js"></script> <script src="../dist/epub.js"></script>
<style type="text/css"> <style type="text/css">
body { body {
margin: 0; margin: 0;
@ -120,9 +119,10 @@
<script> <script>
var currentSectionIndex = 8; var currentSectionIndex = 8;
// Load the opf // Load the opf
var book = ePub("../books/alice/"); var book = ePub("https://s3.amazonaws.com/epubjs/books/alice/OPS/package.opf");
var rendition = book.renderTo("viewer"); var rendition = book.renderTo("viewer", {
flow: "scrolled-doc"
});
var hash = window.location.hash.slice(2); var hash = window.location.hash.slice(2);
rendition.display(hash || 1); rendition.display(hash || 1);

163
examples/spreads.html
View file

@ -3,149 +3,43 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>EPUB.js Pagination Example</title> <title>EPUB.js Spreads Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.1/jszip.min.js"></script>
<script src="../dist/epub.js"></script> <script src="../dist/epub.js"></script>
<style type="text/css"> <link rel="stylesheet" type="text/css" href="examples.css">
body {
margin: 0;
background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
position: absolute;
height: 100%;
width: 100%;
display: flex;
-webkit-align-items: center;
-webkit-justify-content: center;
}
#viewer {
width: 900px;
/*width: 80%;*/
height: 600px;
background: white;
box-shadow: 0 0 4px #ccc;
border-radius: 5px;
padding: 20px 40px;
/*width: 100%;*/
/* height: 400px;*/
position: relative;
/* Center Content */
margin: 40px auto;
}
/*
#viewer > iframe {
overflow: scroll;
height: 400px;
-webkit-column-axis: horizontal;
-webkit-column-fill: auto;
-webkit-column-width: 400px;
-webkit-column-gap: 10px;
} */
#viewer iframe {
background: white;
/*box-shadow: 0 0 4px #ccc;*/
/*width: 590px;
margin: 10px auto;*/
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
.arrow {
position: fixed;
top: 50%;
margin-top: -32px;
font-size: 64px;
color: #E2E2E2;
font-family: arial, sans-serif;
font-weight: bold;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.arrow:hover {
color: #777;
}
.arrow:active {
color: #000;
}
#toc {
display: block;
margin: 10px auto;
}
@media (min-width: 1000px) {
#viewer:after {
position: absolute;
width: 1px;
border-right: 1px #000 solid;
height: 90%;
z-index: 1;
left: 50%;
margin-left: -1px;
top: 5%;
opacity: .15;
box-shadow: -2px 0 15px rgba(0, 0, 0, 1);
content: "";
}
}
</style>
</head> </head>
<body> <body>
<div id="viewer"></div> <div id="title"></div>
<div id="prev" class="arrow">‹</div> <div id="viewer" class="spreads"></div>
<div id="next" class="arrow">›</div> <a id="prev" href="#prev" class="arrow"></a>
<a id="next" href="#next" class="arrow"></a>
<script> <script>
var currentSectionIndex = 8;
// Load the opf // Load the opf
window.book = ePub("https://s3.amazonaws.com/moby-dick/moby-dick.epub"); var book = ePub("https://s3.amazonaws.com/epubjs/books/alice/OPS/package.opf");
var rendition = book.renderTo("viewer", { var rendition = book.renderTo("viewer", {
manager: "continuous", // flow: "paginated",
flow: "paginated",
width: "100%", width: "100%",
height: 600 height: 600
}); });
var displayed = rendition.display(0); rendition.display("chapter_007.xhtml");
var title = document.getElementById("title");
displayed.then(function(renderer){
// -- do stuff
});
// Navigation loaded
book.loaded.navigation.then(function(toc){
// console.log(toc);
});
var next = document.getElementById("next"); var next = document.getElementById("next");
next.addEventListener("click", function(){ next.addEventListener("click", function(e){
rendition.next(); rendition.next();
e.preventDefault();
}, false); }, false);
var prev = document.getElementById("prev"); var prev = document.getElementById("prev");
prev.addEventListener("click", function(){ prev.addEventListener("click", function(e){
rendition.prev(); rendition.prev();
e.preventDefault();
}, false); }, false);
var keyListener = function(e){ var keyListener = function(e){
@ -165,8 +59,29 @@
rendition.on("keyup", keyListener); rendition.on("keyup", keyListener);
document.addEventListener("keyup", keyListener, false); document.addEventListener("keyup", keyListener, false);
rendition.on("selected", function(range) {
console.log("selected", range);
rendition.on("rendered", function(section){
var nextSection = section.next();
var prevSection = section.prev();
var current = book.navigation.get(section.href);
if (current) {
title.textContent = current.label;
}
if(nextSection) {
next.textContent = "›";
} else {
next.textContent = "";
}
if(prevSection) {
prev.textContent = "‹";
} else {
prev.textContent = "";
}
}); });
rendition.on("locationChanged", function(location){ rendition.on("locationChanged", function(location){

46
examples/spread.html → examples/swipe.html
View file

@ -9,16 +9,10 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.1/jquery.detect_swipe.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/detect_swipe/2.1.1/jquery.detect_swipe.min.js"></script>
<script src="../dist/epub.js"></script> <script src="../dist/epub.js"></script>
<link rel="stylesheet" type="text/css" href="examples.css">
<style type="text/css"> <style type="text/css">
body { body {
margin: 0;
background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
position: absolute;
height: 100%;
width: 100%;
display: flex; display: flex;
-webkit-align-items: center; -webkit-align-items: center;
-webkit-justify-content: center; -webkit-justify-content: center;
@ -27,44 +21,12 @@
#viewer { #viewer {
width: 290px; width: 290px;
height: 580px; height: 580px;
background: white;
box-shadow: 0 0 4px #ccc; box-shadow: 0 0 4px #ccc;
padding: 10px 10px 0px 10px; padding: 10px 10px 0px 10px;
margin: 5px auto; margin: 5px auto;
background: white; background: white;
} }
#prev {
left: 40px;
}
#next {
right: 40px;
}
.arrow {
position: fixed;
top: 50%;
margin-top: -32px;
font-size: 64px;
color: #E2E2E2;
font-family: arial, sans-serif;
font-weight: bold;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.arrow:hover {
color: #777;
}
.arrow:active {
color: #000;
}
@media only screen @media only screen
and (min-device-width : 320px) and (min-device-width : 320px)
@ -89,8 +51,7 @@
<div id="next" class="arrow">›</div> <div id="next" class="arrow">›</div>
<script> <script>
// Load the opf // Load the opf
// var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf"); var book = ePub("https://s3.amazonaws.com/epubjs/books/moby-dick/OPS/package.opf");
var book = ePub("../books/moby-dick/OPS/package.opf");
var rendition = book.renderTo("viewer", { var rendition = book.renderTo("viewer", {
manager: "continuous", manager: "continuous",
flow: "paginated", flow: "paginated",
@ -99,7 +60,6 @@
}); });
var displayed = rendition.display("chapter_001.xhtml"); var displayed = rendition.display("chapter_001.xhtml");
// var displayed = rendition.display();
displayed.then(function(renderer){ displayed.then(function(renderer){
// -- do stuff // -- do stuff

55
examples/toc.html
View file

@ -6,59 +6,12 @@
<script src="../dist/epub.js"></script> <script src="../dist/epub.js"></script>
<link rel="stylesheet" type="text/css" href="examples.css">
<style type="text/css">
body {
margin: 0;
height: 100%;
}
#viewer {
display: block;
margin: 50px auto;
width: 600px;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
.arrow {
position: absolute;
top: 50%;
margin-top: -32px;
font-size: 64px;
color: #E2E2E2;
font-family: arial, sans-serif;
font-weight: bold;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.arrow:hover {
color: #777;
}
.arrow:active {
color: #000;
}
#toc {
display: block;
margin: 10px auto;
}
</style>
</head> </head>
<body> <body>
<select id="toc"></select> <select id="toc"></select>
<div id="viewer"></div> <div id="viewer" class="scrolled"></div>
<script> <script>
var $viewer = document.getElementById("viewer"); var $viewer = document.getElementById("viewer");
@ -66,8 +19,8 @@
var $prev = document.getElementById("prev"); var $prev = document.getElementById("prev");
var currentSectionIndex = 9; var currentSectionIndex = 9;
// Load the opf // Load the opf
var book = ePub("../books/moby-dick/OPS/package.opf"); // https://s3.amazonaws.com/moby-dick/OPS/package.opf var book = ePub("https://s3.amazonaws.com/moby-dick/OPS/package.opf");
var rendition = book.renderTo("viewer", {width: 600, height: 400}); var rendition = book.renderTo("viewer", { flow: "scrolled-doc", width: 600, height: 400});
var displayed = rendition.display(currentSectionIndex); var displayed = rendition.display(currentSectionIndex);
book.loaded.navigation.then(function(toc){ book.loaded.navigation.then(function(toc){

9
src/layout.js
View file

@ -3,11 +3,18 @@ var RSVP = require('rsvp');
function Layout(settings){ function Layout(settings){
this.name = settings.layout || "reflowable"; this.name = settings.layout || "reflowable";
this._flow = (settings.flow === "paginated") ? "paginated" : "scrolled";
this._spread = (settings.spread === "none") ? false : true; this._spread = (settings.spread === "none") ? false : true;
this._minSpreadWidth = settings.spread || 800; this._minSpreadWidth = settings.spread || 800;
this._evenSpreads = settings.evenSpreads || false; this._evenSpreads = settings.evenSpreads || false;
if (settings.flow === "scrolled-continuous" ||
settings.flow === "scrolled-doc") {
this._flow = "scrolled";
} else {
this._flow = "paginated";
}
this.width = 0; this.width = 0;
this.height = 0; this.height = 0;
this.spreadWidth = 0; this.spreadWidth = 0;