Commit 7f993292916475595ce2e6f9656a1b288f5b355b

Anon Ray
Fri Jun 06 15:29:36 IST 2014

Tree SHA1: 12d7b39
Parent SHA1: 655fc33 (Merge branch 'master' into persona)
raw diff | raw patch

Fix problems with breaking the annotation into its component parts

Diff rendering mode:
inline
side by side


7	7	}
8	8	#img-annotation-wrapper {
9	9	margin: 30px auto 0 auto;
10		/border: 1px solid black;/
11		/min-height: 500px;/
12	10	}
13	11	#annotatable-img {
	12	margin: 0 auto;
14	13	}
15	14	#sweet-list-wrapper {
16	15	width: 500px;


1	1	annotorious.plugin.CustomFields = function(opt_config_options) {
2	2
3		annotorious.plugin.CustomFields.prototype.onInitAnnotator = function(annotorious) {
4		var dropDownTemplate= _.template($('#dropdown-template').html()); // creates the HTML element for dropdown - from template in index.html
5		annotorious.editor.addField(dropDownTemplate); // add dropdown to editor UI widget
6		annotorious.popup.addField( function(annotation){
7		var popupTemplate = _.template($('#popup-template').html()); //created a popup template - yet to find how to bind it to newanno
8		if(annotation.text1 != undefined) {
9		//console.log(annotation.text1.Comment); annotation.text is Obj - can
10		//access each element Comment, tags, links..
11		return popupTemplate(annotation.text1);
	3	annotorious.plugin.CustomFields.prototype.onInitAnnotator = function(annotorious) {
	4
	5	// creates the HTML element for dropdown - from template in index.html
	6	var dropDownTemplate= _.template($('#dropdown-template').html());
	7
	8	// add dropdown to editor UI widget
	9	annotorious.editor.addField(dropDownTemplate);
	10
	11	annotorious.popup.addField(function(annotation) {
	12	// created a popup template - yet to find how to bind it to newanno
	13	var popupTemplate = _.template($('#popup-template').html());
	14
	15	if(annotation.text1 != undefined) {
	16	//console.log(annotation.text1.Comment); annotation.text is Obj - can
	17	//access each element Comment, tags, links..
	18	return popupTemplate(annotation.text1);
12	19	}
13	20	else {
14		return '';
	21	return '';
15	22	}
16		});
17		}
	23	});
	24	}
18	25	}


4	4	//Find a better way to do closure
5	5	//Remove script code from the HTML page
6	6	swtr.init = function() {
7		swtr.sweets = new ImgAnnoSwts();
8		swtr.appView = new AppView();
9		swtr.who = 'Guest';
	7	this.sweets = new ImgAnnoSwts();
	8	this.appView = new AppView();
	9	this.who = 'Guest';
10	10
11	11	$.ajaxSetup({
12	12	xhrFields: {
…	…
16	16	//some browsers won't make cross-domain ajax until it is explicitly set
17	17	crossDomain: true
18	18	});
19		swtr.handleOAuth();
	19	this.handleOAuth();
20	20	};
21	21
22	22	swtr.handleOAuth = function() {
…	…
158	158	who: swt.get('who'),
159	159	what: swt.get('what'),
160	160	where: swt.get('where'),
161		how: JSON.stringify(swt.get('how').text)
	161	how: JSON.stringify(this.getHumanReadableParts(swt.get('how')))
162	162	}));
163	163	}, this);
164	164	$(this.el).fadeIn(300);
165	165	},
	166	getHumanReadableParts: function(how) {
	167	var human_readable_json = {};
	168	if(how.comment) {
	169	human_readable_json['comment'] = how.comment;
	170	}
	171	if(how.title) {
	172	human_readable_json['title'] = how.title;
	173	}
	174	if(how.tags) {
	175	human_readable_json['tags'] = how.tags;
	176	}
	177	if(how.link) {
	178	human_readable_json['link'] = how.link;
	179	}
	180	return human_readable_json;
	181	},
166	182	cancelSweeting: function() {
167	183	this.removeSwtsNotPosted();
168	184	this.cleanUp();
…	…
204	204	if(!_.has(swt.get('how'), 'editable')) {
205	205	swt.get('how')['editable'] = false;
206	206	//console.log(swt.get('how').text.Comment);
	207	swt.get('how').text = appView.createPopupText(swt.get('how'));
	208	//console.log(swt.get('how'));
207	209	swt.get('how').text += '\n - by ' + swt.get('who');
208	210	}
209	211	//console.log(swt.get('how'));
210	212	anno.addAnnotation(swt.get('how'));
211	213	});
212	214	//console.log(swtr.sweets.toJSON());
213		appView.overlay.hide();
214		appView.helpview.step(6);
	215	swtr.appView.$overlay.hide();
	216	swtr.appView.helpview.step(6);
215	217	},
216	218	error: function(jqxhr, error, text) {
217	219	console.log(jqxhr, error, text);
…	…
242	242	'click #sweet': 'sweet',
243	243	'click #sign-in': 'signIn',
244	244	'click #setbox': 'showHide',
245		'change #custom-dropdown ': 'getFormValue',
246		'mouseup .annotorious-editor-button-save': 'addNewAnno'
	245	'change #custom-dropdown ': 'getFormValue'
	246	//'mouseup .annotorious-editor-button-save': 'addnew_anno'
247	247	},
248	248	initialize: function() {
249	249	// initialize components
…	…
252	252
253	253	//register handlers for annotorious events
254	254	anno.addHandler('onAnnotationCreated', this.showSwtHelp);
	255	anno.addHandler('onAnnotationCreated', this.updateNewAnno);
255	256	anno.addHandler('onAnnotationUpdated', this.showSwtHelp);
256	257	anno.addHandler('onSelectionStarted', function(annotation) {
257		anno.hideAnnotations();});
	258	anno.hideAnnotations();
	259	});
258	260	anno.addHandler('onSelectionCompleted', function(annotation) {
259	261	anno.showAnnotations();
260	262	});
261	263	anno.addPlugin('CustomFields', {});
262		anno.addHandler('onSelectionCompleted', this.getShape);
	264	anno.addHandler('onSelectionCompleted', this.hideOriginalEditor);
263	265
264	266	// cache jquery selected elements which are used frequently
265	267	this.$overlay = $('#app-overlay');
…	…
296	296	if(!this.imgURL) {
297	297	return false;
298	298	}
	299	if(this.$img.attr('src') === this.imgURL) {
	300	return;
	301	}
299	302	anno.reset();
300	303	var self = this;
301	304	this.$overlay.show();
…	…
341	341	swtr.sweets.add(data);
342	342	_.each(data, function(swt) {
343	343	swt.how['editable'] = false;
344		if(typeof swt.how.text === 'object') {
345		swt.how.text1 = swt.how.text;
346		swt.how.text = '\n - by ' + swt.who;
	344	/*if(typeof swt.how.text === 'object') {
	345	swt.how.text1 = swt.how.text;
	346	swt.how.text = '\n - by ' + swt.who;
347	347	} else {
348	348	swt.how.text1 = undefined;
349	349	swt.how.text += '\n -by ' + swt.who;
350		}
351
	350	}*/
	351	swt.how.text = self.createPopupText(swt.how);
	352	swt.how.text += '\n - by ' + swt.who;
	353	//console.log(swt.how);
352	354	anno.addAnnotation(swt.how);
353	355	});
354	356	self.$overlay.hide();
…	…
380	380	swtr.sweets.add({
381	381	who: swtr.who,
382	382	where: anno.src,
383		how: anno //mysterious link to create the sweet with new anno attributes, tags, links, labels
	383	// remove the text field; we don't want to store that in the sweets
	384	how: _.omit(anno, 'text')
384	385	});
385	386	});
386	387	},
…	…
401	401	$('.annotorious-item-unfocus').css("opacity", "0");
402	402	}
403	403	},
404		//annotorious editor widget - custom with options
405		//to obtain shapes object, declaring annotation in global scope - TODO refactor
406		//code to find better way to do this.
407		getShape: function(annotation) {
408		$('.annotorious-editor-text').slideUp();
409		$('.annotorious-editor').css('width', '100%');
410		window.annotation=annotation; // to use annotation.shape in newanno
411		annotation.text = {}; // creating new text object - to contain comments, labels, links and tags
	404	// hide the original editor window, when user has completed selecting part
	405	// of the image to annotate..
	406	hideOriginalEditor: function(annotation) {
	407	console.log('hideOriginalEditor()');
	408	var self = swtr.appView;
	409	self.new_anno = {};
	410	$('.annotorious-editor-text').hide();
	411	//$('.annotorious-editor').css('width', '100%');
	412	//window.annotation = annotation; // to use annotation.shape in new_anno
	413	//annotation.text = {}; // creating new text object - to contain comments, labels, links and tags
412	414	},
413		//to create new annotation object
414		annoTemplate: function(opt) {
415		var annoText = opt;
416		var src = $('#img-url-input').val();
417		this.newanno = {
418		'src': src,
419		'text': annoText,
420		'shapes': [{
421		'type': annotation.shape.type,
422		'geometry': {
423		'x':annotation.shape.geometry.x,
424		'y': annotation.shape.geometry.y,
425		'width': annotation.shape.geometry.width,
426		'height': annotation.shape.geometry.height
427		}
428		}],
429		'context': window.location.origin
430		};
431		},
432		//to add the final annotation
433		//save button - event bind
434		addNewAnno: function(event) {
435		var $selected = $('select option:selected').text();
436		var textInput = $('.annotorious-editor textarea').val();
437		this.newanno.text[$selected] = textInput;
438		var newanno = this.newanno;
439		anno.addAnnotation(newanno);
440		},
441		/*addNewAnno: function(event){ // function for form input UI
442		var tags = $('#tags').val();
443		var label = $('#label').val();
444		var link = $('#links').val();
445		var text = $('.annotorious-editor textarea').val();
446		var finalInput = ' Label: '+label+' Comment: '+text+' Tags: '+tags+' Links: '+link;
447		//this.annoTemplate(label, text, tags, link);
448		// this.annoTemplate(label, text, tags, link);
449		var src = $('#img-url-input').val();
450		var newanno = {'src':src, 'text':finalInput, '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};
451		console.log(newanno);
452		anno.addAnnotation(newanno);
453		},*/
454	415	//dropdown event
455	416	getFormValue: function(event) {
456		var annoForm = $('.annotorious-editor-text');
457		annoForm.slideDown();
	417	console.log('getFormValue()');
	418	var self = swtr.appView;
	419	// show the editor field to input text
	420	var $anno_form = $('.annotorious-editor-text');
	421	$anno_form.slideDown();
	422	// get the previous item entered
458	423	var $selected = $('select option:selected');
459		var textInput = annoForm.val();
460		if(textInput) {
461		annotation.text[$selected.prev().text()] = textInput;
	424	var text_input = $anno_form.val();
	425	if(text_input) {
	426	var field = $selected.prev().text().toLowerCase();
	427	// update it in our annotation object
	428	self.new_anno[field] = text_input;
462	429	}
463		this.annoTemplate(annotation.text);
464		annoForm.val('');
465		annoForm.attr('placeholder', 'Add '+$selected.text());
	430	if($selected.text() === 'Tags') {
	431	//TODO: open up the tag sprayer component
	432	}
	433	$anno_form.val('');
	434	$anno_form.attr('placeholder', 'Add ' + $selected.text());
	435	console.log(self.new_anno);
	436	},
	437	//to add the final annotation
	438	//save button - event bind
	439	updateNewAnno: function(annotation) {
	440	console.log('updateNewAnno()');
	441	var self = swtr.appView;
	442	// get the final value/input from the editor
	443	var selected = $('select option:selected').text().toLowerCase();
	444	var text_input = $('.annotorious-editor-text').val();
	445	// update it in our annotation object
	446	self.new_anno[selected] = text_input;
	447	// prepare the text field
	448	self.new_anno.text = self.createPopupText(self.new_anno);
	449	// update the annotorious annotation object with the new values
	450	if(self.new_anno.comment) {
	451	annotation.comment = self.new_anno.comment;
	452	}
	453	if(self.new_anno.link) {
	454	annotation.link = self.new_anno.link;
	455	}
	456	if(self.new_anno.tags) {
	457	annotation.tags= self.new_anno.tags;
	458	}
	459	if(self.new_anno.title) {
	460	annotation.title = self.new_anno.title;
	461	}
	462	annotation.text = self.new_anno.text;
	463	console.log(self.new_anno, annotation);
	464	},
	465	// create the text to displayed for each annotation from the other
	466	// attributes of the sweet/annotation
	467	createPopupText: function(annotation) {
	468	var text = (annotation.title) ? '<h4>' + annotation.title + '</h4>' : '';
	469	text += (annotation.comment) ? '<p>' + annotation.comment + '</p>' : '';
	470	text += (annotation.link) ? '<p>' + annotation.link + '</p>' : '';
	471	text += (annotation.tags) ? '<p>' + annotation.tags + '</p>' : '';
	472	return text;
466	473	},
467	474	// to sign in the user to swtstore..just make a call to the oauth endpoint
468	475	signIn: function(event) {


101	101	<script src="{{ url_for('static', filename='js/lib/backbone-1.0.0.min.js') }}"></script>
102	102	<script src="{{ url_for('static', filename='js/lib/annotorious.debug.js') }}"></script>
103	103	<script src="{{ url_for('static', filename='js/lib/custom-fields-plugin.js') }}"></script>
104		<script src="{{ url_for('static', filename='js/lib/label.js') }}"></script>
105	104	<script src="{{ url_for('static', filename='js/oauth.js') }}"></script>
106	105	<script src="{{ url_for('static', filename='js/swtmaker.js') }}"></script>
107	106
…	…
108	108	<li class="sweet">
109	109	<a href="#">@<%= who %></a> <strong>#<%= what %></strong>
110	110	/<a href="<%= where %>"><%= where.substr(0, 30) + '...' %></a>
111		<%= how %>
	111	<p><%= how %></p>
112	112	</li>
113	113	</script>
114	114	<script type="text/template" id="dropdown-template">
…	…
117	117	<option id="comment" >Comment</option>
118	118	<option id="title" >Title</option>
119	119	<option id="tags">Tags</option>
120		<option id="links">Links</option>
	120	<option id="link">Link</option>
121	121	</select>
122	122	</script>
123	123	<!-- script type="text/template" id="dropdown-template">

Commit 7f993292916475595ce2e6f9656a1b288f5b355b

Gitorious