Commit 06f9ca01356625700918328bda88c5ee01e2f974

Bhanu Prakash
Fri May 23 13:50:11 IST 2014

Tree SHA1: b0e98b7
Parent SHA1: 5132a59 (Annotorious - editor UI options to add Label, Tags and related links -)
raw diff | raw patch

Editor UI - with cutom oprions - label, tags, links

Diff rendering mode:
inline
side by side


1		/**
2		* A plugin that adds 'Semantic Tagging' functionality to Annotorious.
3		* While typing an annotation in the editor, the text is sent to the plugin's
4		* server counterpart for Named Entity Recognition (NER). Recognized entities
5		* are suggested as possible tags, and the user can add them to the annotation
6		* by clicking on them. Tags are Semantic Tags in the sense that they are not
7		* just strings, but (underneath the hood) include a URI pointing to a concept
8		* in a specific 'knowledge context', hosted at the server.
9		*
10		* The config options for the plugin require a field named 'endpoint_url',
11		* holding the URL of the server endpoint to use as the NER/tag-suggestion
12		* service.
13		*
14		* @param {Object=} opt_config_options the config options
15		*/
16	1	annotorious.plugin.CustomFields = function(opt_config_options) {
17	2
18		//Container for custom fields
19
20	3
21		/ @private /
22		//this._tags = [];
23		// this._link =[];
24		// this._label= [];
25		//annotorious.Annotation(tags);
26
27
28		/ @private /
29		/** this._ENDPOINT_URI = opt_config_options['endpoint_url'];
30
31		if (this._ENDPOINT_URI[this._ENDPOINT_URI.length - 1] != '/')
32		this._ENDPOINT_URI += '/';
33
34		this._ENDPOINT_URI +=
35		'services/wikify?minProbability=0.1&disambiguationPolicy=loose&responseFormat=json&source='; **/
36		}
37
38	4	annotorious.plugin.CustomFields.prototype.onInitAnnotator = function(annotorious) {
39		var container = document.createElement('div');
40		container.className = "btn-group";
41		console.log (container);
42
43	5	var textTemplate= _.template($('#button-template').html());
44		console.log($(textTemplate));
45	6	annotorious.editor.addField(textTemplate);
46
47		//this._EditField(annotorious);
48		//this._popupField(annotator);
49		//this._extendEditor(annotator);
	7	var popupTemplate = _.template($('#popup-template').html());
	8	annotorious.popup.addField(function(annotation){
	9	var container = document.createElement('div');
	10	var el = document.createElement('span');
	11	el.href = '#';
	12	el.className = 'annotorious-popup-text';
	13	console.log(annotation.text);
	14	el.innerHTML= annotation.text;
	15	container.appendChild(el);
	16	return container;
	17
	18	});
	19	}
50	20	}


123	123	$('#sweet-list').append(this.template({
124	124	who: swt.get('who'),
125	125	what: swt.get('what'),
126		where: swt.get('where'),
	126	where: swt.get('where'),
127	127	how: JSON.stringify(swt.get('how').text)
128	128	}));
129	129	}, this);
…	…
154	154	swt.get('how').text += '\n - by ' + swt.get('who');
155	155	}
156	156	console.log(swt.get('how'));
157		anno.addAnnotation(swt.get('how'));
	157	anno.addAnnotation(newanno);
158	158	});
159	159	//console.log(swtr.sweets.toJSON());
160	160	swtr.appView.$overlay.hide();
…	…
180	180	'click #sweet': 'sweet',
181	181	'click #signin-credentials': 'getSignInCredentials',
182	182	'click #setbox': 'showHide',
183		'click #comment, #label, #tags, #links ': 'button_custom'
	183	'change .form-control': 'button_custom',
	184	'mouseup .annotorious-editor-button-save': 'add_new_anno'
184	185	},
185	186	initialize: function() {
186	187	//var allElements = $('body *');
187	188	this.helpview = new HelpView();
188	189	this.sweetsview = new SweetsView({collection: swtr.sweets});
189	190	anno.addHandler('onAnnotationCreated', this.showSwtHelp);
190		anno.addHandler('onAnnotationUpdated', this.showSwtHelp);
	191	anno.addHandler('onannotationupdated', this.showswthelp);
191	192	anno.addHandler('onSelectionStarted', function(annotation) {
192	193	anno.hideAnnotations();});
193	194	anno.addHandler('onSelectionCompleted', function(annotation) {
194		anno.showAnnotations(); });
	195	anno.showAnnotations();
	196	});
195	197	anno.addPlugin('CustomFields', this.showSwtHelp);
196	198	anno.addHandler('onSelectionCompleted', this.setShape);
197	199	this.$overlay = $('#app-overlay');
…	…
207	207	this.helpview.step(1);
208	208	}
209	209	},
210		setShape: function(annotation) {
211		window.annotation=annotation;
212		},
213	210
214	211	setImage: function() {
215	212	anno.reset();
…	…
240	240	swt.how['editable'] = false;
241	241	swt.how.text += '\n - by ' + swt.who;
242	242	anno.addAnnotation(swt.how);
	243	console.log('swt.how = ', swt.how);
243	244	});
244	245	swtr.appView.$overlay.hide();
245	246	swtr.appView.helpview.step(2);
…	…
264	264	var annos = _.filter(anno.getAnnotations(), function(anno) {
265	265	return (!_.has(anno, 'editable') \|\| anno.editable === true);
266	266	});
	267
267	268	_.each(annos, function(anno) {
268	269	swtr.sweets.add({
269	270	who: swtr.who,
270	271	where: anno.src,
271		how: anno
	272	how: newanno //mysterious link to create the sweet with new anno attributes, tags, links, labels
272	273	});
273	274	});
274	275	},
…	…
292	292	}
293	293
294	294	},
	295	//annotorious editor widget - custom with options
	296	//to obtain shapes object, declaring annotation in global scope - TODO refactor
	297	//code to find better way to do this.
295	298
296		/*build_txt: function(opt_array) {
297		var textarray = opt_array;
298		var newobj = [textarray];
299		console.log(newarray);
	299	setShape: function(annotation) {
	300	$('.annotorious-editor-text').hide();
	301	$('.annotorious-editor').css("width", "100%");
	302	window.annotation=annotation;
	303	annotation.text = [];
	304	},
	305	//to create new annotation object
	306	inputStore: function(opt) {
	307	var temp = opt;
	308	var src = $('#img-url-input').val();
	309	this.newanno = {'src':src, 'text':temp, 'shapes': [{'type':annotation.shape.type, 'geometry':{'x':annotation.shape.geometry.x, 'y':annotation.shape.geometry.y, 'width':annotation.shape.geometry.width, 'height':annotation.shape.geometry.height}},], 'context':window.location.origin};
300	310
301		},*/
	311	},
	312
	313	//to add the final annotation
	314
	315	//save button - event bind
	316	add_new_anno: function(event){
	317	var $selected = $('select option:selected');
	318	var tempinput = $selected.text()+': '+$('.annotorious-editor textarea').val();
	319	this.newanno.text.push(tempinput);
	320	var newinput = this.newanno.text.toString();
	321	this.newanno.text = newinput;
	322	console.log('this.newanno = ', this.newanno);
	323	//this.to_Add(this.newanno);
	324	var newanno = this.newanno;
	325	window.newanno = newanno;
	326	},
	327	//dropdown event
302	328	button_custom: function(event) {
303		var src = $('#img-url-input').val();
304		var newanno= {};
305		var tempinput = $('.annotorious-editor-text:first');
306		//type setting
307		// var type = $(tempinput).attr("placeholder").slice(5);
308		//console.log(type);
309		newanno.text = tempinput.val();
310		newanno.src = src;
311		$(tempinput).val("");
312		var placeHolder = "Add "+event.currentTarget.innerHTML;
313		$(tempinput).attr("placeholder", placeHolder);
314		newanno.shapes = [{'type':annotation.shape.type, 'geometry':{'x':annotation.shape.geometry.x, 'y':annotation.shape.geometry.y, 'width':annotation.shape.geometry.width, 'height':annotation.shape.geometry.height}}];
315		anno.addAnnotation(newanno);
316		//swtr.appView.ShowSwtHelp;
	329	$('.annotorious-editor-text').show();
	330	var $selected = $('select option:selected');
	331	var tempinput = $selected.prev().text()+ ': '+$('.annotorious-editor-text').val();
	332	if(tempinput === "Choose an Option: "){
	333	console.log('');
	334	}
	335	else {
	336	annotation.text.push(tempinput);
	337	}
	338	this.inputStore(annotation.text);
	339	$('.annotorious-editor-text:first').val("");
	340	$('.annotorious-editor-text:first').attr('placeholder', 'Add a '+$selected.text());
317	341	},
	342
	343
318	344
319	345	getSignInCredentials: function(event) {
320	346	event.preventDefault();


89	89	</div>
90	90	</script>
91	91	<script type="text/template" id="button-template">
92		<div class="btn-group">
93		<button type="button" class="btn-default"
94		id="comment">Comment</button>
95		<button type="button" class="btn-default"
96		id="label">Label</button>
97		<button type="button" class="btn-default"
98		id="tags">Tags</button>
99		<button type="button" class="btn-default "
100		id="links">Links</button>
101		</div>
	92	<select class="form-control">
	93	<option id="">Choose an Option</option>
	94	<option id="comment" >Comment</option>
	95	<option id="label" >Label</option>
	96	<option id="tags">Tags</option>
	97	<option id="links">Links</option>
	98	</select>
	99	</script>
	100	<script type="text/template" id="popup-template">
	101	<span class="annotorious-popup-text"> </span>
102	102	</script>
103	103	</body>
104	104	</html>

Commit 06f9ca01356625700918328bda88c5ee01e2f974

Gitorious