From 1e916f6868aae0b3a77d52760874d6685e8636c2 Mon Sep 17 00:00:00 2001 From: Jonas Mello Date: Wed, 16 Oct 2013 23:35:55 -0300 Subject: [PATCH 1/2] Add autocomplete and autocompleteAvailableTags options --- demo-static-autocomplete.html | 63 +++++++++++++++++++++++++++++++++++ js/jquery.annotate.js | 30 +++++++++++++---- 2 files changed, 86 insertions(+), 7 deletions(-) create mode 100644 demo-static-autocomplete.html diff --git a/demo-static-autocomplete.html b/demo-static-autocomplete.html new file mode 100644 index 0000000..46a00b4 --- /dev/null +++ b/demo-static-autocomplete.html @@ -0,0 +1,63 @@ + + + Image Annotations + + + + + + + + + +
+ Trafalgar Square +
+ + \ No newline at end of file diff --git a/js/jquery.annotate.js b/js/jquery.annotate.js index 6bc541e..cf22398 100644 --- a/js/jquery.annotate.js +++ b/js/jquery.annotate.js @@ -19,6 +19,8 @@ this.editable = opts.editable; this.useAjax = opts.useAjax; this.notes = opts.notes; + this.autocomplete = opts.autocomplete; + this.autocompleteAvailableTags = opts.autocompleteAvailableTags; // Add the canvas this.canvas = $('
'); @@ -85,7 +87,7 @@ $.fn.annotateImage.clear = function(image) { /// /// Clears all existing annotations from the image. - /// + /// for (var i = 0; i < image.notes.length; i++) { image.notes[image.notes[i]].destroy(); } @@ -117,7 +119,7 @@ /// /// Gets a count og the ticks for the current date. /// This is used to ensure that URLs are always unique and not cached by the browser. - /// + /// var now = new Date(); return now.getTime(); }; @@ -125,7 +127,7 @@ $.fn.annotateImage.add = function(image) { /// /// Adds a note to the image. - /// + /// if (image.mode == 'view') { image.mode = 'edit'; @@ -244,6 +246,11 @@ this.form = form; $('body').append(this.form); + + if (image.autocomplete && image.autocompleteAvailableTags.length) { + $.fn.annotateImage.autocomplete(image.autocompleteAvailableTags); + } + this.form.css('left', this.area.offset().left + 'px'); this.form.css('top', (parseInt(this.area.offset().top) + parseInt(this.area.height()) + 7) + 'px'); @@ -274,7 +281,7 @@ $.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'); @@ -325,6 +332,15 @@ } }; + + // Exec Autocomplete + $.fn.annotateImage.autocomplete = function (arrTags) { + $("#image-annotate-text").autocomplete({ + source: arrTags + }); + }; + + $.fn.annotateView.prototype.setPosition = function() { /// /// Sets the position of an annotation. @@ -352,7 +368,7 @@ $.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'); @@ -361,7 +377,7 @@ $.fn.annotateView.prototype.destroy = function() { /// /// Destroys the annotation. - /// + /// this.area.remove(); this.form.remove(); } @@ -369,7 +385,7 @@ $.fn.annotateView.prototype.edit = function() { /// /// Edits the annotation. - /// + /// if (this.image.mode == 'view') { this.image.mode = 'edit'; var annotation = this; From 5afb84af4c7e681b5d09ea0542c530f2544e1f52 Mon Sep 17 00:00:00 2001 From: Jonas Mello Date: Wed, 23 Apr 2014 14:57:21 -0300 Subject: [PATCH 2/2] Update readme.md --- readme.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/readme.md b/readme.md index 32c11c8..ec0f64c 100644 --- a/readme.md +++ b/readme.md @@ -10,14 +10,14 @@ Extract [this zip file] [7] into a directory on your web server and navigate to To use the plugin you first need to reference the jQuery and jQuery UI libraries in your page. Add the `jquery.annotate.js` and `annotation.css` files to enable the plugin. - +```html - +``` Once you've added in the necessary scripts, hook up an image on the page by using the following syntax: - +```html - +``` It is important to use the `$(function() { ... });` function as this will fire once the page and all it's images have loaded. Failing to do so will result in the plugin executing before the image dimensions have been determined. The HTML markup for the page looks like this: - +```html Demo Page @@ -57,7 +57,7 @@ The HTML markup for the page looks like this: - +``` A copy of all this code is included in the release. ###History: @@ -118,4 +118,4 @@ Released under the GNU license. [4]: http://teddy.fr [5]: http://www.famfamfam.com/ [6]: http://www.flickr.com/photos/mauricedb/2742966709/ - [7]: https://github.com/flipbit/jquery-image-annotate/zipball/master \ No newline at end of file + [7]: https://github.com/flipbit/jquery-image-annotate/zipball/master