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