Commit 7faaca76b5f5e582da6ab084319b2aea25db744b

  • avatar
  • arvind
  • Wed Aug 27 21:07:58 IST 2014
Code refactor. Moving code related to image annotation away from
AppView.
  • swtr/static/js/swtmaker.js 487 --------------------------------------------------------------------------------------------------------------------------------------------+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  • swtr/templates/index.html 23 +++++++++++++++++++++++
  • Diff rendering mode:
  • inline
  • side by side

swtr/static/js/swtmaker.js

201 if(!_.has(swt.get('how'), 'editable')) {201 if(!_.has(swt.get('how'), 'editable')) {
202 swt.get('how')['editable'] = false;202 swt.get('how')['editable'] = false;
203 //console.log(swt.get('how').text.Comment);203 //console.log(swt.get('how').text.Comment);
204 swt.get('how').text = appView.createPopupText(swt.get('how'));
204 swt.get('how').text = swtr.annoView.createPopupText(swt.get('how'));
205 //console.log(swt.get('how'));205 //console.log(swt.get('how'));
206 swt.get('how').text += '\n - by ' + swt.get('who');206 swt.get('how').text += '\n - by ' + swt.get('who');
207 }207 }
……
233 }233 }
234 });234 });
235235
236 var AppView = Backbone.View.extend({
237 el: $('#swt-maker'),
236 var FilterView = Backbone.View.extend({
237 el: $("#filter-div"),
238 events: {238 events: {
239 'click #user-input-submit': 'submitUserInput',
240 'click #sweet': 'sweet',
241 'click #sign-in': 'signIn',
242 'click #setbox': 'showHide',
243 'change #custom-dropdown ': 'getFormValue',
244 'click #ocd-source': 'sourceChanged'
245 //'mouseup .annotorious-editor-button-save': 'addnew_anno'
239 "click #filter-user-div input": "filterSweet",
240 "click #filter-tags-div input": "filterSweet"
246 },241 },
247 initialize: function() {242 initialize: function() {
248 // initialize components
249 this.source = 'none';
250 this.helpview = new HelpView();
251 this.sweetsview = new SweetsView({collection: swtr.sweets});
243 this.render();
244 },
245 render: function() {
246 // console.log(this.collection);
247 var template = _.template($("#filter-users").html());
248 var tags_template = _.template($("#filter-tags").html());
249 // pluck uniq authors of sweets
252250
253 //register handlers for annotorious events
251 var authors = _.uniq(this.collection.pluck('who'));
252 _.each(authors, function(author) {
253 $("#filter-user-div").append(template({who: author}));
254 });
255 this.collection.each(function(model) {
256 if(model.get('how').tags) {
257 _.each(model.get('how').tags, function(tag) {
258 $("#filter-tags-div").append(tags_template({tag:tag}));
259 });
260 }
261 });
262 // this.delegateEvents();
263 },
264 filterSweet: function(event) {
265 if(!event.currentTarget.checked) {
266 var results = this.collection.filter(function(model) {
267 if(model.get('who') != event.currentTarget.name)
268 return model;
269 });
270 if(results.length) {
271 _.each(results, function(result) {
272 anno.removeAnnotation(result.get('how'));
273 });
274 }
275 else { // if results is empty then remove all anno.
276 anno.removeAll();
277 }
278 }
279 else {
280 results = this.collection.filter(function(model) {
281 if(model.get('who') == event.currentTarget.name)
282 return model;
283 });
284 _.each(results, function(result) {
285 anno.addAnnotation(result.get('how'));
286 });
287
288 }
289 // if(results) {
290 // anno.removeAll();
291 // }
292 // swtr.annoView.collection = results;
293 // swtr.annoView.renderWith();
294 }
295 });
296
297 var ImgAnnoView = Backbone.View.extend({
298 el: $("#img-annotation-wrapper"),
299 events: {
300 'change #custom-dropdown ': 'getFormValue'
301 },
302 initialize: function(options) {
303 // attach event handlers to the anno object
254 anno.addHandler('onAnnotationCreated', this.showSwtHelp);304 anno.addHandler('onAnnotationCreated', this.showSwtHelp);
255 anno.addHandler('onAnnotationCreated', this.updateNewAnno);305 anno.addHandler('onAnnotationCreated', this.updateNewAnno);
256 anno.addHandler('onAnnotationUpdated', this.showSwtHelp);306 anno.addHandler('onAnnotationUpdated', this.showSwtHelp);
……
312 });312 });
313 anno.addPlugin('CustomFields', {});313 anno.addPlugin('CustomFields', {});
314 anno.addHandler('onSelectionCompleted', this.hideOriginalEditor);314 anno.addHandler('onSelectionCompleted', this.hideOriginalEditor);
315 // this.set('img', options.img);
316 if(options.img) {
317 anno.makeAnnotatable(options.img);
318 }
319 this.listenTo(this.collection, 'add', this.render);
320 this.helpview = new HelpView();
321 // this.render();
322 },
323 render: function(model) {
324 var swt = model.toJSON();
325 swt.how['editable'] = false;
326 swt.how.text = swtr.annoView.createPopupText(swt.how);
327 swt.how.text += '\n - by ' + swt.who;
328 anno.addAnnotation(swt.how);
329 },
330 renderWith: function() {
331 _.each(this.collection, this.render);
332 },
333 showSwtHelp: function(annotation) {
334 var self = swtr.annoView;//TODO: figure out how we can bind the scope when this func is called as a callback
335 self.helpview.step(3);
336 $('#sweet').show();
337 },
338 updateNewAnno: function(annotation) {
339 console.log('updateNewAnno()');
340 var self = swtr.annoView;
341 // get the final value/input from the editor
342 var selected = $('select option:selected').text().toLowerCase();
343 var text_input = $('.annotorious-editor-text').val();
344 if( selected === "tags") {
345 self.new_anno[selected] = $('#tags-input').tags().getTags();
346 }
347 else {
348 // update it in our annotation object
349 self.new_anno[selected] = text_input;
350 }
351 // prepare the text field
352 self.new_anno.text = self.createPopupText(self.new_anno);
353 // update the annotorious annotation object with the new values
354 if(self.new_anno.comment) {
355 annotation.comment = self.new_anno.comment;
356 }
357 if(self.new_anno.link) {
358 annotation.link = self.new_anno.link;
359 }
360 if(self.new_anno.tags) {
361 annotation.tags = self.new_anno.tags;
362 }
363 if(self.new_anno.title) {
364 annotation.title = self.new_anno.title;
365 }
366 annotation.text = self.new_anno.text;
367 console.log(self.new_anno, annotation);
368 },
369 // hide the original editor window, when user has completed selecting part
370 // of the image to annotate..
371 hideOriginalEditor: function(annotation) {
372 console.log('hideOriginalEditor()');
373 var self = swtr.annoView;
374 self.new_anno = {};
375 self.getSuggestionsForTags();
376 //$('.annotorious-editor-text').hide();
377 //$('.annotorious-editor').css('width', '100%');
378 },
379 getFormValue: function(event) {
380 console.log('getFormValue()');
315381
382 var self = swtr.annoView;
383 // show the editor field to input text
384 var $anno_form = $('.annotorious-editor-text');
385 //$anno_form.slideDown();
386 // get the previous item entered
387 var $selected = $('select option:selected');
388 var text_input = $anno_form.val();
389
390 // if there was a input and it was not tags..
391 if(text_input && $selected.prev().text() !== 'Tags') {
392 var field = $selected.prev().text().toLowerCase();
393 // update it in our annotation object
394 self.new_anno[field] = text_input;
395 }
396 // if it was tags..
397 else if ($selected.prev().text() === 'Tags') {
398 // directly save it..
399 self.new_anno['tags'] = $('#tags-input').tags().getTags();
400 }
401
402 // if the current selected is tags
403 if($selected.text() === 'Tags') {
404 $('#tags-input').tags({
405 tagSize: 'md',
406 promptText: 'Type word (and press enter)..',
407 caseInsensitive: true,
408 suggestions: self.tags_suggestions
409 });
410 $('#tags-input').show();
411 $('.annotorious-editor-text').hide();
412 }
413 else {
414 $('#tags-input').hide();
415 $('.annotorious-editor-text').show();
416 }
417 $anno_form.val('');
418 $anno_form.attr('placeholder', 'Add ' + $selected.text());
419 console.log(self.new_anno);
420 },
421 createPopupText: function(annotation) {
422 // title
423 var text = (annotation.title) ? '<h4>' + annotation.title + '</h4>' : '';
424
425 // comment
426 text += (annotation.comment) ? '<p>' + annotation.comment + '</p>' : '';
427
428 // link
429 text += (annotation.link) ? '<a target="blank" href="' +
430 swtr.utils.linkify(annotation.link) + '">' + annotation.link +
431 '</a>' : '';
432
433 // tags
434 text += (annotation.tags) ? '<p>' + annotation.tags + '</p>' : '';
435
436 // if older annotation i.e w/o comment,title etc fields
437 // add text field as text
438 if(!text) {
439 text = annotation.text;
440 }
441 return text;
442 },
443 // load the suggestions for the tag spraying..
444 getSuggestionsForTags: function() {
445 var self = swtr.annoView;
446 $.ajax({
447 url: '/static/data/tags_suggestions.json',
448 success: function(data) {
449 self.tags_suggestions = data;
450 }
451 });
452 }
453 });
454
455 var AppView = Backbone.View.extend({
456 el: $('#swt-maker'),
457 events: {
458 'click #user-input-submit': 'submitUserInput',
459 'click #sweet': 'sweet',
460 'click #sign-in': 'signIn',
461 'click #setbox': 'showHide',
462 'click #ocd-source': 'sourceChanged'
463 //'mouseup .annotorious-editor-button-save': 'addnew_anno'
464 },
465 initialize: function() {
466 // initialize components
467 this.source = 'none';
468 this.helpview = new HelpView();
469 this.sweetsview = new SweetsView({collection: swtr.sweets});
470
316 // cache jquery selected elements which are used frequently471 // cache jquery selected elements which are used frequently
317 this.$overlay = $('#app-overlay');472 this.$overlay = $('#app-overlay');
318 this.$img = $('#annotatable-img');473 this.$img = $('#annotatable-img');
……
558 },558 },
559 imageLoaded: function(event) {559 imageLoaded: function(event) {
560 var self = event.data;560 var self = event.data;
561 console.log('image loaded');
561 console.log('image loaded', self);
562 self.$overlay.hide();562 self.$overlay.hide();
563 self.initImageAnno();563 self.initImageAnno();
564 },564 },
……
574 // img is a jquery object which annotorious doesn't accept; instead it574 // img is a jquery object which annotorious doesn't accept; instead it
575 // takes the native object returned by a browser API; fortunately, jqeury575 // takes the native object returned by a browser API; fortunately, jqeury
576 // stores a copy of the native object too!576 // stores a copy of the native object too!
577 anno.makeAnnotatable(this.$img[0]);
577
578 swtr.annoView = new ImgAnnoView({collection:swtr.sweets, img: this.$img[0]});
578 this.getExistingAnnotations();579 this.getExistingAnnotations();
580
579 },581 },
580 getExistingAnnotations: function() {582 getExistingAnnotations: function() {
581 var self = this;583 var self = this;
……
589 success: function(data) {589 success: function(data) {
590 if(_.isArray(data)) {590 if(_.isArray(data)) {
591 swtr.sweets.add(data);591 swtr.sweets.add(data);
592 _.each(data, function(swt) {
593 swt.how['editable'] = false;
594 swt.how.text = self.createPopupText(swt.how);
595 swt.how.text += '\n - by ' + swt.who;
596 anno.addAnnotation(swt.how);
597 });
592 new FilterView({collection: swtr.sweets});
593 // _.each(data, function(swt) {
594 // swt.how['editable'] = false;
595 // swt.how.text = swtr.annoView.createPopupText(swt.how);
596 // swt.how.text += '\n - by ' + swt.who;
597 // anno.addAnnotation(swt.how);
598 // });
598 self.$overlay.hide();599 self.$overlay.hide();
599 self.helpview.step(2);600 self.helpview.step(2);
600 }601 }
……
609 }609 }
610 });610 });
611 },611 },
612 showSwtHelp: function(annotation) {
613 var self = swtr.appView;//TODO: figure out how we can bind the scope when this func is called as a callback
614 self.helpview.step(3);
615 $('#sweet').show();
616 },
612 // showSwtHelp: function(annotation) {
613 // var self = swtr.appView;//TODO: figure out how we can bind the scope when this func is called as a callback
614 // self.helpview.step(3);
615 // $('#sweet').show();
616 // },
617 getSweets: function() {617 getSweets: function() {
618 var annos = _.filter(anno.getAnnotations(), function(anno) {618 var annos = _.filter(anno.getAnnotations(), function(anno) {
619 return (!_.has(anno, 'editable') || anno.editable === true);619 return (!_.has(anno, 'editable') || anno.editable === true);
……
644 $('.annotorious-item-unfocus').css("opacity", "0");644 $('.annotorious-item-unfocus').css("opacity", "0");
645 }645 }
646 },646 },
647 // hide the original editor window, when user has completed selecting part
648 // of the image to annotate..
649 hideOriginalEditor: function(annotation) {
650 console.log('hideOriginalEditor()');
651 var self = swtr.appView;
652 self.new_anno = {};
653 self.getSuggestionsForTags();
654 //$('.annotorious-editor-text').hide();
655 //$('.annotorious-editor').css('width', '100%');
656 },
657 // load the suggestions for the tag spraying..
658 getSuggestionsForTags: function() {
659 var self = swtr.appView;
660 $.ajax({
661 url: '/static/data/tags_suggestions.json',
662 success: function(data) {
663 self.tags_suggestions = data;
664 }
665 });
666 },
647 // hideOriginalEditor: function(annotation) {
648 // console.log('hideOriginalEditor()');
649 // var self = swtr.appView;
650 // self.new_anno = {};
651 // self.getSuggestionsForTags();
652 // //$('.annotorious-editor-text').hide();
653 // //$('.annotorious-editor').css('width', '100%');
654 // },
655
656 // getSuggestionsForTags: function() {
657 // var self = swtr.appView;
658 // $.ajax({
659 // url: '/static/data/tags_suggestions.json',
660 // success: function(data) {
661 // self.tags_suggestions = data;
662 // }
663 // });
664 // },
667 //dropdown event665 //dropdown event
668 getFormValue: function(event) {
669 console.log('getFormValue()');
666 // getFormValue: function(event) {
667 // console.log('getFormValue()');
670668
671 var self = swtr.appView;
672 // show the editor field to input text
673 var $anno_form = $('.annotorious-editor-text');
674 //$anno_form.slideDown();
675 // get the previous item entered
676 var $selected = $('select option:selected');
677 var text_input = $anno_form.val();
669 // var self = swtr.appView;
670 // // show the editor field to input text
671 // var $anno_form = $('.annotorious-editor-text');
672 // //$anno_form.slideDown();
673 // // get the previous item entered
674 // var $selected = $('select option:selected');
675 // var text_input = $anno_form.val();
678676
679 // if there was a input and it was not tags..
680 if(text_input && $selected.prev().text() !== 'Tags') {
681 var field = $selected.prev().text().toLowerCase();
682 // update it in our annotation object
683 self.new_anno[field] = text_input;
684 }
685 // if it was tags..
686 else if ($selected.prev().text() === 'Tags') {
687 // directly save it..
688 self.new_anno['tags'] = $('#tags-input').tags().getTags();
689 }
677 // // if there was a input and it was not tags..
678 // if(text_input && $selected.prev().text() !== 'Tags') {
679 // var field = $selected.prev().text().toLowerCase();
680 // // update it in our annotation object
681 // self.new_anno[field] = text_input;
682 // }
683 // // if it was tags..
684 // else if ($selected.prev().text() === 'Tags') {
685 // // directly save it..
686 // self.new_anno['tags'] = $('#tags-input').tags().getTags();
687 // }
690688
691 // if the current selected is tags
692 if($selected.text() === 'Tags') {
693 $('#tags-input').tags({
694 tagSize: 'md',
695 promptText: 'Type word (and press enter)..',
696 caseInsensitive: true,
697 suggestions: self.tags_suggestions
698 });
699 $('#tags-input').show();
700 $('.annotorious-editor-text').hide();
701 }
702 else {
703 $('#tags-input').hide();
704 $('.annotorious-editor-text').show();
705 }
706 $anno_form.val('');
707 $anno_form.attr('placeholder', 'Add ' + $selected.text());
708 console.log(self.new_anno);
709 },
710 //to add the final annotation
711 //save button - event bind
712 updateNewAnno: function(annotation) {
713 console.log('updateNewAnno()');
714 var self = swtr.appView;
715 // get the final value/input from the editor
716 var selected = $('select option:selected').text().toLowerCase();
717 var text_input = $('.annotorious-editor-text').val();
718 if( selected === "tags") {
719 self.new_anno[selected] = $('#tags-input').tags().getTags();
720 }
721 else {
722 // update it in our annotation object
723 self.new_anno[selected] = text_input;
724 }
725 // prepare the text field
726 self.new_anno.text = self.createPopupText(self.new_anno);
727 // update the annotorious annotation object with the new values
728 if(self.new_anno.comment) {
729 annotation.comment = self.new_anno.comment;
730 }
731 if(self.new_anno.link) {
732 annotation.link = self.new_anno.link;
733 }
734 if(self.new_anno.tags) {
735 annotation.tags = self.new_anno.tags;
736 }
737 if(self.new_anno.title) {
738 annotation.title = self.new_anno.title;
739 }
740 annotation.text = self.new_anno.text;
741 console.log(self.new_anno, annotation);
742 },
743 // create the text to displayed for each annotation from the other
744 // attributes of the sweet/annotation
745 createPopupText: function(annotation) {
746 // title
747 var text = (annotation.title) ? '<h4>' + annotation.title + '</h4>' : '';
689 // // if the current selected is tags
690 // if($selected.text() === 'Tags') {
691 // $('#tags-input').tags({
692 // tagSize: 'md',
693 // promptText: 'Type word (and press enter)..',
694 // caseInsensitive: true,
695 // suggestions: self.tags_suggestions
696 // });
697 // $('#tags-input').show();
698 // $('.annotorious-editor-text').hide();
699 // }
700 // else {
701 // $('#tags-input').hide();
702 // $('.annotorious-editor-text').show();
703 // }
704 // $anno_form.val('');
705 // $anno_form.attr('placeholder', 'Add ' + $selected.text());
706 // console.log(self.new_anno);
707 // },
708 // //to add the final annotation
709 // //save button - event bind
710 // updateNewAnno: function(annotation) {
711 // console.log('updateNewAnno()');
712 // var self = swtr.appView;
713 // // get the final value/input from the editor
714 // var selected = $('select option:selected').text().toLowerCase();
715 // var text_input = $('.annotorious-editor-text').val();
716 // if( selected === "tags") {
717 // self.new_anno[selected] = $('#tags-input').tags().getTags();
718 // }
719 // else {
720 // // update it in our annotation object
721 // self.new_anno[selected] = text_input;
722 // }
723 // // prepare the text field
724 // self.new_anno.text = self.createPopupText(self.new_anno);
725 // // update the annotorious annotation object with the new values
726 // if(self.new_anno.comment) {
727 // annotation.comment = self.new_anno.comment;
728 // }
729 // if(self.new_anno.link) {
730 // annotation.link = self.new_anno.link;
731 // }
732 // if(self.new_anno.tags) {
733 // annotation.tags = self.new_anno.tags;
734 // }
735 // if(self.new_anno.title) {
736 // annotation.title = self.new_anno.title;
737 // }
738 // annotation.text = self.new_anno.text;
739 // console.log(self.new_anno, annotation);
740 // },
741 // // create the text to displayed for each annotation from the other
742 // // attributes of the sweet/annotation
743 // createPopupText: function(annotation) {
744 // // title
745 // var text = (annotation.title) ? '<h4>' + annotation.title + '</h4>' : '';
748746
749 // comment
750 text += (annotation.comment) ? '<p>' + annotation.comment + '</p>' : '';
747 // // comment
748 // text += (annotation.comment) ? '<p>' + annotation.comment + '</p>' : '';
751749
752 // link
753 text += (annotation.link) ? '<a target="blank" href="' +
754 swtr.utils.linkify(annotation.link) + '">' + annotation.link +
755 '</a>' : '';
750 // // link
751 // text += (annotation.link) ? '<a target="blank" href="' +
752 // swtr.utils.linkify(annotation.link) + '">' + annotation.link +
753 // '</a>' : '';
756754
757 // tags
758 text += (annotation.tags) ? '<p>' + annotation.tags + '</p>' : '';
755 // // tags
756 // text += (annotation.tags) ? '<p>' + annotation.tags + '</p>' : '';
759757
760 // if older annotation i.e w/o comment,title etc fields
761 // add text field as text
762 if(!text) {
763 text = annotation.text;
764 }
765 return text;
766 },
758 // // if older annotation i.e w/o comment,title etc fields
759 // // add text field as text
760 // if(!text) {
761 // text = annotation.text;
762 // }
763 // return text;
764 // },
767 // to sign in the user to swtstore..just make a call to the oauth endpoint765 // to sign in the user to swtstore..just make a call to the oauth endpoint
768 signIn: function(event) {766 signIn: function(event) {
769 event.preventDefault();767 event.preventDefault();
……
989 $(window).scrollTop(0, 0);989 $(window).scrollTop(0, 0);
990 }990 }
991 });991 });
992
992993
993 // utilities and helper functions to go here994 // utilities and helper functions to go here
994 swtr.utils = {995 swtr.utils = {

swtr/templates/index.html

78 </div>78 </div>
79 <div id="ocd-view"></div>79 <div id="ocd-view"></div>
80 </div> <!-- end fourth row -->80 </div> <!-- end fourth row -->
81 <!-- fifth row: options for filter -->
82 <div id="filter-div" class="row">
83 <div id="filter-user-div">
84 <p><span>SWeeTs by</span></p>
85 </div>
86 <div id="filter-tags-div">
87 <p><span>Tags</span></p>
88 </div>
89 </div> <!-- end fifth row -->
8190
91
82 <div id="sweet-list-wrapper">92 <div id="sweet-list-wrapper">
83 <ul id="sweet-list"></ul>93 <ul id="sweet-list"></ul>
84 <div class="btn-grp">94 <div class="btn-grp">
……
174 <div>Authors: <%= authors %> </div>174 <div>Authors: <%= authors %> </div>
175 </div>175 </div>
176 </script>176 </script>
177 <script type="text/template" id="filter-users">
178 <ul>
179 <input type="checkbox" name=<%= who %> checked="checked">
180 <label><%= who %></label>
181 </ul>
182 </script>
183 <script type="text/template" id="filter-tags">
184 <ul>
185 <input type="checkbox" checked="checked" name=<%= tag %>>
186 <label><%= tag %></label>
187 </ul>
188 </script>
189
177 </body>190 </body>
178</html>191</html>