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

fix: fix annotation cannot be removed issue; update highlights example

Browse source
This commit is contained in:
hsqStephenZhang 2024-03-06 00:03:48 +08:00
parent f09089cf77
commit 8ca344d4ec
1 changed files with 20 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

34
examples/highlights.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<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">
@ -50,9 +51,9 @@
cursor: pointer; cursor: pointer;
margin-left: 0; margin-left: 0;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="frame"> <div id="frame">
<div id="viewer" class="spreads"></div> <div id="viewer" class="spreads"></div>
@ -77,21 +78,21 @@
var displayed = rendition.display(6); var displayed = rendition.display(6);
// Navigation loaded // Navigation loaded
book.loaded.navigation.then(function(toc){ book.loaded.navigation.then(function (toc) {
// console.log(toc); // console.log(toc);
}); });
var next = document.getElementById("next"); var next = document.getElementById("next");
next.addEventListener("click", function(){ next.addEventListener("click", function () {
rendition.next(); rendition.next();
}, false); }, false);
var prev = document.getElementById("prev"); var prev = document.getElementById("prev");
prev.addEventListener("click", function(){ prev.addEventListener("click", function () {
rendition.prev(); rendition.prev();
}, false); }, false);
var keyListener = function(e){ var keyListener = function (e) {
// Left Key // Left Key
if ((e.keyCode || e.which) == 37) { if ((e.keyCode || e.which) == 37) {
@ -108,13 +109,13 @@
rendition.on("keyup", keyListener); rendition.on("keyup", keyListener);
document.addEventListener("keyup", keyListener, false); document.addEventListener("keyup", keyListener, false);
rendition.on("relocated", function(location){ rendition.on("relocated", function (location) {
// console.log(location); // console.log(location);
}); });
// Apply a class to selected text // Apply a class to selected text
rendition.on("selected", function(cfiRange, contents) { rendition.on("selected", function (cfiRange, contents) {
rendition.annotations.highlight(cfiRange, {}, (e) => { rendition.annotations.highlight(cfiRange, {}, (e) => {
console.log("highlight clicked", e.target); console.log("highlight clicked", e.target);
}); });
@ -126,7 +127,7 @@
'::selection': { '::selection': {
'background': 'rgba(255,255,0, 0.3)' 'background': 'rgba(255,255,0, 0.3)'
}, },
'.epubjs-hl' : { '.epubjs-hl': {
'fill': 'yellow', 'fill-opacity': '0.3', 'mix-blend-mode': 'multiply' 'fill': 'yellow', 'fill-opacity': '0.3', 'mix-blend-mode': 'multiply'
} }
}); });
@ -134,10 +135,11 @@
// Illustration of how to get text from a saved cfiRange // Illustration of how to get text from a saved cfiRange
var highlights = document.getElementById('highlights'); var highlights = document.getElementById('highlights');
rendition.on("selected", function(cfiRange) { rendition.on("selected", function (cfiRange) {
book.getRange(cfiRange).then(function (range) { book.getRange(cfiRange).then(function (range) {
var text; var text;
var div = document.createElement("div");
var li = document.createElement('li'); var li = document.createElement('li');
var a = document.createElement('a'); var a = document.createElement('a');
var remove = document.createElement('a'); var remove = document.createElement('a');
@ -156,13 +158,16 @@
remove.textContent = "remove"; remove.textContent = "remove";
remove.href = "#" + cfiRange; remove.href = "#" + cfiRange;
remove.onclick = function () { remove.onclick = function () {
rendition.annotations.remove(cfiRange); rendition.annotations.remove(cfiRange, "highlight");
li.removeChild(div);
return false; return false;
}; };
li.appendChild(a); div.appendChild(a);
li.appendChild(textNode); div.appendChild(textNode);
li.appendChild(remove); div.appendChild(remove);
li.appendChild(div);
highlights.appendChild(li); highlights.appendChild(li);
} }
@ -173,4 +178,5 @@
</script> </script>
</body> </body>
</html>
</html>