danielweck
commented
7 years ago "highlight" plugin code: https://github.com/readium/readium-shared-js/tree/develop/plugins/highlights
https://github.com/readium/readium-shared-js/blob/develop/plugins/highlights/views/view.js#L7
template: "<div class=\"rd-highlight\"></div>",https://github.com/readium/readium-shared-js/blob/develop/plugins/highlights/views/border_view.js#L7
template: "<div class=\"rd-highlight-border\"></div>",https://github.com/readium/readium-shared-js/blob/develop/plugins/highlights/manager.js#L345
this.getAnnotationsElementSelector = function () {
return 'div.rd-highlight, div.rd-highlight-border';
};Main public API (from which the "manager" instance can be accessed): https://github.com/readium/readium-shared-js/blob/develop/plugins/highlights/main.js#L42
Example usage from readium-js-viewer:
https://github.com/readium/readium-js-viewer/blob/develop/src/js/EpubReader.js#L851
$(".icon-annotations").on("click", function () {
readium.reader.plugins.highlights.addSelectionHighlight(Math.floor((Math.random()*1000000)), "test-highlight");
});https://github.com/readium/readium-js-viewer/blob/develop/src/js/EpubReader.js#L1167
readium.reader.plugins.highlights.initialize({
annotationCSSUrl: readerOptions.annotationCSSUrl
});
readium.reader.plugins.highlights.on("annotationClicked", function(type, idref, cfi, id) {
console.debug("ANNOTATION CLICK: " + id);
readium.reader.plugins.highlights.removeHighlight(id);
});Note that annotationCSSUrl references https://github.com/readium/readium-js-viewer/blob/develop/src/css/annotations.css
Hi,
Anyone have examples about highlight data?
1 - Paint all highlight data with selected color? 2 - Detect when user highlight a text to show a custom view? 3 - Detect when user click on a highlighted text to show current options or remove?
As i do on other issues that i ask, i will post my final code here. But i need some way to understand it. I check the reader_view code and all highlight references, but didn't find anything.
Something like this:
And this:
Thanks.