textext-rails 0.1.0

data/vendor/assets/javascripts/textext.plugin.filter.js

@@ -0,0 +1,242 @@
+/**
+ * jQuery TextExt Plugin
+ * http://alexgorbatchev.com/textext
+ *
+ * @version 1.2.0
+ * @copyright Copyright (C) 2011 Alex Gorbatchev. All rights reserved.
+ * @license MIT License
+ */
+(function($)
+{
+	/**
+	 * The Filter plugin introduces ability to limit input that the text field
+	 * will accept. If the Tags plugin is used, Filter plugin will limit which
+	 * tags it's possible to add.
+	 *
+	 * The list of allowed items can be either specified through the
+	 * options, can come from the Suggestions plugin or be loaded by the Ajax 
+	 * plugin. All these plugins have one thing in common -- they 
+	 * trigger `setSuggestions` event which the Filter plugin is expecting.
+	 * 
+	 * @author agorbatchev
+	 * @date 2011/08/18
+	 * @id TextExtFilter
+	 */
+	function TextExtFilter() {};
+
+	$.fn.textext.TextExtFilter = TextExtFilter;
+	$.fn.textext.addPlugin('filter', TextExtFilter);
+
+	var p = TextExtFilter.prototype,
+
+		/**
+		 * Filter plugin options are grouped under `filter` when passed to the 
+		 * `$().textext()` function. For example:
+		 *
+		 *     $('textarea').textext({
+		 *         plugins: 'filter',
+		 *         filter: {
+		 *             items: [ "item1", "item2" ]
+		 *         }
+		 *     })
+		 *
+		 * @author agorbatchev
+		 * @date 2011/08/18
+		 * @id TextExtFilter.options
+		 */
+		
+		/**
+		 * This is a toggle switch to enable or disable the Filter plugin. The value is checked
+		 * each time at the top level which allows you to toggle this setting on the fly.
+		 *
+		 * @name filter.enabled
+		 * @default true
+		 * @author agorbatchev
+		 * @date 2011/08/18
+		 * @id TextExtFilter.options.enabled
+		 */
+		OPT_ENABLED = 'filter.enabled',
+
+		/**
+		 * Arra of items that the Filter plugin will allow the Tag plugin to add to the list of
+		 * its resut tags. Each item by default is expected to be a string which default `ItemManager`
+		 * can work with. You can change the item type by supplying custom `ItemManager`.
+		 *
+		 * @name filter.items
+		 * @default null
+		 * @author agorbatchev
+		 * @date 2011/08/18
+		 * @id TextExtFilter.options.items
+		 */
+		OPT_ITEMS = 'filter.items',
+
+		/**
+		 * Filter plugin dispatches and reacts to the following events.
+		 *
+		 * @author agorbatchev
+		 * @date 2011/08/18
+		 * @id TextExtFilter.events
+		 */
+
+		/**
+		 * Filter plugin reacts to the `isTagAllowed` event triggered by the Tags plugin before
+		 * adding a new tag to the list. If the new tag is among the `items` specified in options,
+		 * then the new tag will be allowed.
+		 *
+		 * @name isTagAllowed
+		 * @author agorbatchev
+		 * @date 2011/08/18
+		 * @id TextExtFilter.events.isTagAllowed
+		 */
+
+		/**
+		 * Filter plugin reacts to the `setSuggestions` event triggered by other plugins like 
+		 * Suggestions and Ajax.
+		 *
+		 * However, event if this event is handled and items are passed with it and stored, if `items`
+		 * option was supplied, it will always take precedense.
+		 *
+		 * @name setSuggestions
+		 * @author agorbatchev
+		 * @date 2011/08/18
+		 * @id TextExtFilter.events.setSuggestions
+		 */
+
+		DEFAULT_OPTS = {
+			filter : {
+				enabled : true,
+				items : null
+			}
+		}
+		;
+
+	/**
+	 * Initialization method called by the core during plugin instantiation.
+	 *
+	 * @signature TextExtFilter.init(core)
+	 *
+	 * @param core {TextExt} Instance of the TextExt core class.
+	 *
+	 * @author agorbatchev
+	 * @date 2011/08/18
+	 * @id TextExtFilter.init
+	 */
+	p.init = function(core)
+	{
+		var self = this;
+		self.baseInit(core, DEFAULT_OPTS);
+
+		self.on({
+			getFormData    : self.onGetFormData,
+			isTagAllowed   : self.onIsTagAllowed,
+			setSuggestions : self.onSetSuggestions
+		});
+
+		self._suggestions = null;
+	};
+
+	//--------------------------------------------------------------------------------
+	// Core functionality
+
+	/**
+	 * Reacts to the [`getFormData`][1] event triggered by the core. Returns data with the
+	 * weight of 200 to be *greater than the Autocomplete plugins* data weights. 
+	 * The weights system is covered in greater detail in the [`getFormData`][1] event 
+	 * documentation.
+	 *
+	 * This method does nothing if Tags tag is also present.
+	 *
+	 * [1]: /manual/textext.html#getformdata
+	 *
+	 * @signature TextExtFilter.onGetFormData(e, data, keyCode)
+	 *
+	 * @param e {Object} jQuery event.
+	 * @param data {Object} Data object to be populated.
+	 * @param keyCode {Number} Key code that triggered the original update request.
+	 *
+	 * @author agorbatchev
+	 * @date 2011/12/28
+	 * @id TextExtFilter.onGetFormData
+	 * @version 1.1
+	 */
+	p.onGetFormData = function(e, data, keyCode)
+	{
+		var self       = this,
+			val        = self.val(),
+			inputValue = val,
+			formValue  = ''
+			;
+
+		if(!self.core().hasPlugin('tags'))
+		{
+			if(self.isValueAllowed(inputValue))
+				formValue = val;
+
+			data[300] = self.formDataObject(inputValue, formValue);
+		}
+	};
+
+	/**
+	 * Checks given value if it's present in `filterItems` or was loaded for the Autocomplete
+	 * or by the Suggestions plugins. `value` is compared to each item using `ItemManager.compareItems`
+	 * method which is currently attached to the core. Returns `true` if value is known or
+	 * Filter plugin is disabled.
+	 *
+	 * @signature TextExtFilter.isValueAllowed(value)
+	 *
+	 * @param value {Object} Value to check.
+	 *
+	 * @author agorbatchev
+	 * @date 2011/12/28
+	 * @id TextExtFilter.isValueAllowed
+	 * @version 1.1
+	 */
+	p.isValueAllowed = function(value)
+	{
+		var self        = this,
+			list        = self.opts('filterItems') || self._suggestions || [],
+			itemManager = self.itemManager(),
+			result      = !self.opts(OPT_ENABLED), // if disabled, should just return true
+			i
+			;
+
+		for(i = 0; i < list.length && !result; i++)
+			if(itemManager.compareItems(value, list[i]))
+				result = true;
+
+		return result;
+	};
+
+	/**
+	 * Handles `isTagAllowed` event dispatched by the Tags plugin. If supplied tag is not
+	 * in the `items` list, method sets `result` on the `data` argument to `false`.
+	 *
+	 * @signature TextExtFilter.onIsTagAllowed(e, data)
+	 *
+	 * @param e {Object} jQuery event.
+	 * @param data {Object} Payload in the following format : `{ tag : {Object}, result : {Boolean} }`.
+	 * @author agorbatchev
+	 * @date 2011/08/04
+	 * @id TextExtFilter.onIsTagAllowed
+	 */
+	p.onIsTagAllowed = function(e, data)
+	{
+		data.result = this.isValueAllowed(data.tag);
+	};
+
+	/**
+	 * Reacts to the `setSuggestions` events and stores supplied suggestions for future use.
+	 * 
+	 * @signature TextExtFilter.onSetSuggestions(e, data)
+	 *
+	 * @param e {Object} jQuery event.
+	 * @param data {Object} Payload in the following format : `{ result : {Array} } }`.
+	 * @author agorbatchev
+	 * @date 2011/08/18
+	 * @id TextExtFilter.onSetSuggestions
+	 */
+	p.onSetSuggestions = function(e, data)
+	{
+		this._suggestions = data.result;
+	};
+})(jQuery);

data/vendor/assets/javascripts/textext.plugin.focus.js

@@ -0,0 +1,174 @@
+/**
+ * jQuery TextExt Plugin
+ * http://alexgorbatchev.com/textext
+ *
+ * @version 1.2.0
+ * @copyright Copyright (C) 2011 Alex Gorbatchev. All rights reserved.
+ * @license MIT License
+ */
+(function($)
+{
+	/**
+	 * Focus plugin displays a visual effect whenever user sets focus
+	 * into the text area.
+	 *
+	 * @author agorbatchev
+	 * @date 2011/08/18
+	 * @id TextExtFocus
+	 */
+	function TextExtFocus() {};
+
+	$.fn.textext.TextExtFocus = TextExtFocus;
+	$.fn.textext.addPlugin('focus', TextExtFocus);
+
+	var p = TextExtFocus.prototype,
+		/**
+		 * Focus plugin only has one option and that is its HTML template. It could be 
+		 * changed when passed to the `$().textext()` function. For example:
+		 *
+		 *     $('textarea').textext({
+		 *         plugins: 'focus',
+		 *         html: {
+		 *             focus: "<span/>"
+		 *         }
+		 *     })
+		 *
+		 * @author agorbatchev
+		 * @date 2011/08/18
+		 * @id TextExtFocus.options
+		 */
+		
+		/**
+		 * HTML source that is used to generate markup required for the focus effect.
+		 *
+		 * @name html.focus
+		 * @default '<div class="text-focus"/>'
+		 * @author agorbatchev
+		 * @date 2011/08/18
+		 * @id TextExtFocus.options.html.focus
+		 */
+		OPT_HTML_FOCUS = 'html.focus',
+
+		/**
+		 * Focus plugin dispatches or reacts to the following events.
+		 *
+		 * @author agorbatchev
+		 * @date 2011/08/17
+		 * @id TextExtFocus.events
+		 */
+
+		/**
+		 * Focus plugin reacts to the `focus` event and shows the markup generated from
+		 * the `html.focus` option.
+		 *
+		 * @name focus
+		 * @author agorbatchev
+		 * @date 2011/08/18
+		 * @id TextExtFocus.events.focus
+		 */
+
+		/**
+		 * Focus plugin reacts to the `blur` event and hides the effect.
+		 *
+		 * @name blur
+		 * @author agorbatchev
+		 * @date 2011/08/18
+		 * @id TextExtFocus.events.blur
+		 */
+
+		DEFAULT_OPTS = {
+			html : {
+				focus : '<div class="text-focus"/>'
+			}
+		}
+		;
+
+	/**
+	 * Initialization method called by the core during plugin instantiation.
+	 *
+	 * @signature TextExtFocus.init(core)
+	 *
+	 * @param core {TextExt} Instance of the TextExt core class.
+	 *
+	 * @author agorbatchev
+	 * @date 2011/08/18
+	 * @id TextExtFocus.init
+	 */
+	p.init = function(core)
+	{
+		var self = this;
+
+		self.baseInit(core, DEFAULT_OPTS);
+		self.core().wrapElement().append(self.opts(OPT_HTML_FOCUS));
+		self.on({
+			blur  : self.onBlur,
+			focus : self.onFocus
+		});
+
+		self._timeoutId = 0;
+	};
+
+	//--------------------------------------------------------------------------------
+	// Event handlers
+	
+	/**
+	 * Reacts to the `blur` event and hides the focus effect with a slight delay which 
+	 * allows quick refocusing without effect blinking in and out.
+	 *
+	 * @signature TextExtFocus.onBlur(e)
+	 *
+	 * @param e {Object} jQuery event.
+	 *
+	 * @author agorbatchev
+	 * @date 2011/08/08
+	 * @id TextExtFocus.onBlur
+	 */
+	p.onBlur = function(e)
+	{
+		var self = this;
+
+		clearTimeout(self._timeoutId);
+
+		self._timeoutId = setTimeout(function()
+		{
+			self.getFocus().hide();
+		},
+		100);
+	};
+
+	/**
+	 * Reacts to the `focus` event and shows the focus effect.
+	 *
+	 * @signature TextExtFocus.onFocus
+	 *
+	 * @param e {Object} jQuery event.
+	 * @author agorbatchev
+	 * @date 2011/08/08
+	 * @id TextExtFocus.onFocus
+	 */
+	p.onFocus = function(e)
+	{
+		var self = this;
+
+		clearTimeout(self._timeoutId);
+		
+		self.getFocus().show();
+	};
+	
+	//--------------------------------------------------------------------------------
+	// Core functionality
+
+	/**
+	 * Returns focus effect HTML element.
+	 *
+	 * @signature TextExtFocus.getFocus()
+	 *
+	 * @author agorbatchev
+	 * @date 2011/08/08
+	 * @id TextExtFocus.getFocus
+	 */
+	p.getFocus = function()
+	{
+		return this.core().wrapElement().find('.text-focus');
+	};
+})(jQuery);

data/vendor/assets/javascripts/textext.plugin.prompt.js

@@ -0,0 +1,292 @@
+/**
+ * jQuery TextExt Plugin
+ * http://alexgorbatchev.com/textext
+ *
+ * @version 1.2.0
+ * @copyright Copyright (C) 2011 Alex Gorbatchev. All rights reserved.
+ * @license MIT License
+ */
+(function($)
+{
+	/**
+	 * Prompt plugin displays a visual user propmpt in the text input area. If user focuses
+	 * on the input, the propt is hidden and only shown again when user focuses on another
+	 * element and text input doesn't have a value.
+	 *
+	 * @author agorbatchev
+	 * @date 2011/08/18
+	 * @id TextExtPrompt
+	 */
+	function TextExtPrompt() {};
+
+	$.fn.textext.TextExtPrompt = TextExtPrompt;
+	$.fn.textext.addPlugin('prompt', TextExtPrompt);
+
+	var p = TextExtPrompt.prototype,
+
+		CSS_HIDE_PROMPT = 'text-hide-prompt',
+
+		/**
+		 * Prompt plugin has options to change the prompt label and its HTML template. The options
+		 * could be changed when passed to the `$().textext()` function. For example:
+		 *
+		 *     $('textarea').textext({
+		 *         plugins: 'prompt',
+		 *         prompt: 'Your email address'
+		 *     })
+		 *
+		 * @author agorbatchev
+		 * @date 2011/08/18
+		 * @id TextExtPrompt.options
+		 */
+
+		/**
+		 * Prompt message that is displayed to the user whenever there's no value in the input.
+		 *
+		 * @name prompt
+		 * @default 'Awaiting input...'
+		 * @author agorbatchev
+		 * @date 2011/08/18
+		 * @id TextExtPrompt.options.prompt
+		 */
+		OPT_PROMPT = 'prompt',
+
+		/**
+		 * HTML source that is used to generate markup required for the prompt effect.
+		 *
+		 * @name html.prompt
+		 * @default '<div class="text-prompt"/>'
+		 * @author agorbatchev
+		 * @date 2011/08/18
+		 * @id TextExtPrompt.options.html.prompt
+		 */
+		OPT_HTML_PROMPT = 'html.prompt',
+
+		/**
+		 * Prompt plugin dispatches or reacts to the following events.
+		 * @id TextExtPrompt.events
+		 */
+
+		/**
+		 * Prompt plugin reacts to the `focus` event and hides the markup generated from
+		 * the `html.prompt` option.
+		 *
+		 * @name focus
+		 * @author agorbatchev
+		 * @date 2011/08/18
+		 * @id TextExtPrompt.events.focus
+		 */
+
+		/**
+		 * Prompt plugin reacts to the `blur` event and shows the prompt back if user
+		 * hasn't entered any value.
+		 *
+		 * @name blur
+		 * @author agorbatchev
+		 * @date 2011/08/18
+		 * @id TextExtPrompt.events.blur
+		 */
+	
+		DEFAULT_OPTS = {
+			prompt : 'Awaiting input...',
+
+			html : {
+				prompt : '<div class="text-prompt"/>'
+			}
+		}
+		;
+
+	/**
+	 * Initialization method called by the core during plugin instantiation.
+	 *
+	 * @signature TextExtPrompt.init(core)
+	 *
+	 * @param core {TextExt} Instance of the TextExt core class.
+	 *
+	 * @author agorbatchev
+	 * @date 2011/08/18
+	 * @id TextExtPrompt.init
+	 */
+	p.init = function(core)
+	{
+		var self = this,
+			container
+			;
+
+		self.baseInit(core, DEFAULT_OPTS);
+		
+		container = $(self.opts(OPT_HTML_PROMPT));
+		$(self).data('container', container);
+
+		self.core().wrapElement().append(container);
+		self.setPrompt(self.opts(OPT_PROMPT));
+		
+		if(self.val().length > 0)
+			self.hidePrompt();
+
+		self.on({
+			blur           : self.onBlur,
+			focus          : self.onFocus,
+			postInvalidate : self.onPostInvalidate,
+			postInit       : self.onPostInit
+		});
+	};
+
+	//--------------------------------------------------------------------------------
+	// Event handlers
+	
+	/**
+	 * Reacts to the `postInit` and configures the plugin for initial display.
+	 *
+	 * @signature TextExtPrompt.onPostInit(e)
+	 *
+	 * @param e {Object} jQuery event.
+	 *
+	 * @author agorbatchev
+	 * @date 2011/08/24
+	 * @id TextExtPrompt.onPostInit
+	 */
+	p.onPostInit = function(e)
+	{
+		this.invalidateBounds();
+	};
+
+	/**
+	 * Reacts to the `postInvalidate` and insures that prompt display remains correct.
+	 *
+	 * @signature TextExtPrompt.onPostInvalidate(e)
+	 *
+	 * @param e {Object} jQuery event.
+	 *
+	 * @author agorbatchev
+	 * @date 2011/08/24
+	 * @id TextExtPrompt.onPostInvalidate
+	 */
+	p.onPostInvalidate = function(e)
+	{
+		this.invalidateBounds();
+	};
+
+	/**
+	 * Repositions the prompt to make sure it's always at the same place as in the text input carret.
+	 *
+	 * @signature TextExtPrompt.invalidateBounds()
+	 *
+	 * @author agorbatchev
+	 * @date 2011/08/24
+	 * @id TextExtPrompt.invalidateBounds
+	 */
+	p.invalidateBounds = function()
+	{
+		var self  = this,
+			input = self.input()
+			;
+
+		self.containerElement().css({
+			paddingLeft : input.css('paddingLeft'),
+			paddingTop  : input.css('paddingTop')
+		});
+	};
+
+	/**
+	 * Reacts to the `blur` event and shows the prompt effect with a slight delay which 
+	 * allows quick refocusing without effect blinking in and out.
+	 *
+	 * The prompt is restored if the text box has no value.
+	 *
+	 * @signature TextExtPrompt.onBlur(e)
+	 *
+	 * @param e {Object} jQuery event.
+	 *
+	 * @author agorbatchev
+	 * @date 2011/08/08
+	 * @id TextExtPrompt.onBlur
+	 */
+	p.onBlur = function(e)
+	{
+		var self = this;
+
+		self.startTimer('prompt', 0.1, function()
+		{
+			if(self.val().length === 0)
+				self.showPrompt();
+		});
+	};
+
+	/**
+	 * Shows prompt HTML element.
+	 *
+	 * @signature TextExtPrompt.showPrompt()
+	 *
+	 * @author agorbatchev
+	 * @date 2011/08/22
+	 * @id TextExtPrompt.showPrompt
+	 */
+	p.showPrompt = function()
+	{
+		this.containerElement().removeClass(CSS_HIDE_PROMPT);
+	};
+
+	/**
+	 * Hides prompt HTML element.
+	 *
+	 * @signature TextExtPrompt.hidePrompt()
+	 *
+	 * @author agorbatchev
+	 * @date 2011/08/22
+	 * @id TextExtPrompt.hidePrompt
+	 */
+	p.hidePrompt = function()
+	{
+		this.stopTimer('prompt');
+		this.containerElement().addClass(CSS_HIDE_PROMPT);
+	};
+
+	/**
+	 * Reacts to the `focus` event and hides the prompt effect.
+	 *
+	 * @signature TextExtPrompt.onFocus
+	 *
+	 * @param e {Object} jQuery event.
+	 * @author agorbatchev
+	 * @date 2011/08/08
+	 * @id TextExtPrompt.onFocus
+	 */
+	p.onFocus = function(e)
+	{
+		this.hidePrompt();
+	};
+	
+	//--------------------------------------------------------------------------------
+	// Core functionality
+
+	/**
+	 * Sets the prompt display to the specified string.
+	 *
+	 * @signature TextExtPrompt.setPrompt(str)
+	 *
+	 * @oaram str {String} String that will be displayed in the prompt.
+	 *
+	 * @author agorbatchev
+	 * @date 2011/08/18
+	 * @id TextExtPrompt.setPrompt
+	 */
+	p.setPrompt = function(str)
+	{
+		this.containerElement().text(str);
+	};
+
+	/**
+	 * Returns prompt effect HTML element.
+	 *
+	 * @signature TextExtPrompt.containerElement()
+	 *
+	 * @author agorbatchev
+	 * @date 2011/08/08
+	 * @id TextExtPrompt.containerElement
+	 */
+	p.containerElement = function()
+	{
+		return $(this).data('container');
+	};
+})(jQuery);