-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathannotate.html
170 lines (151 loc) · 9.45 KB
/
annotate.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
162
163
164
165
166
167
168
169
170
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html
version="XHTML+RDFa 1.0"
xml:lang="en"
xmlns:foaf = "http://xmlns.com/foaf/0.1/"
xmlnsrdfcal = "http://www.w3.org/2002/12/cal#",
xmlns:dbpedia = "http://dbpedia.org/resource/"
xmlns:xsd="http://www.w3.org/2001/XMLSchema#"
xmlns:demo="http://this.demo.eu/">
<head>
<title>Example usage of the annotate widget</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jquery-ui.css" type="text/css" media="all">
<style>
.new-enhancement {
border-bottom:1px dotted;
}
#log {
border: 1px solid #ccc;
padding: 10px;
}
</style>
<!-- 3rd-party libs -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="lib/rdfquery/latest/jquery.rdfquery.rules.js"></script>
<script type="text/javascript" src="lib/underscoreJS/underscore.js"></script>
<script type="text/javascript" src="lib/backboneJS/backbone.js"></script>
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-3.2.1/release/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/extjs-3.2.1/release/ext-all.js"></script>
<script type="text/javascript" src="lib/jquery/jquery.cookie.js"></script>
<!-- <script type="text/javascript" src="lib/aloha/debug/aloha-nodeps.js"></script>
<script type="text/javascript" src="lib/aloha/aloha/plugins/com.gentics.aloha.plugins.Format/plugin.js"></script>
<script type="text/javascript" src="lib/aloha/aloha/plugins/com.gentics.aloha.plugins.HighlightEditables/plugin.js"></script>
<script type="text/javascript" src="lib/aloha/aloha/plugins/com.gentics.aloha.plugins.Table/plugin.js"></script>
<script type="text/javascript" src="lib/aloha/aloha/plugins/com.gentics.aloha.plugins.List/plugin.js"></script>
<script type="text/javascript" src="lib/aloha/aloha/plugins/com.gentics.aloha.plugins.Link/plugin.js"></script>
<script type="text/javascript" src="lib/aloha/aloha/plugins/com.gentics.aloha.plugins.HighlightEditables/plugin.js"></script>
<script type="text/javascript" src="lib/aloha/aloha/plugins/com.gentics.aloha.plugins.TOC/plugin.js"></script>
<script type="text/javascript" src="lib/aloha/aloha/plugins/com.gentics.aloha.plugins.Link/delicious.js"></script>
<script type="text/javascript" src="lib/aloha/aloha/plugins/com.gentics.aloha.plugins.Link/LinkList.js"></script>
<script type="text/javascript" src="lib/aloha/aloha/plugins/com.gentics.aloha.plugins.Paste/plugin.js"></script>
<script type="text/javascript" src="lib/aloha/aloha/plugins/com.gentics.aloha.plugins.Paste/wordpastehandler.js"></script>
-->
<!-- VIE -->
<script type="text/javascript" src="lib/vie/vie.js"></script>
<!-- VIE^2 -->
<script type="text/javascript" src="lib/vie2/vie2-latest.debug.js"></script>
<script type="text/javascript">VIE2.logLevels = ["info", "error", "warn"];</script>
<script type="text/javascript" src="lib/VIEwidgets/editable.js"></script>
<script type="text/javascript" src="src/annotate.js"></script>
<!-- Connector plug-ins -->
<script type="text/javascript" src="lib/vie2/connector/stanbol.js"></script>
<!--
<script type="text/javascript" src="lib/vie2/connector/dbpedia.js"></script>
<script type="text/javascript" src="lib/vie2/connector/rdfa.js"></script>
-->
<!-- Mapping plug-ins -->
<script type="text/javascript" src="lib/vie2/mapping/person.js"></script>
<script type="text/javascript" src="lib/vie2/mapping/place.js"></script>
<script type="text/javascript" src="lib/vie2/mapping/organization.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// configure the vie2 connector
VIE2.connectors.stanbol.options({
"proxy_url" : "lib/proxy/proxy.php",
"enhancer_url" : "http://dev.iks-project.eu:8080/engines/",
// "enhancer_url" : "http://stanbol.demo.nuxeo.com/engines/",
"entityhub_url" : "http://dev.iks-project.eu:8080/entityhub/"
});
// Make an element editable using the VIE.editable widget.
// Whenever a smartContentChange happens..
// get create a dom element containing only the occurrence of the found entity
// (getOrCreateDomElement is to be implemented)
function getOrCreateDomElement(element, text, options) {
var domEl = element;
// find the text node
if(element.textContent.indexOf(text) == -1){
throw "'" + text + "' doesn't appear in the text block.";
return $();
}
while(domEl.textContent.indexOf(text) != -1 && domEl.nodeName != '#text'){
domEl = _(domEl.childNodes).detect(function(el){
return el.textContent.indexOf(text) != -1;
});
}
if(options.createMode == "existing" && domEl.parentElement.textValue == text){
return domEl.parentElement;
} else {
var pos = domEl.nodeValue.indexOf(text);
var len = text.length;
domEl.splitText(pos + len);
var newElement = document.createElement(options.createElement);
newElement.innerHTML = text;
domEl.parentElement.replaceChild(newElement, domEl.splitText(pos))
return $(newElement);
}
}
log('initialize..');
$('#annotatebutton').click(function(){
log('Start vie2.analyze()..wait');
$('#content').vie2().vie2('analyze', function(data){
log('analization finished.');
var element = this[0];// http://fise.iks-project.eu/ontology/selection-context
// console.info(VIE2.globalCache.where("?subj <http://www.semanticdesktop.org/ontologies/2007/01/19/nie#plainTextContent> ?text")[0].text.toString());
var occurrences = VIE2.globalCache.where('?s fise:selected-text ?occurrence');
var flatOccurrences = _(occurrences).map(function(oc){return oc.occurrence.value})
var uniqueOccurrences = _(flatOccurrences).uniq();
log(uniqueOccurrences);
_(uniqueOccurrences).each(function(occurrence){
console.info(occurrence);
// $('#content')[0].childNodes[0].splitText
// nodeName == "#text"
var foundEntityDomEl = getOrCreateDomElement(
element,
occurrence, {
// create only if it doesn't have it's element already
createMode: 'existing',
createElement: 'span',
}
);
log('put annotation widget on dom element with "' + occurrence + '"');
$(foundEntityDomEl)
.addClass('new-enhancement')
.annotate({
text: occurrence
});
})
console.info(['callback parameter: ', data]);
},
{
connectors: ['rdfa', 'stanbol']
}) //restrict to these two connectors
});
});
var log = function(msg){
$('#log').append($('<div>' + msg + '</div>'));
}
</script>
</head>
<body about="content">
<h1>Analyze and annotate</h1>
<button id="annotatebutton">Annotate</button>
<div id="content" property="foo" editable="true">
The Papal Basilica of Saint Peter (Latin: Basilica Sancti Petri), officially known in Italian as Basilica Papale di San Pietro in Vaticano and commonly known as St. Peter's Basilica, is a Late Renaissance church located within the Vatican City. St. Peter's Basilica has the largest interior of any Christian church in the world.[1] It is regarded as one of the holiest Catholic sites. It has been described as 'holding a unique position in the Christian world'[2] and as 'the greatest of all churches of Christendom'.[3]
</div>
<div id='log'>
<h2>Log</h2>
</div>
</body>
</html>