mirror of
https://github.com/futurepress/epub.js.git
synced 2025-10-04 15:09:16 +02:00
Add methods to remove marks
This commit is contained in:
parent
c01f2d3202
commit
042793157b
2 changed files with 58 additions and 10 deletions
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "epubjs",
|
"name": "epubjs",
|
||||||
"version": "0.3.30",
|
"version": "0.3.31",
|
||||||
"description": "Parse and Render Epubs",
|
"description": "Parse and Render Epubs",
|
||||||
"main": "lib/index.js",
|
"main": "lib/index.js",
|
||||||
"module": "src/index.js",
|
"module": "src/index.js",
|
||||||
|
|
|
@ -26,6 +26,9 @@ class Contents {
|
||||||
this.cfiBase = cfiBase || "";
|
this.cfiBase = cfiBase || "";
|
||||||
|
|
||||||
this.pane = undefined;
|
this.pane = undefined;
|
||||||
|
this.highlights = {};
|
||||||
|
this.underlines = {};
|
||||||
|
this.marks = {};
|
||||||
|
|
||||||
this.listeners();
|
this.listeners();
|
||||||
}
|
}
|
||||||
|
@ -758,6 +761,9 @@ class Contents {
|
||||||
|
|
||||||
highlight(cfiRange, data={}, cb) {
|
highlight(cfiRange, data={}, cb) {
|
||||||
let range = this.range(cfiRange);
|
let range = this.range(cfiRange);
|
||||||
|
let emitter = () => {
|
||||||
|
this.emit("markClicked", cfiRange, data);
|
||||||
|
};
|
||||||
|
|
||||||
data["epubcfi"] = cfiRange;
|
data["epubcfi"] = cfiRange;
|
||||||
|
|
||||||
|
@ -768,9 +774,9 @@ class Contents {
|
||||||
let m = new Highlight(range, "epubjs-hl", data, {'fill': 'yellow', 'fill-opacity': '0.3', 'mix-blend-mode': 'multiply'});
|
let m = new Highlight(range, "epubjs-hl", data, {'fill': 'yellow', 'fill-opacity': '0.3', 'mix-blend-mode': 'multiply'});
|
||||||
let h = this.pane.addMark(m);
|
let h = this.pane.addMark(m);
|
||||||
|
|
||||||
h.element.addEventListener("click", () => {
|
this.highlights[cfiRange] = { "mark": h, "element": h.element, "listeners": [emitter, cb] };
|
||||||
this.emit("markClicked", cfiRange, data);
|
|
||||||
});
|
h.element.addEventListener("click", emitter);
|
||||||
|
|
||||||
if (cb) {
|
if (cb) {
|
||||||
h.element.addEventListener("click", cb);
|
h.element.addEventListener("click", cb);
|
||||||
|
@ -780,6 +786,9 @@ class Contents {
|
||||||
|
|
||||||
underline(cfiRange, data={}, cb) {
|
underline(cfiRange, data={}, cb) {
|
||||||
let range = this.range(cfiRange);
|
let range = this.range(cfiRange);
|
||||||
|
let emitter = () => {
|
||||||
|
this.emit("markClicked", cfiRange, data);
|
||||||
|
};
|
||||||
|
|
||||||
data["epubcfi"] = cfiRange;
|
data["epubcfi"] = cfiRange;
|
||||||
|
|
||||||
|
@ -790,9 +799,9 @@ class Contents {
|
||||||
let m = new Underline(range, "epubjs-ul", data, {'stroke': 'black', 'stroke-opacity': '0.3', 'mix-blend-mode': 'multiply'});
|
let m = new Underline(range, "epubjs-ul", data, {'stroke': 'black', 'stroke-opacity': '0.3', 'mix-blend-mode': 'multiply'});
|
||||||
let h = this.pane.addMark(m);
|
let h = this.pane.addMark(m);
|
||||||
|
|
||||||
h.element.addEventListener("click", () => {
|
this.underlines[cfiRange] = { "mark": h, "element": h.element, "listeners": [emitter, cb] };
|
||||||
this.emit("markClicked", cfiRange, data);
|
|
||||||
});
|
h.element.addEventListener("click", emitter);
|
||||||
|
|
||||||
if (cb) {
|
if (cb) {
|
||||||
h.element.addEventListener("click", cb);
|
h.element.addEventListener("click", cb);
|
||||||
|
@ -805,6 +814,9 @@ class Contents {
|
||||||
|
|
||||||
let container = range.commonAncestorContainer;
|
let container = range.commonAncestorContainer;
|
||||||
let parent = (container.nodeType === 1) ? container : container.parentNode;
|
let parent = (container.nodeType === 1) ? container : container.parentNode;
|
||||||
|
let emitter = () => {
|
||||||
|
this.emit("markClicked", cfiRange, data);
|
||||||
|
};
|
||||||
|
|
||||||
parent.setAttribute("ref", "epubjs-mk");
|
parent.setAttribute("ref", "epubjs-mk");
|
||||||
|
|
||||||
|
@ -816,17 +828,53 @@ class Contents {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
parent.addEventListener("click", () => {
|
parent.addEventListener("click", emitter);
|
||||||
this.emit("markClicked", cfiRange, data);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (cb) {
|
if (cb) {
|
||||||
parent.addEventListener("click", cb);
|
parent.addEventListener("click", cb);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.marks[cfiRange] = { "element": parent, "listeners": [emitter, cb] };
|
||||||
|
|
||||||
return parent;
|
return parent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
unhighlight(cfiRange) {
|
||||||
|
let item;
|
||||||
|
if (cfiRange in this.highlights) {
|
||||||
|
item = this.highlights[cfiRange];
|
||||||
|
this.pane.removeMark(item.mark);
|
||||||
|
item.listeners.forEach((l) => {
|
||||||
|
if (l) { item.element.removeEventListener("click", l) };
|
||||||
|
});
|
||||||
|
delete this.highlights[cfiRange];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ununderline(cfiRange) {
|
||||||
|
let item;
|
||||||
|
if (cfiRange in this.underlines) {
|
||||||
|
item = this.underlines[cfiRange];
|
||||||
|
this.pane.removeMark(item.mark);
|
||||||
|
item.listeners.forEach((l) => {
|
||||||
|
if (l) { item.element.removeEventListener("click", l) };
|
||||||
|
});
|
||||||
|
delete this.underlines[cfiRange];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
unmark(cfiRange) {
|
||||||
|
let item;
|
||||||
|
if (cfiRange in this.marks) {
|
||||||
|
item = this.marks[cfiRange];
|
||||||
|
item.element.removeAttribute("ref");
|
||||||
|
item.listeners.forEach((l) => {
|
||||||
|
if (l) { item.element.removeEventListener("click", l) };
|
||||||
|
});
|
||||||
|
delete this.marks[cfiRange];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
destroy() {
|
destroy() {
|
||||||
// Stop observing
|
// Stop observing
|
||||||
if(this.observer) {
|
if(this.observer) {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue