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

Add parsing of json manifest

Browse source
This commit is contained in:
Fred Chasen 2017-03-22 11:17:13 -04:00
parent 0850e60868
commit f26b0c9f00
9 changed files with 499 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

119
examples/examples.css
View file

@ -7,6 +7,7 @@ body {
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
min-height: 800px;
} }
#title { #title {
@ -16,6 +17,7 @@ body {
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
color: #E2E2E2; color: #E2E2E2;
font-weight: 400;
} }
#title:hover { #title:hover {
@ -31,6 +33,7 @@ body {
position: relative; position: relative;
margin: 10px auto; margin: 10px auto;
background: white url('ajax-loader.gif') center center no-repeat; background: white url('ajax-loader.gif') center center no-repeat;
top: calc(50vh - 400px);
} }
#viewer.spreads .epub-view > iframe { #viewer.spreads .epub-view > iframe {
@ -125,6 +128,7 @@ body {
margin: 28px auto; margin: 28px auto;
background: #fff; background: #fff;
border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;
position: absolute;
} }
#book-viewer { #book-viewer {
@ -153,3 +157,118 @@ body {
#controls > input[type=range] { #controls > input[type=range] {
width: 400px; width: 400px;
} }
#navigation {
width: 400px;
height: 100vh;
position: absolute;
overflow: auto;
top: 0;
left: 0;
background: #777;
-webkit-transition: -webkit-transform .25s ease-out;
-moz-transition: -moz-transform .25s ease-out;
-ms-transition: -moz-transform .25s ease-out;
transition: transform .25s ease-out;
}
#navigation.fixed {
position: fixed;
}
#navigation h1 {
width: 200px;
font-size: 16px;
font-weight: normal;
color: #fff;
margin-bottom: 10px;
}
#navigation h2 {
font-size: 14px;
font-weight: normal;
color: #B0B0B0;
margin-bottom: 20px;
}
#navigation ul {
padding-left: 36px;
margin-left: 0;
margin-top: 12px;
margin-bottom: 12px;
width: 340px;
}
#navigation ul li {
list-style: decimal;
margin-bottom: 10px;
color: #cccddd;
font-size: 12px;
padding-left: 0;
margin-left: 0;
}
#navigation ul li a {
color: #ccc;
text-decoration: none;
}
#navigation ul li a:hover {
color: #fff;
text-decoration: underline;
}
#navigation ul li a.active {
color: #fff;
}
#navigation #cover {
display: block;
margin: 24px auto;
}
#navigation #closer {
position: absolute;
top: 0;
right: 0;
padding: 12px;
color: #cccddd;
width: 24px;
}
#navigation.closed {
-webkit-transform: translate(-400px, 0);
-moz-transform: translate(-400px, 0);
-ms-transform: translate(-400px, 0);
}
svg {
display: block;
}
.close-x {
stroke: #cccddd;
fill: transparent;
stroke-linecap: round;
stroke-width: 5;
}
.close-x:hover {
stroke: #fff;
}
#opener {
position: absolute;
top: 0;
left: 0;
padding: 10px;
stroke: #E2E2E2;
fill: #E2E2E2;
}
#opener:hover {
stroke: #777;
fill: #777;
}

179
examples/manifest.html Normal file
View file

@ -0,0 +1,179 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EPUB.js Spreads Example</title>
<script src="../dist/epub.js"></script>
<link rel="stylesheet" type="text/css" href="examples.css">
</head>
<body>
<h1 id="title">...</h1>
<div id="opener">
<svg height="24px" id="hamburger" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/>
</svg>
</div>
<div id="viewer" class="spreads"></div>
<a id="prev" href="#prev" class="arrow">‹</a>
<a id="next" href="#next" class="arrow">›</a>
<div id="navigation" class="closed">
<div id="closer">
<svg viewbox="0 0 40 40">
<path class="close-x" d="M 10,10 L 30,30 M 30,10 L 10,30" />
</svg>
</div>
<image id="cover" width="150px"/>
<h2 id="author">...</h2>
<div id="toc"></div>
</div>
<script>
var src = window.location.search ?
window.location.search.replace("?href=", '') :
"https://readium2.feedbooks.net/Ym9va3MvbW9ieS1kaWNrLmVwdWI=/manifest.json" ;
var book = ePub(src);
var rendition = book.renderTo("viewer", {
width: "100%",
height: 600
});
rendition.display();
var title = document.getElementById("title");
var next = document.getElementById("next");
next.addEventListener("click", function(e){
rendition.next();
e.preventDefault();
}, false);
var prev = document.getElementById("prev");
prev.addEventListener("click", function(e){
rendition.prev();
e.preventDefault();
}, 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);
var navigation = document.getElementById("navigation");
var opener = document.getElementById("opener");
opener.addEventListener("click", function(e){
navigation.classList.remove("closed");
e.preventDefault();
}, false);
var closer = document.getElementById("closer");
closer.addEventListener("click", function(e){
navigation.classList.add("closed");
e.preventDefault();
}, false);
book.loaded.navigation.then(function(toc){
var $nav = document.getElementById("toc"),
docfrag = document.createDocumentFragment();
var addTocItems = function (parent, tocItems) {
var $ul = document.createElement("ul");
tocItems.forEach(function(chapter) {
var item = document.createElement("li");
var link = document.createElement("a");
link.textContent = chapter.label;
link.href = chapter.href;
item.appendChild(link);
if (chapter.subitems) {
addTocItems(item, chapter.subitems)
}
link.onclick = function(){
var url = link.getAttribute("href");
rendition.display(url);
navigation.classList.add("closed");
return false;
};
$ul.appendChild(item);
});
parent.appendChild($ul);
};
addTocItems(docfrag, toc);
$nav.appendChild(docfrag);
if ($nav.offsetHeight + 60 < window.innerHeight) {
$nav.classList.add("fixed");
}
});
book.loaded.metadata.then(function(meta){
var $title = document.getElementById("title");
var $author = document.getElementById("author");
var $cover = document.getElementById("cover");
$title.textContent = meta.title;
$author.textContent = meta.creator;
if (book.archive) {
book.archive.createUrl(book.cover)
.then(function (url) {
$cover.src = url;
})
} else {
$cover.src = book.cover;
}
});
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){
console.log(location);
});
window.addEventListener("unload", function () {
this.book.destroy();
});
</script>
</body>
</html>

115
examples/single-full.html
View file

@ -14,16 +14,22 @@
background: #fafafa; background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333; color: #333;
display: flex;
justify-content: center;
} }
#navigation { #navigation {
width: 200px; width: 300px;
margin-top: 60px; position: absolute;
overflow: auto;
top: 60px;
left: 1000px
}
#navigation.fixed {
position: fixed;
} }
#navigation h1 { #navigation h1 {
width: 200px;
font-size: 16px; font-size: 16px;
font-weight: normal; font-weight: normal;
color: #777; color: #777;
@ -38,8 +44,10 @@
} }
#navigation ul { #navigation ul {
padding-left: 0; padding-left: 18px;
margin-left: 0; margin-left: 0;
margin-top: 12px;
margin-bottom: 12px;
} }
#navigation ul li { #navigation ul li {
@ -77,13 +85,32 @@
#viewer .epub-view { #viewer .epub-view {
background: white; background: white;
box-shadow: 0 0 4px #ccc; box-shadow: 0 0 4px #ccc;
margin: 10px; /*margin: 10px;*/
padding: 20px; /*padding: 40px 80px;*/
}
#main {
position: absolute;
top: 50px;
left: 50px;
width: 800px;
z-index: 2;
transition: left .15s cubic-bezier(.55, 0, .2, .8) .08s;
}
#main.open {
left: 0;
}
#pagination {
text-align: center;
margin-left: 80px;
/*padding: 0 50px;*/
} }
.arrow { .arrow {
margin: 14px; margin: 14px;
display: block; display: inline-block;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
color: #ccc; color: #ccc;
@ -97,33 +124,43 @@
color: #000; color: #000;
} }
#prev {
float: left;
}
#next {
float: right;
}
#toc { #toc {
display: block; display: block;
margin: 10px auto; margin: 10px auto;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="navigation"> <div id="navigation">
<h1 id="title">...</h1> <h1 id="title">...</h1>
<image id="cover" width="150px"/>
<h2 id="author">...</h2> <h2 id="author">...</h2>
<ul id="toc"></ul> <div id="toc"></div>
</div> </div>
<div id="main"> <div id="main">
<a id="prev" href="#prev" class="arrow">...</a>
<div id="viewer"></div> <div id="viewer"></div>
<a id="next" href="#next" class="arrow">...</a> <div id="pagination">
<a id="prev" href="#prev" class="arrow">...</a>
<a id="next" href="#next" class="arrow">...</a>
</div>
</div> </div>
<script> <script>
var currentSectionIndex = 8;
// Load the opf // Load the opf
var book = ePub("https://s3.amazonaws.com/epubjs/books/alice/OPS/package.opf"); var book = ePub("https://s3.amazonaws.com/moby-dick/moby-dick.epub");
var rendition = book.renderTo("viewer", { var rendition = book.renderTo("viewer", {
flow: "scrolled-doc" flow: "scrolled-doc"
}); });
var hash = window.location.hash.slice(2); var hash = window.location.hash.slice(2);
console.log(hash);
rendition.display(hash || 1); rendition.display(hash || 1);
@ -185,34 +222,56 @@
book.loaded.navigation.then(function(toc){ book.loaded.navigation.then(function(toc){
var $nav = document.getElementById("toc"), var $nav = document.getElementById("toc"),
docfrag = document.createDocumentFragment(); docfrag = document.createDocumentFragment();
var addTocItems = function (parent, tocItems) {
var $ul = document.createElement("ul");
tocItems.forEach(function(chapter) {
var item = document.createElement("li");
var link = document.createElement("a");
link.textContent = chapter.label;
link.href = chapter.href;
item.appendChild(link);
toc.forEach(function(chapter) { if (chapter.subitems) {
var item = document.createElement("li"); addTocItems(item, chapter.subitems)
var link = document.createElement("a"); }
link.textContent = chapter.label;
link.href = chapter.href;
item.appendChild(link);
docfrag.appendChild(item);
link.onclick = function(){ link.onclick = function(){
var url = link.getAttribute("href"); var url = link.getAttribute("href");
console.log(url) rendition.display(url);
rendition.display(url); return false;
return false; };
};
}); $ul.appendChild(item);
});
parent.appendChild($ul);
};
addTocItems(docfrag, toc);
$nav.appendChild(docfrag); $nav.appendChild(docfrag);
if ($nav.offsetHeight + 60 < window.innerHeight) {
$nav.classList.add("fixed");
}
}); });
book.loaded.metadata.then(function(meta){ book.loaded.metadata.then(function(meta){
var $title = document.getElementById("title"); var $title = document.getElementById("title");
var $author = document.getElementById("author"); var $author = document.getElementById("author");
var $cover = document.getElementById("cover");
$title.textContent = meta.title; $title.textContent = meta.title;
$author.textContent = meta.creator; $author.textContent = meta.creator;
if (book.archive) {
book.archive.createUrl(book.cover)
.then(function (url) {
$cover.src = url;
})
} else {
$cover.src = book.cover;
}
}); });
</script> </script>

1
src/archive.js
View file

@ -247,6 +247,7 @@ class Archive {
} }
destroy() { destroy() {
var _URL = window.URL || window.webkitURL || window.mozURL;
for (let fromCache in this.urlCache) { for (let fromCache in this.urlCache) {
_URL.revokeObjectURL(fromCache); _URL.revokeObjectURL(fromCache);
} }

45
src/book.js
View file

@ -201,6 +201,9 @@ class Book {
} else if(type == "opf") { } else if(type == "opf") {
this.url = new Url(input); this.url = new Url(input);
opening = this.openPackaging(this.url.Path.toString()); opening = this.openPackaging(this.url.Path.toString());
} else if(type == "json") {
this.url = new Url(input);
opening = this.openManifest(this.url.Path.toString());
} else { } else {
this.url = new Url(input); this.url = new Url(input);
opening = this.openContainer(CONTAINER_PATH) opening = this.openContainer(CONTAINER_PATH)
@ -256,6 +259,22 @@ class Book {
}); });
} }
/**
* Open the manifest JSON
* @private
* @param {string} url
* @return {Promise}
*/
openManifest(url) {
this.path = new Path(url);
return this.load(url)
.then((json) => {
this.packaging = new Packaging();
this.packaging.load(json);
return this.unpack(this.packaging);
});
}
/** /**
* Load a resource from the Book * Load a resource from the Book
* @param {string} path path to the resource to load * @param {string} path path to the resource to load
@ -335,6 +354,10 @@ class Book {
if(extension === "opf"){ if(extension === "opf"){
return "opf"; return "opf";
} }
if(extension === "json"){
return "json";
}
} }
@ -359,6 +382,7 @@ class Book {
this.toc = this.navigation.toc; this.toc = this.navigation.toc;
this.loading.navigation.resolve(this.navigation); this.loading.navigation.resolve(this.navigation);
}); });
if (this.package.coverPath) { if (this.package.coverPath) {
this.cover = this.resolve(this.package.coverPath); this.cover = this.resolve(this.package.coverPath);
} }
@ -370,7 +394,6 @@ class Book {
this.loading.resources.resolve(this.resources); this.loading.resources.resolve(this.resources);
this.loading.pageList.resolve(this.pageList); this.loading.pageList.resolve(this.pageList);
this.isOpen = true; this.isOpen = true;
if(this.archived || this.settings.replacements && this.settings.replacements != "none") { if(this.archived || this.settings.replacements && this.settings.replacements != "none") {
@ -393,10 +416,26 @@ class Book {
* @param {document} opf XML Document * @param {document} opf XML Document
*/ */
loadNavigation(opf) { loadNavigation(opf) {
var navPath = opf.navPath || opf.ncxPath; let navPath = opf.navPath || opf.ncxPath;
let toc = opf.toc;
if (toc) {
return new Promise((resolve, reject) => {
this.navigation = new Navigation(toc);
this.pageList = new PageList(); // TODO: handle page lists
resolve(this.navigation);
});
}
if (!navPath) { if (!navPath) {
return; return new Promise((resolve, reject) => {
this.navigation = new Navigation();
this.pageList = new PageList();
resolve(this.navigation);
});
} }
return this.load(navPath, "xml") return this.load(navPath, "xml")

6
src/managers/views/iframe.js
View file

@ -102,7 +102,7 @@ class IframeView {
// Firefox has trouble with baseURI and srcdoc // Firefox has trouble with baseURI and srcdoc
// TODO: Disable for now in firefox // TODO: Disable for now in firefox
if(!("srcdoc" in this.iframe)) { if("srcdoc" in this.iframe) {
this.supportsSrcdoc = true; this.supportsSrcdoc = true;
} else { } else {
this.supportsSrcdoc = false; this.supportsSrcdoc = false;
@ -369,6 +369,10 @@ class IframeView {
this.onResize(this, size); this.onResize(this, size);
if (this.contents) {
this.settings.layout.format(this.contents);
}
this.emit("resized", size); this.emit("resized", size);
} }

25
src/navigation.js
View file

@ -20,10 +20,15 @@ class Navigation {
* @param {document} xml navigation html / xhtml / ncx * @param {document} xml navigation html / xhtml / ncx
*/ */
parse(xml) { parse(xml) {
var html = qs(xml, "html"); let isXml = xml.nodeValue;
var ncx = qs(xml, "ncx"); if (isXml) {
let html = qs(xml, "html");
let ncx = qs(xml, "ncx");
}
if(html) { if (!isXml) {
this.toc = this.load(xml);
} else if(html) {
this.toc = this.parseNav(xml); this.toc = this.parseNav(xml);
} else if(ncx){ } else if(ncx){
this.toc = this.parseNcx(xml); this.toc = this.parseNcx(xml);
@ -203,6 +208,20 @@ class Navigation {
}; };
} }
/**
* Load Spine Items
* @param {object} json the items to be loaded
*/
load(json) {
return json.map((item) => {
item.label = item.title;
if (item.children) {
item.subitems = this.load(item.children);
}
return item;
});
}
/** /**
* forEach pass through * forEach pass through
* @param {Function} fn function to run on each item * @param {Function} fn function to run on each item

40
src/packaging.js
View file

@ -282,6 +282,46 @@ class Packaging {
return ""; return "";
} }
/**
* Load JSON Manifest
* @param {document} packageDocument OPF XML
* @return {object} parsed package parts
*/
load(json) {
this.metadata = json.metadata;
this.spine = json.spine.map((item, index) =>{
item.index = index;
return item;
});
json.resources.forEach((item, index) => {
this.manifest[index] = item;
if (item.rel && item.rel[0] === "cover") {
this.coverPath = item.href;
}
});
this.spineNodeIndex = 0;
this.toc = json.toc.map((item, index) =>{
item.label = item.title;
return item;
});
return {
"metadata" : this.metadata,
"spine" : this.spine,
"manifest" : this.manifest,
"navPath" : this.navPath,
"ncxPath" : this.ncxPath,
"coverPath": this.coverPath,
"spineNodeIndex" : this.spineNodeIndex,
"toc" : this.toc
};
}
destroy() { destroy() {
this.manifest = undefined; this.manifest = undefined;
this.navPath = undefined; this.navPath = undefined;

5
src/spine.js
View file

@ -50,10 +50,13 @@ class Spine {
item.cfiBase = this.epubcfi.generateChapterComponent(this.spineNodeIndex, item.index, item.idref); item.cfiBase = this.epubcfi.generateChapterComponent(this.spineNodeIndex, item.index, item.idref);
if (item.href) {
item.url = resolver(item.href, true);
}
if(manifestItem) { if(manifestItem) {
item.href = manifestItem.href; item.href = manifestItem.href;
item.url = resolver(item.href, true); item.url = resolver(item.href, true);
if(manifestItem.properties.length){ if(manifestItem.properties.length){
item.properties.push.apply(item.properties, manifestItem.properties); item.properties.push.apply(item.properties, manifestItem.properties);
} }