';
$('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 = '
' + data.message + '
';
$('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 = '
';
anchor_close = '';
}
legendid = "photoannotation-legend-" + data.notetype;
$("#" + legendid).show();
$("#" + legendid).append('
' + anchor_open + data.text + anchor_close + ' ');
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) {
///
/// Creates a Cancel button on the editable note.
///
var cancel = $('
' + labels[9] + '');
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 + '" />
';
};
$.fn.annotateEdit = function(image, note, tags, labels, saveUrl, csrf, rtlsupport, users) {
///
/// Defines an editable annotation area.
///
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;
}
// Set area
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');
// Show the edition canvas and hide the view canvas
image.canvas.children('.image-annotate-view').hide();
image.canvas.children('.image-annotate-edit').show();
// Add the note (which we'll load with the form afterwards)
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 = $('
');
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');
// Set the area as a draggable/resizable element contained in the image canvas.
// Would be better to use the containment option for resizable but buggy
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() {
///
/// Destroys an editable annotation area.
///
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) {
///
/// Defines a annotation area.
///
this.image = image;
this.note = note;
// Add the area
this.area = $('
');
image.canvas.children('.image-annotate-view').prepend(this.area);
if (editable) {
this.delarea = $('
');
this.editarea = $('
');
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 = '
' + labels[3] + '
';
$('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 = '
' + labels[15] + '
';
$('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();
}
// Add the note
var notedescription = "";
if (note.description != "") {
notedescription = "
" + note.description;
}
this.form = $('
' + note.text + notedescription + '
');
this.form.hide();
image.canvas.children('.image-annotate-view').append(this.form);
this.form.children('span.actions').hide();
// Set the position and size of the note
this.setPosition(rtlsupport);
// Add the behavior: hide/display the note when hovering the area
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();
});
}
// Edit a note feature
if (note.url != "" && note.url != null) {
this.area.bind('click',function () {
window.location = note.url;
});
}
};
$.fn.annotateView.prototype.setPosition = function(rtlsupport) {
///
/// 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');
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() {
///
/// Highlights the annotation
///
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() {
///
/// Removes the highlight from the annotation.
///
this.form.fadeOut(250);
this.area.removeClass('image-annotate-area-hover');
this.area.removeClass('image-annotate-area-editable-hover');
};
$.fn.annotateView.prototype.destroy = function() {
///
/// Destroys the annotation.
///
this.area.remove();
this.form.remove();
};
$.fn.annotateView.prototype.edit = function(tags, labels, saveUrl, csrf, rtlsupport, users) {
///
/// Edits the annotation.
///
if (this.image.mode == 'view') {
this.image.mode = 'edit';
var annotation = this;
// Create/prepare the editable note elements
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) {
///
/// Sets the position of an annotation.
///
this.form.html(text);
this.form.hide();
// Resize
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');
// Save new position to note
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) {
///
/// Appends the annotations coordinates to the given form that is posted to the server.
///
var areaFields = $('
' +
'
' +
'
' +
'
' +
'
');
form.append(areaFields);
};
})(jQuery);