eu-eleysion-recogito-js
Version:
A JavaScript library for text annotation
134 lines (118 loc) • 4.96 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>RecogitoJS | Development</title>
<link
href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet"
/>
<link href="recogito.min.css" rel="stylesheet" />
<script src="recogito.min.js"></script>
<style>
html,
body {
padding: 10px 20px;
margin: 0;
}
h1 {
font-size: 22px;
margin-top: 30px;
margin-bottom: 20px;
}
#outer-container {
position: relative;
}
#content {
max-width: 920px;
font-family: 'Lato', sans-serif;
font-size: 17px;
line-height: 27px;
}
.r6o-annotation.multi {
border-color: #000000;
}
.r6o-annotation.a {
border-color: #880000;
}
.r6o-annotation.b {
border-color: #008800;
}
</style>
</head>
<body>
<div id="outer-container">
<div id="content" class="plaintext">
<h1>Homer: The Odyssey</h1>
<p>
<strong>Tell me, O muse,</strong> of that ingenious hero who
travelled far and wide after he had sacked the famous town
of Troy. Many cities did he visit, and many were the nations
with whose manners and customs he was acquainted; moreover
he suffered much by sea while trying to save his own life
and bring his men safely home; but do what he might he could
not save his men, for they perished through their own sheer
folly in eating the cattle of the Sun-god Hyperion; so the
god prevented them from ever reaching home. Tell me, too,
about all these things, O daughter of Jove, from whatsoever
source you may know them.
</p>
<p>
<strong>So now all who escaped death in battle</strong> or
by shipwreck had got safely home except Ulysses, and he,
though he was longing to return to his wife and country, was
detained by the goddess Calypso, who had got him into a
large cave and wanted to marry him. But as years went by,
there came a time when the gods settled that he should go
back to Ithaca; even then, however, when he was among his
own people, his troubles were not yet over; nevertheless all
the gods had now begun to pity him except Neptune, who still
persecuted him without ceasing and would not let him get
home.
</p>
</div>
</div>
<script type="text/javascript">
(function () {
// Intialize Recogito
var r = Recogito.init({
content: 'content',
disableEditor: true,
formatter: (annotation) => {
const tags = annotation.body
.filter((b) => b.purpose === 'tagging')
.map((b) => b.value);
console.debug('format', tags, annotation.level);
const result = {
className: '',
};
if (tags.length > 1) {
result.className = 'multi';
} else if (tags.includes('A Tag')) {
result.className = 'a';
} else if (tags.includes('Another Tag')) {
result.className = 'b';
}
if (annotation.level) {
result.style =
'padding-bottom: ' +
annotation.level * 3 +
'px';
}
return result;
},
});
r.loadAnnotations('annotations.w3c.json');
r.on('selectAnnotation', function (a) {
console.log('selected', a);
});
r.on('createAnnotation', function (a) {
console.log('created', a);
});
r.on('updateAnnotation', function (annotation, previous) {
console.log('updated', previous, 'with', annotation);
});
})();
</script>
</body>
</html>