2 lines
9.3 KiB
JavaScript
2 lines
9.3 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.editable=opts.editable;this.useAjax=opts.useAjax;this.notes=opts.notes;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)}if(this.editable){this.button=$('<a class="image-annotate-add" id="image-annotate-add" href="#">Add Note</a>');this.button.click(function(){$.fn.annotateImage.add(image)});this.canvas.after(this.button)}this.hide();return this};$.fn.annotateImage.defaults={getUrl:'your-get.rails',saveUrl:'your-save.rails',deleteUrl:'your-delete.rails',editable:true,useAjax:true,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){for(var i=0;i<image.notes.length;i++){image.notes[image.notes[i]]=new $.fn.annotateView(image,image.notes[i])}};$.fn.annotateImage.getTicks=function(){var now=new Date();return now.getTime()};$.fn.annotateImage.add=function(image){if(image.mode=='view'){image.mode='edit';var editable=new $.fn.annotateEdit(image);$.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">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';if(image.useAjax){$.ajax({url:image.saveUrl,data:form.serialize(),error:function(e){alert("An error occured saving that note.")},success:function(data){if(data.annotation_id!=undefined){editable.note.id=data.annotation_id}},dataType:"json"})}if(note){note.resetPosition(editable,text)}else{editable.note.editable=true;note=new $.fn.annotateView(image,editable.note)note.resetPosition(editable,text);image.notes.push(editable.note)}editable.destroy()});editable.form.append(ok)};$.fn.annotateImage.createCancelButton=function(editable,image){var cancel=$('<a class="image-annotate-edit-close">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)}elem
|