From 06f9ca01356625700918328bda88c5ee01e2f974 Mon Sep 17 00:00:00 2001 From: Bhanu Date: Fri, 23 May 2014 13:50:11 +0530 Subject: [PATCH] Editor UI - with cutom oprions - label, tags, links --- swtr/static/js/lib/custom-fields-plugin.js | 56 +++++-------------- swtr/static/js/swtmaker.js | 83 ++++++++++++++++++---------- swtr/templates/index.html | 20 +++---- 3 files changed, 78 insertions(+), 81 deletions(-) diff --git a/swtr/static/js/lib/custom-fields-plugin.js b/swtr/static/js/lib/custom-fields-plugin.js index 3630b81..c232391 100644 --- a/swtr/static/js/lib/custom-fields-plugin.js +++ b/swtr/static/js/lib/custom-fields-plugin.js @@ -1,50 +1,20 @@ -/** - * A plugin that adds 'Semantic Tagging' functionality to Annotorious. - * While typing an annotation in the editor, the text is sent to the plugin's - * server counterpart for Named Entity Recognition (NER). Recognized entities - * are suggested as possible tags, and the user can add them to the annotation - * by clicking on them. Tags are Semantic Tags in the sense that they are not - * just strings, but (underneath the hood) include a URI pointing to a concept - * in a specific 'knowledge context', hosted at the server. - * - * The config options for the plugin require a field named 'endpoint_url', - * holding the URL of the server endpoint to use as the NER/tag-suggestion - * service. - * - * @param {Object=} opt_config_options the config options - */ annotorious.plugin.CustomFields = function(opt_config_options) { - //Container for custom fields - - - /** @private **/ - //this._tags = []; - // this._link =[]; - // this._label= []; - //annotorious.Annotation(tags); - - - /** @private **/ -/** this._ENDPOINT_URI = opt_config_options['endpoint_url']; - - if (this._ENDPOINT_URI[this._ENDPOINT_URI.length - 1] != '/') - this._ENDPOINT_URI += '/'; - - this._ENDPOINT_URI += - 'services/wikify?minProbability=0.1&disambiguationPolicy=loose&responseFormat=json&source='; **/ -} annotorious.plugin.CustomFields.prototype.onInitAnnotator = function(annotorious) { - var container = document.createElement('div'); - container.className = "btn-group"; - console.log (container); - var textTemplate= _.template($('#button-template').html()); - console.log($(textTemplate)); annotorious.editor.addField(textTemplate); - - //this._EditField(annotorious); - //this._popupField(annotator); - //this._extendEditor(annotator); + var popupTemplate = _.template($('#popup-template').html()); + annotorious.popup.addField(function(annotation){ + var container = document.createElement('div'); + var el = document.createElement('span'); + el.href = '#'; + el.className = 'annotorious-popup-text'; + console.log(annotation.text); + el.innerHTML= annotation.text; + container.appendChild(el); + return container; + + }); + } } diff --git a/swtr/static/js/swtmaker.js b/swtr/static/js/swtmaker.js index a6c4e2d..ad719e1 100644 --- a/swtr/static/js/swtmaker.js +++ b/swtr/static/js/swtmaker.js @@ -123,7 +123,7 @@ $('#sweet-list').append(this.template({ who: swt.get('who'), what: swt.get('what'), - where: swt.get('where'), + where: swt.get('where'), how: JSON.stringify(swt.get('how').text) })); }, this); @@ -154,7 +154,7 @@ swt.get('how').text += '\n - by ' + swt.get('who'); } console.log(swt.get('how')); - anno.addAnnotation(swt.get('how')); + anno.addAnnotation(newanno); }); //console.log(swtr.sweets.toJSON()); swtr.appView.$overlay.hide(); @@ -180,18 +180,20 @@ 'click #sweet': 'sweet', 'click #signin-credentials': 'getSignInCredentials', 'click #setbox': 'showHide', - 'click #comment, #label, #tags, #links ': 'button_custom' + 'change .form-control': 'button_custom', + 'mouseup .annotorious-editor-button-save': 'add_new_anno' }, initialize: function() { //var allElements = $('body *'); this.helpview = new HelpView(); this.sweetsview = new SweetsView({collection: swtr.sweets}); anno.addHandler('onAnnotationCreated', this.showSwtHelp); - anno.addHandler('onAnnotationUpdated', this.showSwtHelp); + anno.addHandler('onannotationupdated', this.showswthelp); anno.addHandler('onSelectionStarted', function(annotation) { anno.hideAnnotations();}); anno.addHandler('onSelectionCompleted', function(annotation) { - anno.showAnnotations(); }); + anno.showAnnotations(); + }); anno.addPlugin('CustomFields', this.showSwtHelp); anno.addHandler('onSelectionCompleted', this.setShape); this.$overlay = $('#app-overlay'); @@ -205,9 +207,6 @@ this.helpview.step(1); } }, - setShape: function(annotation) { - window.annotation=annotation; - }, setImage: function() { anno.reset(); @@ -241,6 +240,7 @@ swt.how['editable'] = false; swt.how.text += '\n - by ' + swt.who; anno.addAnnotation(swt.how); + console.log('swt.how = ', swt.how); }); swtr.appView.$overlay.hide(); swtr.appView.helpview.step(2); @@ -264,11 +264,12 @@ 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, - how: anno + how: newanno //mysterious link to create the sweet with new anno attributes, tags, links, labels }); }); }, @@ -291,30 +292,56 @@ } }, +//annotorious editor widget - custom with options +//to obtain shapes object, declaring annotation in global scope - TODO refactor +//code to find better way to do this. + + setShape: function(annotation) { + $('.annotorious-editor-text').hide(); + $('.annotorious-editor').css("width", "100%"); + window.annotation=annotation; + annotation.text = []; + }, +//to create new annotation object + inputStore: function(opt) { + var temp = opt; + var src = $('#img-url-input').val(); + this.newanno = {'src':src, 'text':temp, 'shapes': [{'type':annotation.shape.type, 'geometry':{'x':annotation.shape.geometry.x, 'y':annotation.shape.geometry.y, 'width':annotation.shape.geometry.width, 'height':annotation.shape.geometry.height}},], 'context':window.location.origin}; + + }, - /*build_txt: function(opt_array) { - var textarray = opt_array; - var newobj = [textarray]; - console.log(newarray); +//to add the final annotation - },*/ +//save button - event bind + add_new_anno: function(event){ + var $selected = $('select option:selected'); + var tempinput = $selected.text()+': '+$('.annotorious-editor textarea').val(); + this.newanno.text.push(tempinput); + var newinput = this.newanno.text.toString(); + this.newanno.text = newinput; + console.log('this.newanno = ', this.newanno); + //this.to_Add(this.newanno); + var newanno = this.newanno; + window.newanno = newanno; + }, +//dropdown event button_custom: function(event) { - var src = $('#img-url-input').val(); - var newanno= {}; - var tempinput = $('.annotorious-editor-text:first'); - //type setting - // var type = $(tempinput).attr("placeholder").slice(5); - //console.log(type); - newanno.text = tempinput.val(); - newanno.src = src; - $(tempinput).val(""); - var placeHolder = "Add "+event.currentTarget.innerHTML; - $(tempinput).attr("placeholder", placeHolder); - newanno.shapes = [{'type':annotation.shape.type, 'geometry':{'x':annotation.shape.geometry.x, 'y':annotation.shape.geometry.y, 'width':annotation.shape.geometry.width, 'height':annotation.shape.geometry.height}}]; - anno.addAnnotation(newanno); - //swtr.appView.ShowSwtHelp; + $('.annotorious-editor-text').show(); + var $selected = $('select option:selected'); + var tempinput = $selected.prev().text()+ ': '+$('.annotorious-editor-text').val(); + if(tempinput === "Choose an Option: "){ + console.log(''); + } + else { + annotation.text.push(tempinput); + } + this.inputStore(annotation.text); + $('.annotorious-editor-text:first').val(""); + $('.annotorious-editor-text:first').attr('placeholder', 'Add a '+$selected.text()); }, + + getSignInCredentials: function(event) { event.preventDefault(); if(swtr.who === 'Guest' && !$('#username').length) { diff --git a/swtr/templates/index.html b/swtr/templates/index.html index 137e4e9..5a364e2 100644 --- a/swtr/templates/index.html +++ b/swtr/templates/index.html @@ -89,16 +89,16 @@ + -- 1.7.10.4