mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-05 15:32:55 +02:00
add highlights examples
This commit is contained in:
Fred Chasen
parent
050f5dea7d
commit
558cd61cee
7 changed files with 248 additions and 32 deletions
26
dist/epub.js
vendored
26
dist/epub.js
vendored
|
|
@ -6176,18 +6176,14 @@ Highlighter.prototype.add = function(range, className) {
|
|||
|
||||
this.doc = range.startContainer.ownerDocument;
|
||||
|
||||
// TODO: is this is needed?
|
||||
// Wrap all child text nodes
|
||||
/*
|
||||
this.getTextNodes(range, _doc).forEach(function(node) {
|
||||
var range = document.createRange();
|
||||
range.selectNodeContents(node);
|
||||
range.surroundContents(this.wrapperNode())
|
||||
});
|
||||
*/
|
||||
this.getTextNodes(range, this.doc).forEach(function(node) {
|
||||
wrappers.push(this.wrapNode(node));
|
||||
}.bind(this));
|
||||
|
||||
|
||||
if (range.startContainer === range.endContainer) {
|
||||
wrappers.push(this.wrapNode(range));
|
||||
wrappers.push(this.wrapRange(range));
|
||||
} else {
|
||||
// Wrap start and end elements
|
||||
wrappers.push(this.wrapPartial(range, range.startContainer, 'start'));
|
||||
|
|
@ -6229,12 +6225,20 @@ Highlighter.prototype.getTextNodes = function(range, _doc) {
|
|||
|
||||
};
|
||||
|
||||
Highlighter.prototype.wrapNode = function(range) {
|
||||
Highlighter.prototype.wrapRange = function(range) {
|
||||
var wrapper = this.wrapperNode();
|
||||
range.surroundContents(wrapper);
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
Highlighter.prototype.wrapNode = function(node) {
|
||||
var wrapper = this.wrapperNode();
|
||||
var range = this.doc.createRange();
|
||||
range.selectNodeContents(node);
|
||||
range.surroundContents(wrapper);
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
Highlighter.prototype.wrapPartial = function(range, node, position) {
|
||||
var startOffset = position === 'start' ? range.startOffset : 0;
|
||||
var endOffset = position === 'start' ? node.length : range.endOffset
|
||||
|
|
@ -8354,6 +8358,7 @@ Rendition.prototype.render = function(view, show) {
|
|||
|
||||
Rendition.prototype.afterDisplayed = function(view){
|
||||
this.trigger("added", view.section);
|
||||
this.reportLocation();
|
||||
};
|
||||
|
||||
Rendition.prototype.fill = function(view){
|
||||
|
|
@ -8680,7 +8685,6 @@ Rendition.prototype.triggerViewEvent = function(e){
|
|||
};
|
||||
|
||||
Rendition.prototype.triggerSelectedEvent = function(cfirange){
|
||||
console.log(cfirange);
|
||||
this.trigger("selected", cfirange);
|
||||
};
|
||||
|
||||
|
|
|
|||
2
dist/epub.js.map
vendored
2
dist/epub.js.map
vendored
File diff suppressed because one or more lines are too long
200
examples/highlights.html
Normal file
200
examples/highlights.html
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>EPUB.js Pagination Example</title>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
|
||||
<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;
|
||||
|
||||
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>
|
||||
<body>
|
||||
<div id="viewer"></div>
|
||||
<div id="prev" class="arrow">‹</div>
|
||||
<div id="next" class="arrow">›</div>
|
||||
<script>
|
||||
// Load the 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", {
|
||||
method: "paginate",
|
||||
width: "100%",
|
||||
height: 600
|
||||
});
|
||||
|
||||
var displayed = rendition.display(3);
|
||||
|
||||
|
||||
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);
|
||||
|
||||
var highlights = [];
|
||||
|
||||
rendition.on("selected", function(cfiRange) {
|
||||
window.getSelection().removeAllRanges();
|
||||
|
||||
highlights = rendition.highlight(cfiRange);
|
||||
|
||||
// Illustation of how to add events to highlights
|
||||
// and how get text from a range.
|
||||
|
||||
highlights.forEach(function (h) {
|
||||
// Set the cfi range
|
||||
h.setAttribute("data-epubcfi", cfiRange);
|
||||
// Add a click event
|
||||
h.addEventListener('click', function (e) {
|
||||
var cfiRange = e.target.getAttribute("data-epubcfi");
|
||||
book.getTextFromCfiRange(cfiRange).then(function (text) {
|
||||
console.log(text);
|
||||
})
|
||||
return e.stopPropagation();
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
rendition.on("locationChanged", function(location){
|
||||
// console.log(location);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -178,6 +178,10 @@
|
|||
window.location.hash = "#/"+section.href
|
||||
});
|
||||
|
||||
rendition.on("locationChanged", function(location){
|
||||
console.log(location);
|
||||
});
|
||||
|
||||
book.loaded.navigation.then(function(toc){
|
||||
var $nav = document.getElementById("toc"),
|
||||
docfrag = document.createDocumentFragment();
|
||||
|
|
|
|||
|
|
@ -167,7 +167,11 @@
|
|||
|
||||
rendition.on("selected", function(range) {
|
||||
console.log("selected", range);
|
||||
})
|
||||
});
|
||||
|
||||
rendition.on("locationChanged", function(location){
|
||||
console.log(location);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -16,18 +16,14 @@ Highlighter.prototype.add = function(range, className) {
|
|||
|
||||
this.doc = range.startContainer.ownerDocument;
|
||||
|
||||
// TODO: is this is needed?
|
||||
// Wrap all child text nodes
|
||||
/*
|
||||
this.getTextNodes(range, _doc).forEach(function(node) {
|
||||
var range = document.createRange();
|
||||
range.selectNodeContents(node);
|
||||
range.surroundContents(this.wrapperNode())
|
||||
});
|
||||
*/
|
||||
this.getTextNodes(range, this.doc).forEach(function(node) {
|
||||
wrappers.push(this.wrapNode(node));
|
||||
}.bind(this));
|
||||
|
||||
|
||||
if (range.startContainer === range.endContainer) {
|
||||
wrappers.push(this.wrapNode(range));
|
||||
wrappers.push(this.wrapRange(range));
|
||||
} else {
|
||||
// Wrap start and end elements
|
||||
wrappers.push(this.wrapPartial(range, range.startContainer, 'start'));
|
||||
|
|
@ -69,12 +65,20 @@ Highlighter.prototype.getTextNodes = function(range, _doc) {
|
|||
|
||||
};
|
||||
|
||||
Highlighter.prototype.wrapNode = function(range) {
|
||||
Highlighter.prototype.wrapRange = function(range) {
|
||||
var wrapper = this.wrapperNode();
|
||||
range.surroundContents(wrapper);
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
Highlighter.prototype.wrapNode = function(node) {
|
||||
var wrapper = this.wrapperNode();
|
||||
var range = this.doc.createRange();
|
||||
range.selectNodeContents(node);
|
||||
range.surroundContents(wrapper);
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
Highlighter.prototype.wrapPartial = function(range, node, position) {
|
||||
var startOffset = position === 'start' ? range.startOffset : 0;
|
||||
var endOffset = position === 'start' ? node.length : range.endOffset
|
||||
|
|
|
|||
|
|
@ -309,6 +309,7 @@ Rendition.prototype.render = function(view, show) {
|
|||
|
||||
Rendition.prototype.afterDisplayed = function(view){
|
||||
this.trigger("added", view.section);
|
||||
this.reportLocation();
|
||||
};
|
||||
|
||||
Rendition.prototype.fill = function(view){
|
||||
|
|
@ -635,7 +636,6 @@ Rendition.prototype.triggerViewEvent = function(e){
|
|||
};
|
||||
|
||||
Rendition.prototype.triggerSelectedEvent = function(cfirange){
|
||||
console.log(cfirange);
|
||||
this.trigger("selected", cfirange);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue