Commit cecc2b1026dd2d89a5c0df9faeb071627a7f2fca

Annotorious editor UI changed
  • Diff rendering mode:
  • inline
  • side by side

swtr/static/js/img_swtr.js

104 swtr.ImgAnnoView = Backbone.View.extend({104 swtr.ImgAnnoView = Backbone.View.extend({
105 el: $('#img-annotation-wrapper'),105 el: $('#img-annotation-wrapper'),
106 events: {106 events: {
107 'change #custom-dropdown': 'getFormValue',
107 'keydown .annotorious-editor-button-save': 'getFormValue',
108 'mousedown .annotorious-editor-button-save': 'getFormValue',
108 'click #toggle-anno-areas': 'toggleAnnoAreas'109 'click #toggle-anno-areas': 'toggleAnnoAreas'
109 },110 },
110 initialize: function(options) {111 initialize: function(options) {
……
156 updateNewAnno: function(annotation) {156 updateNewAnno: function(annotation) {
157 console.log('updateNewAnno()');157 console.log('updateNewAnno()');
158 var self = swtr.imgAnnoView;158 var self = swtr.imgAnnoView;
159 console.log(annotation.text);
159 // get the final value/input from the editor160 // get the final value/input from the editor
160 var selected = $('select option:selected').text().toLowerCase();
161 /* var selected = $('select option:selected').text().toLowerCase();
161 var text_input = $('.annotorious-editor-text').val();162 var text_input = $('.annotorious-editor-text').val();
162 if( selected === "tags") {163 if( selected === "tags") {
163 self.new_anno[selected] = $('#tags-input').tags().getTags();164 self.new_anno[selected] = $('#tags-input').tags().getTags();
……
166 else {166 else {
167 // update it in our annotation object167 // update it in our annotation object
168 self.new_anno[selected] = text_input;168 self.new_anno[selected] = text_input;
169 }
169 }*/
170 // prepare the text field170 // prepare the text field
171 self.new_anno.comment = annotation.text;
171 self.new_anno.text = self.createPopupText(self.new_anno);172 self.new_anno.text = self.createPopupText(self.new_anno);
172 // update the annotorious annotation object with the new values173 // update the annotorious annotation object with the new values
173 if(self.new_anno.comment) {174 if(self.new_anno.comment) {
174 annotation.comment = self.new_anno.comment;
175 annotation.comment = annotation.text;
175 }176 }
176 if(self.new_anno.link) {177 if(self.new_anno.link) {
177 annotation.link = self.new_anno.link;178 annotation.link = self.new_anno.link;
……
192 console.log('hideOriginalEditor()');192 console.log('hideOriginalEditor()');
193 var self = swtr.imgAnnoView;193 var self = swtr.imgAnnoView;
194 self.new_anno = {};194 self.new_anno = {};
195 $('#tags-input').tags({
196 tagSize: 'md',
197 promptText: 'Type word (and press enter)..',
198 caseInsensitive: true,
199 suggestions: self.tags_suggestions
200 });
195 self.getSuggestionsForTags();201 self.getSuggestionsForTags();
196 //$('.annotorious-editor-text').hide();202 //$('.annotorious-editor-text').hide();
197 //$('.annotorious-editor').css('width', '100%');203 //$('.annotorious-editor').css('width', '100%');
198 },204 },
199 getFormValue: function(event) {205 getFormValue: function(event) {
200 console.log('getFormValue()');206 console.log('getFormValue()');
201
202 var self = swtr.imgAnnoView;207 var self = swtr.imgAnnoView;
203 // show the editor field to input text208 // show the editor field to input text
204 var $anno_form = $('.annotorious-editor-text');
209 $('.annotorious-editor-text').each(function(index, element) {
210 if( index === 0) {
211 self.new_anno['comment'] = $(element).text();
212 console.log(index, $(element).text() );
213 }
214 else if ( index === 1) {
215 self.new_anno['title'] = $(element).val();
216 console.log(index, $(element).val() );
217 }
218 else if (index === 2) {
219 self.new_anno['link'] = $(element).val();
220 console.log(index, $(element).val() );
221 }
222 else {
223 self.new_anno['tags'] = $(element).tags().getTags();
224 console.log(index, $('#tags-input').tags().getTags() );
225 }
226
227 });
228 // show the editor field to input text
229 /* var $anno_form = $('.annotorious-editor-text');
205 //$anno_form.slideDown();230 //$anno_form.slideDown();
206 // get the previous item entered231 // get the previous item entered
207 var $selected = $('select option:selected');232 var $selected = $('select option:selected');
……
245 }245 }
246246
247 // if the current selected is tags247 // if the current selected is tags
248 if($selected.text() === 'Tags') {
249 $('#tags-input').tags({248 $('#tags-input').tags({
250 tagSize: 'md',249 tagSize: 'md',
251 promptText: 'Type word (and press enter)..',250 promptText: 'Type word (and press enter)..',
252 caseInsensitive: true,251 caseInsensitive: true,
253 suggestions: self.tags_suggestions252 suggestions: self.tags_suggestions
254 });253 });
255 $('#tags-input').show();
256 $('.annotorious-editor-text').hide();
257 }
258 else {
259 $('#tags-input').hide();
260 $('.annotorious-editor-text').show();
261 }
262 $anno_form.val('');
254
255
256 /* $anno_form.val('');
263 $anno_form.attr('placeholder', 'Add ' + $selected.text());257 $anno_form.attr('placeholder', 'Add ' + $selected.text());
264 console.log(self.new_anno);
258 console.log(self.new_anno);*/
259
265 },260 },
266 createPopupText: function(annotation) {261 createPopupText: function(annotation) {
267 // title262 // title

swtr/static/js/lib/custom-fields-plugin.js

1annotorious.plugin.CustomFields = function(opt_config_options) {1annotorious.plugin.CustomFields = function(opt_config_options) {
22
3 annotorious.plugin.CustomFields.prototype.onInitAnnotator = function(annotorious) {3 annotorious.plugin.CustomFields.prototype.onInitAnnotator = function(annotorious) {
4 var dropDownTemplate= _.template($('#dropdown-template').html()); // creates the HTML element for dropdown - from template in index.html
4 var dropDownTemplate= _.template($('#customEdit-template').html()); // creates the HTML element for dropdown - from template in index.html
5 annotorious.editor.addField(dropDownTemplate); // add dropdown to editor UI widget5 annotorious.editor.addField(dropDownTemplate); // add dropdown to editor UI widget
6 annotorious.popup.addField( function(annotation){6 annotorious.popup.addField( function(annotation){
7 var popupTemplate = _.template($('#popup-template').html()); //created a popup template - yet to find how to bind it to newanno7 var popupTemplate = _.template($('#popup-template').html()); //created a popup template - yet to find how to bind it to newanno

swtr/templates/index.html

234 <p><%= how %></p>234 <p><%= how %></p>
235 </li>235 </li>
236 </script>236 </script>
237 <script type="text/template" id="dropdown-template">
237 <!--script type="text/template" id="dropdown-template">
238 <div id="tags-input"></div>238 <div id="tags-input"></div>
239 <select class="form-control" id="custom-dropdown">239 <select class="form-control" id="custom-dropdown">
240 <option value="comment" selected>Comment</option>240 <option value="comment" selected>Comment</option>
……
242 <option value="tags">Tags</option>242 <option value="tags">Tags</option>
243 <option value="link">Link</option>243 <option value="link">Link</option>
244 </select>244 </select>
245 </script-->
246 <script type="text/template" id="customEdit-template">
247 <textarea id="title-input" class="annotorious-editor-text goog-textarea" placeholder="Add
248 Title" tabindex="1" rows="2" style="overflow-y: hidden; overflow-x:
249 auto; box-sizing: border-box; height: 23px; padding-bottom:
250 4px;"></textarea>
251 <textarea id="link-input" class="annotorious-editor-text goog-textarea" placeholder="Add
252 Links" tabindex="1" rows="3" style="overflow-y: hidden; overflow-x: auto;
253 box-sizing: border-box; height: 23px; padding-bottom: 4px;"></textarea>
254 <div id="tags-input" class="annotorious-editor-text goog-textarea"
255 placeholder="" tabindex="1" rows="4" style="overflow-y: auto; overflow-x:
256 hidden;
257 box-sizing: border-box; height: 23px; padding-bottom: 4px;"></textarea>
245 </script>258 </script>
246 <script type="text/template" id="popup-template">259 <script type="text/template" id="popup-template">
247 <span class="annotorious-popup-text">260 <span class="annotorious-popup-text">