From d6760a53cfe5cc47528ad7421b3397e01cd0daab Mon Sep 17 00:00:00 2001 From: Anon Ray Date: Mon, 1 Sep 2014 17:18:53 +0530 Subject: [PATCH] Integrate the PlayAreaView component --- swtr/static/css/swtmaker.css | 3 +- swtr/static/js/img_swtr.js | 44 ++++--- swtr/static/js/main.js | 279 +++++++++++++++++------------------------- swtr/templates/index.html | 116 +++++++++--------- 4 files changed, 200 insertions(+), 242 deletions(-) diff --git a/swtr/static/css/swtmaker.css b/swtr/static/css/swtmaker.css index 61353f2..001a1d8 100644 --- a/swtr/static/css/swtmaker.css +++ b/swtr/static/css/swtmaker.css @@ -72,6 +72,7 @@ body { background: #fff; height: 60px; margin-left: -15px; + display: none; } .ocd-item .text{ margin-top: 3px; @@ -153,4 +154,4 @@ body { top: 40em; left:100px; width: 100% -} \ No newline at end of file +} diff --git a/swtr/static/js/img_swtr.js b/swtr/static/js/img_swtr.js index 9cd04d6..62c733a 100644 --- a/swtr/static/js/img_swtr.js +++ b/swtr/static/js/img_swtr.js @@ -35,7 +35,7 @@ var where = options.where, who = options.who || null; url = swtr.swtstoreURL() + swtr.endpoints.get + '?where=' + - encodeURIComponent(where) + '&access_token=' + swtr.access_token; + encodeURIComponent(where);// '&access_token=' + swtr.access_token; if(who) { url += '&who=' + who; } @@ -100,13 +100,15 @@ update: function() { } }); + swtr.ImgAnnoView = Backbone.View.extend({ - el: $("#img-annotation-wrapper"), + el: $('#img-annotation-wrapper'), events: { - 'change #custom-dropdown ': 'getFormValue', - 'click #setbox': 'showHide' + 'change #custom-dropdown': 'getFormValue', + 'click #toggle-anno-areas': 'toggleAnnoAreas' }, initialize: function(options) { + this.$el = $('#img-annotation-wrapper'); this.listenTo(this.collection, 'add', this.render); // attach event handlers to the anno object anno.addHandler('onAnnotationCreated', this.showSwtHelp); @@ -125,8 +127,15 @@ this.$img = options.$img; options.$img.on('load', this, this.imageLoaded); options.$img.on('error', this, this.onImageLoadError); - this.setImage(options.url); } + if(!options.helpview) { + //TODO: figure out a better way so that everyone can communicate with + //helpview independently + throw new Error('Image annotation view must be passed a reference to the helpview'); + } + this.helpview = options.helpview; + //console.log('initing img annoview; helpview in opts', options.helpview); + this.setImage(options.url); }, render: function(model) { var swt = model.toJSON(); @@ -140,7 +149,7 @@ }, showSwtHelp: function(annotation) { var self = swtr.imgAnnoView;//TODO: figure out how we can bind the scope when this func is called as a callback - swtr.appView.helpview.step(3); + self.helpview.step(3); $('#sweet').show(); }, updateNewAnno: function(annotation) { @@ -260,14 +269,13 @@ }, setImage: function(url) { this.imgURL = url; - console.log(url); + //console.log(url); if(this.$img.attr('src') === this.imgURL) { return; } anno.reset(); - var self = this; swtr.appView.$overlay.show(); - swtr.appView.helpview.step(7); + this.helpview.step(7); this.$img.attr('src', this.imgURL); }, imageLoaded: function(event) { @@ -277,7 +285,7 @@ // reset the collection swtr.sweets.reset(); anno.makeAnnotatable(swtr.imgAnnoView.img); - swtr.imgAnnoView.getExistingAnnotations(); + self.getExistingAnnotations(); }, // when image fails to load - could be because of broken URL or network // issues @@ -285,7 +293,7 @@ var self = event.data; console.log('error while loading image'); swtr.appView.$overlay.hide(); - swtr.appView.helpview.step(8); + self.helpview.step(8); }, initImageAnno: function() { // img is a jquery object which annotorious doesn't accept; instead it @@ -297,7 +305,7 @@ }, getExistingAnnotations: function() { var self = this; - swtr.appView.helpview.step(0); + this.helpview.step(0); swtr.appView.$overlay.show(); swtr.sweets.getAll({ where: this.imgURL, @@ -305,7 +313,7 @@ if(_.isArray(data)) { swtr.sweets.add(data); swtr.appView.$overlay.hide(); - swtr.appView.helpview.step(2); + self.helpview.step(2); } }, error: function(jqxhr, error, statusText) { @@ -313,16 +321,16 @@ console.log('annotations don\'t exist for this image. Create one!'); } swtr.appView.$overlay.hide(); - swtr.appView.helpview.step(2); + self.helpview.step(2); } }); }, - showHide: function() { - if($("#setbox:checked").length) { - $('.annotorious-item-unfocus').css("opacity", "0.5"); + toggleAnnoAreas: function() { + if($('#toggle-anno-areas').is(':checked')) { + $('.annotorious-item-unfocus').css('opacity', '0.5'); } else { - $('.annotorious-item-unfocus').css("opacity", "0"); + $('.annotorious-item-unfocus').css('opacity', '0'); } } }); diff --git a/swtr/static/js/main.js b/swtr/static/js/main.js index 60886b3..1269ad7 100644 --- a/swtr/static/js/main.js +++ b/swtr/static/js/main.js @@ -45,8 +45,10 @@ 'click #sweet-cancel': 'cancelSweeting', 'click #post-sweet': 'postSweets' }, - initialize: function() { + initialize: function(opts) { this.template = _.template($('#sweet-template').html()); + this.helpview = opts.helpview; + //this.setElement(opts.el); }, render: function() { $('#sweet-list').html('

These are your sweet annotations!

'); @@ -61,7 +63,7 @@ how: JSON.stringify(this.getHumanReadableParts(swt.get('how'))) })); }, this); - $(this.el).fadeIn(300); + this.$el.fadeIn(300); }, getHumanReadableParts: function(how) { var human_readable_json = {}; @@ -90,42 +92,27 @@ this.collection.remove(notPosted); }, postSweets: function() { - console.log("postSWr"); var appView = swtr.appView; - appView.helpview.step(5); + this.helpview.step(5); appView.$overlay.show(); try { this.collection.post({ success: function(collection, response) { console.log(collection, response); swtr.sweets.set(collection); - //TODO: move this to a annotation view or something -// anno.removeAll(); - // _.each(swtr.sweets.models, function(swt) { - // if(!_.has(swt.get('how'), 'editable')) { - // swt.get('how')['editable'] = false; - // //console.log(swt.get('how').text.Comment); - // swt.get('how').text = swtr.imgAnnoView.createPopupText(swt.get('how')); - // //console.log(swt.get('how')); - // swt.get('how').text += '\n - by ' + swt.get('who'); - // } - // //console.log(swt.get('how')); - // anno.addAnnotation(swt.get('how')); - // }); - //console.log(swtr.sweets.toJSON()); - swtr.appView.$overlay.hide(); - swtr.appView.helpview.step(6); + appView.$overlay.hide(); + this.helpview.step(6); }, error: function(jqxhr, error, text) { console.log(jqxhr, error, text); - swtr.appView.$overlay.hide(); - swtr.appView.helpview.step(10); + appView.$overlay.hide(); + this.helpview.step(10); } }); } catch(e) { if(e.message == 'Access Token is required to sweet') { appView.$overlay.hide(); - appView.helpview.step(9); + this.helpview.step(9); } } this.cleanUp(); @@ -133,7 +120,7 @@ }, cleanUp: function() { //console.log('cleaning up'); - $(this.el).hide(); + this.$el.hide(); } }); @@ -162,6 +149,7 @@ // pluck uniq tags of sweets var tags = _.chain(this.collection.pluck('how')).pluck('tags').flatten(). uniq().value(); + // render them as filter controls _.each(tags, function(tag) { if(tag) { @@ -229,45 +217,12 @@ anno.addAnnotation(swt.get('how')); }); } - }, - filterSweet: function(event) { - /*if(!event.currentTarget.checked) { - var results = this.collection.filter(function(model) { - if(model.get('who') != event.currentTarget.name) - return model; - }); - if(results.length) { - _.each(results, function(result) { - anno.removeAnnotation(result.get('how')); - }); - } - else { // if results is empty then remove all anno. - anno.removeAll(); - } - } - else { - results = this.collection.filter(function(model) { - if(model.get('who') == event.currentTarget.name) - return model; - }); - _.each(results, function(result) { - anno.addAnnotation(result.get('how')); - }); - - } - // if(results) { - // anno.removeAll(); - // } - // swtr.annoView.collection = results; - // swtr.annoView.renderWith();*/ } }); var AppView = Backbone.View.extend({ el: $('body'), events: { - 'click #user-input-submit': 'submitUserInput', - 'click #sweet': 'sweet', 'click #sign-in': 'signIn', //'mouseup .annotorious-editor-button-save': 'addnew_anno' }, @@ -275,11 +230,9 @@ // initialize components this.source = 'none'; //this.helpview = new HelpView(); - this.sweetsview = new SweetsView({collection: swtr.sweets}); // cache jquery selected elements which are used frequently this.$overlay = $('#app-overlay'); - this.$img = $('#annotatable-img'); //this.helpview.step(1); // initialize the oauth stuff @@ -290,76 +243,105 @@ scopes: 'email,sweet' }); }, + signIn: function(event) { + event.preventDefault(); + if(swtr.who === 'Guest') { + this.oauth.authorize(); + } + return false; + }, + userLoggedIn: function(username) { + swtr.who = username; + var text = 'Signed in as ' + swtr.who + ''; + $('#signinview').html(text); + }, + userLoggedOut: function() { + swtr.who = 'Guest'; + $('#signinview').html('Logged out'); + } + }); + + var PlayAreaView = Backbone.View.extend({ + id: '#play-page-container', + events: { + 'click #user-input-submit': 'submitUserInput', + 'click #sweet': 'sweet' + }, + initialize: function() { + this.template = _.template($('#play-page-template').html()); + this.helpview = new HelpView(); + this.render(); + this.sweetsview = new SweetsView({ + el: $('#sweet-list-wrapper'), + collection: swtr.sweets, + helpview: this.helpview + }); + this.$img = $('#annotatable-img'); + this.helpview.step(1); + }, + render: function() { + this.$el.html(this.template()); + $('#play-page').html(this.$el); + }, submitUserInput: function(event) { event.preventDefault(); var input = $('#user-input').val(); - if(this.source === 'ocd') { - this.loadOCDSearch(input); - } - else if (this.source === 'none') { - this.loadURL(input); - } + this.loadURL(input); + }, + getSweets: function() { + console.log('getSweets'); + var annos = _.filter(anno.getAnnotations(), function(anno) { + return (!_.has(anno, 'editable') || anno.editable === true); + }); + + _.each(annos, function(anno) { + swtr.sweets.add({ + who: swtr.who, + where: anno.src, + // remove the text field; we don't want to store that in the sweets + how: _.omit(anno, 'text') + }); + }); + }, + showSweets: function() { + console.log('showSweets'); + this.sweetsview.render(); + }, + sweet: function() { + console.log('sweeting'); + this.getSweets(); + this.showSweets(); + return false; }, // load a URL for annotation (can be of image or html resource for now) loadURL: function(url, type) { //console.log('loadURL()'); - if(this.source !== 'ocd') { - $('#ocd-results').hide(); - } - $('#img-annotation-wrapper').show(); if(!url || !url.match(/http/)) { this.helpview.step(13); return false; } // if type is given explicitly; we load it as such. if(type === 'image') { - if(swtr.imgAnnoView) { - swtr.imgAnnoView.setImage(url); - } - else { - swtr.imgAnnoView = new swtr.ImgAnnoView({ - collection:swtr.sweets, - img: this.$img[0], - $img: this.$img, - url: url - }); - } + this.initImageAnno(url); return false; } // else try to find what resource is the URL.. // if url has an image extension then load the image annotation if(url.match(/.jpg|.jpeg|.png|.gif|.bmp|.svg/)) { - if(swtr.imgAnnoView) { - swtr.imgAnnoView.setImage(url); - } - else { - swtr.imgAnnoView = new swtr.ImgAnnoView({collection:swtr.sweets, - img: this.$img[0], - $img: this.$img, - url: url}); - } - + this.initImageAnno(url); return false; } // else check with our /media-type endpoint to see what type of resource // it is else { this.helpview.step(12); - this.$overlay.show(); + swtr.appView.$overlay.show(); var self = this; $.get('/media-type', {where: url}, function(response) { //console.log(response); - self.$overlay.hide(); + self.appView.$overlay.hide(); if(response.type === 'image') { - if(swtr.imgAnnoView) { - swtr.imgAnnoView.setImage(url); - } - else { - swtr.imgAnnoView = new swtr.ImgAnnoView({collection:swtr.sweets, - img: self.$img[0], - $img: self.$img, - url: url}); - } + this.initImageAnno(url); } else { window.location.href = '/annotate?where=' + url; @@ -367,53 +349,23 @@ }); } }, - getSweets: function() { - var annos = _.filter(anno.getAnnotations(), function(anno) { - return (!_.has(anno, 'editable') || anno.editable === true); - }); - - _.each(annos, function(anno) { - swtr.sweets.add({ - who: swtr.who, - where: anno.src, - // remove the text field; we don't want to store that in the sweets - how: _.omit(anno, 'text') + initImageAnno: function(url) { + if(swtr.imgAnnoView) { + swtr.imgAnnoView.setImage(url); + } + else { + swtr.imgAnnoView = new swtr.ImgAnnoView({ + collection: swtr.sweets, + img: this.$img[0], + $img: this.$img, + url: url, + helpview: this.helpview }); - }); - }, - showSweets: function() { - this.sweetsview.render(); - }, - sweet: function() { - this.getSweets(); - this.showSweets(); - return false; - }, - signIn: function(event) { - event.preventDefault(); - this.oauth.authorize(); - return false; - }, - userLoggedIn: function(username) { - swtr.who = username; - var text = 'Signed in as ' + swtr.who + ''; - $('#signinview').html(text); - }, - userLoggedOut: function() { - swtr.who = 'Guest'; - $('#signinview').html('Logged out'); - } - }); - - - var PlayAreaView = Backbone.View.extend({ - el: $('#play-page'), - events: { - }, - initialize: function() { - this.render(); + } }, - render: function() { + destroy: function() { + this.helpview.remove(); + this.remove(); } }); @@ -564,29 +516,30 @@ //console.log('onImgClick'); event.preventDefault(); // TODO: init the image anno - this.highlightImg(event); + this.drawCoverOnImg(event); //swtr.appView.loadURL(url, 'image'); return false; }, - highlightImg: function(event) { + drawCoverOnImg: function(event) { //console.log('highlightImg'); var elem = $(event.currentTarget).parent().parent(); // if .ocd-item-cover exists return if(elem.find('.ocd-item-cover').length) { + $(elem.find('.ocd-item-cover')[0]).slideDown(); return; } //console.log(elem); elem.prepend(this.cover_template()); - $(elem.find('.ocd-item-cover')[0]).slideDown('slow'); + $(elem.find('.ocd-item-cover')[0]).slideDown(); }, onCoverCloseClick: function(event) { var elem = $(event.currentTarget).parent(); - elem.slideUp('slow'); - elem.remove(); + elem.slideUp(); }, onMarkClick: function(event) { var url = $(event.currentTarget).parent().parent(). find('img').attr('src'); + //TODO: load the image in the play area/workbench console.log('load image anno', url); }, search: function(data, cb) { @@ -718,17 +671,18 @@ initialize: function() { var self = this; swtr.LDs = new LDSwts(); - swtr.LDs.getAll({what: 'img-anno', - success: function(data) { - swtr.LDs.add(data); - if(!swtr.tagCloudView) { - swtr.tagCloudView = new TagCloudView({collection: swtr.LDs}); - } - }}); + swtr.LDs.getAll({ + what: 'img-anno', + success: function(data) { + swtr.LDs.add(data); + if(!swtr.tagCloudView) { + swtr.tagCloudView = new TagCloudView({collection: swtr.LDs}); + } + } + }); }, destroy: function() { this.remove(); - } }); @@ -742,7 +696,6 @@ this.user_tag_el = $('#user-tag-cloud'); this.tags_tag_el = $('#tags-tag-cloud'); this.render(); - }, userTagClicked: function(e) { console.log(e); @@ -766,7 +719,6 @@ .fontSize(function(d) { return d.size; }) .on("end", this.draw) .start(); - }, draw: function (words) { var fill = d3.scale.category20(); @@ -783,7 +735,6 @@ .attr("transform", function(d) { return "translate(" + [d.x, d.y] + ")";}) .text(function(d) { return d.text; }); - }, renderTagsTagCloud: function() { var sweetsWithTags = swtr.LDs.filter(function(k) { @@ -805,7 +756,6 @@ .fontSize(function(d) { return d.size; }) .on("end", this.drawTags) .start(); - }, drawTags: function(words) { var fill = d3.scale.category20(); @@ -824,7 +774,6 @@ }) .text(function(d) {console.log(d); return d.text; }); } - }); var AppRouter = Backbone.Router.extend({ @@ -836,7 +785,7 @@ }, components: { 'linked-data': LDView, - 'play': DummyView, + 'play': PlayAreaView, 'search': SearchView }, home: function() { diff --git a/swtr/templates/index.html b/swtr/templates/index.html index 192f705..1ce6535 100644 --- a/swtr/templates/index.html +++ b/swtr/templates/index.html @@ -86,72 +86,17 @@ -
- -
-
-
-
- - -
- -
-
-
-
-
- -
-
-
-
- -
-
-
-
-
-
-
-
-
-
- -
-
-
- {% if url %} - Annotation Workbench - {% else %} - Annotation Workbench - {% endif %} -
-
+
-
-
    -
    - - -
    -
    + +
    -
    - -
    - -
    @@ -226,6 +171,61 @@ +