diff --git a/examples/highlights.html b/examples/highlights.html index e5c3fe7..4f90ae7 100644 --- a/examples/highlights.html +++ b/examples/highlights.html @@ -112,6 +112,18 @@ // console.log(location); }); + rendition.on("markMouseover", () => { + console.log('mouseover from rendition'); + }); + + rendition.on("markMouseout", () => { + console.log('mouseout from rendition'); + }); + + rendition.on("markClicked", () => { + console.log('clicked from rendition'); + }); + // Apply a class to selected text rendition.on("selected", function(cfiRange, contents) { rendition.annotations.highlight( diff --git a/src/rendition.js b/src/rendition.js index 14a21b4..6245696 100644 --- a/src/rendition.js +++ b/src/rendition.js @@ -419,6 +419,10 @@ class Rendition { view.on(EVENTS.VIEWS.MARK_CLICKED, (cfiRange, data) => this.triggerMarkEvent(cfiRange, data, view.contents)); + view.on(EVENTS.VIEWS.MARK_MOUSEOVER, (cfiRange, data) => this.triggerMarkMouseOverEvent(cfiRange, data, view.contents)); + + view.on(EVENTS.VIEWS.MARK_MOUSEOUT, (cfiRange, data) => this.triggerMarkMouseOutEvent(cfiRange, data, view.contents)); + this.hooks.render.trigger(view, this) .then(() => { if (view.contents) { @@ -904,7 +908,7 @@ class Rendition { * @memberof Rendition */ this.emit(EVENTS.RENDITION.SELECTED, cfirange, contents); - } +} /** * Emit a markClicked event with the cfiRange and data from a mark @@ -923,6 +927,14 @@ class Rendition { this.emit(EVENTS.RENDITION.MARK_CLICKED, cfiRange, data, contents); } + triggerMarkMouseOverEvent(cfiRange, data, contents){ + this.emit(EVENTS.RENDITION.MARK_MOUSEOVER, cfiRange, data, contents); + } + + triggerMarkMouseOutEvent(cfiRange, data, contents){ + this.emit(EVENTS.RENDITION.MARK_MOUSEOUT, cfiRange, data, contents); + } + /** * Get a Range from a Visible CFI * @param {string} cfi EpubCfi String diff --git a/src/utils/constants.js b/src/utils/constants.js index 0d3f423..2b69dc8 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -51,6 +51,8 @@ export const EVENTS = { LOCATION_CHANGED : "locationChanged", RELOCATED : "relocated", MARK_CLICKED : "markClicked", + MARK_MOUSEOUT: "markMouseout", + MARK_MOUSEOVER: "markMouseover", SELECTED : "selected", LAYOUT: "layout" },