Commit cecc2b1026dd2d89a5c0df9faeb071627a7f2fca

Annotorious editor UI changed
swtr/static/js/img_swtr.js
(39 / 16)
  
104104 swtr.ImgAnnoView = Backbone.View.extend({
105105 el: $('#img-annotation-wrapper'),
106106 events: {
107 'change #custom-dropdown': 'getFormValue',
107 'keydown .annotorious-editor-button-save': 'getFormValue',
108 'mousedown .annotorious-editor-button-save': 'getFormValue',
108109 'click #toggle-anno-areas': 'toggleAnnoAreas'
109110 },
110111 initialize: function(options) {
……
156156 updateNewAnno: function(annotation) {
157157 console.log('updateNewAnno()');
158158 var self = swtr.imgAnnoView;
159 console.log(annotation.text);
159160 // get the final value/input from the editor
160 var selected = $('select option:selected').text().toLowerCase();
161 /* var selected = $('select option:selected').text().toLowerCase();
161162 var text_input = $('.annotorious-editor-text').val();
162163 if( selected === "tags") {
163164 self.new_anno[selected] = $('#tags-input').tags().getTags();
……
166166 else {
167167 // update it in our annotation object
168168 self.new_anno[selected] = text_input;
169 }
169 }*/
170170 // prepare the text field
171 self.new_anno.comment = annotation.text;
171172 self.new_anno.text = self.createPopupText(self.new_anno);
172173 // update the annotorious annotation object with the new values
173174 if(self.new_anno.comment) {
174 annotation.comment = self.new_anno.comment;
175 annotation.comment = annotation.text;
175176 }
176177 if(self.new_anno.link) {
177178 annotation.link = self.new_anno.link;
……
192192 console.log('hideOriginalEditor()');
193193 var self = swtr.imgAnnoView;
194194 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 });
195201 self.getSuggestionsForTags();
196202 //$('.annotorious-editor-text').hide();
197203 //$('.annotorious-editor').css('width', '100%');
198204 },
199205 getFormValue: function(event) {
200206 console.log('getFormValue()');
201
202207 var self = swtr.imgAnnoView;
203208 // 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');
205230 //$anno_form.slideDown();
206231 // get the previous item entered
207232 var $selected = $('select option:selected');
……
245245 }
246246
247247 // if the current selected is tags
248 if($selected.text() === 'Tags') {
249248 $('#tags-input').tags({
250249 tagSize: 'md',
251250 promptText: 'Type word (and press enter)..',
252251 caseInsensitive: true,
253252 suggestions: self.tags_suggestions
254253 });
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('');
263257 $anno_form.attr('placeholder', 'Add ' + $selected.text());
264 console.log(self.new_anno);
258 console.log(self.new_anno);*/
259
265260 },
266261 createPopupText: function(annotation) {
267262 // title
swtr/static/js/lib/custom-fields-plugin.js
(1 / 1)
  
11annotorious.plugin.CustomFields = function(opt_config_options) {
22
33 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
55 annotorious.editor.addField(dropDownTemplate); // add dropdown to editor UI widget
66 annotorious.popup.addField( function(annotation){
77 var popupTemplate = _.template($('#popup-template').html()); //created a popup template - yet to find how to bind it to newanno
swtr/templates/index.html
(14 / 1)
  
234234 <p><%= how %></p>
235235 </li>
236236 </script>
237 <script type="text/template" id="dropdown-template">
237 <!--script type="text/template" id="dropdown-template">
238238 <div id="tags-input"></div>
239239 <select class="form-control" id="custom-dropdown">
240240 <option value="comment" selected>Comment</option>
……
242242 <option value="tags">Tags</option>
243243 <option value="link">Link</option>
244244 </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>
245258 </script>
246259 <script type="text/template" id="popup-template">
247260 <span class="annotorious-popup-text">