Commit d3ff90e296fa83193ca14a9d9610c44afd11f128

  • avatar
  • arvind
  • Fri Aug 29 17:32:37 IST 2014
Adding imganno.js
  • swtr/static/js/imganno.js 228 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  • Diff rendering mode:
  • inline
  • side by side

swtr/static/js/imganno.js

1(function(swtr) {
2 swtr.ImgAnnoView = Backbone.View.extend({
3 el: $("#img-annotation-wrapper"),
4 events: {
5 'change #custom-dropdown ': 'getFormValue',
6 'click #setbox': 'showHide'
7 },
8 initialize: function(options) {
9 this.listenTo(this.collection, 'add', this.render);
10 // attach event handlers to the anno object
11 anno.addHandler('onAnnotationCreated', this.showSwtHelp);
12 anno.addHandler('onAnnotationCreated', this.updateNewAnno);
13 anno.addHandler('onAnnotationUpdated', this.showSwtHelp);
14 anno.addHandler('onSelectionStarted', function(annotation) {
15 anno.hideAnnotations();
16 });
17 anno.addHandler('onSelectionCompleted', function(annotation) {
18 anno.showAnnotations();
19 });
20 anno.addPlugin('CustomFields', {});
21 anno.addHandler('onSelectionCompleted', this.hideOriginalEditor);
22 if(options.img) {
23 this.img = options.img;
24 this.$img = options.$img;
25 options.$img.on('load', this, this.imageLoaded);
26 options.$img.on('error', this, this.onImageLoadError);
27 this.setImage(options.url);
28 }
29 },
30 render: function(model) {
31 var swt = model.toJSON();
32 swt.how['editable'] = false;
33 swt.how.text = swtr.imgAnnoView.createPopupText(swt.how);
34 swt.how.text += '\n - by ' + swt.who;
35 anno.addAnnotation(swt.how);
36 },
37 renderWith: function() {
38 _.each(this.collection, this.render);
39 },
40 showSwtHelp: function(annotation) {
41 var self = swtr.imgAnnoView;//TODO: figure out how we can bind the scope when this func is called as a callback
42 swtr.appView.helpview.step(3);
43 $('#sweet').show();
44 },
45 updateNewAnno: function(annotation) {
46 console.log('updateNewAnno()');
47 var self = swtr.imgAnnoView;
48 // get the final value/input from the editor
49 var selected = $('select option:selected').text().toLowerCase();
50 var text_input = $('.annotorious-editor-text').val();
51 if( selected === "tags") {
52 self.new_anno[selected] = $('#tags-input').tags().getTags();
53 }
54 else {
55 // update it in our annotation object
56 self.new_anno[selected] = text_input;
57 }
58 // prepare the text field
59 self.new_anno.text = self.createPopupText(self.new_anno);
60 // update the annotorious annotation object with the new values
61 if(self.new_anno.comment) {
62 annotation.comment = self.new_anno.comment;
63 }
64 if(self.new_anno.link) {
65 annotation.link = self.new_anno.link;
66 }
67 if(self.new_anno.tags) {
68 annotation.tags = self.new_anno.tags;
69 }
70 if(self.new_anno.title) {
71 annotation.title = self.new_anno.title;
72 }
73 annotation.text = self.new_anno.text;
74 console.log(self.new_anno, annotation);
75 },
76 // hide the original editor window, when user has completed selecting part
77 // of the image to annotate..
78 hideOriginalEditor: function(annotation) {
79 console.log('hideOriginalEditor()');
80 var self = swtr.imgAnnoView;
81 self.new_anno = {};
82 self.getSuggestionsForTags();
83 //$('.annotorious-editor-text').hide();
84 //$('.annotorious-editor').css('width', '100%');
85 },
86 getFormValue: function(event) {
87 console.log('getFormValue()');
88
89 var self = swtr.imgAnnoView;
90 // show the editor field to input text
91 var $anno_form = $('.annotorious-editor-text');
92 //$anno_form.slideDown();
93 // get the previous item entered
94 var $selected = $('select option:selected');
95 var text_input = $anno_form.val();
96
97 // if there was a input and it was not tags..
98 if(text_input && $selected.prev().text() !== 'Tags') {
99 var field = $selected.prev().text().toLowerCase();
100 // update it in our annotation object
101 self.new_anno[field] = text_input;
102 }
103 // if it was tags..
104 else if ($selected.prev().text() === 'Tags') {
105 // directly save it..
106 self.new_anno['tags'] = $('#tags-input').tags().getTags();
107 }
108
109 // if the current selected is tags
110 if($selected.text() === 'Tags') {
111 $('#tags-input').tags({
112 tagSize: 'md',
113 promptText: 'Type word (and press enter)..',
114 caseInsensitive: true,
115 suggestions: self.tags_suggestions
116 });
117 $('#tags-input').show();
118 $('.annotorious-editor-text').hide();
119 }
120 else {
121 $('#tags-input').hide();
122 $('.annotorious-editor-text').show();
123 }
124 $anno_form.val('');
125 $anno_form.attr('placeholder', 'Add ' + $selected.text());
126 console.log(self.new_anno);
127 },
128 createPopupText: function(annotation) {
129 // title
130 var text = (annotation.title) ? '<h4>' + annotation.title + '</h4>' : '';
131
132 // comment
133 text += (annotation.comment) ? '<p>' + annotation.comment + '</p>' : '';
134
135 // link
136 text += (annotation.link) ? '<a target="blank" href="' +
137 swtr.utils.linkify(annotation.link) + '">' + annotation.link +
138 '</a>' : '';
139
140 // tags
141 text += (annotation.tags) ? '<p>' + annotation.tags + '</p>' : '';
142
143 // if older annotation i.e w/o comment,title etc fields
144 // add text field as text
145 if(!text) {
146 text = annotation.text;
147 }
148 return text;
149 },
150 // load the suggestions for the tag spraying..
151 getSuggestionsForTags: function() {
152 var self = swtr.imgAnnoView;
153 $.ajax({
154 url: '/static/data/tags_suggestions.json',
155 success: function(data) {
156 self.tags_suggestions = data;
157 }
158 });
159 },
160 setImage: function(url) {
161 this.imgURL = url;
162 console.log(url);
163 if(this.$img.attr('src') === this.imgURL) {
164 return;
165 }
166 anno.reset();
167 var self = this;
168 swtr.appView.$overlay.show();
169 swtr.appView.helpview.step(7);
170 this.$img.attr('src', this.imgURL);
171 },
172 imageLoaded: function(event) {
173 var self = event.data;
174 console.log('image loaded', self);
175 swtr.appView.$overlay.hide();
176 // reset the collection
177 swtr.sweets.reset();
178 anno.makeAnnotatable(swtr.imgAnnoView.img);
179 swtr.imgAnnoView.getExistingAnnotations();
180 },
181 // when image fails to load - could be because of broken URL or network
182 // issues
183 onImageLoadError: function(event) {
184 var self = event.data;
185 console.log('error while loading image');
186 swtr.appView.$overlay.hide();
187 swtr.appView.helpview.step(8);
188 },
189 initImageAnno: function() {
190 // img is a jquery object which annotorious doesn't accept; instead it
191 // takes the native object returned by a browser API; fortunately, jqeury
192 // stores a copy of the native object too!
193
194 this.getExistingAnnotations();
195
196 },
197 getExistingAnnotations: function() {
198 var self = this;
199 swtr.appView.helpview.step(0);
200 swtr.appView.$overlay.show();
201 swtr.sweets.getAll({
202 where: this.imgURL,
203 success: function(data) {
204 if(_.isArray(data)) {
205 swtr.sweets.add(data);
206 swtr.appView.$overlay.hide();
207 swtr.appView.helpview.step(2);
208 }
209 },
210 error: function(jqxhr, error, statusText) {
211 if(jqxhr.status === 404) { //annotations don't exist for this image
212 console.log('annotations don\'t exist for this image. Create one!');
213 }
214 swtr.appView.$overlay.hide();
215 swtr.appView.helpview.step(2);
216 }
217 });
218 },
219 showHide: function() {
220 if($("#setbox:checked").length) {
221 $('.annotorious-item-unfocus').css("opacity", "0.5");
222 }
223 else {
224 $('.annotorious-item-unfocus').css("opacity", "0");
225 }
226 }
227 });
228})(swtr);