Commit d6760a53cfe5cc47528ad7421b3397e01cd0daab

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 ----------------------------------------------------------++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  • Diff rendering mode:
  • inline
  • side by side

swtr/static/css/swtmaker.css

72 background: #fff;72 background: #fff;
73 height: 60px;73 height: 60px;
74 margin-left: -15px;74 margin-left: -15px;
75 display: none;
75}76}
76.ocd-item .text{77.ocd-item .text{
77 margin-top: 3px;78 margin-top: 3px;

swtr/static/js/img_swtr.js

35 var where = options.where,35 var where = options.where,
36 who = options.who || null;36 who = options.who || null;
37 url = swtr.swtstoreURL() + swtr.endpoints.get + '?where=' +37 url = swtr.swtstoreURL() + swtr.endpoints.get + '?where=' +
38 encodeURIComponent(where) + '&access_token=' + swtr.access_token;
38 encodeURIComponent(where);// '&access_token=' + swtr.access_token;
39 if(who) {39 if(who) {
40 url += '&who=' + who;40 url += '&who=' + who;
41 }41 }
……
100 update: function() {100 update: function() {
101 }101 }
102 });102 });
103
103 swtr.ImgAnnoView = Backbone.View.extend({104 swtr.ImgAnnoView = Backbone.View.extend({
104 el: $("#img-annotation-wrapper"),
105 el: $('#img-annotation-wrapper'),
105 events: {106 events: {
106 'change #custom-dropdown ': 'getFormValue',
107 'click #setbox': 'showHide'
107 'change #custom-dropdown': 'getFormValue',
108 'click #toggle-anno-areas': 'toggleAnnoAreas'
108 },109 },
109 initialize: function(options) {110 initialize: function(options) {
111 this.$el = $('#img-annotation-wrapper');
110 this.listenTo(this.collection, 'add', this.render);112 this.listenTo(this.collection, 'add', this.render);
111 // attach event handlers to the anno object113 // attach event handlers to the anno object
112 anno.addHandler('onAnnotationCreated', this.showSwtHelp);114 anno.addHandler('onAnnotationCreated', this.showSwtHelp);
……
127 this.$img = options.$img;127 this.$img = options.$img;
128 options.$img.on('load', this, this.imageLoaded);128 options.$img.on('load', this, this.imageLoaded);
129 options.$img.on('error', this, this.onImageLoadError);129 options.$img.on('error', this, this.onImageLoadError);
130 this.setImage(options.url);
131 }130 }
131 if(!options.helpview) {
132 //TODO: figure out a better way so that everyone can communicate with
133 //helpview independently
134 throw new Error('Image annotation view must be passed a reference to the helpview');
135 }
136 this.helpview = options.helpview;
137 //console.log('initing img annoview; helpview in opts', options.helpview);
138 this.setImage(options.url);
132 },139 },
133 render: function(model) {140 render: function(model) {
134 var swt = model.toJSON();141 var swt = model.toJSON();
……
149 },149 },
150 showSwtHelp: function(annotation) {150 showSwtHelp: function(annotation) {
151 var self = swtr.imgAnnoView;//TODO: figure out how we can bind the scope when this func is called as a callback151 var self = swtr.imgAnnoView;//TODO: figure out how we can bind the scope when this func is called as a callback
152 swtr.appView.helpview.step(3);
152 self.helpview.step(3);
153 $('#sweet').show();153 $('#sweet').show();
154 },154 },
155 updateNewAnno: function(annotation) {155 updateNewAnno: function(annotation) {
……
269 },269 },
270 setImage: function(url) {270 setImage: function(url) {
271 this.imgURL = url;271 this.imgURL = url;
272 console.log(url);
272 //console.log(url);
273 if(this.$img.attr('src') === this.imgURL) {273 if(this.$img.attr('src') === this.imgURL) {
274 return;274 return;
275 }275 }
276 anno.reset();276 anno.reset();
277 var self = this;
278 swtr.appView.$overlay.show();277 swtr.appView.$overlay.show();
279 swtr.appView.helpview.step(7);
278 this.helpview.step(7);
280 this.$img.attr('src', this.imgURL);279 this.$img.attr('src', this.imgURL);
281 },280 },
282 imageLoaded: function(event) {281 imageLoaded: function(event) {
……
285 // reset the collection285 // reset the collection
286 swtr.sweets.reset();286 swtr.sweets.reset();
287 anno.makeAnnotatable(swtr.imgAnnoView.img);287 anno.makeAnnotatable(swtr.imgAnnoView.img);
288 swtr.imgAnnoView.getExistingAnnotations();
288 self.getExistingAnnotations();
289 },289 },
290 // when image fails to load - could be because of broken URL or network290 // when image fails to load - could be because of broken URL or network
291 // issues291 // issues
……
293 var self = event.data;293 var self = event.data;
294 console.log('error while loading image');294 console.log('error while loading image');
295 swtr.appView.$overlay.hide();295 swtr.appView.$overlay.hide();
296 swtr.appView.helpview.step(8);
296 self.helpview.step(8);
297 },297 },
298 initImageAnno: function() {298 initImageAnno: function() {
299 // img is a jquery object which annotorious doesn't accept; instead it299 // img is a jquery object which annotorious doesn't accept; instead it
……
305 },305 },
306 getExistingAnnotations: function() {306 getExistingAnnotations: function() {
307 var self = this;307 var self = this;
308 swtr.appView.helpview.step(0);
308 this.helpview.step(0);
309 swtr.appView.$overlay.show();309 swtr.appView.$overlay.show();
310 swtr.sweets.getAll({310 swtr.sweets.getAll({
311 where: this.imgURL,311 where: this.imgURL,
……
313 if(_.isArray(data)) {313 if(_.isArray(data)) {
314 swtr.sweets.add(data);314 swtr.sweets.add(data);
315 swtr.appView.$overlay.hide();315 swtr.appView.$overlay.hide();
316 swtr.appView.helpview.step(2);
316 self.helpview.step(2);
317 }317 }
318 },318 },
319 error: function(jqxhr, error, statusText) {319 error: function(jqxhr, error, statusText) {
……
321 console.log('annotations don\'t exist for this image. Create one!');321 console.log('annotations don\'t exist for this image. Create one!');
322 }322 }
323 swtr.appView.$overlay.hide();323 swtr.appView.$overlay.hide();
324 swtr.appView.helpview.step(2);
324 self.helpview.step(2);
325 }325 }
326 });326 });
327 },327 },
328 showHide: function() {
329 if($("#setbox:checked").length) {
330 $('.annotorious-item-unfocus').css("opacity", "0.5");
328 toggleAnnoAreas: function() {
329 if($('#toggle-anno-areas').is(':checked')) {
330 $('.annotorious-item-unfocus').css('opacity', '0.5');
331 }331 }
332 else {332 else {
333 $('.annotorious-item-unfocus').css("opacity", "0");
333 $('.annotorious-item-unfocus').css('opacity', '0');
334 }334 }
335 }335 }
336 });336 });

swtr/static/js/main.js

45 'click #sweet-cancel': 'cancelSweeting',45 'click #sweet-cancel': 'cancelSweeting',
46 'click #post-sweet': 'postSweets'46 'click #post-sweet': 'postSweets'
47 },47 },
48 initialize: function() {
48 initialize: function(opts) {
49 this.template = _.template($('#sweet-template').html());49 this.template = _.template($('#sweet-template').html());
50 this.helpview = opts.helpview;
51 //this.setElement(opts.el);
50 },52 },
51 render: function() {53 render: function() {
52 $('#sweet-list').html('<h4>These are your sweet annotations!</h4>');54 $('#sweet-list').html('<h4>These are your sweet annotations!</h4>');
……
63 how: JSON.stringify(this.getHumanReadableParts(swt.get('how')))63 how: JSON.stringify(this.getHumanReadableParts(swt.get('how')))
64 }));64 }));
65 }, this);65 }, this);
66 $(this.el).fadeIn(300);
66 this.$el.fadeIn(300);
67 },67 },
68 getHumanReadableParts: function(how) {68 getHumanReadableParts: function(how) {
69 var human_readable_json = {};69 var human_readable_json = {};
……
92 this.collection.remove(notPosted);92 this.collection.remove(notPosted);
93 },93 },
94 postSweets: function() {94 postSweets: function() {
95 console.log("postSWr");
96 var appView = swtr.appView;95 var appView = swtr.appView;
97 appView.helpview.step(5);
96 this.helpview.step(5);
98 appView.$overlay.show();97 appView.$overlay.show();
99 try {98 try {
100 this.collection.post({99 this.collection.post({
101 success: function(collection, response) {100 success: function(collection, response) {
102 console.log(collection, response);101 console.log(collection, response);
103 swtr.sweets.set(collection);102 swtr.sweets.set(collection);
104 //TODO: move this to a annotation view or something
105// anno.removeAll();
106 // _.each(swtr.sweets.models, function(swt) {
107 // if(!_.has(swt.get('how'), 'editable')) {
108 // swt.get('how')['editable'] = false;
109 // //console.log(swt.get('how').text.Comment);
110 // swt.get('how').text = swtr.imgAnnoView.createPopupText(swt.get('how'));
111 // //console.log(swt.get('how'));
112 // swt.get('how').text += '\n - by ' + swt.get('who');
113 // }
114 // //console.log(swt.get('how'));
115 // anno.addAnnotation(swt.get('how'));
116 // });
117 //console.log(swtr.sweets.toJSON());
118 swtr.appView.$overlay.hide();
119 swtr.appView.helpview.step(6);
103 appView.$overlay.hide();
104 this.helpview.step(6);
120 },105 },
121 error: function(jqxhr, error, text) {106 error: function(jqxhr, error, text) {
122 console.log(jqxhr, error, text);107 console.log(jqxhr, error, text);
123 swtr.appView.$overlay.hide();
124 swtr.appView.helpview.step(10);
108 appView.$overlay.hide();
109 this.helpview.step(10);
125 }110 }
126 });111 });
127 } catch(e) {112 } catch(e) {
128 if(e.message == 'Access Token is required to sweet') {113 if(e.message == 'Access Token is required to sweet') {
129 appView.$overlay.hide();114 appView.$overlay.hide();
130 appView.helpview.step(9);
115 this.helpview.step(9);
131 }116 }
132 }117 }
133 this.cleanUp();118 this.cleanUp();
……
120 },120 },
121 cleanUp: function() {121 cleanUp: function() {
122 //console.log('cleaning up');122 //console.log('cleaning up');
123 $(this.el).hide();
123 this.$el.hide();
124 }124 }
125 });125 });
126126
……
149 // pluck uniq tags of sweets149 // pluck uniq tags of sweets
150 var tags = _.chain(this.collection.pluck('how')).pluck('tags').flatten().150 var tags = _.chain(this.collection.pluck('how')).pluck('tags').flatten().
151 uniq().value();151 uniq().value();
152
152 // render them as filter controls153 // render them as filter controls
153 _.each(tags, function(tag) {154 _.each(tags, function(tag) {
154 if(tag) {155 if(tag) {
……
217 anno.addAnnotation(swt.get('how'));217 anno.addAnnotation(swt.get('how'));
218 });218 });
219 }219 }
220 },
221 filterSweet: function(event) {
222 /*if(!event.currentTarget.checked) {
223 var results = this.collection.filter(function(model) {
224 if(model.get('who') != event.currentTarget.name)
225 return model;
226 });
227 if(results.length) {
228 _.each(results, function(result) {
229 anno.removeAnnotation(result.get('how'));
230 });
231 }
232 else { // if results is empty then remove all anno.
233 anno.removeAll();
234 }
235 }
236 else {
237 results = this.collection.filter(function(model) {
238 if(model.get('who') == event.currentTarget.name)
239 return model;
240 });
241 _.each(results, function(result) {
242 anno.addAnnotation(result.get('how'));
243 });
244
245 }
246 // if(results) {
247 // anno.removeAll();
248 // }
249 // swtr.annoView.collection = results;
250 // swtr.annoView.renderWith();*/
251 }220 }
252 });221 });
253222
254 var AppView = Backbone.View.extend({223 var AppView = Backbone.View.extend({
255 el: $('body'),224 el: $('body'),
256 events: {225 events: {
257 'click #user-input-submit': 'submitUserInput',
258 'click #sweet': 'sweet',
259 'click #sign-in': 'signIn',226 'click #sign-in': 'signIn',
260 //'mouseup .annotorious-editor-button-save': 'addnew_anno'227 //'mouseup .annotorious-editor-button-save': 'addnew_anno'
261 },228 },
……
230 // initialize components230 // initialize components
231 this.source = 'none';231 this.source = 'none';
232 //this.helpview = new HelpView();232 //this.helpview = new HelpView();
233 this.sweetsview = new SweetsView({collection: swtr.sweets});
234233
235 // cache jquery selected elements which are used frequently234 // cache jquery selected elements which are used frequently
236 this.$overlay = $('#app-overlay');235 this.$overlay = $('#app-overlay');
237 this.$img = $('#annotatable-img');
238236
239 //this.helpview.step(1);237 //this.helpview.step(1);
240 // initialize the oauth stuff238 // initialize the oauth stuff
……
243 scopes: 'email,sweet'243 scopes: 'email,sweet'
244 });244 });
245 },245 },
246 signIn: function(event) {
247 event.preventDefault();
248 if(swtr.who === 'Guest') {
249 this.oauth.authorize();
250 }
251 return false;
252 },
253 userLoggedIn: function(username) {
254 swtr.who = username;
255 var text = 'Signed in as <b><u>' + swtr.who + '</u></b>';
256 $('#signinview').html(text);
257 },
258 userLoggedOut: function() {
259 swtr.who = 'Guest';
260 $('#signinview').html('Logged out');
261 }
262 });
263
264 var PlayAreaView = Backbone.View.extend({
265 id: '#play-page-container',
266 events: {
267 'click #user-input-submit': 'submitUserInput',
268 'click #sweet': 'sweet'
269 },
270 initialize: function() {
271 this.template = _.template($('#play-page-template').html());
272 this.helpview = new HelpView();
273 this.render();
274 this.sweetsview = new SweetsView({
275 el: $('#sweet-list-wrapper'),
276 collection: swtr.sweets,
277 helpview: this.helpview
278 });
279 this.$img = $('#annotatable-img');
280 this.helpview.step(1);
281 },
282 render: function() {
283 this.$el.html(this.template());
284 $('#play-page').html(this.$el);
285 },
246 submitUserInput: function(event) {286 submitUserInput: function(event) {
247 event.preventDefault();287 event.preventDefault();
248 var input = $('#user-input').val();288 var input = $('#user-input').val();
249 if(this.source === 'ocd') {
250 this.loadOCDSearch(input);
251 }
252 else if (this.source === 'none') {
253 this.loadURL(input);
254 }
289 this.loadURL(input);
255 },290 },
291 getSweets: function() {
292 console.log('getSweets');
293 var annos = _.filter(anno.getAnnotations(), function(anno) {
294 return (!_.has(anno, 'editable') || anno.editable === true);
295 });
296
297 _.each(annos, function(anno) {
298 swtr.sweets.add({
299 who: swtr.who,
300 where: anno.src,
301 // remove the text field; we don't want to store that in the sweets
302 how: _.omit(anno, 'text')
303 });
304 });
305 },
306 showSweets: function() {
307 console.log('showSweets');
308 this.sweetsview.render();
309 },
310 sweet: function() {
311 console.log('sweeting');
312 this.getSweets();
313 this.showSweets();
314 return false;
315 },
256 // load a URL for annotation (can be of image or html resource for now)316 // load a URL for annotation (can be of image or html resource for now)
257 loadURL: function(url, type) {317 loadURL: function(url, type) {
258 //console.log('loadURL()');318 //console.log('loadURL()');
259 if(this.source !== 'ocd') {
260 $('#ocd-results').hide();
261 }
262 $('#img-annotation-wrapper').show();
263 if(!url || !url.match(/http/)) {319 if(!url || !url.match(/http/)) {
264 this.helpview.step(13);320 this.helpview.step(13);
265 return false;321 return false;
266 }322 }
267 // if type is given explicitly; we load it as such.323 // if type is given explicitly; we load it as such.
268 if(type === 'image') {324 if(type === 'image') {
269 if(swtr.imgAnnoView) {
270 swtr.imgAnnoView.setImage(url);
271 }
272 else {
273 swtr.imgAnnoView = new swtr.ImgAnnoView({
274 collection:swtr.sweets,
275 img: this.$img[0],
276 $img: this.$img,
277 url: url
278 });
279 }
325 this.initImageAnno(url);
280 return false;326 return false;
281 }327 }
282 // else try to find what resource is the URL..328 // else try to find what resource is the URL..
283 // if url has an image extension then load the image annotation329 // if url has an image extension then load the image annotation
284 if(url.match(/.jpg|.jpeg|.png|.gif|.bmp|.svg/)) {330 if(url.match(/.jpg|.jpeg|.png|.gif|.bmp|.svg/)) {
285 if(swtr.imgAnnoView) {
286 swtr.imgAnnoView.setImage(url);
287 }
288 else {
289 swtr.imgAnnoView = new swtr.ImgAnnoView({collection:swtr.sweets,
290 img: this.$img[0],
291 $img: this.$img,
292 url: url});
293 }
294
331 this.initImageAnno(url);
295 return false;332 return false;
296 }333 }
297 // else check with our /media-type endpoint to see what type of resource334 // else check with our /media-type endpoint to see what type of resource
298 // it is335 // it is
299 else {336 else {
300 this.helpview.step(12);337 this.helpview.step(12);
301 this.$overlay.show();
338 swtr.appView.$overlay.show();
302 var self = this;339 var self = this;
303 $.get('/media-type', {where: url}, function(response) {340 $.get('/media-type', {where: url}, function(response) {
304 //console.log(response);341 //console.log(response);
305 self.$overlay.hide();
342 self.appView.$overlay.hide();
306 if(response.type === 'image') {343 if(response.type === 'image') {
307 if(swtr.imgAnnoView) {
308 swtr.imgAnnoView.setImage(url);
309 }
310 else {
311 swtr.imgAnnoView = new swtr.ImgAnnoView({collection:swtr.sweets,
312 img: self.$img[0],
313 $img: self.$img,
314 url: url});
315 }
344 this.initImageAnno(url);
316 }345 }
317 else {346 else {
318 window.location.href = '/annotate?where=' + url;347 window.location.href = '/annotate?where=' + url;
……
349 });349 });
350 }350 }
351 },351 },
352 getSweets: function() {
353 var annos = _.filter(anno.getAnnotations(), function(anno) {
354 return (!_.has(anno, 'editable') || anno.editable === true);
355 });
356
357 _.each(annos, function(anno) {
358 swtr.sweets.add({
359 who: swtr.who,
360 where: anno.src,
361 // remove the text field; we don't want to store that in the sweets
362 how: _.omit(anno, 'text')
352 initImageAnno: function(url) {
353 if(swtr.imgAnnoView) {
354 swtr.imgAnnoView.setImage(url);
355 }
356 else {
357 swtr.imgAnnoView = new swtr.ImgAnnoView({
358 collection: swtr.sweets,
359 img: this.$img[0],
360 $img: this.$img,
361 url: url,
362 helpview: this.helpview
363 });363 });
364 });
364 }
365 },365 },
366 showSweets: function() {
367 this.sweetsview.render();
368 },
369 sweet: function() {
370 this.getSweets();
371 this.showSweets();
372 return false;
373 },
374 signIn: function(event) {
375 event.preventDefault();
376 this.oauth.authorize();
377 return false;
378 },
379 userLoggedIn: function(username) {
380 swtr.who = username;
381 var text = 'Signed in as <b><u>' + swtr.who + '</u></b>';
382 $('#signinview').html(text);
383 },
384 userLoggedOut: function() {
385 swtr.who = 'Guest';
386 $('#signinview').html('Logged out');
366 destroy: function() {
367 this.helpview.remove();
368 this.remove();
387 }369 }
388 });370 });
389371
390
391 var PlayAreaView = Backbone.View.extend({
392 el: $('#play-page'),
393 events: {
394 },
395 initialize: function() {
396 this.render();
397 },
398 render: function() {
399 }
400 });
401
402 var SearchView = Backbone.View.extend({372 var SearchView = Backbone.View.extend({
403 id: 'search-page-container',373 id: 'search-page-container',
404 events: {374 events: {
……
516 //console.log('onImgClick');516 //console.log('onImgClick');
517 event.preventDefault();517 event.preventDefault();
518 // TODO: init the image anno518 // TODO: init the image anno
519 this.highlightImg(event);
519 this.drawCoverOnImg(event);
520 //swtr.appView.loadURL(url, 'image');520 //swtr.appView.loadURL(url, 'image');
521 return false;521 return false;
522 },522 },
523 highlightImg: function(event) {
523 drawCoverOnImg: function(event) {
524 //console.log('highlightImg');524 //console.log('highlightImg');
525 var elem = $(event.currentTarget).parent().parent();525 var elem = $(event.currentTarget).parent().parent();
526 // if .ocd-item-cover exists return526 // if .ocd-item-cover exists return
527 if(elem.find('.ocd-item-cover').length) {527 if(elem.find('.ocd-item-cover').length) {
528 $(elem.find('.ocd-item-cover')[0]).slideDown();
528 return;529 return;
529 }530 }
530 //console.log(elem);531 //console.log(elem);
531 elem.prepend(this.cover_template());532 elem.prepend(this.cover_template());
532 $(elem.find('.ocd-item-cover')[0]).slideDown('slow');
533 $(elem.find('.ocd-item-cover')[0]).slideDown();
533 },534 },
534 onCoverCloseClick: function(event) {535 onCoverCloseClick: function(event) {
535 var elem = $(event.currentTarget).parent();536 var elem = $(event.currentTarget).parent();
536 elem.slideUp('slow');
537 elem.remove();
537 elem.slideUp();
538 },538 },
539 onMarkClick: function(event) {539 onMarkClick: function(event) {
540 var url = $(event.currentTarget).parent().parent().540 var url = $(event.currentTarget).parent().parent().
541 find('img').attr('src');541 find('img').attr('src');
542 //TODO: load the image in the play area/workbench
542 console.log('load image anno', url);543 console.log('load image anno', url);
543 },544 },
544 search: function(data, cb) {545 search: function(data, cb) {
……
671 initialize: function() {671 initialize: function() {
672 var self = this;672 var self = this;
673 swtr.LDs = new LDSwts();673 swtr.LDs = new LDSwts();
674 swtr.LDs.getAll({what: 'img-anno',
675 success: function(data) {
676 swtr.LDs.add(data);
677 if(!swtr.tagCloudView) {
678 swtr.tagCloudView = new TagCloudView({collection: swtr.LDs});
679 }
680 }});
674 swtr.LDs.getAll({
675 what: 'img-anno',
676 success: function(data) {
677 swtr.LDs.add(data);
678 if(!swtr.tagCloudView) {
679 swtr.tagCloudView = new TagCloudView({collection: swtr.LDs});
680 }
681 }
682 });
681 },683 },
682 destroy: function() {684 destroy: function() {
683 this.remove();685 this.remove();
684
685 }686 }
686 });687 });
687688
……
696 this.user_tag_el = $('#user-tag-cloud');696 this.user_tag_el = $('#user-tag-cloud');
697 this.tags_tag_el = $('#tags-tag-cloud');697 this.tags_tag_el = $('#tags-tag-cloud');
698 this.render();698 this.render();
699
700 },699 },
701 userTagClicked: function(e) {700 userTagClicked: function(e) {
702 console.log(e);701 console.log(e);
……
719 .fontSize(function(d) { return d.size; })719 .fontSize(function(d) { return d.size; })
720 .on("end", this.draw)720 .on("end", this.draw)
721 .start();721 .start();
722
723 },722 },
724 draw: function (words) {723 draw: function (words) {
725 var fill = d3.scale.category20();724 var fill = d3.scale.category20();
……
735 .attr("transform", function(d) {735 .attr("transform", function(d) {
736 return "translate(" + [d.x, d.y] + ")";})736 return "translate(" + [d.x, d.y] + ")";})
737 .text(function(d) { return d.text; });737 .text(function(d) { return d.text; });
738
739 },738 },
740 renderTagsTagCloud: function() {739 renderTagsTagCloud: function() {
741 var sweetsWithTags = swtr.LDs.filter(function(k) {740 var sweetsWithTags = swtr.LDs.filter(function(k) {
……
756 .fontSize(function(d) { return d.size; })756 .fontSize(function(d) { return d.size; })
757 .on("end", this.drawTags)757 .on("end", this.drawTags)
758 .start();758 .start();
759
760 },759 },
761 drawTags: function(words) {760 drawTags: function(words) {
762 var fill = d3.scale.category20();761 var fill = d3.scale.category20();
……
774 })774 })
775 .text(function(d) {console.log(d); return d.text; });775 .text(function(d) {console.log(d); return d.text; });
776 }776 }
777
778 });777 });
779778
780 var AppRouter = Backbone.Router.extend({779 var AppRouter = Backbone.Router.extend({
……
785 },785 },
786 components: {786 components: {
787 'linked-data': LDView,787 'linked-data': LDView,
788 'play': DummyView,
788 'play': PlayAreaView,
789 'search': SearchView789 'search': SearchView
790 },790 },
791 home: function() {791 home: function() {

swtr/templates/index.html

86 </footer>86 </footer>
87 </div>87 </div>
8888
89 <div id="play-page" class="page">
90 <!-- second row: image URL input box and Load button -->
91 <div class="row" id="user-input-row">
92 <div class="col-md-8">
93 <form class="form-inline" role="form">
94 <div class="form-group col-md-11">
95 <label class="sr-only" for="user-input">Enter URL of an image or web page</label>
96 <input class="form-control" type="text"
97 placeholder="Enter URL of an image or web page" id="user-input">
98 </div>
99 <button type="submit" class="btn btn-info" id="user-input-submit">Load</button>
100 </form>
101 </div>
102 <div class="col-md-4">
103 </div>
104 </div> <!-- end second row -->
105 <!-- third row - control panel? -->
106 <div class="row" id="control-panel">
107 <div class="col-md-8">
108 <form class="form-inline" role="form">
109 <div class="form-group">
110 <button class="btn btn-default" id="sweet">Sweet</button>
111 </div>
112 </form>
113 </div>
114 <div class="col-md-4"></div>
115 </div> <!-- end third row -- >
116 <!-- fourth row: the image annotation window -->
117 <div class="row">
118 <div id="img-annotation-wrapper" class="col-md-12 col-xs-12 col-lg-12 col-sm-12 well">
119 <div id="img-anno-controls">
120 <form class="form-inline" role="form">
121 <div class="form-group">
122 <label class="checkbox-inline">
123 <input type="checkbox" id="setbox"> Show annotated areas
124 </label>
125 </div>
126 </form>
127 </div>
128 {% if url %}
129 <img src="{{ url }}" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
130 {% else %}
131 <img src="" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
132 {% endif %}
133 </div>
134 </div> <!-- end fourth row -->
89 <div id="play-page" class="page"></div>
13590
136 <div id="sweet-list-wrapper">
137 <ul id="sweet-list"></ul>
138 <div class="btn-grp">
139 <button class="btn btn-default" id="sweet-cancel">Cancel</button>
140 <button class="btn btn-primary" id="post-sweet">Sweet</button>
141 </div>
142 </div>
91 <!-- the search page -->
92 <div id="search-page" class="page"></div>
14393
144 </div>
145 <div id="linked-data-page" class="page">94 <div id="linked-data-page" class="page">
146 <div id="tag-cloud">95 <div id="tag-cloud">
147 <div id="tags-tag-cloud"></div>96 <div id="tags-tag-cloud"></div>
148 <div id="user-tag-cloud"></div>97 <div id="user-tag-cloud"></div>
149 </div>98 </div>
150 </div>99 </div>
151 <!-- the search page -->
152 <div id="search-page" class="page"></div>
153100
154 <div id="linked-data-page" class="page"></div>
155
156 </div>101 </div>
157 <div id="app-overlay"></div>102 <div id="app-overlay"></div>
158103
……
170 <li class="custom-popup-line"><span>Related Links: </span><%= Links %></li>170 <li class="custom-popup-line"><span>Related Links: </span><%= Links %></li>
171 </ul>171 </ul>
172 </span>172 </span>
173 </script>
174 <script type="text/template" id="play-page-template">
175 <!-- second row: image URL input box and Load button -->
176 <div class="row" id="user-input-row">
177 <div class="col-md-8">
178 <form class="form-inline" role="form">
179 <div class="form-group col-md-11">
180 <label class="sr-only" for="user-input">Enter URL of an image or web page</label>
181 <input class="form-control" type="text"
182 placeholder="Enter URL of an image or web page" id="user-input">
183 </div>
184 <button type="submit" class="btn btn-info" id="user-input-submit">Load</button>
185 </form>
186 </div>
187 <div class="col-md-4">
188 </div>
189 </div> <!-- end second row -->
190 <!-- third row - control panel? -->
191 <div class="row" id="control-panel">
192 <div class="col-md-8">
193 <form class="form-inline" role="form">
194 <div class="form-group">
195 <button class="btn btn-default" id="sweet">Sweet</button>
196 </div>
197 </form>
198 </div>
199 <div class="col-md-4"></div>
200 </div> <!-- end third row -- >
201 <!-- fourth row: the image annotation window -->
202 <div class="row">
203 <div id="img-annotation-wrapper" class="col-md-12 col-xs-12 col-lg-12 col-sm-12 well">
204 <div id="img-anno-controls">
205 <form class="form-inline" role="form">
206 <div class="form-group">
207 <label class="checkbox-inline">
208 <input type="checkbox" id="toggle-anno-areas"> Show annotated areas
209 </label>
210 </div>
211 </form>
212 </div>
213 {% if url %}
214 <img src="{{ url }}" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
215 {% else %}
216 <img src="" id="annotatable-img" class="img-responsive" alt="Annotation Workbench">
217 {% endif %}
218 </div>
219 </div> <!-- end fourth row -->
220
221 <div id="sweet-list-wrapper">
222 <ul id="sweet-list"></ul>
223 <div class="btn-grp">
224 <button class="btn btn-default" id="sweet-cancel">Cancel</button>
225 <button class="btn btn-primary" id="post-sweet">Sweet</button>
226 </div>
227 </div>
173 </script>228 </script>
174 <script type="text/template" id="search-page-template">229 <script type="text/template" id="search-page-template">
175 <div class="row" id="search-user-input-row">230 <div class="row" id="search-user-input-row">