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;
}

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