Skip to content

Added features #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Added features #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4858720
Adding loadMore function to jquery.annotate.js
mccannf Oct 25, 2012
e67dfd0
Update js/jquery.annotate.js
mccannf Oct 25, 2012
829dee4
added image support
Nov 27, 2012
9652aff
Merge pull request #1 from mccannf/master
Jan 31, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions css/annotation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
88 changes: 73 additions & 15 deletions js/jquery.annotate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<opts.notes.length;i++)
{
this.notes.push($.extend({}, $.fn.annotateImage.noteDefaults, opts.notes[i]))
}

// Add the canvas
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();
Expand Down Expand Up @@ -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) {
/// <summary>
Expand Down Expand Up @@ -113,6 +132,13 @@
}
};

$.fn.annotateImage.loadMore = function(image, newNote) {
/// <summary>
/// Loads annotation from note parameter
/// </summary>
image.notes[newNote] = new $.fn.annotateView(image, newNote);
};

$.fn.annotateImage.getTicks = function() {
/// <summary>
/// Gets a count og the ticks for the current date.
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -294,13 +313,27 @@
this.note = note;

this.editable = (note.editable && image.editable);


var img = null;


// Add the area
this.area = $('<div class="image-annotate-area' + (this.editable ? ' image-annotate-area-editable' : '') + '"><div></div></div>');
image.canvas.children('.image-annotate-view').prepend(this.area);
this.area = $('<div class="image-annotate-area ' + (note.image == null ? 'image-annotate-area-border' : '' ) + (this.editable ? ' image-annotate-area-editable' : '') + '"><div></div></div>');

//(note.image != null ? '<img style="height:' + note.height +'px; width:' + note.width + 'px;" src="' + note.image + '"/>' : '')


image.canvas.children('.image-annotate-view').prepend(this.area);

// Add the note
this.form = $('<div class="image-annotate-note">' + note.text + '</div>');

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();
Expand Down Expand Up @@ -329,8 +362,33 @@
/// <summary>
/// Sets the position of an annotation.
/// </summary>
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 = $('<img id="dynamic">'); //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 = $('<img id="hoverImage" class="image-annotate-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');
Expand Down