Examples about highlight data?

[paulocoutinhox]

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.

[danielweck]

"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