Mercurial > hg > digilib-old
annotate webapp/src/main/webapp/jquery/jquery.digilib.annotations.js @ 1105:ccdac39eb3da
use preliminary username for annotations (we should use the annotation returned by the server).
| author | robcast |
|---|---|
| date | Fri, 26 Oct 2012 17:55:13 +0200 |
| parents | 34f893492adb |
| children | 121d3aadfa1e |
| rev | line source |
|---|---|
| 1083 | 1 /** |
| 2 digilib plugin for annotations. | |
| 3 | |
| 1086 | 4 currently only point-like annotations (like marks). |
| 5 | |
| 6 Annotations are stored on a Annotator http://annotateit.org compatible server. | |
| 1083 | 7 |
| 8 */ | |
| 9 | |
| 10 (function($) { | |
| 11 | |
| 12 // affine geometry | |
| 13 var geom; | |
| 14 // plugin object with digilib data | |
| 15 var digilib; | |
| 16 | |
| 17 var FULL_AREA; | |
| 18 | |
| 19 var buttons = { | |
| 20 annotations : { | |
| 21 onclick : "toggleAnnotations", | |
| 22 tooltip : "show or hide annotations", | |
| 23 icon : "annotations.png" | |
| 24 }, | |
| 1100 | 25 annotationuser : { |
| 26 onclick : "setAnnotationUser", | |
| 27 tooltip : "set user account for annotations", | |
| 28 icon : "annotation-user.png" | |
| 29 }, | |
| 1083 | 30 annotationmark : { |
| 31 onclick : "setAnnotationMark", | |
| 32 tooltip : "create an annotation for a point", | |
| 33 icon : "annotation-mark.png" | |
| 34 } | |
| 35 }; | |
| 36 | |
| 37 var defaults = { | |
| 38 // are annotations active? | |
| 39 'isAnnotationsVisible' : true, | |
| 40 // buttonset of this plugin | |
| 1100 | 41 'annotationSet' : ['annotations', 'annotationuser', 'annotationmark', 'lessoptions'], |
| 1083 | 42 // URL of annotation server |
| 43 'annotationServerUrl' : 'http://virtuoso.mpiwg-berlin.mpg.de:8080/AnnotationManager/annotator', | |
| 44 // URL of authentication token server | |
| 1100 | 45 'annotationTokenUrl' : 'http://localhost:8080/test/annotator/token', |
| 1083 | 46 // annotation user name |
|
1101
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
47 'annotationUser' : 'anonymous', |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
48 // function to translate user name from annotation server format |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
49 'annotationServerUserString' : function() { |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
50 if (this.user && this.user.name) { |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
51 return this.user.name; |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
52 } |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
53 return this.user; |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
54 }, |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
55 |
| 1083 | 56 }; |
| 57 | |
| 58 var actions = { | |
| 59 /** | |
| 60 * show/hide annotations | |
| 61 */ | |
| 1100 | 62 toggleAnnotations : function (data) { |
| 1083 | 63 var show = !data.settings.isAnnotationsVisible; |
| 64 data.settings.isAnnotationsVisible = show; | |
| 1097 | 65 digilib.fn.highlightButtons(data, 'annotations', show); |
| 1083 | 66 renderAnnotations(data); |
| 67 }, | |
| 1100 | 68 |
| 69 /** | |
| 70 * set user account for annotations | |
| 71 */ | |
| 72 setAnnotationUser : function (data, user) { | |
| 73 var settings = data.settings; | |
| 74 if (user == null) { | |
| 75 // user name entered in JS-prompt | |
| 76 user = window.prompt("User name:", settings.annotationUser); | |
| 77 if (user != null) { | |
| 78 settings.annotationUser = user; | |
| 79 } | |
| 80 } else { | |
| 81 settings.annotationUser = user; | |
| 82 } | |
| 83 }, | |
| 1083 | 84 |
| 85 /** | |
| 86 * set a mark-annotation by clicking (or giving a position and a text) | |
| 87 * | |
| 88 * @param data | |
| 89 * @param mpos | |
| 90 * @param text | |
| 91 */ | |
| 1100 | 92 setAnnotationMark : function (data, mpos, text) { |
| 1083 | 93 if (mpos == null) { |
| 94 // interactive | |
| 95 setAnnotationMark(data); | |
| 96 } else { | |
|
1105
ccdac39eb3da
use preliminary username for annotations (we should use the annotation returned by the server).
robcast
parents:
1101
diff
changeset
|
97 // use position and text (and user-id) |
|
ccdac39eb3da
use preliminary username for annotations (we should use the annotation returned by the server).
robcast
parents:
1101
diff
changeset
|
98 var annotation = newAnnotation(data, mpos, text, null, null, data.settings.annotationUser); |
| 1083 | 99 storeAnnotation(data, annotation); |
|
1105
ccdac39eb3da
use preliminary username for annotations (we should use the annotation returned by the server).
robcast
parents:
1101
diff
changeset
|
100 // TODO: replace with annotation returned by server |
| 1083 | 101 data.annotations.push(annotation); |
| 102 digilib.fn.redisplay(data); | |
| 103 } | |
| 104 }, | |
| 105 }; | |
| 106 | |
| 1086 | 107 /** |
| 108 * create a new annotation object | |
| 109 */ | |
|
1101
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
110 var newAnnotation = function (data, mpos, text, id, uri, user, permissions, tags) { |
| 1083 | 111 var annot = { |
| 112 pos : mpos, | |
| 113 text : text, | |
| 114 id : id, | |
| 115 uri : uri, | |
|
1101
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
116 user : user, |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
117 permissions : permissions, |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
118 tags : tags |
| 1083 | 119 }; |
|
1101
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
120 // TODO: use prototype? |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
121 annot.getUserName = data.settings.annotationServerUserString; |
| 1083 | 122 return annot; |
| 123 }; | |
| 124 | |
| 125 /** | |
| 126 * returns an annotatable url to this digilib image | |
| 127 */ | |
| 128 var getAnnotationPageUrl = function(data) { | |
| 129 var url = data.settings.digilibBaseUrl + '/jquery/digilib.html?'; | |
| 130 url += digilib.fn.getParamString(data.settings, ['fn', 'pn'], digilib.defaults); | |
| 131 return url; | |
| 1086 | 132 }; |
| 133 | |
| 1083 | 134 /** |
| 135 * add a mark-annotation where clicked. | |
| 136 */ | |
| 137 var setAnnotationMark = function(data) { | |
| 138 var $scaler = data.$scaler; | |
| 139 // unbind other handler TODO: do we need to do this? | |
| 140 $scaler.off(".dlZoomDrag"); | |
| 141 // start event capturing | |
| 142 $scaler.one('mousedown.dlSetAnnotationMark', function(evt) { | |
| 143 // event handler adding a new mark | |
| 144 console.log("setAnnotationMark at=", evt); | |
| 145 var mpos = geom.position(evt); | |
| 146 var pos = data.imgTrafo.invtransform(mpos); | |
| 1086 | 147 // Annotation text entered in JS-prompt |
| 1083 | 148 var text = window.prompt("Annotation text:"); |
| 1100 | 149 if (text == null) return false; |
|
1105
ccdac39eb3da
use preliminary username for annotations (we should use the annotation returned by the server).
robcast
parents:
1101
diff
changeset
|
150 var annotation = newAnnotation(data, pos, text, null, null, data.settings.annotationUser); |
| 1083 | 151 storeAnnotation(data, annotation); |
| 152 data.annotations.push(annotation); | |
| 153 digilib.fn.redisplay(data); | |
| 154 return false; | |
| 155 }); | |
| 156 }; | |
| 157 | |
| 158 /** | |
| 159 * place annotations on the image | |
| 160 */ | |
| 161 var renderAnnotations = function(data) { | |
| 162 if (data.annotations == null || data.$img == null || data.imgTrafo == null) | |
| 163 return; | |
| 164 var cssPrefix = data.settings.cssPrefix; | |
| 165 var $elem = data.$elem; | |
| 166 var annotations = data.annotations; | |
|
1101
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
167 console.debug("renderAnnotations: annotations=", annotations); |
| 1083 | 168 // clear annotations |
| 169 $elem.find('div.' + cssPrefix + 'annotationmark').remove(); | |
| 1097 | 170 if (!data.settings.isAnnotationsVisible) return; |
| 1083 | 171 for (var i = 0; i < annotations.length; i++) { |
| 172 var annotation = annotations[i]; | |
| 173 if (data.zoomArea.containsPosition(annotation.pos)) { | |
| 174 var mpos = data.imgTrafo.transform(annotation.pos); | |
| 175 console.debug("renderannotations: pos=", mpos); | |
| 176 // create annotation | |
| 177 var html = '<div class="' + cssPrefix + 'annotationmark ' + cssPrefix + 'overlay">' + (i + 1) + '</div>'; | |
|
1101
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
178 // set text as tooltip |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
179 if ($.fn.tooltip != null) { |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
180 html += '<div class="tooltip '+cssPrefix+'annotationbody" style="display:none">' |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
181 // + '<h3>Annotation</h3>' |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
182 + '<div class="'+cssPrefix+'text">'+annotation.text+'</div>' |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
183 + '<div class="'+cssPrefix+'creator">Creator: '+annotation.getUserName()+'</div>'; |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
184 if (annotation.tags != null && annotation.tags.length > 0) { |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
185 html += '<div class="'+cssPrefix+'tags">Tags: '+annotation.tags+'</div>'; |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
186 } |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
187 html += '</div>'; |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
188 var $annotation = $(html); |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
189 } else { |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
190 // default browser tooltip |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
191 var $annotation = $(html); |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
192 $annotation.attr('title', "Annotation: " + annotation.text); |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
193 } |
| 1083 | 194 $elem.append($annotation); |
| 195 mpos.adjustDiv($annotation); | |
| 196 } | |
| 197 } | |
|
1101
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
198 if ($.fn.tooltip != null) { |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
199 $('div.'+cssPrefix+'annotationmark').tooltip(); |
|
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
200 } |
| 1083 | 201 }; |
| 202 | |
| 1086 | 203 /** |
| 204 * Get an authentication token from the token server. | |
| 205 * | |
| 206 * Stores the token and loads annotations on success. | |
| 207 */ | |
| 1083 | 208 var loadAnnotationToken = function(data) { |
| 209 var settings = data.settings; | |
| 210 var url = settings.annotationTokenUrl; | |
| 211 // TODO: better error handling | |
| 212 $.get(url, function(authToken, authStatus) { | |
| 213 console.debug("got auth token data=", authToken); | |
| 214 data.annotationToken = authToken; | |
| 215 loadAnnotations(data); | |
| 216 }); | |
| 217 }; | |
| 218 | |
| 1086 | 219 /** |
| 220 * loads all annotations for this url from the annotation server. | |
| 221 */ | |
| 1083 | 222 var loadAnnotations = function(data) { |
| 223 var settings = data.settings; | |
| 1086 | 224 // we use the search API |
| 1083 | 225 var url = settings.annotationServerUrl + '/search'; |
| 1084 | 226 var pageUrl = getAnnotationPageUrl(data); |
| 1083 | 227 // send authentication token in header |
| 228 headers = { | |
| 229 'x-annotator-auth-token' : data.annotationToken | |
| 230 }; | |
| 1086 | 231 // get only 20 annotations with this url |
| 1083 | 232 var query = { |
| 233 limit : 20, | |
| 234 uri : pageUrl | |
| 235 }; | |
| 236 $.ajax(url, { | |
| 237 dataType : 'json', | |
| 238 data : query, | |
| 239 headers : headers, | |
| 240 success : function(annotData, annotStatus) { | |
| 241 console.debug("got annotation data=", annotData); | |
| 242 data.annotationData = annotData; | |
| 243 parseAnnotations(data, annotData); | |
| 244 renderAnnotations(data); | |
| 245 } | |
| 246 }); | |
| 247 }; | |
| 248 | |
| 1086 | 249 /** |
| 250 * parse all JSON-annotations in annotationData.rows and put in data.annotations | |
| 251 */ | |
| 1083 | 252 var parseAnnotations = function(data, annotationData) { |
| 253 var annotations = []; | |
| 254 for (var i = 0; i < annotationData.rows.length; ++i) { | |
| 255 var ann = annotationData.rows[i]; | |
|
1101
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
256 var annot = parseAnnotation(data, ann); |
| 1083 | 257 if (annot != null) { |
| 258 annotations.push(annot); | |
| 259 } | |
| 260 } | |
| 261 data.annotations = annotations; | |
| 262 }; | |
| 263 | |
| 1086 | 264 /** |
| 265 * Parse a JSON-annotation. | |
| 266 * | |
| 267 * Returns an annotation object. | |
| 268 */ | |
|
1101
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
269 var parseAnnotation = function(data, ann) { |
| 1083 | 270 // TODO: check validity of annotation data |
| 1084 | 271 if (ann.areas != null && ann.areas.length > 0) { |
| 272 var area = ann.areas[0]; | |
| 1086 | 273 // currently only point annotations |
| 1084 | 274 var pos = geom.position(area.x, area.y); |
|
1101
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
275 return newAnnotation(data, pos, ann.text, ann.id, ann.uri, ann.user, ann.permissions, ann.tags); |
| 1083 | 276 } |
| 277 return null; | |
| 278 }; | |
| 279 | |
| 1086 | 280 /** |
| 281 * Store an annotation on the annotation server. | |
| 282 */ | |
| 1083 | 283 var storeAnnotation = function(data, annotation) { |
| 284 console.debug("storeAnnotation:", annotation); | |
| 285 var settings = data.settings; | |
| 286 var url = settings.annotationServerUrl + '/annotations'; | |
| 287 var pageUrl = getAnnotationPageUrl(data); | |
| 288 // send authentication token in header | |
| 289 headers = { | |
| 290 'x-annotator-auth-token' : data.annotationToken | |
| 291 }; | |
| 292 // create annotation object to send | |
| 293 var annotData = { | |
| 1084 | 294 areas : [{ |
| 295 x : annotation.pos.x, | |
| 296 y : annotation.pos.y | |
| 297 }], | |
| 1083 | 298 text : annotation.text, |
| 299 uri : pageUrl, | |
| 300 user : settings.annotationUser | |
| 301 }; | |
| 302 var dataString = JSON.stringify(annotData); | |
| 303 $.ajax(url, { | |
| 304 type : 'POST', | |
| 305 dataType : 'json', | |
| 306 contentType : 'application/json', | |
| 307 data : dataString, | |
| 308 headers : headers, | |
| 309 success : function(annotData, annotStatus) { | |
| 1084 | 310 console.debug("sent annotation data, got=", annotData, " status=" + annotStatus); |
|
1101
34f893492adb
annotations with nicer tooltips using jquery-tools.
robcast
parents:
1100
diff
changeset
|
311 var annot = parseAnnotation(data, annotData); |
| 1083 | 312 // TODO: we have to add the returned data to the real annotation! |
| 313 //renderAnnotations(data); | |
| 314 } | |
| 315 }); | |
| 316 | |
| 1086 | 317 }; |
| 318 | |
| 319 /** | |
| 320 * install additional buttons | |
| 321 */ | |
| 1083 | 322 var installButtons = function(data) { |
| 323 var settings = data.settings; | |
| 324 var mode = settings.interactionMode; | |
| 325 var buttonSettings = settings.buttonSettings[mode]; | |
| 326 // configure buttons through digilib "annotationSet" option | |
| 327 var buttonSet = settings.annotationSet || annotationSet; | |
| 328 // set annotationSet to [] or '' for no buttons (when showing annotations only) | |
| 329 if (buttonSet.length && buttonSet.length > 0) { | |
| 330 buttonSettings.annotationSet = buttonSet; | |
| 331 buttonSettings.buttonSets.push('annotationSet'); | |
| 332 } | |
| 333 }; | |
| 334 | |
| 1086 | 335 /** |
| 336 * plugin installation. called by digilib on plugin object. | |
| 337 */ | |
| 1083 | 338 var install = function(plugin) { |
| 339 digilib = plugin; | |
| 340 console.debug('installing annotations plugin. digilib:', digilib); | |
| 341 // import geometry classes | |
| 342 geom = digilib.fn.geometry; | |
| 343 FULL_AREA = geom.rectangle(0, 0, 1, 1); | |
| 344 // add defaults, actins, buttons | |
| 345 $.extend(digilib.defaults, defaults); | |
| 346 $.extend(digilib.actions, actions); | |
| 347 $.extend(digilib.buttons, buttons); | |
| 348 }; | |
| 349 | |
| 350 /** plugin initialization */ | |
| 351 var init = function(data) { | |
| 352 console.debug('initialising annotations plugin. data:', data); | |
| 353 var $data = $(data); | |
| 354 // set up | |
| 355 data.annotations = []; | |
| 356 if (digilib.plugins.buttons != null) { | |
| 357 installButtons(data); | |
| 358 } | |
| 359 // install event handler | |
| 360 $data.bind('setup', handleSetup); | |
| 361 $data.bind('update', handleUpdate); | |
| 362 }; | |
| 363 | |
| 1086 | 364 /** |
| 365 * setup loads all annotations. | |
| 366 */ | |
| 1083 | 367 var handleSetup = function(evt) { |
| 368 console.debug("annotations: handleSetup"); | |
| 369 var data = this; | |
| 370 // load annotations from server | |
| 371 loadAnnotationToken(data); | |
| 372 }; | |
| 373 | |
| 1086 | 374 /** |
| 375 * update renders all annotations. | |
| 376 */ | |
| 1083 | 377 var handleUpdate = function(evt) { |
| 378 console.debug("annotations: handleUpdate"); | |
| 379 var data = this; | |
| 380 if (data.marks != null) { | |
| 381 renderAnnotations(data); | |
| 382 } | |
| 383 }; | |
| 384 | |
| 385 // plugin object with name and init | |
| 386 // shared objects filled by digilib on registration | |
| 387 var plugin = { | |
| 388 name : 'annotations', | |
| 389 install : install, | |
| 390 init : init, | |
| 391 buttons : {}, | |
| 392 actions : {}, | |
| 393 fn : {}, | |
| 394 plugins : {} | |
| 395 }; | |
| 396 | |
| 397 if ($.fn.digilib == null) { | |
| 398 $.error("jquery.digilib.annotations must be loaded after jquery.digilib!"); | |
| 399 } else { | |
| 400 $.fn.digilib('plugin', plugin); | |
| 401 } | |
| 402 })(jQuery); |