annotator-marginalia

Overview

Display annotator.js annotations in the margin of the page.

Try it out in this simple demo.

Installation

To use marginalia with your Annotator project, include the appropriate CSS and Javascript files, and add it to the app initiation as you would any other module. Marginalia depends on bootstrap dropdown menus and moment.js for optional update time in the displayed annotation footer. For convenience, the built javascript includes both annotator-marginalia and moment.js.

<link rel="stylesheet" type="text/css" href="http://emory-lits-labs.github.io/annotator-marginalia/build/0.4.1/annotator.marginalia.min.css" />
<script type="text/javascript" src="http://emory-lits-labs.github.io/annotator-marginalia/src/scripts/bootstrap.dropdown.js"></script>
<script type="text/javascript" src="http://emory-lits-labs.github.io/annotator-marginalia/build/0.4.1/annotator.marginalia.min.js"></script>

      var app = new annotator.App();
      app.include(annotatorMarginalia({
        show_author: true,
        viewer: annotatormeltdown.render,
        renderExtensions: [
            my_custom_field.renderExtension,
        ],
      }));

Marginalia assumes some structural requirements for the annotation margins to appear correctly. The class names for the outer and inner elements can be configured in the option parameters.

    <div class="in-page-controls"></div> <!--control container-->

    <article class="content"> <!--outer_element-->
      <section class="inner"> <!--inner_element-->
      </section>
    </article>

Marginalia supports the following configuration options:

Class options:

• outer_element: default .content
• inner_element: default .inner
• margin_class: default .margin-container

Display options:

• show_update_date: display date updated in footer; defaults to true
• show_author: display annotation author in footer; defaults to false
• toggle.class: CSS classes to set on the toggle button element when it is created
• renderExtensions: list of functions to add fields to or otherwise update the marginalia item display; functions should take an annotation and the corresponding marginalia item and return the updated marginalia item.

Interaction options:

• viewer: Sets the renderer function for the main annotation content. Defaults to standard formatting
• toggle.show: callback function triggered when the margin notes are shown
• toggle.hide: callback function triggered when the margin notes are hidden

Marginalia includes an optional annotator editorExtension. This extension is based on annotator.ui.tags.editorExtension and is used to create comma separated list of tags when editing. Add the extension to the editorExtensions options on the annotator.ui.main:

    var _marginalia = annotatorMarginalia();
    editorExtensions: [
        _marginalia.editorExtension
    ]

Dependencies

• jQuery 1.8+
• Annotator.js 2.x
• ImgAreaSelect jQuery plugin
• Font Awesome icons for the editing dropdown menu and the toggle button
• Bootstrap dropdown for dropdown edit menu

Authors and Contributors

Created by Kevin Glover (@kevinglover) and Rebecca Sutton Koeser (@rlskoeser), 2015. Originally developed as part of readux.