From fbfc2aff5372332dd0684ad7d9cfb07e89e7c8d0 Mon Sep 17 00:00:00 2001 From: Bhanu Date: Wed, 4 Jun 2014 18:46:16 +0530 Subject: [PATCH] Custome options - Popup display, editor style changes --- swtr/static/css/annotorious.css | 16 ++++- swtr/static/js/lib/custom-fields-plugin.js | 26 ++++---- swtr/static/js/swtmaker.js | 90 ++++++++++++++++------------ swtr/templates/index.html | 25 ++++++-- 4 files changed, 98 insertions(+), 59 deletions(-) diff --git a/swtr/static/css/annotorious.css b/swtr/static/css/annotorious.css index 7fd0c71..785811d 100644 --- a/swtr/static/css/annotorious.css +++ b/swtr/static/css/annotorious.css @@ -1,5 +1,17 @@ /** Global item styles **/ +.custom-style-popup { + list-style: none; + padding-left: 0px; +} + +.custom-popup-line { + border-top: 1px solid #ccc; + line-height: 200%; + font-size:14px; + font-family: Arial, Verdana, Sans; + color: #000; +} .annotorious-opacity-fade { -moz-transition-property: opacity; -moz-transition-duration: 0.5s; @@ -157,7 +169,7 @@ } .annotorious-popup-field { - border-top:1px solid #ccc; + /*border-top:1px solid #ccc;*/ margin:6px 0px 0px 0px; padding-top:2px; } @@ -186,7 +198,7 @@ border-color:#ccc; line-height: normal; background-color:#fff; - width:240px; + width:100%; height:50px; outline:none; font-family:Verdana, Arial; diff --git a/swtr/static/js/lib/custom-fields-plugin.js b/swtr/static/js/lib/custom-fields-plugin.js index c232391..ccc090c 100644 --- a/swtr/static/js/lib/custom-fields-plugin.js +++ b/swtr/static/js/lib/custom-fields-plugin.js @@ -1,20 +1,18 @@ annotorious.plugin.CustomFields = function(opt_config_options) { - annotorious.plugin.CustomFields.prototype.onInitAnnotator = function(annotorious) { - var textTemplate= _.template($('#button-template').html()); - annotorious.editor.addField(textTemplate); - 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; - + var dropDownTemplate= _.template($('#dropdown-template').html()); // creates the HTML element for dropdown - from template in index.html + annotorious.editor.addField(dropDownTemplate); // add dropdown to editor UI widget + annotorious.popup.addField( function(annotation){ + var popupTemplate = _.template($('#popup-template').html()); //created a popup template - yet to find how to bind it to newanno + if(annotation.text1 != undefined) { + //console.log(annotation.text1.Comment); annotation.text is Obj - can + //access each element Comment, tags, links.. + return popupTemplate(annotation.text1); + } + else { + return ''; + } }); } } diff --git a/swtr/static/js/swtmaker.js b/swtr/static/js/swtmaker.js index f259b8c..4659a58 100644 --- a/swtr/static/js/swtmaker.js +++ b/swtr/static/js/swtmaker.js @@ -151,7 +151,8 @@ _.each(swtr.sweets.models, function(swt) { if(!_.has(swt.get('how'), 'editable')) { swt.get('how')['editable'] = false; - swt.get('how').text += '\n - by ' + swt.get('who'); + console.log(swt.get('how').text.Comment); + swt.get('how').text += '\n - by ' + swt.get('who'); } console.log(swt.get('how')); anno.addAnnotation(swt.get('how')); @@ -181,22 +182,22 @@ 'click #sweet': 'sweet', 'click #signin-credentials': 'getSignInCredentials', 'click #setbox': 'showHide', - 'change .form-control': 'button_custom', - 'mouseup .annotorious-editor-button-save': 'add_new_anno' + 'change #custom-dropdown ': 'getFormValue', + 'mouseup .annotorious-editor-button-save': 'addNewAnno' }, 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.addPlugin('CustomFields', this.showSwtHelp); - anno.addHandler('onSelectionCompleted', this.setShape); + anno.addPlugin('CustomFields', this.showSwtHelp); + anno.addHandler('onSelectionCompleted', this.getShape); this.$overlay = $('#app-overlay'); this.$img = $('#annotatable-img'); this.imgURL = this.$img.attr('src'); @@ -239,9 +240,15 @@ swtr.sweets.add(data); _.each(data, function(swt) { swt.how['editable'] = false; - swt.how.text += '\n - by ' + swt.who; + if(typeof swt.how.text === 'object') { + swt.how.text1 = swt.how.text; + swt.how.text = '\n - by ' + swt.who; + } else { + swt.how.text1 = undefined; + 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); @@ -270,7 +277,7 @@ swtr.sweets.add({ who: swtr.who, where: anno.src, - how: newanno //mysterious link to create the sweet with new anno attributes, tags, links, labels + how: anno //mysterious link to create the sweet with new anno attributes, tags, links, labels }); }); }, @@ -297,48 +304,53 @@ //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 = []; + getShape: function(annotation) { + $('.annotorious-editor-text').slideUp(); + $('.annotorious-editor').css("width", "100%"); + window.annotation=annotation; // to use annotation.shape in newanno + annotation.text = {}; // creating new text object - to contain comments, labels, links and tags }, //to create new annotation object - inputStore: function(opt) { - var temp = opt; + annoTemplate: function(opt) { + var annoText = 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}; - + this.newanno = {'src':src, 'text':annoText, '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}; }, //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); + addNewAnno: function(event){ + var $selected = $('select option:selected').text(); + var textInput = $('.annotorious-editor textarea').val(); + this.newanno.text[$selected] = textInput; var newanno = this.newanno; - window.newanno = newanno; + anno.addAnnotation(newanno); }, + /*addNewAnno: function(event){ // function for form input UI + var tags = $('#tags').val(); + var label = $('#label').val(); + var link = $('#links').val(); + var text = $('.annotorious-editor textarea').val(); + var finalInput = ' Label: '+label+' Comment: '+text+' Tags: '+tags+' Links: '+link; + //this.annoTemplate(label, text, tags, link); + // this.annoTemplate(label, text, tags, link); + var src = $('#img-url-input').val(); + var newanno = {'src':src, 'text':finalInput, '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}; + console.log(newanno); + anno.addAnnotation(newanno); + },*/ //dropdown event - button_custom: function(event) { - $('.annotorious-editor-text').show(); + getFormValue: function(event) { + var annoForm = $('.annotorious-editor-text'); + annoForm.slideDown(); 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); + var textInput = annoForm.val(); + if(textInput) { + annotation.text[$selected.prev().text()] = textInput; } - this.inputStore(annotation.text); - $('.annotorious-editor-text:first').val(""); - $('.annotorious-editor-text:first').attr('placeholder', 'Add a '+$selected.text()); + this.annoTemplate(annotation.text); + annoForm.val(''); + annoForm.attr('placeholder', 'Add '+$selected.text()); }, diff --git a/swtr/templates/index.html b/swtr/templates/index.html index 4cca97e..a400bc9 100644 --- a/swtr/templates/index.html +++ b/swtr/templates/index.html @@ -93,17 +93,34 @@ - + -- 1.7.10.4