Commit eaae5123c53310a7b03832597fe73d9fc8cba536

  • avatar
  • arvind
  • Fri Aug 29 15:26:03 IST 2014
Code refactor. Moving ImgAnnoView to imganno.js
Fix UI issues with editor.
swtr/static/js/swtmaker.js
(42 / 385)
  
187187 this.collection.remove(notPosted);
188188 },
189189 postSweets: function() {
190 console.log("postSWr");
190191 var appView = swtr.appView;
191192 appView.helpview.step(5);
192193 appView.$overlay.show();
……
197197 console.log(collection, response);
198198 swtr.sweets.set(collection);
199199 //TODO: move this to a annotation view or something
200 anno.removeAll();
201 _.each(swtr.sweets.models, function(swt) {
202 if(!_.has(swt.get('how'), 'editable')) {
203 swt.get('how')['editable'] = false;
204 //console.log(swt.get('how').text.Comment);
205 swt.get('how').text = swtr.annoView.createPopupText(swt.get('how'));
206 //console.log(swt.get('how'));
207 swt.get('how').text += '\n - by ' + swt.get('who');
208 }
209 //console.log(swt.get('how'));
210 anno.addAnnotation(swt.get('how'));
211 });
200// anno.removeAll();
201 // _.each(swtr.sweets.models, function(swt) {
202 // if(!_.has(swt.get('how'), 'editable')) {
203 // swt.get('how')['editable'] = false;
204 // //console.log(swt.get('how').text.Comment);
205 // swt.get('how').text = swtr.imgAnnoView.createPopupText(swt.get('how'));
206 // //console.log(swt.get('how'));
207 // swt.get('how').text += '\n - by ' + swt.get('who');
208 // }
209 // //console.log(swt.get('how'));
210 // anno.addAnnotation(swt.get('how'));
211 // });
212212 //console.log(swtr.sweets.toJSON());
213213 swtr.appView.$overlay.hide();
214214 swtr.appView.helpview.step(6);
……
355355 }
356356 });
357357
358 var ImgAnnoView = Backbone.View.extend({
359 el: $("#img-annotation-wrapper"),
360 events: {
361 'change #custom-dropdown ': 'getFormValue'
362 },
363 initialize: function(options) {
364 // attach event handlers to the anno object
365 anno.addHandler('onAnnotationCreated', this.showSwtHelp);
366 anno.addHandler('onAnnotationCreated', this.updateNewAnno);
367 anno.addHandler('onAnnotationUpdated', this.showSwtHelp);
368 anno.addHandler('onSelectionStarted', function(annotation) {
369 anno.hideAnnotations();
370 });
371 anno.addHandler('onSelectionCompleted', function(annotation) {
372 anno.showAnnotations();
373 });
374 anno.addPlugin('CustomFields', {});
375 anno.addHandler('onSelectionCompleted', this.hideOriginalEditor);
376 // this.set('img', options.img);
377 if(options.img) {
378 anno.makeAnnotatable(options.img);
379 }
380 this.listenTo(this.collection, 'add', this.render);
381 this.helpview = new HelpView();
382 // this.render();
383 },
384 render: function(model) {
385 var swt = model.toJSON();
386 swt.how['editable'] = false;
387 swt.how.text = swtr.annoView.createPopupText(swt.how);
388 swt.how.text += '\n - by ' + swt.who;
389 anno.addAnnotation(swt.how);
390 },
391 renderWith: function() {
392 _.each(this.collection, this.render);
393 },
394 showSwtHelp: function(annotation) {
395 var self = swtr.annoView;//TODO: figure out how we can bind the scope when this func is called as a callback
396 self.helpview.step(3);
397 $('#sweet').show();
398 },
399 updateNewAnno: function(annotation) {
400 console.log('updateNewAnno()');
401 var self = swtr.annoView;
402 // get the final value/input from the editor
403 var selected = $('select option:selected').text().toLowerCase();
404 var text_input = $('.annotorious-editor-text').val();
405 if( selected === "tags") {
406 self.new_anno[selected] = $('#tags-input').tags().getTags();
407 }
408 else {
409 // update it in our annotation object
410 self.new_anno[selected] = text_input;
411 }
412 // prepare the text field
413 self.new_anno.text = self.createPopupText(self.new_anno);
414 // update the annotorious annotation object with the new values
415 if(self.new_anno.comment) {
416 annotation.comment = self.new_anno.comment;
417 }
418 if(self.new_anno.link) {
419 annotation.link = self.new_anno.link;
420 }
421 if(self.new_anno.tags) {
422 annotation.tags = self.new_anno.tags;
423 }
424 if(self.new_anno.title) {
425 annotation.title = self.new_anno.title;
426 }
427 annotation.text = self.new_anno.text;
428 console.log(self.new_anno, annotation);
429 },
430 // hide the original editor window, when user has completed selecting part
431 // of the image to annotate..
432 hideOriginalEditor: function(annotation) {
433 console.log('hideOriginalEditor()');
434 var self = swtr.annoView;
435 self.new_anno = {};
436 self.getSuggestionsForTags();
437 //$('.annotorious-editor-text').hide();
438 //$('.annotorious-editor').css('width', '100%');
439 },
440 getFormValue: function(event) {
441 console.log('getFormValue()');
442
443 var self = swtr.annoView;
444 // show the editor field to input text
445 var $anno_form = $('.annotorious-editor-text');
446 //$anno_form.slideDown();
447 // get the previous item entered
448 var $selected = $('select option:selected');
449 var text_input = $anno_form.val();
450
451 // if there was a input and it was not tags..
452 if(text_input && $selected.prev().text() !== 'Tags') {
453 var field = $selected.prev().text().toLowerCase();
454 // update it in our annotation object
455 self.new_anno[field] = text_input;
456 }
457 // if it was tags..
458 else if ($selected.prev().text() === 'Tags') {
459 // directly save it..
460 self.new_anno['tags'] = $('#tags-input').tags().getTags();
461 }
462
463 // if the current selected is tags
464 if($selected.text() === 'Tags') {
465 $('#tags-input').tags({
466 tagSize: 'md',
467 promptText: 'Type word (and press enter)..',
468 caseInsensitive: true,
469 suggestions: self.tags_suggestions
470 });
471 $('#tags-input').show();
472 $('.annotorious-editor-text').hide();
473 }
474 else {
475 $('#tags-input').hide();
476 $('.annotorious-editor-text').show();
477 }
478 $anno_form.val('');
479 $anno_form.attr('placeholder', 'Add ' + $selected.text());
480 console.log(self.new_anno);
481 },
482 createPopupText: function(annotation) {
483 // title
484 var text = (annotation.title) ? '<h4>' + annotation.title + '</h4>' : '';
485
486 // comment
487 text += (annotation.comment) ? '<p>' + annotation.comment + '</p>' : '';
488
489 // link
490 text += (annotation.link) ? '<a target="blank" href="' +
491 swtr.utils.linkify(annotation.link) + '">' + annotation.link +
492 '</a>' : '';
493
494 // tags
495 text += (annotation.tags) ? '<p>' + annotation.tags + '</p>' : '';
496
497 // if older annotation i.e w/o comment,title etc fields
498 // add text field as text
499 if(!text) {
500 text = annotation.text;
501 }
502 return text;
503 },
504 // load the suggestions for the tag spraying..
505 getSuggestionsForTags: function() {
506 var self = swtr.annoView;
507 $.ajax({
508 url: '/static/data/tags_suggestions.json',
509 success: function(data) {
510 self.tags_suggestions = data;
511 }
512 });
513 }
514 });
515
516358 var AppView = Backbone.View.extend({
517359 el: $('#swtr-root'),
518360 events: {
519361 'click #user-input-submit': 'submitUserInput',
520362 'click #sweet': 'sweet',
521363 'click #sign-in': 'signIn',
522 'click #setbox': 'showHide',
523364 'click #ocd-source': 'sourceChanged'
524365 //'mouseup .annotorious-editor-button-save': 'addnew_anno'
525366 },
……
374374 this.$overlay = $('#app-overlay');
375375 this.$img = $('#annotatable-img');
376376
377 // attach a load event handler, whenever an image is loaded..
378 this.$img.on('load', this, this.imageLoaded);
379 this.$img.on('error', this, this.onImageLoadError);
380
381 // check if already an image is provided at load time..
382 this.imgURL = this.$img.attr('src');
383 if(this.imgURL) {
384 this.initImageAnno();
385 $('#user-input').val(this.imgURL);
386 }
387 else {
388 this.helpview.step(1);
389 }
390
377 this.helpview.step(1);
391378 // initialize the oauth stuff
392379 this.oauth = new Oauth({
393380 app_id: swtr.app_id,
……
406406 }
407407 // if type is given explicitly; we load it as such.
408408 if(type === 'image') {
409 this.setImage(url);
409 if(swtr.imgAnnoView) {
410 swtr.imgAnnoView.setImage(url);
411 }
412 else {
413 swtr.imgAnnoView = new swtr.ImgAnnoView({collection:swtr.sweets,
414 img: this.$img[0],
415 $img: this.$img,
416 url: url});
417 }
410418 return false;
411419 }
412420 // else try to find what resource is the URL..
413421 // if url has an image extension then load the image annotation
414422 if(url.match(/.jpg|.jpeg|.png|.gif|.bmp|.svg/)) {
415 this.setImage(url);
423 if(swtr.imgAnnoView) {
424 swtr.imgAnnoView.setImage(url);
425 }
426 else {
427 swtr.imgAnnoView = new swtr.ImgAnnoView({collection:swtr.sweets,
428 img: this.$img[0],
429 $img: this.$img,
430 url: url});
431 }
432
416433 return false;
417434 }
418435 // else check with our /media-type endpoint to see what type of resource
……
442442 //console.log(response);
443443 self.$overlay.hide();
444444 if(response.type === 'image') {
445 self.setImage(url);
445 if(swtr.imgAnnoView) {
446 swtr.imgAnnoView.setImage(url);
447 }
448 else {
449 swtr.imgAnnoView = new swtr.ImgAnnoView({collection:swtr.sweets,
450 img: self.$img[0],
451 $img: self.$img,
452 url: url});
453 }
446454 }
447455 else {
448456 window.location.href = '/annotate?where=' + url;
……
458458 });
459459 }
460460 },
461 setImage: function(url) {
462 this.imgURL = url;
463
464 if(this.$img.attr('src') === this.imgURL) {
465 return;
466 }
467 anno.reset();
468 var self = this;
469 this.$overlay.show();
470 this.helpview.step(7);
471 this.$img.attr('src', this.imgURL);
472 },
473 imageLoaded: function(event) {
474 var self = event.data;
475 console.log('image loaded', self);
476 self.$overlay.hide();
477 self.initImageAnno();
478 },
479 // when image fails to load - could be because of broken URL or network
480 // issues
481 onImageLoadError: function(event) {
482 var self = event.data;
483 console.log('error while loading image');
484 self.$overlay.hide();
485 self.helpview.step(8);
486 },
487 initImageAnno: function() {
488 // img is a jquery object which annotorious doesn't accept; instead it
489 // takes the native object returned by a browser API; fortunately, jqeury
490 // stores a copy of the native object too!
491
492 swtr.annoView = new ImgAnnoView({collection:swtr.sweets, img: this.$img[0]});
493 this.getExistingAnnotations();
494
495 },
496 getExistingAnnotations: function() {
497 var self = this;
498 this.helpview.step(0);
499 this.$overlay.show();
500 //console.log('getting existing annotations of ', this.imgURL);
501 swtr.sweets.getAll({
502 where: this.imgURL,
503 success: function(data) {
504 if(_.isArray(data)) {
505 swtr.sweets.add(data);
506 swtr.filterview = new FilterView({collection: swtr.sweets});
507 // _.each(data, function(swt) {
508 // swt.how['editable'] = false;
509 // swt.how.text = swtr.annoView.createPopupText(swt.how);
510 // swt.how.text += '\n - by ' + swt.who;
511 // anno.addAnnotation(swt.how);
512 // });
513 self.$overlay.hide();
514 self.helpview.step(2);
515 }
516 },
517 error: function(jqxhr, error, statusText) {
518 if(jqxhr.status === 404) { //annotations don't exist for this image
519 console.log('annotations don\'t exist for this image. Create one!');
520 }
521 self.$overlay.hide();
522 self.helpview.step(2);
523 }
524 });
525 },
526 // showSwtHelp: function(annotation) {
527 // var self = swtr.appView;//TODO: figure out how we can bind the scope when this func is called as a callback
528 // self.helpview.step(3);
529 // $('#sweet').show();
530 // },
531461 getSweets: function() {
532462 var annos = _.filter(anno.getAnnotations(), function(anno) {
533463 return (!_.has(anno, 'editable') || anno.editable === true);
……
480480 this.showSweets();
481481 return false;
482482 },
483 showHide: function() {
484 if($("#setbox:checked").length) {
485 $('.annotorious-item-unfocus').css("opacity", "0.5");
486 }
487 else {
488 $('.annotorious-item-unfocus').css("opacity", "0");
489 }
490 },
491 // hideOriginalEditor: function(annotation) {
492 // console.log('hideOriginalEditor()');
493 // var self = swtr.appView;
494 // self.new_anno = {};
495 // self.getSuggestionsForTags();
496 // //$('.annotorious-editor-text').hide();
497 // //$('.annotorious-editor').css('width', '100%');
498 // },
499
500 // getSuggestionsForTags: function() {
501 // var self = swtr.appView;
502 // $.ajax({
503 // url: '/static/data/tags_suggestions.json',
504 // success: function(data) {
505 // self.tags_suggestions = data;
506 // }
507 // });
508 // },
509 //dropdown event
510 // getFormValue: function(event) {
511 // console.log('getFormValue()');
512
513 // var self = swtr.appView;
514 // // show the editor field to input text
515 // var $anno_form = $('.annotorious-editor-text');
516 // //$anno_form.slideDown();
517 // // get the previous item entered
518 // var $selected = $('select option:selected');
519 // var text_input = $anno_form.val();
520
521 // // if there was a input and it was not tags..
522 // if(text_input && $selected.prev().text() !== 'Tags') {
523 // var field = $selected.prev().text().toLowerCase();
524 // // update it in our annotation object
525 // self.new_anno[field] = text_input;
526 // }
527 // // if it was tags..
528 // else if ($selected.prev().text() === 'Tags') {
529 // // directly save it..
530 // self.new_anno['tags'] = $('#tags-input').tags().getTags();
531 // }
532
533 // // if the current selected is tags
534 // if($selected.text() === 'Tags') {
535 // $('#tags-input').tags({
536 // tagSize: 'md',
537 // promptText: 'Type word (and press enter)..',
538 // caseInsensitive: true,
539 // suggestions: self.tags_suggestions
540 // });
541 // $('#tags-input').show();
542 // $('.annotorious-editor-text').hide();
543 // }
544 // else {
545 // $('#tags-input').hide();
546 // $('.annotorious-editor-text').show();
547 // }
548 // $anno_form.val('');
549 // $anno_form.attr('placeholder', 'Add ' + $selected.text());
550 // console.log(self.new_anno);
551 // },
552 // //to add the final annotation
553 // //save button - event bind
554 // updateNewAnno: function(annotation) {
555 // console.log('updateNewAnno()');
556 // var self = swtr.appView;
557 // // get the final value/input from the editor
558 // var selected = $('select option:selected').text().toLowerCase();
559 // var text_input = $('.annotorious-editor-text').val();
560 // if( selected === "tags") {
561 // self.new_anno[selected] = $('#tags-input').tags().getTags();
562 // }
563 // else {
564 // // update it in our annotation object
565 // self.new_anno[selected] = text_input;
566 // }
567 // // prepare the text field
568 // self.new_anno.text = self.createPopupText(self.new_anno);
569 // // update the annotorious annotation object with the new values
570 // if(self.new_anno.comment) {
571 // annotation.comment = self.new_anno.comment;
572 // }
573 // if(self.new_anno.link) {
574 // annotation.link = self.new_anno.link;
575 // }
576 // if(self.new_anno.tags) {
577 // annotation.tags = self.new_anno.tags;
578 // }
579 // if(self.new_anno.title) {
580 // annotation.title = self.new_anno.title;
581 // }
582 // annotation.text = self.new_anno.text;
583 // console.log(self.new_anno, annotation);
584 // },
585 // // create the text to displayed for each annotation from the other
586 // // attributes of the sweet/annotation
587 // createPopupText: function(annotation) {
588 // // title
589 // var text = (annotation.title) ? '<h4>' + annotation.title + '</h4>' : '';
590
591 // // comment
592 // text += (annotation.comment) ? '<p>' + annotation.comment + '</p>' : '';
593
594 // // link
595 // text += (annotation.link) ? '<a target="blank" href="' +
596 // swtr.utils.linkify(annotation.link) + '">' + annotation.link +
597 // '</a>' : '';
598
599 // // tags
600 // text += (annotation.tags) ? '<p>' + annotation.tags + '</p>' : '';
601
602 // // if older annotation i.e w/o comment,title etc fields
603 // // add text field as text
604 // if(!text) {
605 // text = annotation.text;
606 // }
607 // return text;
608 // },
609 // to sign in the user to swtstore..just make a call to the oauth endpoint
610483 signIn: function(event) {
611484 event.preventDefault();
612485 this.oauth.authorize();
swtr/templates/index.html
(10 / 9)
  
128128 </div>
129129 <div id="ocd-view"></div>
130130 </div> <!-- end fourth row -->
131 <!-- fifth row: options for filter -->
132 <div id="filter-div" class="row">
133 <div id="filter-user-div">
134 <p><span>SWeeTs by</span></p>
135 </div>
136 <div id="filter-tags-div">
137 <p><span>Tags</span></p>
138 </div>
139 </div> <!-- end fifth row -->
131 <!-- <\!-- fifth row: options for filter -\-> -->
132 <!-- <div id="filter-div" class="row"> -->
133 <!-- <div id="filter-user-div"> -->
134 <!-- <p><span>SWeeTs by</span></p> -->
135 <!-- </div> -->
136 <!-- <div id="filter-tags-div"> -->
137 <!-- <p><span>Tags</span></p> -->
138 <!-- </div> -->
139 <!-- </div> <\!-- end fifth row -\-> -->
140140
141141
142142 <div id="sweet-list-wrapper">
……
175175 <script src="{{ url_for('static', filename='js/lib/custom-fields-plugin.js') }}"></script>
176176 <script src="{{ url_for('static', filename='js/oauth.js') }}"></script>
177177 <script type="text/javascript" src="{{ url_for('static', filename='js/lib/bootstrap-tags.min.js') }}"></script>
178 <script src="{{ url_for('static', filename='js/imganno.js') }}"></script>
178179 <script src="{{ url_for('static', filename='js/swtmaker.js') }}"></script>
179180
180181 <script type="text/template" id="sweet-template">