From cecc2b1026dd2d89a5c0df9faeb071627a7f2fca Mon Sep 17 00:00:00 2001 From: Bhanu Date: Wed, 3 Sep 2014 16:04:10 +0530 Subject: [PATCH] Annotorious editor UI changed --- swtr/static/js/img_swtr.js | 55 ++++++++++++++++++++-------- swtr/static/js/lib/custom-fields-plugin.js | 2 +- swtr/templates/index.html | 15 +++++++- 3 files changed, 54 insertions(+), 18 deletions(-) diff --git a/swtr/static/js/img_swtr.js b/swtr/static/js/img_swtr.js index 62c733a..341e97a 100644 --- a/swtr/static/js/img_swtr.js +++ b/swtr/static/js/img_swtr.js @@ -104,7 +104,8 @@ swtr.ImgAnnoView = Backbone.View.extend({ el: $('#img-annotation-wrapper'), events: { - 'change #custom-dropdown': 'getFormValue', + 'keydown .annotorious-editor-button-save': 'getFormValue', + 'mousedown .annotorious-editor-button-save': 'getFormValue', 'click #toggle-anno-areas': 'toggleAnnoAreas' }, initialize: function(options) { @@ -155,8 +156,9 @@ updateNewAnno: function(annotation) { console.log('updateNewAnno()'); var self = swtr.imgAnnoView; + console.log(annotation.text); // get the final value/input from the editor - var selected = $('select option:selected').text().toLowerCase(); + /* var selected = $('select option:selected').text().toLowerCase(); var text_input = $('.annotorious-editor-text').val(); if( selected === "tags") { self.new_anno[selected] = $('#tags-input').tags().getTags(); @@ -164,12 +166,13 @@ else { // update it in our annotation object self.new_anno[selected] = text_input; - } + }*/ // prepare the text field + self.new_anno.comment = annotation.text; self.new_anno.text = self.createPopupText(self.new_anno); // update the annotorious annotation object with the new values if(self.new_anno.comment) { - annotation.comment = self.new_anno.comment; + annotation.comment = annotation.text; } if(self.new_anno.link) { annotation.link = self.new_anno.link; @@ -189,16 +192,41 @@ console.log('hideOriginalEditor()'); var self = swtr.imgAnnoView; self.new_anno = {}; + $('#tags-input').tags({ + tagSize: 'md', + promptText: 'Type word (and press enter)..', + caseInsensitive: true, + suggestions: self.tags_suggestions + }); self.getSuggestionsForTags(); //$('.annotorious-editor-text').hide(); //$('.annotorious-editor').css('width', '100%'); }, getFormValue: function(event) { console.log('getFormValue()'); - var self = swtr.imgAnnoView; // show the editor field to input text - var $anno_form = $('.annotorious-editor-text'); + $('.annotorious-editor-text').each(function(index, element) { + if( index === 0) { + self.new_anno['comment'] = $(element).text(); + console.log(index, $(element).text() ); + } + else if ( index === 1) { + self.new_anno['title'] = $(element).val(); + console.log(index, $(element).val() ); + } + else if (index === 2) { + self.new_anno['link'] = $(element).val(); + console.log(index, $(element).val() ); + } + else { + self.new_anno['tags'] = $(element).tags().getTags(); + console.log(index, $('#tags-input').tags().getTags() ); + } + + }); + // show the editor field to input text + /* var $anno_form = $('.annotorious-editor-text'); //$anno_form.slideDown(); // get the previous item entered var $selected = $('select option:selected'); @@ -217,23 +245,18 @@ } // if the current selected is tags - if($selected.text() === 'Tags') { $('#tags-input').tags({ tagSize: 'md', promptText: 'Type word (and press enter)..', caseInsensitive: true, suggestions: self.tags_suggestions }); - $('#tags-input').show(); - $('.annotorious-editor-text').hide(); - } - else { - $('#tags-input').hide(); - $('.annotorious-editor-text').show(); - } - $anno_form.val(''); + + + /* $anno_form.val(''); $anno_form.attr('placeholder', 'Add ' + $selected.text()); - console.log(self.new_anno); + console.log(self.new_anno);*/ + }, createPopupText: function(annotation) { // title diff --git a/swtr/static/js/lib/custom-fields-plugin.js b/swtr/static/js/lib/custom-fields-plugin.js index b440c90..7b398bb 100644 --- a/swtr/static/js/lib/custom-fields-plugin.js +++ b/swtr/static/js/lib/custom-fields-plugin.js @@ -1,7 +1,7 @@ annotorious.plugin.CustomFields = function(opt_config_options) { annotorious.plugin.CustomFields.prototype.onInitAnnotator = function(annotorious) { - var dropDownTemplate= _.template($('#dropdown-template').html()); // creates the HTML element for dropdown - from template in index.html + var dropDownTemplate= _.template($('#customEdit-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 diff --git a/swtr/templates/index.html b/swtr/templates/index.html index 60f3db4..680d118 100644 --- a/swtr/templates/index.html +++ b/swtr/templates/index.html @@ -234,7 +234,7 @@

<%= how %>

-