3 lines
11 KiB
JavaScript
3 lines
11 KiB
JavaScript
|
|
(function($){$.fn.annotateImage=function(options){var opts=$.extend({},$.fn.annotateImage.defaults,options);var image=this;this.image=this;this.mode='view';this.getUrl=opts.getUrl;this.saveUrl=opts.saveUrl;this.deleteUrl=opts.deleteUrl;this.currentUrl=opts.currentUrl;this.deleteUrl=opts.deleteUrl;this.editable=opts.editable;this.useAjax=opts.useAjax;this.tags=opts.tags;this.notes=opts.notes;this.labels=opts.labels;this.csrf=opts.csrf;this.canvas=$('<div class="image-annotate-canvas g-thumbnail"><div class="image-annotate-view"></div><div class="image-annotate-edit"><div class="image-annotate-edit-area"></div></div></div>');this.canvas.children('.image-annotate-edit').hide();this.canvas.children('.image-annotate-view').hide();this.image.after(this.canvas);this.canvas.height(this.height());this.canvas.width(this.width());this.canvas.css('background-image','url("'+this.attr('src')+'")');this.canvas.children('.image-annotate-view, .image-annotate-edit').height(this.height());this.canvas.children('.image-annotate-view, .image-annotate-edit').width(this.width());this.canvas.hover(function(){if($(this).children('.image-annotate-edit').css('display')=='none'){$(this).children('.image-annotate-view').show()}},function(){$(this).children('.image-annotate-view').hide();$(this).children('.image-annotate-note').hide()});this.canvas.children('.image-annotate-view').hover(function(){$(this).show()},function(){$(this).hide();$(this).children('.image-annotate-note').hide()});if(this.useAjax){$.fn.annotateImage.ajaxLoad(this)}else{$.fn.annotateImage.load(this,this.labels,this.editable,this.csrf,this.deleteUrl,this.currentUrl)}if($('#g-photoannotation-link').length!=0){this.button=$('#g-photoannotation-link');this.button.click(function(){$.fn.annotateImage.add(image,opts.tags,opts.labels,opts.saveUrl,opts.currentUrl,opts.csrf)})}this.hide();return this};$.fn.annotateImage.defaults={getUrl:'your-get.rails',saveUrl:'your-save.rails',deleteUrl:'your-delete.rails',editable:true,useAjax:true,tags:new Array(),notes:new Array()};$.fn.annotateImage.clear=function(image){for(var i=0;i<image.notes.length;i++){image.notes[image.notes[i]].destroy()}image.notes=new Array()};$.fn.annotateImage.ajaxLoad=function(image){$.getJSON(image.getUrl+'?ticks='+$.fn.annotateImage.getTicks(),function(data){image.notes=data;$.fn.annotateImage.load(image)})};$.fn.annotateImage.load=function(image,labels,editable,csrf,deleteUrl,currentUrl){for(var i=0;i<image.notes.length;i++){image.notes[image.notes[i]]=new $.fn.annotateView(image,image.notes[i],labels,editable,csrf,deleteUrl,currentUrl)}};$.fn.annotateImage.getTicks=function(){var now=new Date();return now.getTime()};$.fn.annotateImage.add=function(image,tags,labels,saveUrl,currentUrl,csrf){if(image.mode=='view'){image.mode='edit';var editable=new $.fn.annotateEdit(image,null,tags,labels,saveUrl,currentUrl,csrf);$.fn.annotateImage.createSaveButton(editable,image);$.fn.annotateImage.createCancelButton(editable,image)}};$.fn.annotateImage.createSaveButton=function(editable,image,note){var ok=$('<a class="image-annotate-edit-ok g-button ui-corner-all ui-icon-left ui-state-default">OK</a>');ok.click(function(){var form=$('#image-annotate-edit-form form');var text=$('#image-annotate-text').val();$.fn.annotateImage.appendPosition(form,editable)image.mode='view';form.submit();editable.destroy()});editable.form.append(ok)};$.fn.annotateImage.createCancelButton=function(editable,image){var cancel=$('<a class="image-annotate-edit-close g-button ui-corner-all ui-icon-left ui-state-default">Cancel</a>');cancel.click(function(){editable.destroy();image.mode='view'});editable.form.append(cancel)};$.fn.annotateImage.saveAsHtml=function(image,target){var element=$(target);var html="";for(var i=0;i<image.notes.length;i++){html+=$.fn.annotateImage.createHiddenField("text_"+i,image.notes[i].text);html+=$.fn.annotateImage.createHiddenField("top_"+i,image.notes[i].top);html+=$.fn.annotateImage.createHiddenField("left_"+i,image.notes[i].left);html+=$.fn.annotateImage.createHiddenField("height_"+i,image.notes[i].height);html+=$.fn.annotateImage.createHiddenField("width_"+i,image.notes[i].width)}element.html(html)};$.fn.annotateImage.createHiddenField=function(name,value){return'<input type="hidden" name="'+name+'" value="'+value+'" /><br />'};$.fn.annotateEdit=function(image,note,tags,labels,saveUrl,currentUrl,csrf){this.image=image;if(note){this.note=note}else{var newNote=new Object();newNote.id="new";newNote.top=30;newNote.left=30;newNote.width=30;newNote.height=30;newNote.text="";this.note=newNote}var area=image.canvas.children('.image-annotate-edit').children('.image-annotate-edit-area');this.area=area;this.area.css('height',this.note.height+'px');this.area.css('width',this.note.width+'px');this.area.css('left',this.note.left+'px');this.area.css('top',this.note.top+'px');image.canvas.children('.image-annotate-view').hide();image.canvas.children('.image-annotate-edit').show();var tagdropdown=labels[0]+'<select id="tagsList" class="dropdown" name="tagsList"><option value="-1" selected="selected">No Tag</option>';if(tags){for(var tag in tags){var tagval=tags[tag];tagdropdown+='<option value="'+tagval.id+'">'+tagval.name+'</option>'}}tagdropdown+='</select>';var form=$('<div id="image-annotate-edit-form"><form action="'+saveUrl+'" method="post"><input type="hidden" name="csrf" value="'+csrf+'" /><input type="hidden" name="currenturl" value="'+currentUrl+'" />'+tagdropdown+labels[1]+'<textarea id="image-annotate-text" name="text" rows="3" cols="30">'+this.note.text+'</textarea>'+labels[2]+'<textarea id="image-annotate-desc" name="desc" rows="3" cols="30"></textarea></form></div>');this.form=form;$('body').append(this.form);this.form.css('left',this.area.offset().left+'px');this.form.css('top',(parseInt(this.area.offset().top)+parseInt(this.area.height())+7)+'px');area.resizable({handles:'all',stop:function(e,ui){form.css('left',area.offset().left+'px');form.css('top',(parseInt(area.offset().top)+parseInt(area.height())+2)+'px')}}).draggable({containment:image.canvas,drag:function(e,ui){form.css('left',area.offset().left+'px');form.css('top',(parseInt(area.offset().top)+parseInt(area.height())+2)+'px')},stop:function(e,ui){form.css('left',area.offset().left+'px');form.css('top',(parseInt(area.offset().top)+parseInt(area.height())+2)+'px')}});return this};$.fn.annotateEdit.prototype.destroy=function(){this.image.canvas.children('.image-annotate-edit').hide();this.area.resizable('destroy');this.area.draggable('destroy');this.area.css('height','');this.area.css('width','');this.area.css('left','');this.area.css('top','');this.form.remove()}$.fn.annotateView=function(image,note,labels,editable,csrf,deleteUrl,currentUrl){this.image=image;this.note=note;this.area=$('<div class="image-annotate-area'+(this.note.editable?' image-annotate-area-editable':'')+'"><div></div></div>');image.canvas.children('.image-annotate-view').prepend(this.area);if(editable){this.delarea=$('<div id="photoannotation-del-'+this.note.noteid+'" class="image-annotate-area photoannotation-del-button"><div><form method="post" action="'+deleteUrl+'"><input type="hidden" name="notetype" value="'+this.note.notetype+'" /><input type="hidden" name="noteid" value="'+this.note.noteid+'" /><input type="hidden" name="csrf" value="'+csrf+'" /><input type="hidden" name="currenturl" value="'+currentUrl+'" /></form></div></div>');image.canvas.children('.image-annotate-view').prepend(this.delarea);this.delarea.bind('click',function(){if(confirm(labels[3])){var alink=$(".g-fullsize-link");alink.unbind();alink.attr('href','#');alink.removeAttr('rel');var delform=$(this).children('div').children('form');delform.submit()}})this.delarea.hide()}this.form=$('<div class="image-annotate-note">'+note.text+'</div>');this.form.hide();image.canvas.children('.image-annotate-view').append(this.form);this.form.children('span.actions').hide();this.setPosition();var annotation=this;this.area.hover(function(){annotation.show();if(annotation.delarea!=undefined){annotation.delarea.show()}},function(){annotation.hide();if(annotation.delarea!=undefined){annotation.delarea.hide()}});if(editable){this.delarea.hover(function(){annotation.delarea.show()},function(){annotation.delarea.hide()})}if(note.url!=""&¬e.url!=null){this.area.bind('click',function(){var alink=$(".g-fullsize-link");alink.unbind();alink.attr('href','#');alink.removeAttr('rel');window.location=note.url})}};$.fn.annotateView.prototype.setPosition=function(){this.area.children('div').height((parseInt(this.note.height)-2)+'px');this.area.children('div').width((parseInt(this.note.width)-2)+'px');this.area.css('left',(this.note.left)+'px');this.area.css('top',(this.note.top)+'px');this.form.css('left',(this.note.left)+'px');this.form.css('top',(parseInt(this.note.top)+parseInt(this.note.height)+7)+'px');if(this.delarea!=undefined){this.delarea.children('div').height('14px');this.delarea.children('div').width('14px');this.delarea.css('left',(this.note.left+parseInt(this.note.width))+'px');this.delarea.css('top',(this.note.top)+'px')}};$.fn.annotateView.prototype.show=function(){this.form.fadeIn(250);if(!this.note.editable){this.area.addClass('image-annotate-area-hover')}else{this.area.addClass('image-annotate-area-editable-hover')}};$.fn.annotateView.prototype.hide=function(){this.form.fadeOut(250);this.area.removeClass('image-annotate-area-hover');this.area.removeClass('image-annotate-area-editable-hover')};$.fn.annotateView.prototype.destroy=function(){this.area.remove();this.form.remove()}$.fn.annotateView.prototype.edit=function(){if(this.image.mode=='view'){this.image.mode='edit';var annotation=this;var editable=new $.fn.annotateEdit(this.image,this.note);$.fn.annotateImage.createSaveButton(editable,this.image,annotation);var del=$('<a class="image-annotate-edit-delete">Delete</a>');del.click(function(){var form=$('#image-annotate-edit-form form');$.fn.annotateImage.appendPosition(form,editable)if(annotation.image.useAjax){$.ajax({url:annotation.image.deleteUrl,data:form.serialize(),error:function(e){alert("An error occured deleting that note.")}})}annotation.image.mode='view';editable.destroy();annotation.destroy()});editable.form.append(del);$.fn.annotateImage.createCancelButton(editable,this.image)}};$.fn.annotateImage.appendPosition=function(form,editable){var areaFields=$('<input type="hidden" value="'+editable.area.height()+'" name="height"/>'+'<input type="hidden" value="'+editable.area.width()+'" name="width"/>'+'<input type="hidden" value="'+editable.area.position().top+'" name="top"/>'+'<input type="hidden" value="'+editable.area.position().left+'" name="left"/>'+'<input type="hidden" value="'+editable.note.id+'" name="id"/>');form.append(areaFields)}$.fn.annotateView.prototype.resetPosition=function(editable,text){this.form.html(text);this.form.hide();this.area.children('div').height(editable.area.height()+'px');this.area.children('div').width((editable.area.width()-2)+'px');this.area.css('left',(editable.area.position().left)+'px');this.area.css('top',(editable.area.position().top)+'px');this.form.css('left',(editable.area.position().left)+'px');this.form.css('top',(parseInt(editable.area.position().top)+parseInt(editable.area.height())+7)+'px');this.note.top=editable.area.position().top;this.note.left=editable.area.position().left;this.note.height=editable.area.height();this.note.width=editable.area.width();this.note.text=text;this.note.id=editable.note.id;this.editable=true}})(jQuery);
|