Commit 06f9ca01356625700918328bda88c5ee01e2f974

Editor UI - with cutom oprions - label, tags, links
  • Diff rendering mode:
  • inline
  • side by side

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

1/**
2 * A plugin that adds 'Semantic Tagging' functionality to Annotorious.
3 * While typing an annotation in the editor, the text is sent to the plugin's
4 * server counterpart for Named Entity Recognition (NER). Recognized entities
5 * are suggested as possible tags, and the user can add them to the annotation
6 * by clicking on them. Tags are Semantic Tags in the sense that they are not
7 * just strings, but (underneath the hood) include a URI pointing to a concept
8 * in a specific 'knowledge context', hosted at the server.
9 *
10 * The config options for the plugin require a field named 'endpoint_url',
11 * holding the URL of the server endpoint to use as the NER/tag-suggestion
12 * service.
13 *
14 * @param {Object=} opt_config_options the config options
15 */
16annotorious.plugin.CustomFields = function(opt_config_options) {1annotorious.plugin.CustomFields = function(opt_config_options) {
172
18 //Container for custom fields
19
203
21 /** @private **/
22 //this._tags = [];
23 // this._link =[];
24 // this._label= [];
25 //annotorious.Annotation(tags);
26
27
28 /** @private **/
29/** this._ENDPOINT_URI = opt_config_options['endpoint_url'];
30
31 if (this._ENDPOINT_URI[this._ENDPOINT_URI.length - 1] != '/')
32 this._ENDPOINT_URI += '/';
33
34 this._ENDPOINT_URI +=
35 'services/wikify?minProbability=0.1&disambiguationPolicy=loose&responseFormat=json&source='; **/
36}
37
38annotorious.plugin.CustomFields.prototype.onInitAnnotator = function(annotorious) {4annotorious.plugin.CustomFields.prototype.onInitAnnotator = function(annotorious) {
39 var container = document.createElement('div');
40 container.className = "btn-group";
41 console.log (container);
42
43 var textTemplate= _.template($('#button-template').html());5 var textTemplate= _.template($('#button-template').html());
44 console.log($(textTemplate));
45 annotorious.editor.addField(textTemplate);6 annotorious.editor.addField(textTemplate);
46
47 //this._EditField(annotorious);
48 //this._popupField(annotator);
49 //this._extendEditor(annotator);
7 var popupTemplate = _.template($('#popup-template').html());
8 annotorious.popup.addField(function(annotation){
9 var container = document.createElement('div');
10 var el = document.createElement('span');
11 el.href = '#';
12 el.className = 'annotorious-popup-text';
13 console.log(annotation.text);
14 el.innerHTML= annotation.text;
15 container.appendChild(el);
16 return container;
17
18 });
19 }
50}20}

swtr/static/js/swtmaker.js

123 $('#sweet-list').append(this.template({123 $('#sweet-list').append(this.template({
124 who: swt.get('who'),124 who: swt.get('who'),
125 what: swt.get('what'),125 what: swt.get('what'),
126 where: swt.get('where'),
126 where: swt.get('where'),
127 how: JSON.stringify(swt.get('how').text)127 how: JSON.stringify(swt.get('how').text)
128 }));128 }));
129 }, this);129 }, this);
……
154 swt.get('how').text += '\n - by ' + swt.get('who');154 swt.get('how').text += '\n - by ' + swt.get('who');
155 }155 }
156 console.log(swt.get('how'));156 console.log(swt.get('how'));
157 anno.addAnnotation(swt.get('how'));
157 anno.addAnnotation(newanno);
158 });158 });
159 //console.log(swtr.sweets.toJSON());159 //console.log(swtr.sweets.toJSON());
160 swtr.appView.$overlay.hide();160 swtr.appView.$overlay.hide();
……
180 'click #sweet': 'sweet',180 'click #sweet': 'sweet',
181 'click #signin-credentials': 'getSignInCredentials',181 'click #signin-credentials': 'getSignInCredentials',
182 'click #setbox': 'showHide',182 'click #setbox': 'showHide',
183 'click #comment, #label, #tags, #links ': 'button_custom'
183 'change .form-control': 'button_custom',
184 'mouseup .annotorious-editor-button-save': 'add_new_anno'
184 },185 },
185 initialize: function() {186 initialize: function() {
186 //var allElements = $('body *');187 //var allElements = $('body *');
187 this.helpview = new HelpView();188 this.helpview = new HelpView();
188 this.sweetsview = new SweetsView({collection: swtr.sweets});189 this.sweetsview = new SweetsView({collection: swtr.sweets});
189 anno.addHandler('onAnnotationCreated', this.showSwtHelp);190 anno.addHandler('onAnnotationCreated', this.showSwtHelp);
190 anno.addHandler('onAnnotationUpdated', this.showSwtHelp);
191 anno.addHandler('onannotationupdated', this.showswthelp);
191 anno.addHandler('onSelectionStarted', function(annotation) {192 anno.addHandler('onSelectionStarted', function(annotation) {
192 anno.hideAnnotations();});193 anno.hideAnnotations();});
193 anno.addHandler('onSelectionCompleted', function(annotation) {194 anno.addHandler('onSelectionCompleted', function(annotation) {
194 anno.showAnnotations(); });
195 anno.showAnnotations();
196 });
195 anno.addPlugin('CustomFields', this.showSwtHelp); 197 anno.addPlugin('CustomFields', this.showSwtHelp);
196 anno.addHandler('onSelectionCompleted', this.setShape); 198 anno.addHandler('onSelectionCompleted', this.setShape);
197 this.$overlay = $('#app-overlay');199 this.$overlay = $('#app-overlay');
……
207 this.helpview.step(1);207 this.helpview.step(1);
208 }208 }
209 },209 },
210 setShape: function(annotation) {
211 window.annotation=annotation;
212 },
213210
214 setImage: function() {211 setImage: function() {
215 anno.reset();212 anno.reset();
……
240 swt.how['editable'] = false;240 swt.how['editable'] = false;
241 swt.how.text += '\n - by ' + swt.who;241 swt.how.text += '\n - by ' + swt.who;
242 anno.addAnnotation(swt.how);242 anno.addAnnotation(swt.how);
243 console.log('swt.how = ', swt.how);
243 });244 });
244 swtr.appView.$overlay.hide();245 swtr.appView.$overlay.hide();
245 swtr.appView.helpview.step(2);246 swtr.appView.helpview.step(2);
……
264 var annos = _.filter(anno.getAnnotations(), function(anno) {264 var annos = _.filter(anno.getAnnotations(), function(anno) {
265 return (!_.has(anno, 'editable') || anno.editable === true);265 return (!_.has(anno, 'editable') || anno.editable === true);
266 });266 });
267
267 _.each(annos, function(anno) {268 _.each(annos, function(anno) {
268 swtr.sweets.add({269 swtr.sweets.add({
269 who: swtr.who,270 who: swtr.who,
270 where: anno.src,271 where: anno.src,
271 how: anno
272 how: newanno //mysterious link to create the sweet with new anno attributes, tags, links, labels
272 });273 });
273 });274 });
274 },275 },
……
292 }292 }
293 293
294 },294 },
295//annotorious editor widget - custom with options
296//to obtain shapes object, declaring annotation in global scope - TODO refactor
297//code to find better way to do this.
295298
296 /*build_txt: function(opt_array) {
297 var textarray = opt_array;
298 var newobj = [textarray];
299 console.log(newarray);
299 setShape: function(annotation) {
300 $('.annotorious-editor-text').hide();
301 $('.annotorious-editor').css("width", "100%");
302 window.annotation=annotation;
303 annotation.text = [];
304 },
305//to create new annotation object
306 inputStore: function(opt) {
307 var temp = opt;
308 var src = $('#img-url-input').val();
309 this.newanno = {'src':src, 'text':temp, '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};
300310
301 },*/
311 },
312
313//to add the final annotation
314
315//save button - event bind
316 add_new_anno: function(event){
317 var $selected = $('select option:selected');
318 var tempinput = $selected.text()+': '+$('.annotorious-editor textarea').val();
319 this.newanno.text.push(tempinput);
320 var newinput = this.newanno.text.toString();
321 this.newanno.text = newinput;
322 console.log('this.newanno = ', this.newanno);
323 //this.to_Add(this.newanno);
324 var newanno = this.newanno;
325 window.newanno = newanno;
326 },
327//dropdown event
302 button_custom: function(event) {328 button_custom: function(event) {
303 var src = $('#img-url-input').val();
304 var newanno= {};
305 var tempinput = $('.annotorious-editor-text:first');
306 //type setting
307 // var type = $(tempinput).attr("placeholder").slice(5);
308 //console.log(type);
309 newanno.text = tempinput.val();
310 newanno.src = src;
311 $(tempinput).val("");
312 var placeHolder = "Add "+event.currentTarget.innerHTML;
313 $(tempinput).attr("placeholder", placeHolder);
314 newanno.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}}];
315 anno.addAnnotation(newanno);
316 //swtr.appView.ShowSwtHelp;
329 $('.annotorious-editor-text').show();
330 var $selected = $('select option:selected');
331 var tempinput = $selected.prev().text()+ ': '+$('.annotorious-editor-text').val();
332 if(tempinput === "Choose an Option: "){
333 console.log('');
334 }
335 else {
336 annotation.text.push(tempinput);
337 }
338 this.inputStore(annotation.text);
339 $('.annotorious-editor-text:first').val("");
340 $('.annotorious-editor-text:first').attr('placeholder', 'Add a '+$selected.text());
317 },341 },
342
343
318344
319 getSignInCredentials: function(event) {345 getSignInCredentials: function(event) {
320 event.preventDefault();346 event.preventDefault();

swtr/templates/index.html

89 </div>89 </div>
90 </script>90 </script>
91 <script type="text/template" id="button-template">91 <script type="text/template" id="button-template">
92 <div class="btn-group">
93 <button type="button" class="btn-default"
94 id="comment">Comment</button>
95 <button type="button" class="btn-default"
96 id="label">Label</button>
97 <button type="button" class="btn-default"
98 id="tags">Tags</button>
99 <button type="button" class="btn-default "
100 id="links">Links</button>
101 </div>
92 <select class="form-control">
93 <option id="">Choose an Option</option>
94 <option id="comment" >Comment</option>
95 <option id="label" >Label</option>
96 <option id="tags">Tags</option>
97 <option id="links">Links</option>
98 </select>
99 </script>
100 <script type="text/template" id="popup-template">
101 <span class="annotorious-popup-text"> </span>
102 </script>102 </script>
103 </body>103 </body>
104</html>104</html>