Lack of "annotatable" class ignored

[blacksqr]

Annotorious processes images and makes them annotatable regardless of whether or not they belong to the "annotatable" class.

To reproduce:

1. Download and decompress the Annotorious Annotator Extension v. 0.3
2. Open example.html in a text editor
3. Remove the class="annotatable" attribute from the img tag for the Hallstatt.jpg image.
4. Save and open example.html in a web browser. The image is still annotatable.

This is fine if you have only one image in the file and you mean it to be annotatable. But if you have multiple images in your file, not all meant to be annotatable, , it makes a mess of the DOM.

[rsimon]

That's indeed a feature rather than a bug ;-) The annotatable class is only supported in the standalone version. The basic premise behind Annotator is that it will make everything annotatable within the specified DOM subtree. Therefore the plugin also makes all images annotatable.

Another aspect is that Annotator is also supposed to work on "3rd party pages" (that don't include annotator themselves) through the bookmarklet. In these cases, there cannot be any CSS class selectors.

I should add that I haven't put much effort into the annotator plugin lately (shame on me...) - so future versions may allow more flexibility in that regard.

[rsimon]

Closing this since it's an inherent property of the Annotator plugin.

[itskingori]

Sigh, just when I thought I'd found a solution. Bummer :-(

The basic premise behind Annotator is that it will make everything annotatable within the specified DOM subtree. Therefore the plugin also makes all images annotatable.

In the case where you are integrating with let's say, OKFN's Annotator ... the specified DOM tree is for text and so it makes the assumption that all images in the text were intended to be annotated.

If you ever pick up/continue working on Annotorious that would be a point to consider.

Thanks though.

[itskingori]

Never mind. @rsimon was right. This is indeed a design feature :+1: Taking his comments above into consideration I was able to work it out.

[itskingori]

Here's the solution ...

$(document).ready(function() {

  // Call Annotator JS on text
  var content = $('#content').annotator();
    content.annotator('addPlugin', 'Store', {
      prefix: 'http://127.0.0.1:3000/annotator_store',
      annotationData: {
        'annotator_schema_version': 'v1.0',
        'uri': '{{ site.url }}{{ site.baseurl }}{{ page.url }}'
      },
      loadFromSearch: {
        'limit': 20,
        'uri': '{{ site.url }}{{ site.baseurl }}{{ page.url }}'
      },
      urls: {
        create:  '/annotations',
        update:  '/annotations/:id',
        destroy: '/annotations/:id',
        search:  '/search'
      },
    });

  // Call Annotator JS on images
  var annotatable_images = $('.annotatable').annotator();
      annotatable_images.annotator('addPlugin', 'AnnotoriousImagePlugin');
      annotatable_images.annotator('addPlugin', 'Store', {
        prefix: 'http://127.0.0.1:3000/annotator_store',
        annotationData: {
          'annotator_schema_version': 'v1.0',
          'uri': '{{ site.url }}{{ site.baseurl }}{{ page.url }}'
        },
        loadFromSearch: {
          'limit': 20,
          'uri': '{{ site.url }}{{ site.baseurl }}{{ page.url }}'
        },
        urls: {
          create:  '/annotations',
          update:  '/annotations/:id',
          destroy: '/annotations/:id',
          search:  '/search'
        },
      });
});

[blacksqr]

If the program is working as intended, I suggest you clarify your docs, to say something like adding the "annotatable" class is optional, or making it clear when it is and is not appropriate to add the class.