Annotorious/Recogito 'Hello World' Example plugin

annotorious-helloworld-plugin.js

var HelloWorldPlugin = function(args) {

  var currentColorBody = args.annotation ? args.annotation.bodies.find(function(b) {
    return b.purpose == 'highlighting';
  }) : null;

  var currentColorValue = currentColorBody ? currentColorBody.value : null;

  var addTag = function(evt) {
    if (currentColorBody) {
      args.onUpdateBody(currentColorBody, {
        type: 'TextualBody',
        purpose: 'highlighting',
        value: evt.target.dataset.tag;
      });
    } else { 
      args.onAppendBody({
        type: 'TextualBody',
        purpose: 'highlighting',
        value: evt.target.dataset.tag;
      });
    }
  }

  var createButton = function(value) {
    var button = document.createElement('button');

    if (value == currentColorValue)
      button.className = 'selected';

    button.dataset.tag = value;
    button.style.backgroundColor = value;
    button.addEventListener('click', addTag); 
    return button;
  }

  var container = document.createElement('div');
  container.className = 'helloworld-plugin';
  
  var button1 = createButton('RED');
  var button2 = createButton('GREEN');
  var button3 = createButton('BLUE');

  container.appendChild(button1);
  container.appendChild(button2);
  container.appendChild(button3);

  return container;
}

This plugin adds a color selector to the editor popup of the Annotorious and RecogitoJS annotation tools.

According to the W3C Web Annotation specification, the color selection is stored as an annotation body with purpose highlighting. (If the annotation already includes a highlighting body, the selector will update it instead of appending a new one.)

Editor plugins are ordinary JavaScript functions. Per convention, they take a set of predefined arguments as input, and return a DOM node, which will be inserted into the annotation editor.

Argument
args.annotation	the current annotation
args.readOnly	a boolean flag indicating whether the plugin should render a read-only representation
args.onAppendBody	callback for appending a new body to the current annotation
args.onUpdateBody	callback for updating an existing body in the annotation with a new version
args.onRemoveBody	callback for deleting a body from the annotation