Commit fabebe84d31655b96061f4339bdc51643a433f4d

Fix: Duplicate swts show when swting next swts

  - Hack to fix bug of duplicate swts showing up.
  - Minor UI change in checkbox of show annotated areas
  • Diff rendering mode:
  • inline
  • side by side

swtr/static/css/swtmaker.css

25 margin: 30px auto 0 auto;25 margin: 30px auto 0 auto;
26}26}
2727
28#img-anno-controls {
29 display: none;
30 margin-bottom: 5px;
31 padding-bottom: 3px;
32}
33
28#annotatable-img {34#annotatable-img {
29 margin: 0 auto;35 margin: 0 auto;
30 max-width: 1125px;36 max-width: 1125px;
……
94 background-size: cover;94 background-size: cover;
95 display: block;95 display: block;
96 height: 400px;96 height: 400px;
97 width: 400px;
97 margin: 0 auto;98 margin: 0 auto;
98}99}
99100

swtr/static/js/img_swtr.js

324 var self = event.data;324 var self = event.data;
325 //console.log('image loaded', self);325 //console.log('image loaded', self);
326 swtr.appView.$overlay.hide();326 swtr.appView.$overlay.hide();
327 self.showImgAnnoControls();
327 // reset the collection328 // reset the collection
328 swtr.sweets.reset();329 swtr.sweets.reset();
329 anno.makeAnnotatable(swtr.imgAnnoView.img);330 anno.makeAnnotatable(swtr.imgAnnoView.img);
……
337 console.log('error while loading image');337 console.log('error while loading image');
338 swtr.appView.$overlay.hide();338 swtr.appView.$overlay.hide();
339 self.helpview.step(8);339 self.helpview.step(8);
340 },
341 showImgAnnoControls: function() {
342 $('#img-anno-controls').show();
340 },343 },
341 initImageAnno: function() {344 initImageAnno: function() {
342 // img is a jquery object which annotorious doesn't accept; instead it345 // img is a jquery object which annotorious doesn't accept; instead it

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

3 var editorTemplate = _.template($('#customEdit-template').html()); //returns the HTML string for the editor3 var editorTemplate = _.template($('#customEdit-template').html()); //returns the HTML string for the editor
44
5 annotorious.plugin.CustomFields.prototype.onInitAnnotator = function(annotorious) {5 annotorious.plugin.CustomFields.prototype.onInitAnnotator = function(annotorious) {
6 // add the our editor interface's template to the annotorious editor
6 annotorious.editor.addField(editorTemplate);7 annotorious.editor.addField(editorTemplate);
78
9 // next prepare the fields for the annotation popups..
8 annotorious.popup.addField(function(annotation) {10 annotorious.popup.addField(function(annotation) {
11 // HACK! to get around disabling annotorious' default text box in the
12 // popup..
13 if(!annotation.text) {
14 $('.annotorious-popup-text').hide();
15 }
16 // this is the title
9 return (annotation.title) ? '<h4>' + annotation.title + '</h4>' : '';17 return (annotation.title) ? '<h4>' + annotation.title + '</h4>' : '';
10 });18 });
11 annotorious.popup.addField(function(annotation) {19 annotorious.popup.addField(function(annotation) {

swtr/static/js/main.js

51 },51 },
52 render: function() {52 render: function() {
53 console.log('sweetsview rendering');53 console.log('sweetsview rendering');
54// debugger;
55 $('#sweet-list').html('<h4>These are your sweet annotations!</h4>');54 $('#sweet-list').html('<h4>These are your sweet annotations!</h4>');
56 _.each(this.collection.models, function(swt) {55 _.each(this.collection.models, function(swt) {
57 if(swt.has('id')) {56 if(swt.has('id')) {
……
94 postSweets: function(event) {94 postSweets: function(event) {
95 event.preventDefault();95 event.preventDefault();
96 console.log('posting swts');96 console.log('posting swts');
97// debugger;
98 var appView = swtr.appView;97 var appView = swtr.appView;
99 var self = this;98 var self = this;
100 this.helpview.step(5);99 this.helpview.step(5);
……
105 anno.reset();105 anno.reset();
106 anno.makeAnnotatable($("#annotatable-img")[0]);106 anno.makeAnnotatable($("#annotatable-img")[0]);
107 swtr.imgAnnoView.renderWith();107 swtr.imgAnnoView.renderWith();
108 // _.each(collection, function(k) {
109 // anno.removeAnnotation(k['how']);
110 // });
111 swtr.sweets.add(collection, {merge: true});
108 swtr.sweets.add(collection);
109 //HACK! somehow updated models from the server don't get merged
110 //with existing models, they duplicate. this is probably because of
111 //some attribute change that backbone is not able to detect the
112 //models are same. FIX for now is to update the collection with
113 //updated models from the server and delete the older ones(w/o
114 //id's)..
115 self.removeSwtsNotPosted();
116
112 console.log('new swtr coll', swtr.sweets);117 console.log('new swtr coll', swtr.sweets);
113 appView.$overlay.hide();118 appView.$overlay.hide();
114 self.helpview.step(6);119 self.helpview.step(6);
……
232 sweet: function(event) {232 sweet: function(event) {
233 event.preventDefault();233 event.preventDefault();
234 console.log('sweeting');234 console.log('sweeting');
235// debugger;
236 this.getSweets();235 this.getSweets();
237// debugger;
238 this.showSweets();236 this.showSweets();
239// debugger;
240 return false;237 return false;
241 },238 },
242 // function to update the urls in the UI if an image is loaded internally239 // function to update the urls in the UI if an image is loaded internally

swtr/templates/index.html

320 <div id="img-anno-controls">320 <div id="img-anno-controls">
321 <form class="form-inline" role="form">321 <form class="form-inline" role="form">
322 <div class="form-group">322 <div class="form-group">
323 <label class="checkbox-inline">
324 <input type="checkbox" id="toggle-anno-areas"> Show annotated areas
323 <label class="btn btn-info">
324 <input type="checkbox" id="toggle-anno-areas"> Show annotated areas
325 </label>325 </label>
326 </div>326 </div>
327 </form>327 </form>
……
329 {% if url %}329 {% if url %}
330 <img src="{{ url }}" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">330 <img src="{{ url }}" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
331 {% else %}331 {% else %}
332 <img src="" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
332 <img src="" id="annotatable-img" class="img-responsive" alt="">
333 {% endif %}333 {% endif %}
334 </div>334 </div>
335 </div> <!-- end fourth row -->335 </div> <!-- end fourth row -->