-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
161 lines (135 loc) · 7.22 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
---
title: annotator-marginalia
description: Annotator.js plugin for creating and displaying annotations in the margin of a page
---
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>{{ page.title }} by emory-lits-labs</title>
<link rel="stylesheet" href="stylesheets/styles.css">
<link rel="stylesheet" href="stylesheets/github-light.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta content="summary" name="twitter:card" />
<meta content="{{ page.title }}" name="twitter:title" />
<meta content="{{ page.description }}" name="twitter:description" />
<!-- TODO: twitter card thumbnail image? -->
<meta content="website" property="og:type" />
<meta content="{{ page.title }}" property="og:title" />
<meta content="{{ site.url }}" property="og:url" />
<meta content="{{ page.description }}" property="og:description" />
</head>
<body>
<div class="wrapper">
<header>
<h1>{{ page.title }}</h1>
<p><a href="https://github.com/openannotation/annotator">Annotator.js</a>
plugin for creating and displaying annotations in the margin of a page. Designed for use with Anntotator 2.x releases.</p>
<p>Distributed under the Apache 2.0 License.</p>
<p class="view"><a href="https://github.com/emory-lits-labs/annotator-marginalia">View the Project on GitHub <small>emory-lits-labs/annotator-marginalia</small></a></p>
version {{ site.data.package.version }}
<ul>
<li><a href="https://github.com/emory-lits-labs/annotator-marginalia/zipball/master">Download <strong>ZIP File</strong></a></li>
<li><a href="https://github.com/emory-lits-labs/annotator-marginalia/tarball/master">Download <strong>TAR Ball</strong></a></li>
<li><a href="https://github.com/emory-lits-labs/annotator-marginalia">View On <strong>GitHub</strong></a></li>
</ul>
</header>
<section>
<h3>
<a id="overview" class="anchor" href="#overview" aria-hidden="true"><span class="octicon octicon-link"></span></a>Overview</h3>
<p>Display annotator.js annotations in the margin of the page.</p>
<p>Try it out in this <a href="demo/">simple demo</a>.</p>
<h3>
<a id="install" class="anchor" href="#install" aria-hidden="true"><span class="octicon octicon-link"></span></a>Installation</h3>
<p>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.</p>
{% highlight html %}
<link rel="stylesheet" type="text/css" href="http://emory-lits-labs.github.io/annotator-marginalia/build/{{ site.data.package.version }}/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/{{ site.data.package.version }}/annotator.marginalia.min.js"></script>
{% endhighlight %}
{% highlight javascript %}
var app = new annotator.App();
app.include(annotatorMarginalia({
show_author: true,
viewer: annotatormeltdown.render,
renderExtensions: [
my_custom_field.renderExtension,
],
}));
{% endhighlight %}
<p>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.</p>
{% highlight html %}
<div class="in-page-controls"></div> <!--control container-->
<article class="content"> <!--outer_element-->
<section class="inner"> <!--inner_element-->
</section>
</article>
{% endhighlight %}
<p>Marginalia supports the following configuration options:</p>
<p><b>Class options</b>:</p>
<ul>
<li><b>outer_element</b>: default <code>.content</code></li>
<li><b>inner_element</b>: default <code>.inner</code></li>
<li><b>margin_class</b>: default <code>.margin-container</code></li>
</ul>
<p><b>Display options</b>:</p>
<ul>
<li><b>show_update_date</b>: display date updated in footer; defaults to <code>true</code></li>
<li><b>show_author</b>: display annotation author in footer; defaults to <code>false</code></li>
<li><b>toggle.class</b>: CSS classes to set on the toggle button element when it is created</li>
<li><b>renderExtensions</b>: 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.
</li>
</ul>
<p><b>Interaction options</b>:</p>
<ul>
<li><b>viewer</b>: Sets the renderer function for the main annotation content.
Defaults to standard formatting</li>
<li><b>toggle.show</b>: callback function triggered when the margin notes are shown</li>
<li><b>toggle.hide</b>: callback function triggered when the margin notes are hidden</li>
</ul>
<p>Marginalia includes an optional annotator editorExtension.
This extension is based on <code>annotator.ui.tags.editorExtension</code>
and is used to create comma separated list of tags when editing. Add
the extension to the <code>editorExtensions</code> options on the
<code>annotator.ui.main</code>:
{% highlight javascript %}
var _marginalia = annotatorMarginalia();
editorExtensions: [
_marginalia.editorExtension
]
{% endhighlight %}
<h3>
<a id="dependencies" class="anchor" href="#dependencies" aria-hidden="true"><span class="octicon octicon-link"></span></a>Dependencies</h3>
<ul>
<li><a href="https://jquery.com/">jQuery</a> 1.8+</li>
<li><a href="https://github.com/openannotation/annotator">Annotator.js</a> 2.x</li>
<li><a href="http://odyniec.net/projects/imgareaselect/">ImgAreaSelect jQuery plugin</a></li>
<li><a href="https://github.com/FortAwesome/Font-Awesome">Font Awesome</a> icons for the
editing dropdown menu and the toggle button
<li><a href="http://getbootstrap.com/components/#btn-dropdowns">Bootstrap dropdown</a> for dropdown edit menu</li>
</ul>
<h3>
<a id="authors-and-contributors" class="anchor" href="#authors-and-contributors" aria-hidden="true"><span class="octicon octicon-link"></span></a>Authors and Contributors</h3>
<p>Created by Kevin Glover (<a href="https://github.com/kevinglover" class="user-mention">@kevinglover</a>) and Rebecca Sutton Koeser (<a href="https://github.com/rlskoeser" class="user-mention">@rlskoeser</a>), 2015. Originally developed as part of <a href="https://github.com/emory-libraries/readux">readux</a>.</p>
</section>
<footer>
<p>This project is maintained by <a href="https://github.com/emory-lits-labs">emory-lits-labs</a></p>
<p><small>Hosted on GitHub Pages — Theme by <a href="https://github.com/orderedlist">orderedlist</a></small></p>
</footer>
</div>
<script src="javascripts/scale.fix.js"></script>
</body>
</html>