[annotator-dev] Basic workings

Wed Oct 15 11:01:43 UTC 2014

On 15 Oct 2014, at 11:24, Tim Casling <tcas at burwil.co.uk> wrote:

> What I am struggling with is whether what is should be experiencing out of the box is a reasonably sound annotation experience or just a rough demo.  I have a feeling it is the former, but I am experiencing the latter, I suspect due to misconfiguration and lack of investigation on my part.

Yes annotator should provide everything you need to annotate a document out of the box.

> Going back to my multiple annotation issue.  I have a document with multiple h1s and if I add an annotation to a h1, it gets stored as /h1[1] even if it is the nth h1 in the document. When the /h1[1] annotation is applied to the document in the browser, the annotation appears on all h1s. If I changed the document to have a singe h1 and multiple h2s, a comment on the h1 heading also appears on the h2s and comments on the h2s appear on the other h2s.  Same with paragraphs in fact.  The path is just not being stored correctly for the annotated element.
> 
> Could someone just confirm that the paths (XPaths?) that annotator creates are normally OK and what I am observing is not expected behaviour?

No, this is not the expected behaviour.

> In the documents I am working with, there is a <div id="main-wrapper"> that wraps the document <body> and so I have used:

Just want to check, that the #main-wrapper is in fact _inside_ the body tag and that it doesn’t wrap the body? Otherwise this is invalid HTML. I think most browsers will move the div inside the body, but could lead to unexpected behaviour.

> var content=$('#main-wrapper').children().annotator();
> content.annotator('addPlugin, 'Store', { etc

This will initialise a new annotator on every child element of your wrapper. In most use cases you only want one annotator instance per page.

Try moving the wrapper div inside the body tag. An instantiating the annotator only on the wrapper.

    var content=$('#main-wrapper').annotator();
    content.annotator('addPlugin, 'Store', {});

I’ve thrown together the most basic example for you. http://jsbin.com/yuyop/1/quiet

Cheers,
Aron