epubjs
Version:
Parse and Render Epubs
377 lines (305 loc) • 8.47 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EPUB.js + Hypothes.is 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>
window.hypothesisConfig = function () {
return {
constructor: this.Annotator.Sidebar,
app: 'http://45.55.144.135:5000/app.html',
};
};
</script>
<script src="http://45.55.144.135:5000/embed.js"></script>
<style type="text/css">
body {
margin: 0;
background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
}
#navigation {
width: 300px;
position: absolute;
overflow: auto;
top: 60px;
left: 1000px
}
#navigation.fixed {
position: fixed;
}
#navigation h1 {
width: 200px;
font-size: 16px;
font-weight: normal;
color: #777;
margin-bottom: 10px;
}
#navigation h2 {
font-size: 14px;
font-weight: normal;
color: #B0B0B0;
margin-bottom: 20px;
}
#navigation ul {
padding-left: 18px;
margin-left: 0;
}
#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: #777;
text-decoration: underline;
}
#navigation ul li a.active {
color: #000;
}
#viewer {
overflow: hidden;
width: 800px;
margin: 0 50px;
background: url('ajax-loader.gif') center center no-repeat;
}
#viewer .epub-view {
background: white;
box-shadow: 0 0 4px #ccc;
margin: 10px;
padding: 40px 80px;
}
#main {
position: absolute;
top: 50px;
left: 100px;
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 {
margin: 14px;
display: inline-block;
text-align: center;
text-decoration: none;
color: #ccc;
}
.arrow:hover {
color: #777;
}
.arrow:active {
color: #000;
}
#prev {
float: left;
}
#next {
float: right;
}
#toc {
display: block;
margin: 10px auto;
}
#hypothesis-custom {
overflow: hidden;
/*position: absolute;*/
right: 0;
/*top: 0;*/
height: 100%;
width: 200px;
/*z-index: -2;*/
}
#hypothesis-custom iframe {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="navigation">
<h1 id="title">...</h1>
<image id="cover" width="150px"/>
<h2 id="author">...</h2>
<ul id="toc"></ul>
</div>
<div id="main">
<div id="viewer"></div>
<div id="pagination">
<a id="prev" href="#prev" class="arrow">...</a>
<a id="next" href="#next" class="arrow">...</a>
</div>
</div>
<script>
var currentSectionIndex = 8;
// Load the opf
var book = ePub("https://s3.amazonaws.com/epubjs/books/alice/OPS/package.opf");
var rendition = book.renderTo("viewer");
// var hash = window.location.hash.slice(2);
var loc = window.location.href.indexOf("?loc=");
if (loc > -1) {
var href = window.location.href.slice(loc + 5);
var hash = decodeURIComponent(href);
}
rendition.display(hash || 1);
var next = document.getElementById("next");
next.addEventListener("click", function(e){
window.scrollTo(0,0);
rendition.next();
e.preventDefault();
}, false);
var prev = document.getElementById("prev");
prev.addEventListener("click", function(e){
window.scrollTo(0,0);
rendition.prev();
e.preventDefault();
}, false);
rendition.on("rendered", function(section){
var nextSection = section.next();
var prevSection = section.prev();
if(nextSection) {
nextNav = book.navigation.get(nextSection.href);
if(nextNav) {
nextLabel = nextNav.label;
} else {
nextLabel = "next";
}
next.textContent = nextLabel + " »";
} else {
next.textContent = "";
}
if(prevSection) {
prevNav = book.navigation.get(prevSection.href);
if(prevNav) {
prevLabel = prevNav.label;
} else {
prevLabel = "previous";
}
prev.textContent = "« " + prevLabel;
} else {
prev.textContent = "";
}
var old = document.querySelectorAll('.active');
Array.prototype.slice.call(old, 0).forEach(function (link) {
link.classList.remove("active");
})
var active = document.querySelector('a[href="'+section.href+'"]');
if (active) {
active.classList.add("active");
}
// Add CFI fragment to the history
history.pushState({}, '', "?loc=" + encodeURIComponent(section.href));
// window.location.hash = "#/"+section.href
});
book.loaded.navigation.then(function(toc){
var $nav = document.getElementById("toc"),
docfrag = document.createDocumentFragment();
toc.forEach(function(chapter, index) {
var item = document.createElement("li");
var link = document.createElement("a");
link.id = "chap-" + chapter.id;
link.textContent = chapter.label;
link.href = chapter.href;
item.appendChild(link);
docfrag.appendChild(item);
link.onclick = function(){
var url = link.getAttribute("href");
console.log(url)
rendition.display(url);
return false;
};
});
$nav.appendChild(docfrag);
});
book.loaded.metadata.then(function(meta){
var $title = document.getElementById("title");
var $author = document.getElementById("author");
var $cover = document.getElementById("cover");
var $nav = document.getElementById('navigation');
$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;
}
if ($nav.offsetHeight + 60 < window.innerHeight) {
$nav.classList.add("fixed");
}
});
function checkForAnnotator(cb, w) {
if (!w) {
w = window;
}
setTimeout(function () {
if (w && w.annotator) {
cb();
} else {
checkForAnnotator(cb, w);
}
}, 100);
}
book.rendition.hooks.content.register(function(view) {
view.window.hypothesisConfig = function () {
return {
constructor: this.Annotator.Guest,
app: 'http://45.55.144.135:5000/app.html'
};
};
view.contents.addScript("http://45.55.144.135:5000/embed.js").then(function() {
checkForAnnotator(function () {
var annotator = view.window.annotator;
annotator.on("scrollToAnnotation", function (node) {
var cfi = view.section.cfiFromElement(node);
// var selectors = ev.target[0].selector;
// var range = selectors[0];
console.log("scrollToAnnotation", cfi);
book.rendition.display(cfi);
});
annotator.on("highlightClick", function (annotation) {
console.log(annotation);
window.annotator.show();
})
annotator.on("beforeAnnotationCreated", function (annotation) {
console.log(annotation);
window.annotator.show();
})
}, view.window);
});
});
checkForAnnotator(function () {
var main = document.querySelector('#main');
if(window.innerWidth < 1400) {
window.annotator.on("show", function () {
main.classList.add("open");
});
window.annotator.on("hide", function () {
main.classList.remove("open");
});
}
});
</script>
</body>
</html>