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

Replace marks after reframe

Browse source
This commit is contained in:
Fred Chasen 2018-10-13 16:35:53 -07:00
parent 7b61265404
commit a3760d92a6
2 changed files with 42 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -327,6 +327,16 @@ class IframeView {
this.pane && this.pane.render(); this.pane && this.pane.render();
requestAnimationFrame(() => {
let mark;
for (let m in this.marks) {
if (this.marks.hasOwnProperty(m)) {
mark = this.marks[m];
this.placeMark(mark.element, mark.range);
}
}
});
this.onResize(this, size); this.onResize(this, size);
this.emit(EVENTS.VIEWS.RESIZED, size); this.emit(EVENTS.VIEWS.RESIZED, size);
@ -643,33 +653,9 @@ class IframeView {
range.selectNodeContents(parent); range.selectNodeContents(parent);
} }
let top, right, left;
if(this.layout.name === "pre-paginated" ||
this.settings.axis !== "horizontal") {
let pos = range.getBoundingClientRect();
top = pos.top;
right = pos.right;
} else {
// Element might break columns, so find the left most element
let rects = range.getClientRects();
let rect;
for (var i = 0; i != rects.length; i++) {
rect = rects[i];
if (!left || rect.left < left) {
left = rect.left;
right = left + this.layout.columnWidth - this.layout.gap;
top = rect.top;
}
}
}
let mark = this.document.createElement("a"); let mark = this.document.createElement("a");
mark.setAttribute("ref", "epubjs-mk"); mark.setAttribute("ref", "epubjs-mk");
mark.style.position = "absolute"; mark.style.position = "absolute";
mark.style.top = `${top}px`;
mark.style.left = `${right}px`;
mark.dataset["epubcfi"] = cfiRange; mark.dataset["epubcfi"] = cfiRange;
@ -687,13 +673,42 @@ class IframeView {
mark.addEventListener("click", emitter); mark.addEventListener("click", emitter);
mark.addEventListener("touchstart", emitter); mark.addEventListener("touchstart", emitter);
this.placeMark(mark, range);
this.element.appendChild(mark); this.element.appendChild(mark);
this.marks[cfiRange] = { "element": mark, "listeners": [emitter, cb] }; this.marks[cfiRange] = { "element": mark, "range": range, "listeners": [emitter, cb] };
return parent; return parent;
} }
placeMark(element, range) {
let top, right, left;
if(this.layout.name === "pre-paginated" ||
this.settings.axis !== "horizontal") {
let pos = range.getBoundingClientRect();
top = pos.top;
right = pos.right;
} else {
// Element might break columns, so find the left most element
let rects = range.getClientRects();
let rect;
for (var i = 0; i != rects.length; i++) {
rect = rects[i];
if (!left || rect.left < left) {
left = rect.left;
right = left + this.layout.columnWidth - this.layout.gap;
top = rect.top;
}
}
}
element.style.top = `${top}px`;
element.style.left = `${right}px`;
}
unhighlight(cfiRange) { unhighlight(cfiRange) {
let item; let item;
if (cfiRange in this.highlights) { if (cfiRange in this.highlights) {