diff --git a/css/annotation.css b/css/annotation.css index 6383782..9e246b7 100644 --- a/css/annotation.css +++ b/css/annotation.css @@ -29,11 +29,20 @@ display: none; position: relative; } + +.image-annotate-hoverimg { + display:none; +} + .image-annotate-area { - border: 1px solid #000000; position: absolute; } -.image-annotate-area div { + +.image-annotate-area-border { + border: 1px solid #000000; +} + +.image-annotate-area-border div { border: 1px solid #FFFFFF; display: block; } diff --git a/js/jquery.annotate.js b/js/jquery.annotate.js index 6bc541e..fd20e40 100644 --- a/js/jquery.annotate.js +++ b/js/jquery.annotate.js @@ -18,8 +18,14 @@ this.deleteUrl = opts.deleteUrl; this.editable = opts.editable; this.useAjax = opts.useAjax; - this.notes = opts.notes; - + + this.notes = []; + + for(var i=0;i
'); this.canvas.children('.image-annotate-edit').hide(); @@ -81,6 +87,19 @@ useAjax: true, notes: new Array() }; + + $.fn.annotateImage.noteDefaults = { + id : "new", + top : 30, + left : 30, + width : 30, + height : 30, + text : "", + url : null, + target : '_self', + image : null, + hoverImage : null + }; $.fn.annotateImage.clear = function(image) { /// @@ -113,6 +132,13 @@ } }; + $.fn.annotateImage.loadMore = function(image, newNote) { + /// + /// Loads annotation from note parameter + /// + image.notes[newNote] = new $.fn.annotateView(image, newNote); + }; + $.fn.annotateImage.getTicks = function() { /// /// Gets a count og the ticks for the current date. @@ -217,14 +243,7 @@ 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; + this.note = $.fn.annotateImage.noteDefaults; } // Set area @@ -294,13 +313,27 @@ this.note = note; this.editable = (note.editable && image.editable); - + + var img = null; + + // Add the area - this.area = $('
'); - image.canvas.children('.image-annotate-view').prepend(this.area); + this.area = $('
'); + + //(note.image != null ? '' : '') + + + image.canvas.children('.image-annotate-view').prepend(this.area); // Add the note this.form = $('
' + note.text + '
'); + + if(note.url != null) + { + $(this.area).click(function(){ window.open(note.url, note.target);}); + $(this.area).css('cursor','pointer'); + } + this.form.hide(); image.canvas.children('.image-annotate-view').append(this.form); this.form.children('span.actions').hide(); @@ -329,8 +362,33 @@ /// /// Sets the position of an annotation. /// - this.area.children('div').height((parseInt(this.note.height) - 2) + 'px'); - this.area.children('div').width((parseInt(this.note.width) - 2) + 'px'); + var height = parseInt(this.note.height) - 2 + 'px'; + var width = (parseInt(this.note.width) - 2) + 'px'; + var img = null; + var hoverImg = null; + + this.area.children('div').height(height); + this.area.children('div').width(width); + + if(this.note.image != null) + { + img = $(''); //Equivalent: $(document.createElement('img')) + img.attr('src', this.note.image); + $(img).css('height',height); + $(img).css('width',width); + img.appendTo(this.area.children('div')); + } + + if(this.note.hoverImage != null) + { + hoverImg = $(''); //Equivalent: $(document.createElement('img')) + hoverImg.attr('src', this.note.hoverImage); + $(hoverImg).css('height',height); + $(hoverImg).css('width',width); + $(this.area).hover(function(){$(hoverImage).show(); $(img).hide()},function(){$(hoverImage).hide(); $(img).show()}) + hoverImg.appendTo(this.area.children('div')); + } + this.area.css('left', (this.note.left) + 'px'); this.area.css('top', (this.note.top) + 'px'); this.form.css('left', (this.note.left) + 'px');