Annotations

Annotations

In sites with annotations enabled there is a new meta-type Annotation. This will include specific metadata values, and an extra JSON Hash value extra-props which will hold any additional values sent in via the annotation API and not defined in Tizra.

The Annotator.js Annotation API is implemented as described at Annotator-API.

The design parameter enableAnnotator generates calls to the Annotator.js javascripts, but the API will only work once the Annotation MetaType is defined in Tizra.

A basic Annotation sidebar listing all annotations for a page (or book) can be enabled by adding content to the reader Help area.

The following basic implementation here is intended as a starting point; each item below is a value for a custom design parameter:

• readerCustomScripts

    function annotationSidebar(data) {
        dna.clone('annotator-marginviewer-element', data.rows, { empty: true, fade: true });
        }
    function annotationSidebarDoc(data) {
        dna.clone('annotator-marginviewer-element', data.rows, { empty: true, fade: true });
        }
    function convertTime(data) {
        if (!data.creacio) data.creacio=$.now();
        data.creacio = $.format.date(data.creacio, "MM/dd/yyyy HH:mm:ss");
    }

    $(document).on('pageshow', function(){
        // $.getJSON('/api/annot/search?uri=' + URLpath(), annotationSidebarDoc);
        $.getJSON('/api/annot/search?uri=' + URLpath(), annotationSidebar);
    });

• readerHeader

    <script src=https://cdn.jsdelivr.net/dna.js/1.0/dna.min.js></script>

• readerCSS

    /* dna.js v1.0.0 ~~ dnajs.org/license */
    .dna-template, .dna-panels >*, [data-placeholder] { display: none; }
    .dna-menu .menu-item, [data-click], [data-href] { cursor: pointer; }
    #t-annotation-list {
        list-style: none outside none;
        padding: 1em;
        margin: 0;
    }

readerHelp

    <div>
    <ul id="t-annotation-list">
        <li id="annotator-marginviewer-element" class="dna-template" data-attr-id="~~id~~">
            <div data-attr-class="~~category~~">~~category~~</div>
            <div class="anotador_text">~~text~~</div>
            <div class="anotador_quote">~~quote~~</div>
            <div class="annotator-marginviewer-footer">
                <span class="label">~~owner~~</span>
            </div>
        </li>
    <ul>
    </div>