digilib-old: webapp/src/main/webapp/jquery/jquery.digilib.annotator.js comparison

comparison webapp/src/main/webapp/jquery/jquery.digilib.annotator.js @ 1115:526dafa4690d

using annotator in digilib works now. code still ugly.

author	robcast
date	Fri, 02 Nov 2012 20:49:51 +0100
parents	1525c820ee27
children	08206603c7dc

comparison

equal deleted inserted replaced

-:1525c820ee27
+:526dafa4690d
 */
 (function($) {
 // affine geometry
-var geom;
+var geom = null;
 // plugin object with digilib data
-var digilib;
+var digilib = null;
 // our Annotator instance
-var annotator;
+var annotator = null;
-var FULL_AREA;
 var buttons = {
 annotations : {
 onclick : "toggleAnnotations",
 tooltip : "show or hide annotations",
 icon : "annotation-mark.png"
 }
 };
 var defaults = {
-'annotatorInstance' : null,
 // are annotations active?
 'isAnnotationsVisible' : true,
 // buttonset of this plugin
 'annotationSet' : ['annotations', 'annotationuser', 'annotationmark', 'lessoptions'],
 // URL of annotation server
 }
 },
 };
 /**
-* create a new annotation object
-*/
-var newAnnotation = function (data, mpos, text, id, uri, user, permissions, tags) {
-var annot = {
-pos : mpos,
-text : text,
-id : id,
-uri : uri,
-user : user,
-permissions : permissions,
-tags : tags
-};
-// TODO: use prototype?
-annot.getUserName = data.settings.annotationServerUserString;
-return annot;
-};
-/**
 * returns an annotatable url to this digilib image
 */
 var getAnnotationPageUrl = function(data) {
 var url = data.settings.digilibBaseUrl + '/jquery/digilib.html?';
 url += digilib.fn.getParamString(data.settings, ['fn', 'pn'], digilib.defaults);
 /**
 * add a mark-annotation where clicked.
 */
 var setAnnotationMark = function(data) {
 var $scaler = data.$scaler;
-annotator = data.settings.annotatorInstance;
 // unbind other handler TODO: do we need to do this?
 $scaler.off(".dlZoomDrag");
 // start event capturing
 $scaler.one('mousedown.dlSetAnnotationMark', function(evt) {
 // event handler adding a new mark
 console.log("setAnnotationMark at=", evt);
 var mpos = geom.position(evt);
 var pos = data.imgTrafo.invtransform(mpos);
+// mark selected areas
-console.debug("showing annotator editor!");
+annotator.selectedAreas = [geom.rectangle(pos)];
+// create and edit new annotation
 var annotation = annotator.createAnnotation();
-annotation.areas = [geom.rectangle(pos)];
 annotator.showEditor(annotation, mpos.getAsCss());
 return false;
-// Annotation text entered in JS-prompt
-var text = window.prompt("Annotation text:");
-if (text == null) return false;
-var annotation = newAnnotation(data, pos, text, null, null, data.settings.annotationUser);
-storeAnnotation(data, annotation);
-data.annotations.push(annotation);
-digilib.fn.redisplay(data);
-return false;
 });
 };
 /**
 * place annotations on the image
 // clear annotations
 $elem.find('div.' + cssPrefix + 'annotationmark').remove();
 if (!data.settings.isAnnotationsVisible) return;
 for (var i = 0; i < annotations.length; i++) {
 var annotation = annotations[i];
-renderAnnotation(data, annotation, i+1);
+annotation.idx = i+1;
-}
+renderAnnotation(data, annotation);
-};
+}
+};
-/**
-* place annotation on the image
+/**
-*/
+* place single annotation on the image
-var renderAnnotation = function (data, annotation, idx) {
+*/
+var renderAnnotation = function (data, annotation) {
 console.debug("renderAnnotation: annotation=", annotation);
-if (annotation == null || data.$img == null || data.imgTrafo == null)
+if (annotation == null || annotation.areas == null || data.$img == null || data.imgTrafo == null)
 return;
+if (!data.settings.isAnnotationsVisible) return;
 var cssPrefix = data.settings.cssPrefix;
 var $elem = data.$elem;
+var idx = annotation.idx;
 if (idx == null) idx = '?';
-// try to show annotation user state
-$elem.find('div#'+cssPrefix+'button-annotationuser').attr('title', 'annotation user: '+data.settings.annotationUser);
-if (!data.settings.isAnnotationsVisible) return;
 var pos = geom.position(annotation.areas[0]);
 if (data.zoomArea.containsPosition(pos)) {
 var mpos = data.imgTrafo.transform(pos);
 console.debug("renderannotations: pos=", mpos);
 // create annotation
 var html = '<div class="'+cssPrefix+'annotationmark '+cssPrefix+'overlay annotator-hl">'+idx+'</div>';
 var $annotation = $(html);
+// save annotation in data for Annotator
 $annotation.data('annotation', annotation);
-// set text as tooltip
+// save reference to div
-//$annotation.attr('title', "Annotation: " + annotation.text);
+annotation.$div = $annotation;
 $elem.append($annotation);
+// hook up Annotator events
 $annotation.on("mouseover", annotator.onHighlightMouseover);
 $annotation.on("mouseout", annotator.startViewerHideTimer);
 mpos.adjustDiv($annotation);
 }
 };
 data.settings.annotationUser = "anonymous";
 //loadAnnotations(data);
 });
 };
-/**
-* loads all annotations for this url from the annotation server.
-*/
-var loadAnnotations = function(data) {
-var settings = data.settings;
-// we use the search API
-var url = settings.annotationServerUrl + '/search';
-var pageUrl = getAnnotationPageUrl(data);
-// send authentication token in header
-headers = {};
-if (data.annotationToken != null) {
-headers['x-annotator-auth-token'] = data.annotationToken;
-}
-// get only 20 annotations with this url
-var query = {
-limit : 20,
-uri : pageUrl
-};
-$.ajax(url, {
-dataType : 'json',
-data : query,
-headers : headers,
-success : function(annotData, annotStatus) {
-console.debug("got annotation data=", annotData);
-data.annotationData = annotData;
-parseAnnotations(data, annotData);
-renderAnnotations(data);
-}
-});
-};
-/**
-* parse all JSON-annotations in annotationData.rows and put in data.annotations
-*/
-var parseAnnotations = function(data, annotationData) {
-var annotations = [];
-for (var i = 0; i < annotationData.rows.length; ++i) {
-var ann = annotationData.rows[i];
-var annot = parseAnnotation(data, ann);
-if (annot != null) {
-annotations.push(annot);
-}
-}
-data.annotations = annotations;
-};
-/**
-* Parse a JSON-annotation.
-*
-* Returns an annotation object.
-*/
-var parseAnnotation = function(data, ann) {
-// TODO: check validity of annotation data
-if (ann.areas != null && ann.areas.length > 0) {
-var area = ann.areas[0];
-// currently only point annotations
-var pos = geom.position(area.x, area.y);
-return newAnnotation(data, pos, ann.text, ann.id, ann.uri, ann.user, ann.permissions, ann.tags);
-}
-return null;
-};
-/**
-* Store an annotation on the annotation server.
-*/
-var storeAnnotation = function(data, annotation) {
-console.debug("storeAnnotation:", annotation);
-var settings = data.settings;
-var url = settings.annotationServerUrl + '/annotations';
-var pageUrl = getAnnotationPageUrl(data);
-// send authentication token in header
-headers = {
-'x-annotator-auth-token' : data.annotationToken
-};
-// create annotation object to send
-var annotData = {
-areas : [{
-x : annotation.pos.x,
-y : annotation.pos.y
-}],
-text : annotation.text,
-uri : pageUrl,
-user : settings.annotationUser
-};
-var dataString = JSON.stringify(annotData);
-$.ajax(url, {
-type : 'POST',
-dataType : 'json',
-contentType : 'application/json',
-data : dataString,
-headers : headers,
-success : function(annotData, annotStatus) {
-console.debug("sent annotation data, got=", annotData, " status=" + annotStatus);
-var annot = parseAnnotation(data, annotData);
-// TODO: we have to add the returned data to the real annotation!
-//renderAnnotations(data);
-}
-});
-};
 /**
 * install additional buttons
 */
 var installButtons = function(data) {
 var settings = data.settings;
 /**
 * plugin installation. called by digilib on plugin object.
 */
 var install = function(plugin) {
 digilib = plugin;
-console.debug('installing annotations plugin. digilib:', digilib);
+console.debug('installing annotator plugin. digilib:', digilib);
 // import geometry classes
 geom = digilib.fn.geometry;
 FULL_AREA = geom.rectangle(0, 0, 1, 1);
 // add defaults, actins, buttons
 $.extend(digilib.defaults, defaults);
 $.extend(digilib.buttons, buttons);
 };
 /** plugin initialization */
 var init = function(data) {
-console.debug('initialising annotations plugin. data:', data);
+console.debug('initialising annotator plugin. data:', data);
 var $data = $(data);
 // set up
 data.annotations = [];
 if (digilib.plugins.buttons != null) {
 installButtons(data);
 annotator = new Annotator(data.$elem.get(0))
 //.addPlugin('Tags')
 .addPlugin('Auth', {
 	token : data.annotationToken,
 //tokenUrl: 'http://annotateit.org/api/token'
-//tokenUrl: 'http://localhost:8080/test/annotator/token?user=anonymous'
 //autoFetch: false
 })
 .addPlugin('Permissions', {
 user: data.settings.annotationUser,
 userString: function (user) {
 return user;
 }
 })
 .addPlugin('Store', {
 	prefix : data.settings.annotationServerUrl,
-//prefix: 'http://localhost:18080/AnnotationManager/annotator',
-//prefix: 'http://tuxserve03.mpiwg-berlin.mpg.de/AnnotationManager/annotator',
-//prefix: 'http://annotateit.org/api',
 annotationData: {
 'uri': uri
 },
 loadFromSearch: {
 'limit': 20,
 }
 })
 ;
 		// monkey-patch Annotator.setupAnnotation
+		annotator.setupRangeAnnotation = annotator.setupAnnotation;
 		annotator.setupAnnotation = function(annotation, fireEvents) {
-		    if (fireEvents == null) {
+			if (annotator.selectedAreas == null && annotation.areas == null) {
-		      fireEvents = true;
+				// pass call to original method
-		    }
+				return annotator.setupRangeAnnotation.apply(this, arguments);
+			} else {
-		    renderAnnotation(data, annotation);
+				// set up digilib-area annotation
+			    if (fireEvents == null) {
-		    if (fireEvents) {
+			      fireEvents = true;
-		      this.publish('annotationCreated', [annotation]);
+			    }
-		    }
+			    if (annotation.areas == null) {
-		    return annotation;
+			    	annotation.areas = annotator.selectedAreas;
+			    }
+			    // compatibility crap
+			    annotation.highlights = [];
+			    // pre-render this annotation
+			    renderAnnotation(data, annotation);
+			    if (fireEvents) {
+			      this.publish('annotationCreated', [annotation]);
+			    }
+			    return annotation;
+			}
 		};
+		// hook Annotator events
-data.settings.annotatorInstance = annotator;
+		annotator.subscribe('annotationDeleted', function (ann) {
-/* load annotations from server
+			console.debug("got annotationDeleted!");
-if (data.annotationToken !=  null) {
+			if (ann.$div != null) {
-loadAnnotations(data);
+				ann.$div.remove();
-} else {
+				delete ann.$div;
-loadAnnotationToken(data);
+			}
-} */
+		});
+		// TODO: should we really export annotator?
+data.annotator = annotator;
 };
 /**
 * update renders all annotations.
 */
 };
 // plugin object with name and init
 // shared objects filled by digilib on registration
 var plugin = {
-name : 'annotations',
+name : 'annotator',
 install : install,
 init : init,
 buttons : {},
 actions : {},
 fn : {},
 plugins : {}
 };
 if ($.fn.digilib == null) {
-$.error("jquery.digilib.annotations must be loaded after jquery.digilib!");
+$.error("jquery.digilib.annotator must be loaded after jquery.digilib!");
 } else {
 $.fn.digilib('plugin', plugin);
 }
 })(jQuery);