Commit fbfc2aff5372332dd0684ad7d9cfb07e89e7c8d0
- Diff rendering mode:
- inline
- side by side
swtr/static/css/annotorious.css
(14 / 2)
| 1 | 1 | /** Global item styles **/ | |
| 2 | .custom-style-popup { | ||
| 3 | list-style: none; | ||
| 4 | padding-left: 0px; | ||
| 5 | } | ||
| 2 | 6 | ||
| 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 | 15 | .annotorious-opacity-fade { | |
| 4 | 16 | -moz-transition-property: opacity; | |
| 5 | 17 | -moz-transition-duration: 0.5s; | |
| … | … | ||
| 169 | 169 | } | |
| 170 | 170 | ||
| 171 | 171 | .annotorious-popup-field { | |
| 172 | border-top:1px solid #ccc; | ||
| 172 | /*border-top:1px solid #ccc;*/ | ||
| 173 | 173 | margin:6px 0px 0px 0px; | |
| 174 | 174 | padding-top:2px; | |
| 175 | 175 | } | |
| … | … | ||
| 198 | 198 | border-color:#ccc; | |
| 199 | 199 | line-height: normal; | |
| 200 | 200 | background-color:#fff; | |
| 201 | width:240px; | ||
| 201 | width:100%; | ||
| 202 | 202 | height:50px; | |
| 203 | 203 | outline:none; | |
| 204 | 204 | font-family:Verdana, Arial; |
| 1 | 1 | annotorious.plugin.CustomFields = function(opt_config_options) { | |
| 2 | 2 | ||
| 3 | |||
| 4 | 3 | annotorious.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
(51 / 39)
| 151 | 151 | _.each(swtr.sweets.models, function(swt) { | |
| 152 | 152 | if(!_.has(swt.get('how'), 'editable')) { | |
| 153 | 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 | 157 | console.log(swt.get('how')); | |
| 157 | 158 | anno.addAnnotation(swt.get('how')); | |
| … | … | ||
| 182 | 182 | 'click #sweet': 'sweet', | |
| 183 | 183 | 'click #signin-credentials': 'getSignInCredentials', | |
| 184 | 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 | 188 | initialize: function() { | |
| 189 | 189 | //var allElements = $('body *'); | |
| 190 | 190 | this.helpview = new HelpView(); | |
| 191 | 191 | this.sweetsview = new SweetsView({collection: swtr.sweets}); | |
| 192 | 192 | anno.addHandler('onAnnotationCreated', this.showSwtHelp); | |
| 193 | anno.addHandler('onannotationupdated', this.showswthelp); | ||
| 193 | anno.addHandler('onannotationupdated', this.showSwtHelp); | ||
| 194 | 194 | anno.addHandler('onSelectionStarted', function(annotation) { | |
| 195 | 195 | anno.hideAnnotations();}); | |
| 196 | 196 | anno.addHandler('onSelectionCompleted', function(annotation) { | |
| 197 | 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 | 201 | this.$overlay = $('#app-overlay'); | |
| 202 | 202 | this.$img = $('#annotatable-img'); | |
| 203 | 203 | this.imgURL = this.$img.attr('src'); | |
| … | … | ||
| 240 | 240 | swtr.sweets.add(data); | |
| 241 | 241 | _.each(data, function(swt) { | |
| 242 | 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 | 251 | anno.addAnnotation(swt.how); | |
| 245 | console.log('swt.how = ', swt.how); | ||
| 246 | 252 | }); | |
| 247 | 253 | swtr.appView.$overlay.hide(); | |
| 248 | 254 | swtr.appView.helpview.step(2); | |
| … | … | ||
| 277 | 277 | swtr.sweets.add({ | |
| 278 | 278 | who: swtr.who, | |
| 279 | 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 | 304 | //to obtain shapes object, declaring annotation in global scope - TODO refactor | |
| 305 | 305 | //code to find better way to do this. | |
| 306 | 306 | ||
| 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 | 313 | //to create new annotation object | |
| 314 | inputStore: function(opt) { | ||
| 315 | var temp = opt; | ||
| 314 | annoTemplate: function(opt) { | ||
| 315 | var annoText = opt; | ||
| 316 | 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 | }, | |
| 320 | 319 | ||
| 321 | 320 | //to add the final annotation | |
| 322 | |||
| 323 | 321 | //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 | 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 | 342 | //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 | 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 | }, | |
| 350 | 355 | ||
| 351 | 356 |
swtr/templates/index.html
(21 / 4)
| 93 | 93 | <input type="password" class="form-control" id="password" placeholder="Password"> | |
| 94 | 94 | </div> | |
| 95 | 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 | 98 | <option id="">Choose an Option</option> | |
| 99 | 99 | <option id="comment" >Comment</option> | |
| 100 | <option id="label" >Label</option> | ||
| 100 | <option id="title" >Title</option> | ||
| 101 | 101 | <option id="tags">Tags</option> | |
| 102 | 102 | <option id="links">Links</option> | |
| 103 | 103 | </select> | |
| 104 | 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 | 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 | 124 | </script> | |
| 108 | 125 | </body> | |
| 109 | 126 | </html> |
