Customize AnnotatorJS UI

Getting Start

var app = new annotator.App();
app.include(annotator.ui.main);
app.include(annotator.storage.http);
app.start();
function custom_ui_main(){
//module hooks can be used here.
}
var app = new annotator.App();
app.include(custom_ui_main);
app.include(annotator.storage.http);
app.start();

Module Hooks

  1. component registration
  2. module hooks
function custom_ui_main(){
return {
start: function (app) {
app.notify("Hello, geeks!");
}
};
}
  • configure(registry)
  • start(app)
  • destroy()
  • annotationsLoaded(annotations)
  • beforeAnnotationCreated(annotation)
  • annotationCreated(annotation)
  • beforeAnnotationUpdated(annotation)
  • annotationUpdated(annotation)
  • beforeAnnotationDeleted(annotation)
  • annotationDeleted(annotation)

UI Customization

var custom_ui_main = function () {
var element = document.body
// Or whatever is your selector/element when you initialize the annotator
var ui = {}
return {
start: function () {
ui.highlighter = new annotator.ui.highlighter.Highlighter(element)
ui.viewer = new annotator.ui.viewer.Viewer({
permitEdit: function (ann) { return false },
permitDelete: function (ann) { return false },
autoViewHighlights: element
})
ui.viewer.attach()
},
destroy: function () {
ui.highlighter.destroy()
ui.viewer.destroy()
},
annotationsLoaded: function (anns) {
ui.highlighter.drawAll(anns)
}
}
}
var custom_ui_main = function () {
var element = document.querySelector("#relativeLocation");
var makeAnnotation = UtilityService.annotationFactory(element, ".annotator-hl");
var ui = { interactionPoint: null };
return {start: function start() {ui.highlighter = new annotator.ui.highlighter.Highlighter(element);ui.textselector = new annotator.ui.textselector.TextSelector(element, {onSelection: function onSelection(ranges, event) {if (ranges.length > 0) {annotation = makeAnnotation(ranges);var commentModalPosition = UtilityService.mousePosition(event);// document.getElementById("commentEditContainer").style.display = "block";} }});},destroy: function destroy() {ui.highlighter.destroy();ui.textselector.destroy();},annotationCreated: function annotationCreated(a) {ui.highlighter.draw(a);},annotationsLoaded: function annotationsLoaded(a) {ui.highlighter.drawAll(a).then(function () {},annotationDeleted: function annotationDeleted(a) {ui.highlighter.undraw(a);},annotationUpdated: function annotationUpdated(a) {ui.highlighter.redraw(a);}};}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store