From 4858720244fb37b7c232021bdcb6573f061ed0ad Mon Sep 17 00:00:00 2001 From: mccannf Date: Thu, 25 Oct 2012 22:31:55 +0200 Subject: [PATCH 1/3] Adding loadMore function to jquery.annotate.js --- js/jquery.annotate.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/js/jquery.annotate.js b/js/jquery.annotate.js index 6bc541e..ff02f46 100644 --- a/js/jquery.annotate.js +++ b/js/jquery.annotate.js @@ -113,6 +113,13 @@ } }; + $.fn.annotateImage.loadMore = function(newNote) { + /// + /// Loads annotation from note parameter + /// + this.image.notes[newNote] = new $.fn.annotateView(this.image, newNote); + }; + $.fn.annotateImage.getTicks = function() { /// /// Gets a count og the ticks for the current date. From e67dfd056178274271e9b06a9220efa1f1ded984 Mon Sep 17 00:00:00 2001 From: mccannf Date: Thu, 25 Oct 2012 22:47:53 +0200 Subject: [PATCH 2/3] Update js/jquery.annotate.js --- js/jquery.annotate.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/jquery.annotate.js b/js/jquery.annotate.js index ff02f46..b9b0d65 100644 --- a/js/jquery.annotate.js +++ b/js/jquery.annotate.js @@ -113,11 +113,11 @@ } }; - $.fn.annotateImage.loadMore = function(newNote) { + $.fn.annotateImage.loadMore = function(image, newNote) { /// /// Loads annotation from note parameter /// - this.image.notes[newNote] = new $.fn.annotateView(this.image, newNote); + image.notes[newNote] = new $.fn.annotateView(image, newNote); }; $.fn.annotateImage.getTicks = function() { From 829dee4228e4823011ffee8da853609036c4b9b8 Mon Sep 17 00:00:00 2001 From: Marco de Jongh Date: Tue, 27 Nov 2012 13:55:53 +0100 Subject: [PATCH 3/3] added image support link support --- css/annotation.css | 13 +++++-- js/jquery.annotate.js | 81 +++++++++++++++++++++++++++++++++++-------- 2 files changed, 77 insertions(+), 17 deletions(-) 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..4f643a7 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) { /// @@ -217,14 +236,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 +306,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 +355,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');