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

Merge pull request #782 from mikkelvp/master

Browse source 
Custom CSS for annotations
This commit is contained in:
Fred Chasen 2018-07-06 14:50:43 -07:00 • committed by GitHub
commit e3a8e9c205
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/annotations.js
View file

@ -26,9 +26,11 @@ class Annotations {
* @param {EpubCFI} cfiRange EpubCFI range to attach annotation to
* @param {object} data Data to assign to annotation
* @param {function} [cb] Callback after annotation is added
* @param {string} className CSS class to assign to annotation
* @param {object} styles CSS styles to assign to annotation
* @returns {Annotation} annotation
*/
add (type, cfiRange, data, cb) {
add (type, cfiRange, data, cb, className, styles) {
let hash = encodeURI(cfiRange);
let cfi = new EpubCFI(cfiRange);
let sectionIndex = cfi.spinePos;
@ -37,7 +39,9 @@ class Annotations {
cfiRange,
data,
sectionIndex,
cb
cb,
className,
styles
});
this._annotations[hash] = annotation;
@ -108,9 +112,11 @@ class Annotations {
* @param {EpubCFI} cfiRange EpubCFI range to attach annotation to
* @param {object} data Data to assign to annotation
* @param {function} cb Callback after annotation is added
* @param {string} className CSS class to assign to annotation
* @param {object} styles CSS styles to assign to annotation
*/
highlight (cfiRange, data, cb) {
this.add("highlight", cfiRange, data, cb);
highlight (cfiRange, data, cb, className, styles) {
this.add("highlight", cfiRange, data, cb, className, styles);
}
/**
@ -118,9 +124,11 @@ class Annotations {
* @param {EpubCFI} cfiRange EpubCFI range to attach annotation to
* @param {object} data Data to assign to annotation
* @param {function} cb Callback after annotation is added
* @param {string} className CSS class to assign to annotation
* @param {object} styles CSS styles to assign to annotation
*/
underline (cfiRange, data, cb) {
this.add("underline", cfiRange, data, cb);
underline (cfiRange, data, cb, className, styles) {
this.add("underline", cfiRange, data, cb, className, styles);
}
/**
@ -199,6 +207,8 @@ class Annotations {
* @param {object} options.data Data to assign to annotation
* @param {int} options.sectionIndex Index in the Spine of the Section annotation belongs to
* @param {function} [options.cb] Callback after annotation is added
* @param {string} className CSS class to assign to annotation
* @param {object} styles CSS styles to assign to annotation
* @returns {Annotation} annotation
*/
class Annotation {
@ -208,7 +218,9 @@ class Annotation {
cfiRange,
data,
sectionIndex,
cb
cb,
className,
styles
}) {
this.type = type;
this.cfiRange = cfiRange;
@ -216,6 +228,8 @@ class Annotation {
this.sectionIndex = sectionIndex;
this.mark = undefined;
this.cb = cb;
this.className = className;
this.styles = styles;
}
/**
@ -231,13 +245,13 @@ class Annotation {
* @param {View} view
*/
attach (view) {
let {cfiRange, data, type, mark, cb} = this;
let {cfiRange, data, type, mark, cb, className, styles} = this;
let result;
if (type === "highlight") {
result = view.highlight(cfiRange, data, cb);
result = view.highlight(cfiRange, data, cb, className, styles);
} else if (type === "underline") {
result = view.underline(cfiRange, data, cb);
result = view.underline(cfiRange, data, cb, className, styles);
} else if (type === "mark") {
result = view.mark(cfiRange, data, cb);
}

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`;