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; diff --git a/readme.md b/readme.md index c395a99..4dce024 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. ### Build: