Download raw (8.1 KB)

!function($){$.fn.annotateImage=function(a){var b=$.extend({},$.fn.annotateImage.defaults,a),c=this;return this.image=this,this.mode="view",this.getUrl=b.getUrl,this.saveUrl=b.saveUrl,this.deleteUrl=b.deleteUrl,this.editable=b.editable,this.useAjax=b.useAjax,this.notes=b.notes,this.canvas=$('<div class="image-annotate-canvas"><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(){"none"==$(this).children(".image-annotate-edit").css("display")&&$(this).children(".image-annotate-view").show()},function(){$(this).children(".image-annotate-view").hide()}),this.canvas.children(".image-annotate-view").hover(function(){$(this).show()},function(){$(this).hide()}),this.useAjax?$.fn.annotateImage.ajaxLoad(this):$.fn.annotateImage.load(this),this.editable&&(this.button=$('<a class="image-annotate-add" id="image-annotate-add" href="#">Add Note</a>'),this.button.click(function(){$.fn.annotateImage.add(c)}),this.canvas.after(this.button)),this.hide(),this},$.fn.annotateImage.defaults={getUrl:"your-get.rails",saveUrl:"your-save.rails",deleteUrl:"your-delete.rails",editable:!0,useAjax:!0,notes:new Array},$.fn.annotateImage.clear=function(a){for(var b=0;b<a.notes.length;b++)a.notes[a.notes[b]].destroy();a.notes=new Array},$.fn.annotateImage.ajaxLoad=function(a){$.getJSON(a.getUrl+"?ticks="+$.fn.annotateImage.getTicks(),function(b){a.notes=b,$.fn.annotateImage.load(a)})},$.fn.annotateImage.load=function(a){for(var b=0;b<a.notes.length;b++)a.notes[a.notes[b]]=new $.fn.annotateView(a,a.notes[b])},$.fn.annotateImage.getTicks=function(){var a=new Date;return a.getTime()},$.fn.annotateImage.add=function(a){if("view"==a.mode){a.mode="edit";var b=new $.fn.annotateEdit(a);$.fn.annotateImage.createSaveButton(b,a),$.fn.annotateImage.createCancelButton(b,a)}},$.fn.annotateImage.createSaveButton=function(a,b,c){var d=$('<a class="image-annotate-edit-ok">OK</a>');d.click(function(){var d=$("#image-annotate-edit-form form"),e=$("#image-annotate-text").val();$.fn.annotateImage.appendPosition(d,a),b.mode="view",b.useAjax&&$.ajax({url:b.saveUrl,data:d.serialize(),error:function(){alert("An error occured saving that note.")},success:function(b){void 0!=b.annotation_id&&(a.note.id=b.annotation_id)},dataType:"json"}),c?c.resetPosition(a,e):(a.note.editable=!0,c=new $.fn.annotateView(b,a.note),c.resetPosition(a,e),b.notes.push(a.note)),a.destroy()}),a.form.append(d)},$.fn.annotateImage.createCancelButton=function(a,b){var c=$('<a class="image-annotate-edit-close">Cancel</a>');c.click(function(){a.destroy(),b.mode="view"}),a.form.append(c)},$.fn.annotateImage.saveAsHtml=function(a,b){for(var c=$(b),d="",e=0;e<a.notes.length;e++)d+=$.fn.annotateImage.createHiddenField("text_"+e,a.notes[e].text),d+=$.fn.annotateImage.createHiddenField("top_"+e,a.notes[e].top),d+=$.fn.annotateImage.createHiddenField("left_"+e,a.notes[e].left),d+=$.fn.annotateImage.createHiddenField("height_"+e,a.notes[e].height),d+=$.fn.annotateImage.createHiddenField("width_"+e,a.notes[e].width);c.html(d)},$.fn.annotateImage.createHiddenField=function(a,b){return'&lt;input type="hidden" name="'+a+'" value="'+b+'" /&gt;<br />'},$.fn.annotateEdit=function(a,b){if(this.image=a,b)this.note=b;else{var c=new Object;c.id="new",c.top=30,c.left=30,c.width=30,c.height=30,c.text="",this.note=c}var d=a.canvas.children(".image-annotate-edit").children(".image-annotate-edit-area");this.area=d,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"),a.canvas.children(".image-annotate-view").hide(),a.canvas.children(".image-annotate-edit").show();var e=$('<div id="image-annotate-edit-form"><form><textarea id="image-annotate-text" name="text" rows="3" cols="30">'+this.note.text+"</textarea></form></div>");return this.form=e,$("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"),d.resizable({handles:"all",stop:function(){e.css("left",d.offset().left+"px"),e.css("top",parseInt(d.offset().top)+parseInt(d.height())+2+"px")}}).draggable({containment:a.canvas,drag:function(){e.css("left",d.offset().left+"px"),e.css("top",parseInt(d.offset().top)+parseInt(d.height())+2+"px")},stop:function(){e.css("left",d.offset().left+"px"),e.css("top",parseInt(d.offset().top)+parseInt(d.height())+2+"px")}}),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(a,b){this.image=a,this.note=b,this.editable=b.editable&&a.editable,this.area=$('<div class="image-annotate-area'+(this.editable?" image-annotate-area-editable":"")+'"><div></div></div>'),a.canvas.children(".image-annotate-view").prepend(this.area),this.form=$('<div class="image-annotate-note">'+b.text+"</div>"),this.form.hide(),a.canvas.children(".image-annotate-view").append(this.form),this.form.children("span.actions").hide(),this.setPosition();var c=this;if(this.area.hover(function(){c.show()},function(){c.hide()}),this.editable){var d=this;this.area.click(function(){d.edit()})}},$.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")},$.fn.annotateView.prototype.show=function(){this.form.fadeIn(250),this.area.addClass(this.editable?"image-annotate-area-editable-hover":"image-annotate-area-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("view"==this.image.mode){this.image.mode="edit";var a=this,b=new $.fn.annotateEdit(this.image,this.note);$.fn.annotateImage.createSaveButton(b,this.image,a);var c=$('<a class="image-annotate-edit-delete">Delete</a>');c.click(function(){var c=$("#image-annotate-edit-form form");$.fn.annotateImage.appendPosition(c,b),a.image.useAjax&&$.ajax({url:a.image.deleteUrl,data:c.serialize(),error:function(){alert("An error occured deleting that note.")}}),a.image.mode="view",b.destroy(),a.destroy()}),b.form.append(c),$.fn.annotateImage.createCancelButton(b,this.image)}},$.fn.annotateImage.appendPosition=function(a,b){var c=$('<input type="hidden" value="'+b.area.height()+'" name="height"/><input type="hidden" value="'+b.area.width()+'" name="width"/><input type="hidden" value="'+b.area.position().top+'" name="top"/><input type="hidden" value="'+b.area.position().left+'" name="left"/><input type="hidden" value="'+b.note.id+'" name="id"/>');a.append(c)},$.fn.annotateView.prototype.resetPosition=function(a,b){this.form.html(b),this.form.hide(),this.area.children("div").height(a.area.height()+"px"),this.area.children("div").width(a.area.width()-2+"px"),this.area.css("left",a.area.position().left+"px"),this.area.css("top",a.area.position().top+"px"),this.form.css("left",a.area.position().left+"px"),this.form.css("top",parseInt(a.area.position().top)+parseInt(a.area.height())+7+"px"),this.note.top=a.area.position().top,this.note.left=a.area.position().left,this.note.height=a.area.height(),this.note.width=a.area.width(),this.note.text=b,this.note.id=a.note.id,this.editable=!0}}(jQuery);