Created
September 11, 2020 09:45
-
-
Save rsimon/7acd0929b44ac52a5affcf289fd0aacd to your computer and use it in GitHub Desktop.
Annotorious/Recogito 'Hello World' Example plugin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 ahighlighting
body, the selector will update it instead of appending a new one.)