Web Annotation Library Comparison

Web Annotation Alternative Js Libraries

1 - annotation-model : https://github.com/goodmansasha/annotation-model/blob/master/annotation-model.js

2 - incubator : https://github.com/apache/incubator-annotator

Selector	annotation-model	incubator
SegmentSelector	yes	nothing
RangeSelector	yes	yes
XPathSelector	yes	no
DataPositionSelector	yes	no
HTMLFragmentSelector	yes	no
TextPositionSelector	yes	no
TextQuoteSelector	yes	yes

Implementation Steps For Django Project

1 - Adding js library file under static_files/js/file_name.js

2 - Add js files on html files that should be supported with annotation.

      <script src="{% static 'js/annotation-model.js' %}"></script>
      <script src="{% static 'js/index.js' %}"></script>

3 - Add event listener for highlight

document.addEventListener("selectionchange", function() {
 var selection = window.getSelection();
 console.log('Selection changed.', selection);
   var ab = new AnnotationBuilder().highlight(); //takes current user selection and builds an Annotation
   var json = JSON.stringify(ab.result, false, '  '); // exports serialized version to JSON-LD
   var output = document.getElementById('output');
   output.value = json;

  var ab2 = new AnnotationBuilder().fromJSON(json); //revives serialized version
  ab2.result.target.toSelection();

});

4 - Manipulate right click menu

  document.addEventListener('contextmenu', function(e) {
    prompt('Please enter your name');
    e.preventDefault();
  }, false);