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

Custom CSS for annotations

Browse source 
Annotations can be created with a CSS class and CSS attributes. Adds the possibility to have multiple annotations with difference styles/colors.
This commit is contained in:
Mikkel Vester Petersen 2018-07-05 10:57:21 +02:00
parent 99273e7356
commit 0d5417646a
2 changed files with 33 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/managers/views/iframe.js
View file

@ -543,10 +543,11 @@ class IframeView {
return this.elementBounds;
}
highlight(cfiRange, data={}, cb) {
highlight(cfiRange, data={}, cb, className = "epubjs-hl", styles = {}) {
if (!this.contents) {
return;
}
const attributes = Object.assign({"fill": "yellow", "fill-opacity": "0.3", "mix-blend-mode": "multiply"}, styles);
let range = this.contents.range(cfiRange);
let emitter = () => {
@ -559,12 +560,12 @@ class IframeView {
this.pane = new Pane(this.iframe, this.element);
}
let m = new Highlight(range, "epubjs-hl", data, {'fill': 'yellow', 'fill-opacity': '0.3', 'mix-blend-mode': 'multiply'});
let m = new Highlight(range, className, data, attributes);
let h = this.pane.addMark(m);
this.highlights[cfiRange] = { "mark": h, "element": h.element, "listeners": [emitter, cb] };
h.element.setAttribute("ref", "epubjs-hl");
h.element.setAttribute("ref", className);
h.element.addEventListener("click", emitter);
h.element.addEventListener("touchstart", emitter);
@ -575,10 +576,11 @@ class IframeView {
return h;
}
underline(cfiRange, data={}, cb) {
underline(cfiRange, data={}, cb, className = "epubjs-ul", styles = {}) {
if (!this.contents) {
return;
}
const attributes = Object.assign({"stroke": "black", "stroke-opacity": "0.3", "mix-blend-mode": "multiply"}, styles);
let range = this.contents.range(cfiRange);
let emitter = () => {
this.emit(EVENTS.VIEWS.MARK_CLICKED, cfiRange, data);
@ -590,12 +592,12 @@ class IframeView {
this.pane = new Pane(this.iframe, this.element);
}
let m = new Underline(range, "epubjs-ul", data, {'stroke': 'black', 'stroke-opacity': '0.3', 'mix-blend-mode': 'multiply'});
let m = new Underline(range, className, data, attributes);
let h = this.pane.addMark(m);
this.underlines[cfiRange] = { "mark": h, "element": h.element, "listeners": [emitter, cb] };
h.element.setAttribute("ref", "epubjs-ul");
h.element.setAttribute("ref", className);
h.element.addEventListener("click", emitter);
h.element.addEventListener("touchstart", emitter);
@ -658,7 +660,7 @@ class IframeView {
}
let mark = this.document.createElement('a');
let mark = this.document.createElement("a");
mark.setAttribute("ref", "epubjs-mk");
mark.style.position = "absolute";
mark.style.top = `${top}px`;