Commit 0bce307eabd7924858e0e39293a5fb180ad14885

Anon Ray
Thu Jun 05 11:36:21 IST 2014

Tree SHA1: c9876d9
Parent SHA1: 85f18b7 (Merge branch 'master' into persona)
raw diff | raw patch

Fix UI issues

  - Fix the HTML part to fix some UI issues
  - Better handling of error/edge cases
  - Refactor some code

Diff rendering mode:
inline
side by side


39	39	#helpview {
40	40	font-weight: bold;
41	41	font-size: 1.3em;
42		min-height: 60px;
	42	min-height: 50px;
43	43	text-align: center;
44	44	}
45	45	#app-overlay {
46	46	position: absolute;
47		top: 0px;
	47	top: 60px;
	48	left: 0;
48	49	display: none;
49	50	width: 100%;
50		height: 100%;
	51	height: 800px;
51	52	z-index: 10000;
52	53	background-color: rgba(255, 255, 255, 0.7);
53	54	}


26	26	url: swtr.swtstoreURL()+'/api/users/me?access_token='+
27	27	swtr.access_token,
28	28	success: function(data) {
29		console.log(data.username);
30	29	swtr.appView.userLoggedIn(data.username);
31	30	},
32	31	error: function() {
…	…
44	44	'how': {}
45	45	},
46	46	initialize: function() {
47		if(!_.has(this, 'id')) {
48		// bad hack to have dates.. FIXIT
49		this.set('created', new Date().toUTCString().substr(0, 25));
50		}
51	47	}
52	48	});
53	49
…	…
66	66	throw Error('"where" option must be passed to get sweets of a URI');
67	67	return false;
68	68	}
69		if(!swtr.access_token) {
	69	/*if(!swtr.access_token) {
70	70	throw new Error('Access Token required to get query that API');
71		}
	71	}*/
72	72	// setting up params
73	73	var where = options.where,
74	74	who = options.who \|\| null;
…	…
132	132	new_models.push(model);
133	133	}
134	134	});
135		return new_models;
	135	return new_models;
136	136	},
137	137	// update part of the collection after a save on the server
138	138	update: function() {
…	…
157	157	$('#sweet-list').append(this.template({
158	158	who: swt.get('who'),
159	159	what: swt.get('what'),
160		where: swt.get('where'),
	160	where: swt.get('where'),
161	161	how: JSON.stringify(swt.get('how').text)
162	162	}));
163	163	}, this);
…	…
174	174	this.collection.remove(notPosted);
175	175	},
176	176	postSweets: function() {
177		swtr.appView.helpview.step(5);
178		swtr.appView.$overlay.show();
179		this.collection.post({
180		success: function(collection, response) {
181		console.log(collection, response);
182		swtr.sweets.update(collection);
183		//TODO: move this to a annotation view or something
184		anno.removeAll();
185		_.each(swtr.sweets.models, function(swt) {
186		if(!_.has(swt.get('how'), 'editable')) {
187		swt.get('how')['editable'] = false;
188		swt.get('how').text += '\n - by ' + swt.get('who');
189		}
190		console.log(swt.get('how'));
191		anno.addAnnotation(swt.get('how'));
192		});
193		//console.log(swtr.sweets.toJSON());
194		swtr.appView.$overlay.hide();
195		swtr.appView.helpview.step(6);
196		},
197		error: function(jqxhr, error, text) {
198		console.log(jqxhr, error, text);
	177	var appView = swtr.appView;
	178	appView.helpview.step(5);
	179	appView.$overlay.show();
	180	try {
	181	this.collection.post({
	182	success: function(collection, response) {
	183	console.log(collection, response);
	184	swtr.sweets.update(collection);
	185	//TODO: move this to a annotation view or something
	186	anno.removeAll();
	187	_.each(swtr.sweets.models, function(swt) {
	188	if(!_.has(swt.get('how'), 'editable')) {
	189	swt.get('how')['editable'] = false;
	190	swt.get('how').text += '\n - by ' + swt.get('who');
	191	}
	192	console.log(swt.get('how'));
	193	anno.addAnnotation(swt.get('how'));
	194	});
	195	//console.log(swtr.sweets.toJSON());
	196	appView.overlay.hide();
	197	appView.helpview.step(6);
	198	},
	199	error: function(jqxhr, error, text) {
	200	console.log(jqxhr, error, text);
	201	}
	202	});
	203	} catch(e) {
	204	if(e.message == 'Access Token is required to sweet') {
	205	appView.$overlay.hide();
	206	appView.helpview.step(9);
199	207	}
200		});
	208	}
201	209	this.cleanUp();
202	210	return false;
203	211	},
…	…
221	221	'click #img-url-load': 'setImage',
222	222	'click #img-url-submit': 'setImage',
223	223	'click #sweet': 'sweet',
224		'click #signin-credentials': 'getSignInCredentials',
	224	'click #sign-in': 'signIn',
225	225	'click #setbox': 'showHide',
226	226	'change .form-control': 'button_custom',
227	227	'mouseup .annotorious-editor-button-save': 'add_new_anno'
228	228	},
229	229	initialize: function() {
230		//var allElements = $('body *');
	230	// initialize components
231	231	this.helpview = new HelpView();
232	232	this.sweetsview = new SweetsView({collection: swtr.sweets});
	233
	234	//register handlers for annotorious events
233	235	anno.addHandler('onAnnotationCreated', this.showSwtHelp);
234		anno.addHandler('onannotationupdated', this.showswthelp);
	236	anno.addHandler('onAnnotationUpdated', this.showSwtHelp);
235	237	anno.addHandler('onSelectionStarted', function(annotation) {
236	238	anno.hideAnnotations();});
237	239	anno.addHandler('onSelectionCompleted', function(annotation) {
238	240	anno.showAnnotations();
239	241	});
240		anno.addPlugin('CustomFields', this.showSwtHelp);
241		anno.addHandler('onSelectionCompleted', this.setShape);
	242	anno.addPlugin('CustomFields', {});
	243	anno.addHandler('onSelectionCompleted', this.setShape);
	244
	245	// cache jquery selected elements which are used frequently
242	246	this.$overlay = $('#app-overlay');
243	247	this.$img = $('#annotatable-img');
	248
	249	// attach a load event handler, whenever an image is loaded..
	250	this.$img.on('load', this, this.imageLoaded);
	251	this.$img.on('error', this, this.onImageLoadError);
	252
	253	// check if already an image is provided at load time..
244	254	this.imgURL = this.$img.attr('src');
245	255	if(this.imgURL) {
246	256	this.initImageAnno();
…	…
260	260	this.helpview.step(1);
261	261	}
262	262
	263	// initialize the oauth stuff
263	264	this.oauth = new Oauth({
264	265	app_id: swtr.app_id,
265	266	app_secret: swtr.app_secret,
…	…
269	269	scopes: 'email,sweet'
270	270	});
271	271	},
272
273		setImage: function() {
274		anno.reset();
	272	setImage: function(event) {
	273	event.preventDefault();
275	274	this.imgURL = $('#img-url-input').val();
	275	if(!this.imgURL) {
	276	return false;
	277	}
	278	anno.reset();
	279	var self = this;
276	280	this.$overlay.show();
277	281	this.helpview.step(7);
278		this.$img.attr('onload', function() {
279		swtr.appView.$overlay.hide();
280		});
281	282	this.$img.attr('src', this.imgURL);
282		this.initImageAnno();
283	283	return false;
284	284	},
	285	imageLoaded: function(event) {
	286	var self = event.data;
	287	console.log('image loaded');
	288	self.$overlay.hide();
	289	self.initImageAnno();
	290	},
	291	// when image fails to load - could be because of broken URL or network
	292	// issues
	293	onImageLoadError: function(event) {
	294	var self = event.data;
	295	console.log('error while loading image');
	296	self.$overlay.hide();
	297	self.helpview.step(8);
	298	},
285	299	initImageAnno: function() {
286	300	// img is a jquery object which annotorious doesn't accept; instead it
287	301	// takes the native object returned by a browser API; fortunately, jqeury
…	…
304	304	this.getExistingAnnotations();
305	305	},
306	306	getExistingAnnotations: function() {
	307	var self = this;
307	308	this.helpview.step(0);
308	309	this.$overlay.show();
309	310	//console.log('getting existing annotations of ', this.imgURL);
…	…
321	321	anno.addAnnotation(swt.how);
322	322	console.log('swt.how = ', swt.how);
323	323	});
324		swtr.appView.$overlay.hide();
325		swtr.appView.helpview.step(2);
	324	self.$overlay.hide();
	325	self.helpview.step(2);
326	326	}
327	327	},
328	328	error: function(jqxhr, error, statusText) {
329	329	if(jqxhr.status === 404) { //annotations don't exist for this image
330	330	console.log('annotations don\'t exist for this image. Create one!');
331	331	}
332		swtr.appView.$overlay.hide();
333		swtr.appView.helpview.step(2);
	332	self.$overlay.hide();
	333	self.helpview.step(2);
334	334	}
335	335	});
336	336	},
…	…
369	369	//$("p").toggle();
370	370	$('.annotorious-item-unfocus').css("opacity", "0");
371	371	}
372
373	372	},
374		//annotorious editor widget - custom with options
375		//to obtain shapes object, declaring annotation in global scope - TODO refactor
376		//code to find better way to do this.
377
378		setShape: function(annotation) {
	373	//annotorious editor widget - custom with options
	374	//to obtain shapes object, declaring annotation in global scope - TODO refactor
	375	//code to find better way to do this.
	376	setShape: function(annotation) {
379	377	$('.annotorious-editor-text').hide();
380	378	$('.annotorious-editor').css("width", "100%");
381		window.annotation=annotation;
382		annotation.text = [];
383		},
384		//to create new annotation object
	379	window.annotation=annotation;
	380	annotation.text = [];
	381	},
	382	//to create new annotation object
385	383	inputStore: function(opt) {
386	384	var temp = opt;
387	385	var src = $('#img-url-input').val();
…	…
387	387
388	388	},
389	389
390		//to add the final annotation
	390	//to add the final annotation
391	391
392		//save button - event bind
393		add_new_anno: function(event){
394		var $selected = $('select option:selected');
395		var tempinput = $selected.text()+': '+$('.annotorious-editor textarea').val();
396		this.newanno.text.push(tempinput);
397		var newinput = this.newanno.text.toString();
398		this.newanno.text = newinput;
399		console.log('this.newanno = ', this.newanno);
400		//this.to_Add(this.newanno);
401		var newanno = this.newanno;
402		window.newanno = newanno;
403		},
404		//dropdown event
	392	//save button - event bind
	393	add_new_anno: function(event) {
	394	var $selected = $('select option:selected');
	395	var tempinput = $selected.text()+': '+$('.annotorious-editor textarea').val();
	396	this.newanno.text.push(tempinput);
	397	var newinput = this.newanno.text.toString();
	398	this.newanno.text = newinput;
	399	console.log('this.newanno = ', this.newanno);
	400	//this.to_Add(this.newanno);
	401	var newanno = this.newanno;
	402	window.newanno = newanno;
	403	},
	404	//dropdown event
405	405	button_custom: function(event) {
406	406	$('.annotorious-editor-text').show();
407	407	var $selected = $('select option:selected');
…	…
416	416	$('.annotorious-editor-text:first').val("");
417	417	$('.annotorious-editor-text:first').attr('placeholder', 'Add a '+$selected.text());
418	418	},
419
420
421
422		getSignInCredentials: function(event) {
	419	// to sign in the user to swtstore..just make a call to the oauth endpoint
	420	signIn: function(event) {
423	421	event.preventDefault();
424	422	this.oauth.authorize();
425	423	return false;
426	424	},
427		signIn: function(username, password) {
428		this.$overlay.show();
429		$.ajax({
430		url: swtr.swtstoreURL() + swtr.endpoints.auth,
431		type: 'POST',
432		data: {user: username, hash: password},
433		success: function(data) {
434		swtr.appView.$overlay.hide();
435		swtr.who = username;
436		var text = 'You are signed in as <b>' + swtr.who+ '</b>';
437		$('#signinview').html(text);
438		},
439		error: function(jqxhr, status, error) {
440		swtr.appView.$overlay.hide();
441		if(error === 'FORBIDDEN') {
442		$('#signin-msg').html('Error signing in. Please check your username and password. ');
443		}
444		else {
445		}
446		}
447		});
448		},
449		userLoggedIn: function(token) {
450		swtr.who = token;
	425	userLoggedIn: function(username) {
	426	swtr.who = username;
451	427	var text = 'You are signed in as <b>' + swtr.who + '</b>';
452	428	$('#signinview').html(text);
453	429	},
…	…
462	462	break;
463	463	case 7: text = 'Fetching your image..';
464	464	break;
	465	case 8: text = 'Oops! Seems like the image URL is wrong! Or we couldn\'t fetch the image.';
	466	break;
	467	case 9: text = 'You have to be <i>signed in</i> to sweet store to post sweets';
	468	break;
465	469	}
466	470	$(this.el).html(text);
467	471	$(window).scrollTop(0, 0);
…	…
476	476	swtr.utils = {};
477	477
478	478	//swtr.AppView = AppView;
479
480		// Persona callbacks
481		/*navigator.id.watch({
482		//when an user logs in
483		onlogin: function(assertion) {
484		//verify assertion and login the user
485		$.ajax({
486		type: 'POST',
487		url: swtr.swtstoreURL() + swtr.endpoints.login,
488		data: {assertion: assertion},
489		success: function(data) {
490		console.log('user logged in', data);
491		swtr.appView.userLoggedIn(data);
492		},
493		error: function() {
494		navigator.id.logout();
495		}
496		});
497		},
498		//when an user logs out
499		onlogout: function() {
500		$.ajax({
501		type: 'POST',
502		//data: {email: swtr.who},
503		url: swtr.swtstoreURL() + swtr.endpoints.logout,
504		success: function() {
505		console.log('user logged out');
506		//swtr.appView.userLoggedOut();
507		},
508		error: function() {
509		}
510		});
511		}
512		});*/
513	479
514	480	})(swtr);


8	8	<meta name="description" content="Sweet Maker, Social, Semantic, Web, Decentralized, Makes Sweet">
9	9	<link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
10	10	<link href="{{ url_for('static', filename='css/bootstrap-theme.min.css') }}" rel="stylesheet">
11		<link href="{{ url_for('static', filename='css/swtmaker.css') }}" rel="stylesheet">
12	11	<link href="{{ url_for('static', filename='css/annotorious.css') }}" rel="stylesheet">
13	12	<link href="{{ url_for('static', filename='css/swtmaker.css') }}" rel="stylesheet">
14	13	</head>
15		<body>
16	14
	15	<body>
17	16	<div id="swt-maker" class="container">
18		<div id="helpview" class="alert alert-info col-md-8"></div>
19		<div class="row" id="signinview">
20		<form class="form-inline" role="form">
21		<span id="signin-msg">You are not signed in. </span>
22		<button class="btn btn-sm btn-primary" id="signin-credentials">
23		Sign In
24		</button>
25		</form>
26		</div>
27		<div id="img-input" class="row">
28		<div class="form-group col-md-8">
29		<input type="text" placeholder="Enter URL of the image"
30		id="img-url-input" class="form-control">
	17	<!-- first row: helpview and sign in button -->
	18	<div class="row">
	19	<!-- helpview column of width md-8 -->
	20	<div class="col-md-8">
	21	<div id="helpview" class="alert alert-info"></div>
31	22	</div>
32		<div class="col-md-2">
33		<button class="btn btn-default" id="img-url-submit">Load</button>
	23	<!-- signin view column of width md-4 -->
	24	<div class="col-md-4">
	25	<div id="signinview">
	26	<span id="signin-msg">You are not signed in.</span>
	27	<button class="btn btn-sm btn-primary" id="sign-in">
	28	Sign In
	29	</button>
	30	</div>
34	31	</div>
	32	</div> <!-- end first row -->
	33	<!-- second row: image URL input box and Load button -->
	34	<div class="row">
35	35	<div class="col-md-8">
36		<button class="btn btn-default" id="img-url-load">Annotate</button>
37		<button class="btn btn-default" id="sweet">Sweet</button>
38		<input id="setbox" type="checkbox"/ > <label
39		id="setcontrol"><p>Show annotated areas</p><p style="display: none">Hide
40		annotated areas</p></label>
	36	<form class="form-inline" role="form">
	37	<div class="form-group col-md-11">
	38	<label class="sr-only" for="img-url-input">Enter URL of the image</label>
	39	<input class="form-control" type="text"
	40	placeholder="Enter URL of the image" id="img-url-input">
	41	</div>
	42	<button type="submit" class="btn btn-primary" id="img-url-load">Load</button>
	43	</form>
41	44	</div>
42		</div>
43		<div id="img-annotation-wrapper" class="col-md-12 col-xs-12 col-lg-12 col-sm-12 well">
	45	<div class="col-md-4">
	46	</div>
	47	</div> <!-- end second row -->
	48	<!-- third row - control panel? -->
	49	<div class="row">
	50	<div class="col-md-3">
	51	<input id="setbox" type="checkbox"/>
	52	<label id="setcontrol" for="setbox">Show annotated areas</label>
	53	</div>
	54	<div class="col-md-1">
	55	<button class="btn btn-default" id="sweet">Sweet</button>
	56	</div>
	57	</div> <!-- end third row -- >
	58	<!-- fourth row: the image annotation window -->
	59	<div class="row">
	60	<div id="img-annotation-wrapper" class="col-md-12 col-xs-12 col-lg-12 col-sm-12 well">
44	61	{% if url %}
45		<img src="{{ url }}" id="annotatable-img">
	62	<img src="{{ url }}" id="annotatable-img" class="img-responsive">
46	63	{% else %}
47		<img src="" id="annotatable-img">
	64	<img src="" id="annotatable-img" class="img-responsive">
48	65	{% endif %}
49		</div>
	66	</div>
	67	</div> <!-- end fourth row -->
	68
50	69	<div id="sweet-list-wrapper">
51	70	<ul id="sweet-list"></ul>
52	71	<div class="btn-grp">
…	…
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	104	<script src="{{ url_for('static', filename='js/lib/label.js') }}"></script>
105		<!--script src="https://login.persona.org/include.js"></script-->
106		<!--script src="{{ url_for('static',
107		filename='js/lib/mozilla.persona.include.js') }}"></script-->
108	105	<script src="{{ url_for('static', filename='js/oauth.js') }}"></script>
109	106	<script src="{{ url_for('static', filename='js/swtmaker.js') }}"></script>
110	107
…	…
112	112	<%= how %>
113	113	</li>
114	114	</script>
115		<script type="text/template" id="signin-credentials-template">
116		<div class="form-inline col-md-3">
117		<label class="sr-only" for="username">Username</label>
118		<input type="text" class="form-control" id="username" placeholder="Enter username">
119		</div>
120		<div class="form-inline col-md-3">
121		<label class="sr-only" for="password">Password</label>
122		<input type="password" class="form-control" id="password" placeholder="Password">
123		</div>
124		</script>
125		<script type="text/template" id="button-template">
126		<select class="form-control">
127		<option id="">Choose an Option</option>
128		<option id="comment" >Comment</option>
129		<option id="label" >Label</option>
130		<option id="tags">Tags</option>
131		<option id="links">Links</option>
132		</select>
133		</script>
134		<script type="text/template" id="popup-template">
135		<span class="annotorious-popup-text"> </span>
136		</script>
	115	<script type="text/template" id="button-template">
	116	<select class="form-control">
	117	<option id="">Choose an Option</option>
	118	<option id="comment" >Comment</option>
	119	<option id="label" >Label</option>
	120	<option id="tags">Tags</option>
	121	<option id="links">Links</option>
	122	</select>
	123	</script>
	124	<script type="text/template" id="popup-template">
	125	<span class="annotorious-popup-text"> </span>
	126	</script>
137	127	</body>
138	128	</html>

Commit 0bce307eabd7924858e0e39293a5fb180ad14885

Gitorious