Commit fbfc2aff5372332dd0684ad7d9cfb07e89e7c8d0

Custome options - Popup display, editor style changes
  • Diff rendering mode:
  • inline
  • side by side

swtr/static/css/annotorious.css

1/** Global item styles **/1/** Global item styles **/
2.custom-style-popup {
3 list-style: none;
4 padding-left: 0px;
5}
26
7.custom-popup-line {
8 border-top: 1px solid #ccc;
9 line-height: 200%;
10 font-size:14px;
11 font-family: Arial, Verdana, Sans;
12 color: #000;
13
14}
3.annotorious-opacity-fade {15.annotorious-opacity-fade {
4 -moz-transition-property: opacity;16 -moz-transition-property: opacity;
5 -moz-transition-duration: 0.5s;17 -moz-transition-duration: 0.5s;
……
169}169}
170170
171.annotorious-popup-field {171.annotorious-popup-field {
172 border-top:1px solid #ccc;
172 /*border-top:1px solid #ccc;*/
173 margin:6px 0px 0px 0px;173 margin:6px 0px 0px 0px;
174 padding-top:2px;174 padding-top:2px;
175}175}
……
198 border-color:#ccc;198 border-color:#ccc;
199 line-height: normal;199 line-height: normal;
200 background-color:#fff;200 background-color:#fff;
201 width:240px;
201 width:100%;
202 height:50px;202 height:50px;
203 outline:none;203 outline:none;
204 font-family:Verdana, Arial;204 font-family:Verdana, Arial;

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

1annotorious.plugin.CustomFields = function(opt_config_options) {1annotorious.plugin.CustomFields = function(opt_config_options) {
22
3
4annotorious.plugin.CustomFields.prototype.onInitAnnotator = function(annotorious) {3annotorious.plugin.CustomFields.prototype.onInitAnnotator = function(annotorious) {
5 var textTemplate= _.template($('#button-template').html());
6 annotorious.editor.addField(textTemplate);
7 var popupTemplate = _.template($('#popup-template').html());
8 annotorious.popup.addField(function(annotation){
9 var container = document.createElement('div');
10 var el = document.createElement('span');
11 el.href = '#';
12 el.className = 'annotorious-popup-text';
13 console.log(annotation.text);
14 el.innerHTML= annotation.text;
15 container.appendChild(el);
16 return container;
17
4 var dropDownTemplate= _.template($('#dropdown-template').html()); // creates the HTML element for dropdown - from template in index.html
5 annotorious.editor.addField(dropDownTemplate); // add dropdown to editor UI widget
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 newanno
8 if(annotation.text1 != undefined) {
9 //console.log(annotation.text1.Comment); annotation.text is Obj - can
10 //access each element Comment, tags, links..
11 return popupTemplate(annotation.text1);
12 }
13 else {
14 return '';
15 }
18 });16 });
19 }17 }
20}18}

swtr/static/js/swtmaker.js

151 _.each(swtr.sweets.models, function(swt) {151 _.each(swtr.sweets.models, function(swt) {
152 if(!_.has(swt.get('how'), 'editable')) {152 if(!_.has(swt.get('how'), 'editable')) {
153 swt.get('how')['editable'] = false;153 swt.get('how')['editable'] = false;
154 swt.get('how').text += '\n - by ' + swt.get('who');
154 console.log(swt.get('how').text.Comment);
155 swt.get('how').text += '\n - by ' + swt.get('who');
155 }156 }
156 console.log(swt.get('how'));157 console.log(swt.get('how'));
157 anno.addAnnotation(swt.get('how'));158 anno.addAnnotation(swt.get('how'));
……
182 'click #sweet': 'sweet',182 'click #sweet': 'sweet',
183 'click #signin-credentials': 'getSignInCredentials',183 'click #signin-credentials': 'getSignInCredentials',
184 'click #setbox': 'showHide',184 'click #setbox': 'showHide',
185 'change .form-control': 'button_custom',
186 'mouseup .annotorious-editor-button-save': 'add_new_anno'
185 'change #custom-dropdown ': 'getFormValue',
186 'mouseup .annotorious-editor-button-save': 'addNewAnno'
187 },187 },
188 initialize: function() {188 initialize: function() {
189 //var allElements = $('body *');189 //var allElements = $('body *');
190 this.helpview = new HelpView();190 this.helpview = new HelpView();
191 this.sweetsview = new SweetsView({collection: swtr.sweets});191 this.sweetsview = new SweetsView({collection: swtr.sweets});
192 anno.addHandler('onAnnotationCreated', this.showSwtHelp);192 anno.addHandler('onAnnotationCreated', this.showSwtHelp);
193 anno.addHandler('onannotationupdated', this.showswthelp);
193 anno.addHandler('onannotationupdated', this.showSwtHelp);
194 anno.addHandler('onSelectionStarted', function(annotation) {194 anno.addHandler('onSelectionStarted', function(annotation) {
195 anno.hideAnnotations();});195 anno.hideAnnotations();});
196 anno.addHandler('onSelectionCompleted', function(annotation) {196 anno.addHandler('onSelectionCompleted', function(annotation) {
197 anno.showAnnotations();197 anno.showAnnotations();
198 });198 });
199 anno.addPlugin('CustomFields', this.showSwtHelp);
200 anno.addHandler('onSelectionCompleted', this.setShape);
199 anno.addPlugin('CustomFields', this.showSwtHelp);
200 anno.addHandler('onSelectionCompleted', this.getShape);
201 this.$overlay = $('#app-overlay');201 this.$overlay = $('#app-overlay');
202 this.$img = $('#annotatable-img');202 this.$img = $('#annotatable-img');
203 this.imgURL = this.$img.attr('src');203 this.imgURL = this.$img.attr('src');
……
240 swtr.sweets.add(data);240 swtr.sweets.add(data);
241 _.each(data, function(swt) {241 _.each(data, function(swt) {
242 swt.how['editable'] = false;242 swt.how['editable'] = false;
243 swt.how.text += '\n - by ' + swt.who;
243 if(typeof swt.how.text === 'object') {
244 swt.how.text1 = swt.how.text;
245 swt.how.text = '\n - by ' + swt.who;
246 } else {
247 swt.how.text1 = undefined;
248 swt.how.text += '\n -by ' + swt.who;
249 }
250
244 anno.addAnnotation(swt.how);251 anno.addAnnotation(swt.how);
245 console.log('swt.how = ', swt.how);
246 });252 });
247 swtr.appView.$overlay.hide();253 swtr.appView.$overlay.hide();
248 swtr.appView.helpview.step(2);254 swtr.appView.helpview.step(2);
……
277 swtr.sweets.add({277 swtr.sweets.add({
278 who: swtr.who,278 who: swtr.who,
279 where: anno.src,279 where: anno.src,
280 how: newanno //mysterious link to create the sweet with new anno attributes, tags, links, labels
280 how: anno //mysterious link to create the sweet with new anno attributes, tags, links, labels
281 });281 });
282 });282 });
283 },283 },
……
304//to obtain shapes object, declaring annotation in global scope - TODO refactor304//to obtain shapes object, declaring annotation in global scope - TODO refactor
305//code to find better way to do this.305//code to find better way to do this.
306306
307 setShape: function(annotation) {
308 $('.annotorious-editor-text').hide();
309 $('.annotorious-editor').css("width", "100%");
310 window.annotation=annotation;
311 annotation.text = [];
307 getShape: function(annotation) {
308 $('.annotorious-editor-text').slideUp();
309 $('.annotorious-editor').css("width", "100%");
310 window.annotation=annotation; // to use annotation.shape in newanno
311 annotation.text = {}; // creating new text object - to contain comments, labels, links and tags
312 },312 },
313//to create new annotation object313//to create new annotation object
314 inputStore: function(opt) {
315 var temp = opt;
314 annoTemplate: function(opt) {
315 var annoText = opt;
316 var src = $('#img-url-input').val();316 var src = $('#img-url-input').val();
317 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};
318
317 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};
319 },318 },
320319
321//to add the final annotation320//to add the final annotation
322
323//save button - event bind321//save button - event bind
324 add_new_anno: function(event){
325 var $selected = $('select option:selected');
326 var tempinput = $selected.text()+': '+$('.annotorious-editor textarea').val();
327 this.newanno.text.push(tempinput);
328 var newinput = this.newanno.text.toString();
329 this.newanno.text = newinput;
330 console.log('this.newanno = ', this.newanno);
331 //this.to_Add(this.newanno);
322 addNewAnno: function(event){
323 var $selected = $('select option:selected').text();
324 var textInput = $('.annotorious-editor textarea').val();
325 this.newanno.text[$selected] = textInput;
332 var newanno = this.newanno;326 var newanno = this.newanno;
333 window.newanno = newanno;
327 anno.addAnnotation(newanno);
334 },328 },
329 /*addNewAnno: function(event){ // function for form input UI
330 var tags = $('#tags').val();
331 var label = $('#label').val();
332 var link = $('#links').val();
333 var text = $('.annotorious-editor textarea').val();
334 var finalInput = ' Label: '+label+' Comment: '+text+' Tags: '+tags+' Links: '+link;
335 //this.annoTemplate(label, text, tags, link);
336 // this.annoTemplate(label, text, tags, link);
337 var src = $('#img-url-input').val();
338 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};
339 console.log(newanno);
340 anno.addAnnotation(newanno);
341 },*/
335//dropdown event342//dropdown event
336 button_custom: function(event) {
337 $('.annotorious-editor-text').show();
343 getFormValue: function(event) {
344 var annoForm = $('.annotorious-editor-text');
345 annoForm.slideDown();
338 var $selected = $('select option:selected');346 var $selected = $('select option:selected');
339 var tempinput = $selected.prev().text()+ ': '+$('.annotorious-editor-text').val();
340 if(tempinput === "Choose an Option: "){
341 console.log('');
347 var textInput = annoForm.val();
348 if(textInput) {
349 annotation.text[$selected.prev().text()] = textInput;
342 }350 }
343 else {
344 annotation.text.push(tempinput);
345 }
346 this.inputStore(annotation.text);
347 $('.annotorious-editor-text:first').val("");
348 $('.annotorious-editor-text:first').attr('placeholder', 'Add a '+$selected.text());
351 this.annoTemplate(annotation.text);
352 annoForm.val('');
353 annoForm.attr('placeholder', 'Add '+$selected.text());
349 },354 },
350355
351356

swtr/templates/index.html

93 <input type="password" class="form-control" id="password" placeholder="Password">93 <input type="password" class="form-control" id="password" placeholder="Password">
94 </div>94 </div>
95 </script>95 </script>
96 <script type="text/template" id="button-template">
97 <select class="form-control">
96 <script type="text/template" id="dropdown-template">
97 <select class="form-control" id="custom-dropdown">
98 <option id="">Choose an Option</option>98 <option id="">Choose an Option</option>
99 <option id="comment" >Comment</option>99 <option id="comment" >Comment</option>
100 <option id="label" >Label</option>
100 <option id="title" >Title</option>
101 <option id="tags">Tags</option>101 <option id="tags">Tags</option>
102 <option id="links">Links</option>102 <option id="links">Links</option>
103 </select>103 </select>
104 </script>104 </script>
105 <!-- script type="text/template" id="dropdown-template">
106 <form class="form-control" id="custom-dropdown">
107 <textarea class="annotorious-editor-text goog-textarea"
108 placeholder="Add Label" id="label"></textarea>
109 <textarea class="annotorious-editor-text goog-textarea"
110 placeholder="Add Tags" id="tags"></textarea>
111 <textarea class="annotorious-editor-text goog-textarea"
112 placeholder="Add Links" id="links"></textarea>
113 </form>
114 </script-->
105 <script type="text/template" id="popup-template">115 <script type="text/template" id="popup-template">
106 <span class="annotorious-popup-text"> </span>
116 <span class="annotorious-popup-text">
117 <ul class="custom-style-popup">
118 <li class="custom-popup-line" ><span>Label: </span><%= Label %></li>
119 <li class="custom-popup-line"><span>Comment: </span><%= Comment %></li>
120 <li class="custom-popup-line"><span>Tags: </span><%= Tags %></li>
121 <li class="custom-popup-line"><span>Related Links: </span><%= Links %></li>
122 </ul>
123 </span>
107 </script>124 </script>
108 </body>125 </body>
109</html>126</html>