Commit 7f993292916475595ce2e6f9656a1b288f5b355b

Fix problems with breaking the annotation into its component parts
  • Diff rendering mode:
  • inline
  • side by side

swtr/static/css/swtmaker.css

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

swtr/static/js/lib/custom-fields-plugin.js

1annotorious.plugin.CustomFields = function(opt_config_options) {1annotorious.plugin.CustomFields = function(opt_config_options) {
22
3annotorious.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 else {20 else {
14 return '';
21 return '';
15 }22 }
16 });
17 }
23 });
24 }
18}25}

swtr/static/js/swtmaker.js

4 //Find a better way to do closure4 //Find a better way to do closure
5 //Remove script code from the HTML page5 //Remove script code from the HTML page
6 swtr.init = function() {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';
1010
11 $.ajaxSetup({11 $.ajaxSetup({
12 xhrFields: {12 xhrFields: {
……
16 //some browsers won't make cross-domain ajax until it is explicitly set16 //some browsers won't make cross-domain ajax until it is explicitly set
17 crossDomain: true17 crossDomain: true
18 });18 });
19 swtr.handleOAuth();
19 this.handleOAuth();
20 };20 };
2121
22 swtr.handleOAuth = function() {22 swtr.handleOAuth = function() {
……
158 who: swt.get('who'),158 who: swt.get('who'),
159 what: swt.get('what'),159 what: swt.get('what'),
160 where: swt.get('where'),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 }, this);163 }, this);
164 $(this.el).fadeIn(300);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 cancelSweeting: function() {182 cancelSweeting: function() {
167 this.removeSwtsNotPosted();183 this.removeSwtsNotPosted();
168 this.cleanUp();184 this.cleanUp();
……
204 if(!_.has(swt.get('how'), 'editable')) {204 if(!_.has(swt.get('how'), 'editable')) {
205 swt.get('how')['editable'] = false;205 swt.get('how')['editable'] = false;
206 //console.log(swt.get('how').text.Comment);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 swt.get('how').text += '\n - by ' + swt.get('who');209 swt.get('how').text += '\n - by ' + swt.get('who');
208 }210 }
209 //console.log(swt.get('how'));211 //console.log(swt.get('how'));
210 anno.addAnnotation(swt.get('how'));212 anno.addAnnotation(swt.get('how'));
211 });213 });
212 //console.log(swtr.sweets.toJSON());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 error: function(jqxhr, error, text) {218 error: function(jqxhr, error, text) {
217 console.log(jqxhr, error, text);219 console.log(jqxhr, error, text);
……
242 'click #sweet': 'sweet',242 'click #sweet': 'sweet',
243 'click #sign-in': 'signIn',243 'click #sign-in': 'signIn',
244 'click #setbox': 'showHide',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 initialize: function() {248 initialize: function() {
249 // initialize components249 // initialize components
……
252252
253 //register handlers for annotorious events253 //register handlers for annotorious events
254 anno.addHandler('onAnnotationCreated', this.showSwtHelp);254 anno.addHandler('onAnnotationCreated', this.showSwtHelp);
255 anno.addHandler('onAnnotationCreated', this.updateNewAnno);
255 anno.addHandler('onAnnotationUpdated', this.showSwtHelp);256 anno.addHandler('onAnnotationUpdated', this.showSwtHelp);
256 anno.addHandler('onSelectionStarted', function(annotation) {257 anno.addHandler('onSelectionStarted', function(annotation) {
257 anno.hideAnnotations();});
258 anno.hideAnnotations();
259 });
258 anno.addHandler('onSelectionCompleted', function(annotation) {260 anno.addHandler('onSelectionCompleted', function(annotation) {
259 anno.showAnnotations();261 anno.showAnnotations();
260 });262 });
261 anno.addPlugin('CustomFields', {});263 anno.addPlugin('CustomFields', {});
262 anno.addHandler('onSelectionCompleted', this.getShape);
264 anno.addHandler('onSelectionCompleted', this.hideOriginalEditor);
263265
264 // cache jquery selected elements which are used frequently266 // cache jquery selected elements which are used frequently
265 this.$overlay = $('#app-overlay');267 this.$overlay = $('#app-overlay');
……
296 if(!this.imgURL) {296 if(!this.imgURL) {
297 return false;297 return false;
298 }298 }
299 if(this.$img.attr('src') === this.imgURL) {
300 return;
301 }
299 anno.reset();302 anno.reset();
300 var self = this;303 var self = this;
301 this.$overlay.show();304 this.$overlay.show();
……
341 swtr.sweets.add(data);341 swtr.sweets.add(data);
342 _.each(data, function(swt) {342 _.each(data, function(swt) {
343 swt.how['editable'] = false;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 } else {347 } else {
348 swt.how.text1 = undefined;348 swt.how.text1 = undefined;
349 swt.how.text += '\n -by ' + swt.who;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 anno.addAnnotation(swt.how);354 anno.addAnnotation(swt.how);
353 });355 });
354 self.$overlay.hide();356 self.$overlay.hide();
……
380 swtr.sweets.add({380 swtr.sweets.add({
381 who: swtr.who,381 who: swtr.who,
382 where: anno.src,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 $('.annotorious-item-unfocus').css("opacity", "0");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 //dropdown event415 //dropdown event
455 getFormValue: function(event) {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 var $selected = $('select option:selected');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 // to sign in the user to swtstore..just make a call to the oauth endpoint474 // to sign in the user to swtstore..just make a call to the oauth endpoint
468 signIn: function(event) {475 signIn: function(event) {

swtr/templates/index.html

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