2 lines
19 KiB
JavaScript
2 lines
19 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.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.cssaclass=opts.cssaclass;this.rtlsupport=opts.rtlsupport;this.users=opts.users;anchor=$('.g-fullsize-link');this.canvas=$('<div class="image-annotate-canvas g-thumbnail"><div class="image-annotate-view"><div id="photoannotation-fullsize" class="image-annotate-note"></div></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();$('#g-photo').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();$("#photoannotation-fullsize").show()}},function(){$(this).children('.image-annotate-view').hide();$(this).children('.image-annotate-note').hide();$("#photoannotation-fullsize").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.tags,this.saveUrl,this.cssaclass,this.rtlsupport,this.users)}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.csrf,opts.rtlsupport,opts.users)})}this.hide();$('#g-photo').hide();$('.image-annotate-canvas').show();$(".g-resize").remove();$("#photoannotation-fullsize").append($('.g-fullsize-link:first'));$('.g-fullsize-link').append($('.g-fullsize-link:first').attr('title'));$('.image-annotate-canvas').after($('#photoannotation-legend'));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,tags,saveUrl,cssaclass,rtlsupport,users){for(var i=0;i<image.notes.length;i++){image.notes[image.notes[i]]=new $.fn.annotateView(image,image.notes[i],tags,labels,editable,csrf,deleteUrl,saveUrl,cssaclass,rtlsupport,users)}};$.fn.annotateImage.getTicks=function(){var now=new Date();return now.getTime()};$.fn.annotateImage.add=function(image,tags,labels,saveUrl,csrf,rtlsupport,users){if(image.mode=='view'){image.mode='edit';var editable=new $.fn.annotateEdit(image,null,tags,labels,saveUrl,csrf,rtlsupport,users);var okbut=new $.fn.annotateImage.createSaveButton(editable,image,null,rtlsupport,labels,saveUrl);editable.form.append(okbut);$.fn.annotateImage.createCancelButton(editable,image,rtlsupport,labels)}};$.fn.annotateImage.createSaveButton=function(editable,image,note,rtlsupport,labels,saveUrl){var ok=$('<a class="image-annotate-edit-ok g-button ui-corner-all ui-icon-left ui-state-default '+rtlsupport+'">'+labels[8]+'</a>');ok.click(function(){var form=$('#image-annotate-edit-form form');$.fn.annotateImage.appendPosition(form,editable);$.ajax({url:saveUrl,type:'POST',data:form.serialize(),error:function(e){var errordialog='<div id="image-annotate-error-dialog">'+labels[13]+'<div />';$('body').append(errordialog);var btns={};if(rtlsupport==""){diagclass="inmage-annotate-dialog"}else{diagclass="inmage-annotate-dialog-rtl"}btns[labels[14]]=function(){$('#image-annotate-error-dialog').remove()};$('#image-annotate-error-dialog').dialog({modal:true,resizable:false,dialogClass:diagclass,title:labels[13],close:function(event,ui){$('#image-annotate-error-dialog').remove()},width:450,buttons:btns})},success:function(data){if(data.result=="error"){var errordialog='<div id="image-annotate-error-dialog">'+data.message+'<div />';$('body').append(errordialog);var btns={};if(rtlsupport==""){diagclass="inmage-annotate-dialog"}else{diagclass="inmage-annotate-dialog-rtl"}btns[labels[14]]=function(){$('#image-annotate-error-dialog').remove()};$('#image-annotate-error-dialog').dialog({modal:true,resizable:false,dialogClass:diagclass,title:labels[13],close:function(event,ui){$('#image-annotate-error-dialog').remove()},width:450,buttons:btns})}else{if(data.annotationid!=""){var legendid="photoannotation-legend-"+data.oldtype;$("#"+legendid+"-"+data.oldid).remove();if($("#"+legendid+" > span").size()==0){$("#"+legendid).hide()}$("#"+data.annotationid).remove();$("#"+data.annotationid+"-edit").remove();$("#"+data.annotationid+"-delete").remove();$("#"+data.annotationid+"-note").remove()}editable.description=data.description;editable.editable=data.editable;editable.height=data.height;editable.internaltext=data.internaltext;editable.left=data.left;editable.noteid=data.noteid;editable.notetype=data.notetype;editable.text=data.text;editable.top=data.top;editable.url=data.url;editable.width=data.width;var anchor_open="";var anchor_close="";if(data.url!=""){anchor_open='<a href="'+data.url+'">';anchor_close='</a>'}legendid="photoannotation-legend-"+data.notetype;$("#"+legendid).show();$("#"+legendid).append('<span id="'+legendid+'-'+data.noteid+'">'+anchor_open+data.text+anchor_close+' </span>');note=new $.fn.annotateView(image,editable,image.tags,image.labels,image.editable,image.csrf,image.deleteUrl,image.saveUrl,image.cssaclass,image.rtlsupport,image.users)}},dataType:"json"});image.mode='view';editable.destroy()});editable.form.append(ok)};$.fn.annotateImage.createCancelButton=function(editable,image,rtlsupport,labels){var cancel=$('<a class="image-annotate-edit-close g-button ui-corner-all ui-icon-left ui-state-default '+rtlsupport+'">'+labels[9]+'</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,csrf,rtlsupport,users){this.image=image;if(note){this.note=note}else{var newNote=new Object();newNote.noteid="new";newNote.top=30;newNote.left=30;newNote.width=60;newNote.height=60;newNote.text="";newNote.description="";newNote.notetype="";newNote.internaltext="";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 selectedtag="";var notetitle="";var username="";var selecteduser="";if(this.note.notetype=="face"){selectedtag=this.note.text}else if(this.note.notetype=="user"){username=this.note.internaltext}else{notetitle=this.note.text}var form=$('<div id="image-annotate-edit-form" class="ui-dialog-content ui-widget-content '+rtlsupport+'"><form id="photoannotation-form" action="'+saveUrl+'" method="post"><input id="photoannotation-csrf" type="hidden" name="csrf" value="'+csrf+'" /><input id="photoannotation-noteid" type="hidden" name="noteid" value="'+this.note.noteid+'" /><input id="photoannotation-notetype" type="hidden" name="notetype" value="'+this.note.notetype+'" /><fieldset><legend>'+labels[12]+'</legend><label for="photoannotation-user-list">'+labels[10]+'</label><input id="photoannotation-user-list" class="textbox ui-corner-left ui-corner-right" type="text" name="userlist" style="width: 210px;" value="'+username+'" /><div style="text-align: center"><strong>'+labels[4]+'</strong></div><label for="image-annotate-tag-text">'+labels[0]+'</label><input id="image-annotate-tag-text" class="textbox ui-corner-left ui-corner-right" type="text" name="tagsList" style="width: 210px;" value="'+selectedtag+'" /><div style="text-align: center"><strong>'+labels[4]+'</strong></div><label for="image-annotate-text">'+labels[1]+'</label><input id="image-annotate-text" class="textbox ui-corner-left ui-corner-right" type="text" name="text" style="width: 210px;" value="'+notetitle+'" /></fieldset><fieldset><legend>'+labels[2]+'</legend><textarea id="image-annotate-desc" name="desc" rows="3" style="width: 210px;">'+this.note.description+'</textarea></fieldset></form></div>');this.form=form;$('body').append(this.form);$("#photoannotation-form").ready(function(){var url=tags;$("input#image-annotate-tag-text").autocomplete(url,{max:30,multiple:false,cacheLength:1});var urlusers=users;$("input#photoannotation-user-list").autocomplete(urlusers,{max:30,multiple:false,cacheLength:1})});$("input#image-annotate-tag-text").keyup(function(){if($("input#image-annotate-tag-text").val()!=""){$("input#image-annotate-text").html("");$("input#image-annotate-text").val("");$("input#photoannotation-user-list").html("");$("input#photoannotation-user-list").val("")}});$("input#image-annotate-text").keyup(function(){if($("input#image-annotate-text").val()!=""){$("input#image-annotate-tag-text").html("");$("input#image-annotate-tag-text").val("");$("input#photoannotation-user-list").html("");$("input#photoannotation-user-list").val("")}});$("input#photoannotation-user-list").keyup(function(){if($("select#photoannotation-user-list").val()!="-1"){$("input#image-annotate-tag-text").html("");$("input#image-annotate-tag-text").val("");$("input#image-annotate-text").html("");$("input#image-annotate-text").val("")}});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',start:function(e,ui){form.hide()},stop:function(e,ui){form.css('left',area.offset().left+'px');form.css('top',(parseInt(area.offset().top)+parseInt(area.height())+7)+'px');form.show()}}).draggable({containment:image.canvas,drag:function(e,ui){form.hide()},stop:function(e,ui){form.css('left',area.offset().left+'px');form.css('top',(parseInt(area.offset().top)+parseInt(area.height())+7)+'px');form.show()}});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,tags,labels,editable,csrf,deleteUrl,saveUrl,cssaclass,rtlsupport,users){this.image=image;this.note=note;this.area=$('<div id="photoannotation-area-'+this.note.notetype+"-"+this.note.noteid+'" 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-area-'+this.note.notetype+"-"+this.note.noteid+'-delete" class="image-annotate-area photoannotation-del-button" rel="photoannotation-area-'+this.note.notetype+"-"+this.note.noteid+'"><div><form id="photoannotation-area-'+this.note.notetype+"-"+this.note.noteid+'-del-form" class="photoannotation-del-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+'" /></form></div></div>');this.editarea=$('<div id="photoannotation-area-'+this.note.notetype+"-"+this.note.noteid+'-edit" class="image-annotate-area photoannotation-edit-button"><div></div></div>');image.canvas.children('.image-annotate-view').prepend(this.delarea);image.canvas.children('.image-annotate-view').prepend(this.editarea);this.delarea.bind('click',function(){var confdialog='<div id="image-annotate-conf-dialog" rel="'+$(this).attr('rel')+'">'+labels[3]+'<div />';$('body').append(confdialog);var btns={};if(rtlsupport==""){diagclass="inmage-annotate-dialog"}else{diagclass="inmage-annotate-dialog-rtl"}btns[labels[5]]=function(){var delform=$("#"+$(this).attr("rel")+"-del-form");$.ajax({url:deleteUrl,type:'POST',data:delform.serialize(),error:function(e){var errordialog='<div id="image-annotate-error-dialog">'+labels[15]+'<div />';$('body').append(errordialog);var btns={};if(rtlsupport==""){diagclass="inmage-annotate-dialog"}else{diagclass="inmage-annotate-dialog-rtl"}btns[labels[14]]=function(){$('#image-annotate-error-dialog').remove()};$('#image-annotate-error-dialog').dialog({modal:true,resizable:false,dialogClass:diagclass,title:labels[13],close:function(event,ui){$('#image-annotate-error-dialog').remove()},width:450,buttons:btns})},success:function(data){if(data.result=="success"){var annotationid="photoannotation-area-"+data.notetype+"-"+data.noteid;var legendid="photoannotation-legend-"+data.notetype;$("#"+legendid+"-"+data.noteid).remove();if($("#"+legendid+" > span").size()==0){$("#"+legendid).hide()}$("#"+annotationid).remove();$("#"+annotationid+"-edit").remove();$("#"+annotationid+"-delete").remove();$("#"+annotationid+"-note").remove()}},dataType:"json"});$('#image-annotate-conf-dialog').remove()};btns[labels[6]]=function(){$('#image-annotate-conf-dialog').remove()};$('#image-annotate-conf-dialog').dialog({modal:true,resizable:false,dialogClass:diagclass,title:labels[7],close:function(event,ui){$('#image-annotate-conf-dialog').remove()},buttons:btns})});var form=this;this.editarea.bind('click',function(){form.edit(tags,labels,saveUrl,csrf,rtlsupport,users)});this.delarea.hide();this.editarea.hide()}var notedescription="";if(note.description!=""){notedescription="<br />"+note.description}this.form=$('<div id="photoannotation-area-'+this.note.notetype+"-"+this.note.noteid+'-note" class="image-annotate-note">'+note.text+notedescription+'</div>');this.form.hide();image.canvas.children('.image-annotate-view').append(this.form);this.form.children('span.actions').hide();this.setPosition(rtlsupport);var annotation=this;this.area.hover(function(){annotation.show();if(annotation.delarea!=undefined){annotation.delarea.show();annotation.editarea.show()}},function(){annotation.hide();if(annotation.delarea!=undefined){annotation.delarea.hide();annotation.editarea.hide()}});var legendspan="#photoannotation-legend-"+this.note.notetype+"-"+this.note.noteid;if($(legendspan).length>0){$(legendspan).hover(function(){var legendsarea="#photoannotation-area-"+note.notetype+"-"+note.noteid;$(legendsarea).children('.image-annotate-view').show();$(".image-annotate-view").show();$(legendsarea).show();annotation.show()},function(){var legendsarea="#photoannotation-area-"+note.notetype+"-"+note.noteid;annotation.hide();$(legendsarea).children('.image-annotate-view').hide();$(".image-annotate-view").hide()})}if(editable){this.delarea.hover(function(){annotation.delarea.show();annotation.editarea.show()},function(){annotation.delarea.hide();annotation.editarea.hide()});this.editarea.hover(function(){annotation.delarea.show();annotation.editarea.show()},function(){annotation.delarea.hide();annotation.editarea.hide()})}if(note.url!=""&¬e.url!=null){this.area.bind('click',function(){window.location=note.url})}};$.fn.annotateView.prototype.setPosition=function(rtlsupport){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('top',(this.note.top)+'px');this.editarea.children('div').height('14px');this.editarea.children('div').width('14px');this.editarea.css('top',(this.note.top+16)+'px');if(rtlsupport==''){this.delarea.css('left',(this.note.left+parseInt(this.note.width))+'px');this.editarea.css('left',(this.note.left+parseInt(this.note.width))+'px')}else{this.delarea.css('left',(this.note.left-16)+'px');this.editarea.css('left',(this.note.left-16)+'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(tags,labels,saveUrl,csrf,rtlsupport,users){if(this.image.mode=='view'){this.image.mode='edit';var annotation=this;var editable=new $.fn.annotateEdit(this.image,this.note,tags,labels,saveUrl,csrf,rtlsupport,users);$.fn.annotateImage.createSaveButton(editable,this.image,annotation,rtlsupport,labels,saveUrl);$.fn.annotateImage.createCancelButton(editable,this.image,rtlsupport,labels)}};$.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};$.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)}})(jQuery);
|