A.nnotate integration sample page

This sample page demonstrates the use of A.nnotate on an independent site where the site takes responsibility for editing and displaying notes.

The ids of the elements below are listed in the target_ids field of the _annotate_settings javascript object defined at the bottom of the html. This identifies them as containing annotatable text.

The header loads the local javascript file annotate_components.js which defines functions called annotate_note_editor and anotate_note_display. It then loads the standard file web_annotate.js from the annotate server to set up the annotation features.

When a.nnotate starts, it checks for the annotate_note_editor and annotate_note_display functions and uses these instead of its own note editor and note display capabilities. The annotate_components.js file on this page contains minimal implementations of these functions.

Annotatable content Notes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vitae libero. Nam nulla. Fusce aliquam placerat nisi. Nullam arcu. Sed auctor est sit amet leo pharetra porta. Vestibulum porttitor, nibh et auctor dapibus, lorem felis convallis mi, adipiscing suscipit lorem eros rutrum lacus. Ut posuere ante in tortor. Proin id metus vel nibh scelerisque adipiscing. Sed sapien urna, venenatis vitae, sodales ut, rutrum non, mi. Praesent lacus. Nulla facilisi . Phasellus ultrices iaculis lectus. Aenean neque metus, ullamcor per eu, tincidunt a, sollicitudin at, dui.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus . Phasellus vitae diam eu lorem dictum interdum. Proin turpis lorem, consequat vita e, iaculis at, pellentesque non, quam. Etiam viverra quam in odio. Nulla consequat.

Donec at leo. Proin justo tellus, pharetra vel, pretium in, semper hendrerit, lore m. Aliquam vitae diam et mi sodales accumsan. Nullam congue posuere dui. Ut suscip it mauris id urna. Pellentesque condimentum elit eget tellus. Morbi facilisis urna tempus odio. Integer risus.

The element below is also annotatable

Phasellus lorem nisi, elementum in, lacinia non, semper quis, magna. Nam odio eros , elementum posuere, venenatis ac, vulputate quis, lectus. Vestibulum egestas leo sit amet erat. Curabitur rhoncus auctor tellus. Proin ut magna. Curabitur at tort or. Cras convallis condimentum odio. Maecenas porta condimentum felis. Sed venena tis. Integer nisi. Vivamus scelerisque tortor sit amet lacus. Sed augue. Morbi al iquam odio eget est. Praesent posuere, eros ac auctor tincidunt, elit justo vulpu tate leo, nec vulputate quam risus vitae eros. Fusce tincidunt placerat eros. Pro in eget dolor. Donec vitae dui accumsan sem vehicula bibendum. In blandit. Aenea n fermentum dignissim enim.

Click on a note below to select it
The area below is used by the extension code (annotate_components.js) to edit notes.
Link to url: title:
Tags: