1 | /// <reference path="jquery-1.2.6-vsdoc.js" />
|
---|
2 | (function($) {
|
---|
3 |
|
---|
4 | var _posCount = 1;
|
---|
5 | var _page;
|
---|
6 | /**
|
---|
7 | * Creates annotations on the given image.
|
---|
8 | * Images are loaded from the "getUrl" propety
|
---|
9 | * passed into the options.
|
---|
10 | **/
|
---|
11 | $.fn.annotateImage = function(options) {
|
---|
12 |
|
---|
13 | var opts = $.extend({}, $.fn.annotateImage.defaults, options);
|
---|
14 | var image = this;
|
---|
15 |
|
---|
16 | this.image = this;
|
---|
17 | this.mode = 'view';
|
---|
18 |
|
---|
19 | // Assign defaults
|
---|
20 | this.getUrl = opts.getUrl;
|
---|
21 | this.saveUrl = opts.saveUrl;
|
---|
22 | this.deleteUrl = opts.deleteUrl;
|
---|
23 | this.editable = opts.editable;
|
---|
24 | this.useAjax = opts.useAjax;
|
---|
25 | this.notes = opts.notes;
|
---|
26 | _page = opts.page;
|
---|
27 |
|
---|
28 | //With paged document images, the width and height are not being read, hence the addition of these if statements.
|
---|
29 | if(this.width() == 0 && opts.width !== undefined)
|
---|
30 | this.width(opts.width);
|
---|
31 | if(this.height() == 0 && opts.width !== undefined)
|
---|
32 | this.height(opts.height);
|
---|
33 |
|
---|
34 | //get the last ID number and set _posCount to be the next number.
|
---|
35 | if(this.notes !== null && this.notes !== undefined){
|
---|
36 |
|
---|
37 | if(this.notes.length > 0){
|
---|
38 |
|
---|
39 | var lastId = this.notes[this.notes.length-1].id;
|
---|
40 |
|
---|
41 | if(lastId != null && lastId !== undefined)
|
---|
42 | _posCount = lastId + 1;
|
---|
43 | }
|
---|
44 |
|
---|
45 | }
|
---|
46 |
|
---|
47 | // Add the canvas
|
---|
48 | 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>');
|
---|
49 | this.canvas.children('.image-annotate-edit').hide();
|
---|
50 | this.canvas.children('.image-annotate-view').hide();
|
---|
51 | this.image.after(this.canvas);
|
---|
52 |
|
---|
53 | // Give the canvas and the container their size and background
|
---|
54 | this.canvas.height(this.height());
|
---|
55 | this.canvas.width(this.width());
|
---|
56 |
|
---|
57 | this.canvas.css('background-image', 'url("' + this.attr('src') + '")');
|
---|
58 | this.canvas.children('.image-annotate-view, .image-annotate-edit').height(this.height());
|
---|
59 | this.canvas.children('.image-annotate-view, .image-annotate-edit').width(this.width());
|
---|
60 |
|
---|
61 | // Add the behavior: hide/show the notes when hovering the picture
|
---|
62 | this.canvas.hover(function() {
|
---|
63 | if ($(this).children('.image-annotate-edit').css('display') == 'none') {
|
---|
64 | $(this).children('.image-annotate-view').show();
|
---|
65 | }
|
---|
66 | }, function() {
|
---|
67 | $(this).children('.image-annotate-view').hide();
|
---|
68 | });
|
---|
69 |
|
---|
70 | this.canvas.children('.image-annotate-view').hover(function() {
|
---|
71 | $(this).show();
|
---|
72 | }, function() {
|
---|
73 | $(this).hide();
|
---|
74 | });
|
---|
75 |
|
---|
76 | // load the notes
|
---|
77 | if (this.useAjax) {
|
---|
78 | $.fn.annotateImage.ajaxLoad(this);
|
---|
79 | } else {
|
---|
80 | $.fn.annotateImage.load(this);
|
---|
81 | }
|
---|
82 |
|
---|
83 | // Add the "Add a note" button
|
---|
84 | if (this.editable) {
|
---|
85 |
|
---|
86 | this.button = $('<button type="button" id="image-annotate-add">Add Note</button>');
|
---|
87 |
|
---|
88 | this.button.click(function() {
|
---|
89 | $.fn.annotateImage.add(image);
|
---|
90 | });
|
---|
91 |
|
---|
92 | //this.canvas.after(this.button);
|
---|
93 |
|
---|
94 | this.br = $('<br/>');
|
---|
95 |
|
---|
96 | this.canvas.before(this.button);
|
---|
97 | this.canvas.before(this.br);
|
---|
98 | }
|
---|
99 |
|
---|
100 | // Hide the original image
|
---|
101 | this.hide();
|
---|
102 |
|
---|
103 | return this;
|
---|
104 | };
|
---|
105 |
|
---|
106 | /**
|
---|
107 | * Plugin Defaults
|
---|
108 | **/
|
---|
109 | $.fn.annotateImage.defaults = {
|
---|
110 | getUrl: 'cgi-bin/metadata-server.pl?a=get-metadata&site=' + gs.xsltParams.site_name + '&c=' + gs.cgiParams.c + '&d=' + gs.cgiParams.d + '&metaname=gsimg.Annotation',
|
---|
111 | saveUrl: 'cgi-bin/metadata-server.pl?a=insert-metadata&site=' + gs.xsltParams.site_name + '&c=' + gs.cgiParams.c + '&d=' + gs.cgiParams.d + '&metaname=gsimg.Annotation&metamode=accumulate&metavalue=',
|
---|
112 | deleteUrl: 'cgi-bin/metadata-server.pl?a=remove-metadata&site=' + gs.xsltParams.site_name + '&c=' + gs.cgiParams.c + '&d=' + gs.cgiParams.d + '&metaname=gsimg.Annotation&metamode=override&metavalue=' + 'testing',
|
---|
113 | editable: true,
|
---|
114 | useAjax: true,
|
---|
115 | notes: new Array(),
|
---|
116 | page: 0 //TODO: use this to annotate correct image when dealing with GSDL paged documents//
|
---|
117 | };
|
---|
118 |
|
---|
119 | /**
|
---|
120 | * Clears all existing annotations from the image.
|
---|
121 | **/
|
---|
122 | $.fn.annotateImage.clear = function(image) {
|
---|
123 |
|
---|
124 | for (var i = 0; i < image.notes.length; i++) {
|
---|
125 | image.notes[image.notes[i]].destroy();
|
---|
126 | }
|
---|
127 | image.notes = new Array();
|
---|
128 | };
|
---|
129 |
|
---|
130 | /**
|
---|
131 | * Loads the annotations from the "getUrl" property passed in on the options object.
|
---|
132 | **/
|
---|
133 | $.fn.annotateImage.ajaxLoad = function(image) {
|
---|
134 |
|
---|
135 | $.fn.annotateImage.load(image);
|
---|
136 |
|
---|
137 | };
|
---|
138 |
|
---|
139 | /**
|
---|
140 | * Loads the annotations from the notes property
|
---|
141 | * passed in on the options object (this method is
|
---|
142 | * only used if "useAjax" is set to false.
|
---|
143 | **/
|
---|
144 | $.fn.annotateImage.load = function(image) {
|
---|
145 |
|
---|
146 | if(image.notes === undefined || image.notes === null){
|
---|
147 | console.log("No annotations to load in.");
|
---|
148 | image.notes = new Array();
|
---|
149 | }else{
|
---|
150 |
|
---|
151 | if(image.notes.length > 0){
|
---|
152 | for (var i = 0; i < image.notes.length; i++) {
|
---|
153 | image.notes[image.notes[i]] = new $.fn.annotateView(image, image.notes[i]);
|
---|
154 | }
|
---|
155 | }else{
|
---|
156 | console.log("No annotations to load in.");
|
---|
157 | }
|
---|
158 | }
|
---|
159 |
|
---|
160 | };
|
---|
161 |
|
---|
162 | /**
|
---|
163 | * Gets a count of the ticks for the current date.
|
---|
164 | * This is used to ensure that URLs are always
|
---|
165 | * unique and not cached by the browser.
|
---|
166 | **/
|
---|
167 | $.fn.annotateImage.getTicks = function() {
|
---|
168 |
|
---|
169 | var now = new Date();
|
---|
170 | return now.getTime();
|
---|
171 | };
|
---|
172 |
|
---|
173 | /**
|
---|
174 | * Adds a note to the image.
|
---|
175 | **/
|
---|
176 | $.fn.annotateImage.add = function(image) {
|
---|
177 | console.log("image mode = " + image.mode);
|
---|
178 | if (image.mode == 'view') {
|
---|
179 | image.mode = 'edit';
|
---|
180 |
|
---|
181 | gs.userInformation.currentAction = "editingNote";
|
---|
182 |
|
---|
183 | // Create/prepare the editable note elements
|
---|
184 | var editable = new $.fn.annotateEdit(image);
|
---|
185 |
|
---|
186 | $.fn.annotateImage.createSaveButton(editable, image);
|
---|
187 | $.fn.annotateImage.createCancelButton(editable, image);
|
---|
188 | }
|
---|
189 | };
|
---|
190 |
|
---|
191 | /**
|
---|
192 | *Creates an OK button on the editable note.
|
---|
193 | **/
|
---|
194 | $.fn.annotateImage.createSaveButton = function(editable, image, note, prev) {
|
---|
195 |
|
---|
196 | var ok = $('<a class="image-annotate-edit-ok">OK</a>');
|
---|
197 | var thisHandle = this;
|
---|
198 |
|
---|
199 | ok.click(function() {
|
---|
200 | gs.userInformation.currentAction = "savingNote";
|
---|
201 | var form = $('#image-annotate-edit-form form');
|
---|
202 | var text = $('#image-annotate-text').val();
|
---|
203 | $.fn.annotateImage.appendPosition(form, editable)
|
---|
204 | image.mode = 'view';
|
---|
205 |
|
---|
206 | // Save via AJAX
|
---|
207 | if (image.useAjax) {
|
---|
208 |
|
---|
209 | var left_pos = editable.area.position().left;
|
---|
210 | var top_pos = editable.area.position().top;
|
---|
211 | var width = editable.area.width();
|
---|
212 | var height = editable.area.height();
|
---|
213 | var id = editable.note.id;
|
---|
214 | //var page = editable.note.page;
|
---|
215 | console.log(editable.note);
|
---|
216 |
|
---|
217 | //var json = '{ "top": ' + top_pos + ', "left": ' + left_pos + ', "width": ' + width + ', "height": ' + height + ', "text": "' + text + '", "id": ' + id + ', "editable": true }';
|
---|
218 |
|
---|
219 | var json = '{ "top": ' + top_pos + ', "left": ' + left_pos + ', "width": ' + width + ', "height": ' + height + ', "text": "' + text + '", "id": ' + id + ', "editable": true, "page": ' + _page + ' }';
|
---|
220 | var metaname = "gsimg.Annotation";
|
---|
221 | var metadata_server_url = "cgi-bin/metadata-server.pl?";
|
---|
222 |
|
---|
223 | var oid = image.selector.substring(13).replace(/_/g, ".");
|
---|
224 |
|
---|
225 | var saveIndexUrl = metadata_server_url + "a=set-metadata&site=" + gs.xsltParams.site_name + "&c=" + gs.cgiParams.c + "&d=" + oid + "&metaname=" + metaname + "&metavalue=" + json;
|
---|
226 | var saveArchivesUrl = metadata_server_url + "a=set-archives-metadata&site=" + gs.xsltParams.site_name + "&c=" + gs.cgiParams.c + "&d=" + oid + "&metaname=" + metaname + "&metavalue=" + json;
|
---|
227 | var saveImportUrl = metadata_server_url + "a=set-import-metadata&site=" + gs.xsltParams.site_name + "&c=" + gs.cgiParams.c + "&d=" + oid + "&metaname=" + metaname + "&metavalue=" + json;
|
---|
228 |
|
---|
229 | if(prev !== undefined && prev !== null)
|
---|
230 | {
|
---|
231 | var prevJson = '{ "top": ' + prev.top + ', "left": ' + prev.left + ', "width": ' + prev.width + ', "height": ' + height + ', "text": "' + prev.text + '", "id": ' + prev.id + ', "editable": true, "page": ' + _page + ' }';
|
---|
232 | saveIndexUrl += "&prevmetavalue=" + prevJson + "&metamode=override";
|
---|
233 | saveArchivesUrl += "&prevmetavalue=" + prevJson + "&metamode=override";
|
---|
234 | saveImportUrl += "&prevmetavalue=" + prevJson + "&metamode=override";
|
---|
235 | }
|
---|
236 |
|
---|
237 | var saveIndexCallBack = {
|
---|
238 | success: function(response)
|
---|
239 | {
|
---|
240 | YAHOO.util.Connect.asyncRequest("GET", gs.xsltParams.library_name + "?a=s&sa=c&c=" + gs.cgiParams.c, null);
|
---|
241 | console.log("Save index metata successful! Note id: " + id);
|
---|
242 | },
|
---|
243 | failed: function(response){ console.log("Failed to save index metadata of note with id: " + id);}
|
---|
244 | };
|
---|
245 |
|
---|
246 | var saveImportCallBack =
|
---|
247 | {
|
---|
248 | sucess: function(response){ console.log("Save import metdata successful! Note id: " + id);},
|
---|
249 | failed: function(response){console.log("Failed in save import metadata of note with id: " + id);}
|
---|
250 | };
|
---|
251 |
|
---|
252 | var saveArchivesCallBack = {
|
---|
253 | success: function(response){
|
---|
254 | //apparently should rebuild collection here.
|
---|
255 | console.log("Save archives metadata successful! Note id: " + id);
|
---|
256 | },
|
---|
257 | failed: function(response){
|
---|
258 | console.log("Failed to save archives metadata of note with id: " + id);
|
---|
259 | }
|
---|
260 | };
|
---|
261 |
|
---|
262 | YAHOO.util.Connect.asyncRequest("GET",saveIndexUrl,saveIndexCallBack);
|
---|
263 | YAHOO.util.Connect.asyncRequest("GET",saveArchivesUrl,saveArchivesUrl);
|
---|
264 | YAHOO.util.Connect.asyncRequest("GET",saveImportUrl,saveImportCallBack);
|
---|
265 | }
|
---|
266 |
|
---|
267 | // Add to canvas
|
---|
268 | if (note) {
|
---|
269 | note.resetPosition(editable, text);
|
---|
270 | } else {
|
---|
271 | editable.note.editable = true;
|
---|
272 | note = new $.fn.annotateView(image, editable.note);
|
---|
273 | note.resetPosition(editable, text);
|
---|
274 | image.notes.push(editable.note);
|
---|
275 | }
|
---|
276 |
|
---|
277 | editable.destroy();
|
---|
278 | });
|
---|
279 | editable.form.append(ok);
|
---|
280 | };
|
---|
281 |
|
---|
282 | /**
|
---|
283 | * Creates a cancel button on the editable note.
|
---|
284 | **/
|
---|
285 | $.fn.annotateImage.createCancelButton = function(editable, image) {
|
---|
286 |
|
---|
287 | var cancel = $('<a class="image-annotate-edit-close">Cancel</a>');
|
---|
288 | cancel.click(function() {
|
---|
289 | editable.destroy();
|
---|
290 | image.mode = 'view';
|
---|
291 | });
|
---|
292 | editable.form.append(cancel);
|
---|
293 | };
|
---|
294 |
|
---|
295 | $.fn.annotateImage.saveAsHtml = function(image, target) {
|
---|
296 | var element = $(target);
|
---|
297 | var html = "";
|
---|
298 | for (var i = 0; i < image.notes.length; i++) {
|
---|
299 | html += $.fn.annotateImage.createHiddenField("text_" + i, image.notes[i].text);
|
---|
300 | html += $.fn.annotateImage.createHiddenField("top_" + i, image.notes[i].top);
|
---|
301 | html += $.fn.annotateImage.createHiddenField("left_" + i, image.notes[i].left);
|
---|
302 | html += $.fn.annotateImage.createHiddenField("height_" + i, image.notes[i].height);
|
---|
303 | html += $.fn.annotateImage.createHiddenField("width_" + i, image.notes[i].width);
|
---|
304 | }
|
---|
305 | element.html(html);
|
---|
306 | };
|
---|
307 |
|
---|
308 | $.fn.annotateImage.createHiddenField = function(name, value) {
|
---|
309 | return '<input type="hidden" name="' + name + '" value="' + value + '" /><br />';
|
---|
310 | };
|
---|
311 |
|
---|
312 | /**
|
---|
313 | * Defines an editable annotation area.
|
---|
314 | **/
|
---|
315 | $.fn.annotateEdit = function(image, note) {
|
---|
316 |
|
---|
317 | this.image = image;
|
---|
318 |
|
---|
319 | if (note) {
|
---|
320 | this.note = note;
|
---|
321 | } else {
|
---|
322 | var newNote = new Object();
|
---|
323 |
|
---|
324 | newNote.id = _posCount;
|
---|
325 | _posCount++;
|
---|
326 | newNote.top = 30;
|
---|
327 | newNote.left = 30;
|
---|
328 | newNote.width = 30;
|
---|
329 | newNote.height = 30;
|
---|
330 | newNote.text = "";
|
---|
331 | newNote.page = _page;
|
---|
332 | this.note = newNote;
|
---|
333 | }
|
---|
334 |
|
---|
335 | // Set area
|
---|
336 | var area = image.canvas.children('.image-annotate-edit').children('.image-annotate-edit-area');
|
---|
337 | this.area = area;
|
---|
338 | this.area.css('height', this.note.height + 'px');
|
---|
339 | this.area.css('width', this.note.width + 'px');
|
---|
340 | this.area.css('left', this.note.left + 'px');
|
---|
341 | this.area.css('top', this.note.top + 'px');
|
---|
342 |
|
---|
343 | // Show the edition canvas and hide the view canvas
|
---|
344 | image.canvas.children('.image-annotate-view').hide();
|
---|
345 | image.canvas.children('.image-annotate-edit').show();
|
---|
346 |
|
---|
347 | // Add the note (which we'll load with the form afterwards)
|
---|
348 | var form = $('<div id="image-annotate-edit-form"><form><textarea id="image-annotate-text" name="text" rows="3" cols="30">' + this.note.text + '</textarea></form></div>');
|
---|
349 | this.form = form;
|
---|
350 |
|
---|
351 | $('body').append(this.form);
|
---|
352 | this.form.css('left', this.area.offset().left + 'px');
|
---|
353 | this.form.css('top', (parseInt(this.area.offset().top) + parseInt(this.area.height()) + 7) + 'px');
|
---|
354 |
|
---|
355 | // Set the area as a draggable/resizable element contained in the image canvas.
|
---|
356 | // Would be better to use the containment option for resizable but buggy
|
---|
357 | area.resizable({
|
---|
358 | handles: 'all',
|
---|
359 |
|
---|
360 | resize: function(e, ui) {
|
---|
361 | form.css('left', area.offset().left + 'px');
|
---|
362 | form.css('top', (parseInt(area.offset().top) + parseInt(area.height()) + 2) + 'px');
|
---|
363 | },
|
---|
364 | stop: function(e, ui) {
|
---|
365 | form.css('left', area.offset().left + 'px');
|
---|
366 | form.css('top', (parseInt(area.offset().top) + parseInt(area.height()) + 2) + 'px');
|
---|
367 | }
|
---|
368 | })
|
---|
369 | .draggable({
|
---|
370 | containment: image.canvas,
|
---|
371 | drag: function(e, ui) {
|
---|
372 | form.css('left', area.offset().left + 'px');
|
---|
373 | form.css('top', (parseInt(area.offset().top) + parseInt(area.height()) + 2) + 'px');
|
---|
374 | },
|
---|
375 | stop: function(e, ui) {
|
---|
376 | form.css('left', area.offset().left + 'px');
|
---|
377 | form.css('top', (parseInt(area.offset().top) + parseInt(area.height()) + 2) + 'px');
|
---|
378 | }
|
---|
379 | });
|
---|
380 | return this;
|
---|
381 | };
|
---|
382 |
|
---|
383 | /**
|
---|
384 | * Destroys an editable annotation area.
|
---|
385 | **/
|
---|
386 | $.fn.annotateEdit.prototype.destroy = function() {
|
---|
387 |
|
---|
388 | this.image.canvas.children('.image-annotate-edit').hide();
|
---|
389 | this.area.resizable('destroy');
|
---|
390 | this.area.draggable('destroy');
|
---|
391 | this.area.css('height', '');
|
---|
392 | this.area.css('width', '');
|
---|
393 | this.area.css('left', '');
|
---|
394 | this.area.css('top', '');
|
---|
395 | this.form.remove();
|
---|
396 | }
|
---|
397 |
|
---|
398 | /**
|
---|
399 | * Defines an annotation area.
|
---|
400 | **/
|
---|
401 | $.fn.annotateView = function(image, note) {
|
---|
402 |
|
---|
403 | this.image = image;
|
---|
404 |
|
---|
405 | this.note = note;
|
---|
406 |
|
---|
407 | this.editable = (note.editable && image.editable);
|
---|
408 |
|
---|
409 | // Add the area
|
---|
410 | this.area = $('<div class="image-annotate-area' + (this.editable ? ' image-annotate-area-editable' : '') + '"><div></div></div>');
|
---|
411 | image.canvas.children('.image-annotate-view').prepend(this.area);
|
---|
412 |
|
---|
413 | // Add the note
|
---|
414 | this.form = $('<div class="image-annotate-note">' + note.text + '</div>');
|
---|
415 | this.form.hide();
|
---|
416 | image.canvas.children('.image-annotate-view').append(this.form);
|
---|
417 | this.form.children('span.actions').hide();
|
---|
418 |
|
---|
419 | // Set the position and size of the note
|
---|
420 | this.setPosition();
|
---|
421 |
|
---|
422 | // Add the behavior: hide/display the note when hovering the area
|
---|
423 | var annotation = this;
|
---|
424 | this.area.hover(function() {
|
---|
425 | annotation.show();
|
---|
426 | }, function() {
|
---|
427 | annotation.hide();
|
---|
428 | });
|
---|
429 |
|
---|
430 | // Edit a note feature
|
---|
431 | if (this.editable) {
|
---|
432 | var form = this;
|
---|
433 | this.area.click(function() {
|
---|
434 | form.edit();
|
---|
435 | });
|
---|
436 | }
|
---|
437 | };
|
---|
438 |
|
---|
439 | $.fn.annotateView.prototype.setPosition = function() {
|
---|
440 | /// <summary>
|
---|
441 | /// Sets the position of an annotation.
|
---|
442 | /// </summary>
|
---|
443 | this.area.children('div').height((parseInt(this.note.height) - 2) + 'px');
|
---|
444 | this.area.children('div').width((parseInt(this.note.width) - 2) + 'px');
|
---|
445 | this.area.css('left', (this.note.left) + 'px');
|
---|
446 | this.area.css('top', (this.note.top) + 'px');
|
---|
447 | this.form.css('left', (this.note.left) + 'px');
|
---|
448 | this.form.css('top', (parseInt(this.note.top) + parseInt(this.note.height) + 7) + 'px');
|
---|
449 | };
|
---|
450 |
|
---|
451 | $.fn.annotateView.prototype.show = function() {
|
---|
452 | /// <summary>
|
---|
453 | /// Highlights the annotation
|
---|
454 | /// </summary>
|
---|
455 | this.form.fadeIn(250);
|
---|
456 | if (!this.editable) {
|
---|
457 | this.area.addClass('image-annotate-area-hover');
|
---|
458 | } else {
|
---|
459 | this.area.addClass('image-annotate-area-editable-hover');
|
---|
460 | }
|
---|
461 | };
|
---|
462 |
|
---|
463 | /**
|
---|
464 | * Removes the highlight from the annotation.
|
---|
465 | **/
|
---|
466 | $.fn.annotateView.prototype.hide = function() {
|
---|
467 |
|
---|
468 | this.form.fadeOut(250);
|
---|
469 | this.area.removeClass('image-annotate-area-hover');
|
---|
470 | this.area.removeClass('image-annotate-area-editable-hover');
|
---|
471 | };
|
---|
472 |
|
---|
473 | /**
|
---|
474 | * Destroys the annotation.
|
---|
475 | **/
|
---|
476 | $.fn.annotateView.prototype.destroy = function() {
|
---|
477 |
|
---|
478 | this.area.remove();
|
---|
479 | this.form.remove();
|
---|
480 | }
|
---|
481 |
|
---|
482 | /**
|
---|
483 | * Edits the annotation.
|
---|
484 | **/
|
---|
485 | $.fn.annotateView.prototype.edit = function() {
|
---|
486 |
|
---|
487 | if (this.image.mode == 'view') {
|
---|
488 | this.image.mode = 'edit';
|
---|
489 | var annotation = this;
|
---|
490 |
|
---|
491 | //Save the previous note (before the edit was made).
|
---|
492 | var storePrevNotes = this.image.notes;
|
---|
493 |
|
---|
494 | console.log("this note's id: " + this.note.id);
|
---|
495 |
|
---|
496 | var prev = null;
|
---|
497 | for(var i = 0; i < storePrevNotes.length; i++){
|
---|
498 |
|
---|
499 | var curr = storePrevNotes[i];
|
---|
500 |
|
---|
501 | if(curr.id == this.note.id){
|
---|
502 | prev = curr;
|
---|
503 | }
|
---|
504 | }
|
---|
505 |
|
---|
506 | // Create/prepare the editable note elements
|
---|
507 | var editable = new $.fn.annotateEdit(this.image, this.note);
|
---|
508 |
|
---|
509 | $.fn.annotateImage.createSaveButton(editable, this.image, annotation,prev);
|
---|
510 |
|
---|
511 | // Add the delete button
|
---|
512 | var del = $('<a class="image-annotate-edit-delete">Delete</a>');
|
---|
513 | del.click(function() {
|
---|
514 |
|
---|
515 | var form = $('#image-annotate-edit-form form');
|
---|
516 |
|
---|
517 | $.fn.annotateImage.appendPosition(form, editable)
|
---|
518 |
|
---|
519 | if (annotation.image.useAjax) {
|
---|
520 |
|
---|
521 | var left_pos = annotation.note.left;
|
---|
522 | var top_pos = annotation.note.top;
|
---|
523 | var width = annotation.note.width;
|
---|
524 | var height = annotation.note.height;
|
---|
525 | var id = annotation.note.id;
|
---|
526 | var text = annotation.note.text;
|
---|
527 |
|
---|
528 | //var page = annotation.note.page;
|
---|
529 |
|
---|
530 | var json = '{ "top": ' + top_pos + ', "left": ' + left_pos + ', "width": ' + width + ', "height": ' + height + ', "text": "' + text + '", "id": ' + id + ', "editable": true ' + ', "page": ' + _page + ' }';
|
---|
531 |
|
---|
532 | var metaposVal = id-1;
|
---|
533 |
|
---|
534 | //make below variables global...
|
---|
535 | var metaname = "gsimg.Annotation";
|
---|
536 |
|
---|
537 | var metadata_server_url = "cgi-bin/metadata-server.pl?";
|
---|
538 |
|
---|
539 | var removeFromIndexUrl = metadata_server_url + "a=remove-metadata&site=" + gs.xsltParams.site_name + "&c=" + gs.cgiParams.c + "&d=" + gs.cgiParams.d + "&metaname=" + metaname + "&metavalue=" + json + "&metapos=" + metaposVal;
|
---|
540 |
|
---|
541 | var removeFromArchivesUrl = metadata_server_url + "a=remove-archives-metadata&site=" + gs.xsltParams.site_name + "&c=" + gs.cgiParams.c + "&d=" + gs.cgiParams.d + "&metaname=" + metaname + "&metavalue=" + json + "&metapos=" + metaposVal;
|
---|
542 |
|
---|
543 | var removeFromImportUrl = metadata_server_url + "a=remove-import-metadata&site=" + gs.xsltParams.site_name + "&c=" + gs.cgiParams.c + "&d=" + gs.cgiParams.d + "&metaname=" + metaname + "&metavalue=" + json;
|
---|
544 |
|
---|
545 | var indexCallBack = {
|
---|
546 | success: function(response){
|
---|
547 |
|
---|
548 | //need to renumber ids so that the correct note is deleted next time
|
---|
549 | for(var i = 0; i < annotation.image.notes.length; i++)
|
---|
550 | {
|
---|
551 | var currNote = annotation.image.notes[i];
|
---|
552 |
|
---|
553 | if(currNote.id > id)
|
---|
554 | currNote.id--;
|
---|
555 | }
|
---|
556 | //_posCount--;
|
---|
557 |
|
---|
558 | console.log("Index metadata successfully removed. Note id: " + id);
|
---|
559 | },
|
---|
560 | failed: function(){
|
---|
561 | console.log("Failed to delete index metadata of note with id: " + id);
|
---|
562 | }
|
---|
563 | };
|
---|
564 |
|
---|
565 | var archiveCallBack = {
|
---|
566 | success: function(response){
|
---|
567 | //need to rebuild collection here.
|
---|
568 | console.log("Metadata successfully removed from archives. Note id: " + id);
|
---|
569 | },
|
---|
570 | failed: function(){
|
---|
571 | console.log("Failed to remove metadata from archives. Note id: " + id);
|
---|
572 | }
|
---|
573 | };
|
---|
574 |
|
---|
575 | var importCallBack = {
|
---|
576 | success: function(){},
|
---|
577 | failed: function(){ alert("Failed to delete import metadata of note with id: " + id);}
|
---|
578 | };
|
---|
579 |
|
---|
580 | YAHOO.util.Connect.asyncRequest("GET",removeFromIndexUrl,indexCallBack);
|
---|
581 | YAHOO.util.Connect.asyncRequest("GET",removeFromArchivesUrl,archiveCallBack);
|
---|
582 | YAHOO.util.Connect.asyncRequest("GET",removeFromImportUrl,importCallBack);
|
---|
583 |
|
---|
584 | }
|
---|
585 |
|
---|
586 | annotation.image.mode = 'view';
|
---|
587 | editable.destroy();
|
---|
588 | annotation.destroy();
|
---|
589 |
|
---|
590 | });
|
---|
591 | editable.form.append(del);
|
---|
592 |
|
---|
593 | $.fn.annotateImage.createCancelButton(editable, this.image);
|
---|
594 | }
|
---|
595 | };
|
---|
596 |
|
---|
597 | /**
|
---|
598 | * Appends the annotations coordinates to the given form that is posted to the server.
|
---|
599 | **/
|
---|
600 | $.fn.annotateImage.appendPosition = function(form, editable) {
|
---|
601 |
|
---|
602 | var areaFields = $('<input type="hidden" value="' + editable.area.height() + '" name="height"/>' +
|
---|
603 | '<input type="hidden" value="' + editable.area.width() + '" name="width"/>' +
|
---|
604 | '<input type="hidden" value="' + editable.area.position().top + '" name="top"/>' +
|
---|
605 | '<input type="hidden" value="' + editable.area.position().left + '" name="left"/>' +
|
---|
606 | '<input type="hidden" value="' + editable.note.id + '" name="id"/>');
|
---|
607 | form.append(areaFields);
|
---|
608 | }
|
---|
609 |
|
---|
610 | /**
|
---|
611 | * Sets the position of an annotation.
|
---|
612 | **/
|
---|
613 | $.fn.annotateView.prototype.resetPosition = function(editable, text) {
|
---|
614 |
|
---|
615 | this.form.html(text);
|
---|
616 | this.form.hide();
|
---|
617 |
|
---|
618 | // Resize
|
---|
619 | this.area.children('div').height(editable.area.height() + 'px');
|
---|
620 | this.area.children('div').width((editable.area.width() - 2) + 'px');
|
---|
621 | this.area.css('left', (editable.area.position().left) + 'px');
|
---|
622 | this.area.css('top', (editable.area.position().top) + 'px');
|
---|
623 | this.form.css('left', (editable.area.position().left) + 'px');
|
---|
624 | this.form.css('top', (parseInt(editable.area.position().top) + parseInt(editable.area.height()) + 7) + 'px');
|
---|
625 |
|
---|
626 | // Save new position to note
|
---|
627 | this.note.top = editable.area.position().top;
|
---|
628 | this.note.left = editable.area.position().left;
|
---|
629 | this.note.height = editable.area.height();
|
---|
630 | this.note.width = editable.area.width();
|
---|
631 | this.note.text = text;
|
---|
632 | this.note.id = editable.note.id;
|
---|
633 | this.editable = true;
|
---|
634 | };
|
---|
635 |
|
---|
636 | })(jQuery); |
---|