1
0
Fork 0
mirror of https://github.com/futurepress/epub.js.git synced 2025-10-04 15:09:16 +02:00

Hypothesis examples

This commit is contained in:
fchasen 2015-11-20 20:05:07 -05:00
parent 80787fc86b
commit 76aab85dc4
6 changed files with 501 additions and 32 deletions

22
dist/epub.js vendored
View file

@ -5227,6 +5227,7 @@ EPUBJS.Rendition.prototype.render = function(view, show) {
// this.map = new EPUBJS.Map(view, this.layout); // this.map = new EPUBJS.Map(view, this.layout);
this.hooks.show.trigger(view, this);
this.trigger("rendered", view.section); this.trigger("rendered", view.section);
}.bind(this)) }.bind(this))
@ -5648,7 +5649,6 @@ EPUBJS.Continuous.prototype.afterDisplayed = function(currView){
// this.removeShownListeners(currView); // this.removeShownListeners(currView);
// currView.onShown = this.afterDisplayed.bind(this); // currView.onShown = this.afterDisplayed.bind(this);
this.trigger("added", currView.section); this.trigger("added", currView.section);
}; };
@ -5854,11 +5854,6 @@ EPUBJS.Continuous.prototype.onScroll = function(){
if(!this.ignore) { if(!this.ignore) {
// this.trigger("scroll", {
// top: scrollTop,
// left: scrollLeft
// });
if((this.scrollDeltaVert === 0 && if((this.scrollDeltaVert === 0 &&
this.scrollDeltaHorz === 0) || this.scrollDeltaHorz === 0) ||
this.scrollDeltaVert > this.settings.offsetDelta || this.scrollDeltaVert > this.settings.offsetDelta ||
@ -5869,6 +5864,11 @@ EPUBJS.Continuous.prototype.onScroll = function(){
this.scrollDeltaVert = 0; this.scrollDeltaVert = 0;
this.scrollDeltaHorz = 0; this.scrollDeltaHorz = 0;
this.trigger("scroll", {
top: scrollTop,
left: scrollLeft
});
} }
} else { } else {
@ -5878,14 +5878,8 @@ EPUBJS.Continuous.prototype.onScroll = function(){
this.scrollDeltaVert += Math.abs(scrollTop-this.prevScrollTop); this.scrollDeltaVert += Math.abs(scrollTop-this.prevScrollTop);
this.scrollDeltaHorz += Math.abs(scrollLeft-this.prevScrollLeft); this.scrollDeltaHorz += Math.abs(scrollLeft-this.prevScrollLeft);
if(this.settings.height) { this.prevScrollTop = scrollTop;
this.prevScrollTop = this.container.scrollTop; this.prevScrollLeft = scrollLeft;
this.prevScrollLeft = this.container.scrollLeft;
} else {
this.prevScrollTop = window.scrollY;
this.prevScrollLeft = window.scrollX;
}
clearTimeout(this.scrollTimeout); clearTimeout(this.scrollTimeout);
this.scrollTimeout = setTimeout(function(){ this.scrollTimeout = setTimeout(function(){

4
dist/epub.min.js vendored

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,136 @@
<!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>
<!-- <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> -->
<script src="//hypothes.is/embed.js"></script>
<style type="text/css">
body {
margin: 0 auto;
background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
height: 100%;
width: 100%;
max-width: 1200px;
}
.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/alice/OPS/package.opf");
var rendition = book.renderTo(document.body, { method: "continuous", width: "60%" });
var displayed = rendition.display();
displayed.then(function(renderer){
// -- do stuff
});
// Navigation loaded
book.loaded.navigation.then(function(toc){
// console.log(toc);
});
book.rendition.hooks.content.register(function(view) {
return view.addScript("//hypothes.is/embed.js").then(function() {
view.window.hypothesisConfig = function () {
return {
constructor: this.Annotator.Guest,
app: 'https://hypothes.is/app.html'
};
};
// view.window.hypothesisInstall();
});
});
book.rendition.hooks.render.register(function(view) {
var getVisibleAnnotations = function ($) {
var height = document.documentElement.clientHeight;
return $('.annotator-hl').map(function() {
var $this = $(this),
pos = view.position().top,
top = pos + this.getBoundingClientRect().top;
if (top >= 0 && top <= height) {
return $this.data('annotation');
}
}).get();
};
book.rendition.on("scroll", function() {
var annotator = view.window.annotator;
var annotations;
if(annotator && annotator.constructor.$) {
annotations = getVisibleAnnotations(annotator.constructor.$);
annotator.showAnnotations(annotations);
}
});
});
</script>
</body>
</html>

345
examples/hypothesis.html Normal file
View file

@ -0,0 +1,345 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EPUB.js Basic Example</title>
<script src="../dist/epub.js"></script>
<script src="//hypothes.is/embed.js"></script>
<style type="text/css">
body {
margin: 0;
background: #fafafa;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
}
#navigation {
width: 200px;
margin-top: 60px;
float: left;
padding: 0 0 0 100px;
}
#navigation h1 {
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: 0;
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: 20px;
}
#main {
margin-left: 300px;
width: 800px;
}
#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 {
overflow: hidden;
/*position: absolute;*/
right: 0;
/*top: 0;*/
height: 100%;
width: 200px;
/*z-index: -2;*/
}
#hypothesis iframe {
position: absolute;
width: 100%;
height: 100%;
}
#annotation-controls {
position: absolute;
top: -7px;
left: 0px;
}
#annotation-controls ul {
list-style-type: none;
}
#annotation-controls ul li button {
font-size: 1.5em;
margin-bottom: 10px;
background: #fff;
border: none;
opacity: .5;
}
#annotation-controls ul li button:hover {
opacity: .8;
}
#annotation-controls ul li button:focus {
border: none !important;
}
</style>
</head>
<body>
<div id="navigation">
<h1 id="title">...</h1>
<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>
<div id="annotation-controls"></div>
<!-- <div id="hypothesis">
<iframe src="//hypothes.is/app.html" seamless></iframe>
</div> -->
<script>
var currentSectionIndex = 8;
// Load the opf
var book = ePub("../books/alice/");
var rendition = book.renderTo("viewer");
var hash = window.location.hash.slice(2);
rendition.display(hash || 1);
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);
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 = "";
}
// Add CFI fragment to the history
//history.pushState({}, '', 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) {
var item = document.createElement("li");
var link = document.createElement("a");
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");
$title.textContent = meta.title;
$author.textContent = meta.creator;
});
book.rendition.hooks.content.register(function(view) {
view.addScript("//hypothes.is/embed.js").then(function() {
view.window.hypothesisConfig = function () {
return {
constructor: this.Annotator.Guest,
app: 'https://hypothes.is/app.html'
};
};
})
});
</script>
<script>
// // Hypothesis Customized embedding
// // This hypothesis config function returns a new constructor which modifies
// // annotator for a better integration. Below we create our own EpubAnnotationSidebar
// // Constructor, customizing the show and hide function to take acount for the reader UI.
//
// window.hypothesisConfig = function() {
// var Annotator = window.Annotator;
// var $main = $("#main");
//
// function EpubAnnotationSidebar(elem, options) {
// options = {
// server: true,
// origin: true,
// showHighlights: true,
// Toolbar: {container: '#annotation-controls'}
// }
//
// Annotator.Host.call(this, elem, options);
// }
//
// EpubAnnotationSidebar.prototype = Object.create(Annotator.Host.prototype);
//
// // EpubAnnotationSidebar.prototype.show = function() {
// // this.frame.css({
// // 'margin-left': (-1 * this.frame.width()) + "px"
// // });
// // this.frame.removeClass('annotator-collapsed');
// // if (!$main.hasClass('single')) {
// // $main.addClass("single");
// // this.toolbar.find('[name=sidebar-toggle]').removeClass('h-icon-chevron-left').addClass('h-icon-chevron-right');
// // this.setVisibleHighlights(true);
// // }
// // };
// //
// // EpubAnnotationSidebar.prototype.hide = function() {
// // this.frame.css({
// // 'margin-left': ''
// // });
// // this.frame.addClass('annotator-collapsed');
// // if ($main.hasClass('single')) {
// // $main.removeClass("single");
// // this.toolbar.find('[name=sidebar-toggle]').removeClass('h-icon-chevron-right').addClass('h-icon-chevron-left');
// // this.setVisibleHighlights(false);
// // }
// // };
//
// return {
// constructor: EpubAnnotationSidebar
// }
// };
</script>
</body>
</html>

View file

@ -84,7 +84,6 @@ EPUBJS.Continuous.prototype.afterDisplayed = function(currView){
// this.removeShownListeners(currView); // this.removeShownListeners(currView);
// currView.onShown = this.afterDisplayed.bind(this); // currView.onShown = this.afterDisplayed.bind(this);
this.trigger("added", currView.section); this.trigger("added", currView.section);
}; };
@ -290,11 +289,6 @@ EPUBJS.Continuous.prototype.onScroll = function(){
if(!this.ignore) { if(!this.ignore) {
// this.trigger("scroll", {
// top: scrollTop,
// left: scrollLeft
// });
if((this.scrollDeltaVert === 0 && if((this.scrollDeltaVert === 0 &&
this.scrollDeltaHorz === 0) || this.scrollDeltaHorz === 0) ||
this.scrollDeltaVert > this.settings.offsetDelta || this.scrollDeltaVert > this.settings.offsetDelta ||
@ -305,6 +299,11 @@ EPUBJS.Continuous.prototype.onScroll = function(){
this.scrollDeltaVert = 0; this.scrollDeltaVert = 0;
this.scrollDeltaHorz = 0; this.scrollDeltaHorz = 0;
this.trigger("scroll", {
top: scrollTop,
left: scrollLeft
});
} }
} else { } else {
@ -314,14 +313,8 @@ EPUBJS.Continuous.prototype.onScroll = function(){
this.scrollDeltaVert += Math.abs(scrollTop-this.prevScrollTop); this.scrollDeltaVert += Math.abs(scrollTop-this.prevScrollTop);
this.scrollDeltaHorz += Math.abs(scrollLeft-this.prevScrollLeft); this.scrollDeltaHorz += Math.abs(scrollLeft-this.prevScrollLeft);
if(this.settings.height) { this.prevScrollTop = scrollTop;
this.prevScrollTop = this.container.scrollTop; this.prevScrollLeft = scrollLeft;
this.prevScrollLeft = this.container.scrollLeft;
} else {
this.prevScrollTop = window.scrollY;
this.prevScrollLeft = window.scrollX;
}
clearTimeout(this.scrollTimeout); clearTimeout(this.scrollTimeout);
this.scrollTimeout = setTimeout(function(){ this.scrollTimeout = setTimeout(function(){

View file

@ -280,6 +280,7 @@ EPUBJS.Rendition.prototype.render = function(view, show) {
// this.map = new EPUBJS.Map(view, this.layout); // this.map = new EPUBJS.Map(view, this.layout);
this.hooks.show.trigger(view, this);
this.trigger("rendered", view.section); this.trigger("rendered", view.section);
}.bind(this)) }.bind(this))