textext.plugin.autocomplete.js in textext-rails-0.2.0

- old
+ new

@@ -1,17 +1,17 @@
 /**
  * jQuery TextExt Plugin
- * http://alexgorbatchev.com/textext
+ * http://textextjs.com
  *
- * @version 1.2.0
+ * @version 1.3.1
  * @copyright Copyright (C) 2011 Alex Gorbatchev. All rights reserved.
  * @license MIT License
  */
 (function($)
 {
 	/**
-	 * Autocomplete plugin brings the classic autocomplete functionality to the TextExt echosystem.
+	 * Autocomplete plugin brings the classic autocomplete functionality to the TextExt ecosystem.
 	 * The gist of functionality is when user starts typing in, for example a term or a tag, a
 	 * dropdown would be presented with possible suggestions to complete the input quicker.
 	 *
 	 * @author agorbatchev
 	 * @date 2011/08/17
@@ -27,10 +27,12 @@
 		CSS_DOT            = '.',
 		CSS_SELECTED       = 'text-selected',
 		CSS_DOT_SELECTED   = CSS_DOT + CSS_SELECTED,
 		CSS_SUGGESTION     = 'text-suggestion',
 		CSS_DOT_SUGGESTION = CSS_DOT + CSS_SUGGESTION,
+		CSS_LABEL          = 'text-label',
+		CSS_DOT_LABEL      = CSS_DOT + CSS_LABEL,
 
 		/**
 		 * Autocomplete plugin options are grouped under `autocomplete` when passed to the 
 		 * `$().textext()` function. For example:
 		 *
@@ -224,10 +226,12 @@
 		 */
 		EVENT_TOGGLE_DROPDOWN = 'toggleDropdown',
 
 		POSITION_ABOVE = 'above',
 		POSITION_BELOW = 'below',
+		
+		DATA_MOUSEDOWN_ON_AUTOCOMPLETE = 'mousedownOnAutocomplete',
 
 		DEFAULT_OPTS = {
 			autocomplete : {
 				enabled : true,
 				dropdown : {
@@ -289,19 +293,26 @@
 			container = $(self.opts(OPT_HTML_DROPDOWN));
 			container.insertAfter(input);
 
 			self.on(container, {
 				mouseover : self.onMouseOver,
+				mousedown : self.onMouseDown,
 				click     : self.onClick
 			});
 
 			container
 				.css('maxHeight', self.opts(OPT_MAX_HEIGHT))
 				.addClass('text-position-' + self.opts(OPT_POSITION))
 				;
 
 			$(self).data('container', container);
+			
+			$(document.body).click(function(e) 
+			{
+				if (self.isDropdownVisible() && !self.withinWrapElement(e.target))
+					self.trigger(EVENT_HIDE_DROPDOWN);
+			});
 
 			self.positionDropdown();
 		}
 	};
 
@@ -343,12 +354,28 @@
 		{
 			self.clearSelected();
 			target.addClass(CSS_SELECTED);
 		}
 	};
-
+	
 	/**
+	 * Reacts to the `mouseDown` event triggered by the TextExt core.
+	 *
+	 * @signature TextExtAutocomplete.onMouseDown(e)
+	 *
+	 * @param e {Object} jQuery event.
+	 *
+	 * @author adamayres
+	 * @date 2012/01/13
+	 * @id TextExtAutocomplete.onMouseDown
+	 */
+	p.onMouseDown = function(e)
+	{
+		this.containerElement().data(DATA_MOUSEDOWN_ON_AUTOCOMPLETE, true);
+	};
+	
+	/**
 	 * Reacts to the `click` event triggered by the TextExt core.
 	 *
 	 * @signature TextExtAutocomplete.onClick(e)
 	 *
 	 * @param e {Object} jQuery event.
@@ -361,12 +388,15 @@
 	{
 		var self   = this,
 			target = $(e.target)
 			;
 
-		if(target.is(CSS_DOT_SUGGESTION))
-			self.selectFromDropdown();
+		if(target.is(CSS_DOT_SUGGESTION) || target.is(CSS_DOT_LABEL))
+			self.trigger('enterKeyPress');
+		
+		if (self.core().hasPlugin('tags'))
+			self.val('');
 	};
 
 	/**
 	 * Reacts to the `blur` event triggered by the TextExt core.
 	 *
@@ -378,16 +408,22 @@
 	 * @date 2011/08/17
 	 * @id TextExtAutocomplete.onBlur
 	 */
 	p.onBlur = function(e)
 	{
-		var self = this;
+		var self              = this,
+			container         = self.containerElement(),
+			isBlurByMousedown = container.data(DATA_MOUSEDOWN_ON_AUTOCOMPLETE) === true
+			;
 
-		// use timeout here so that onClick has a chance to fire because if
-		// dropdown is hidden when clicked, onClick doesn't fire
+		// only trigger a close event if the blur event was 
+		// not triggered by a mousedown event on the autocomplete
+		// otherwise set focus back back on the input
 		if(self.isDropdownVisible())
-			setTimeout(function() { self.trigger(EVENT_HIDE_DROPDOWN) }, 100);
+			isBlurByMousedown ? self.core().focusInput() : self.trigger(EVENT_HIDE_DROPDOWN);
+				
+		container.removeData(DATA_MOUSEDOWN_ON_AUTOCOMPLETE);
 	};
 
 	/**
 	 * Reacts to the `backspaceKeyPress` event triggered by the TextExt core. 
 	 *
@@ -682,11 +718,11 @@
 	 * @param e {Object} jQuery event.
 	 *
 	 * @author agorbatchev
 	 * @date 2011/12/27
 	 * @id TextExtAutocomplete.onToggleDropdown
-	 * @version 1.1
+	 * @version 1.1.0
 	 */
 	p.onToggleDropdown = function(e)
 	{
 		var self = this;
 		self.trigger(self.containerElement().is(':visible') ? EVENT_HIDE_DROPDOWN : EVENT_SHOW_DROPDOWN);
@@ -1047,11 +1083,28 @@
 			;
 
 		if(suggestion)
 		{
 			self.val(self.itemManager().itemToString(suggestion));
-			self.core().getFormData();
+			self.core().getFormData();	
 		}
 
 		self.trigger(EVENT_HIDE_DROPDOWN);
 	};
+	
+	/**
+	 * Determines if the specified HTML element is within the TextExt core wrap HTML element.
+	 *
+	 * @signature TextExtAutocomplete.withinWrapElement(element)
+	 *
+	 * @param element {HTMLElement} element to check if contained by wrap element
+	 *
+	 * @author adamayres
+	 * @version 1.3.0
+	 * @date 2012/01/15
+	 * @id TextExtAutocomplete.withinWrapElement
+	 */
+	p.withinWrapElement = function(element) 
+	{
+		return this.core().wrapElement().find(element).size() > 0;
+	}
 })(jQuery);