Question

I am using jquery annotator to annotate and take notes on a site. I have the need to add additional style if the user has added a note.

I am trying to create a small plugin that will add a class to the highlight if a note exists for that highlight, but I can’t seem to get access to the note from within my plugin.

Any help would be greatly appreciated!

EDIT:

Here’s my plugin so far, just a start to be able to look into the annotator object. I can’t find anything in the log of the annotator object that gives me information about the notes attached to a highlight.

Annotator.Plugin.Milestone = function(element) {
   var milestoneAnnotator = {
        pluginInit: function() {
            console.log(this.annotator);
        }
    };

    return milestoneAnnotator;
}

Answer 1

Subscribing to the annotationsLoaded event will give you access to all of your stored annotations when they are loaded in to the DOM, according to the Annotator readme.

Now, as for adding a class to a highlight, I assume you mean a CSS class? Here’s an example of adding a CSS class to all annotations when they are loaded in to the DOM.

To only add a class to annotations with notes, you would just check for the text property on the annotation.