new countable plugin

2 files changed, 85 insertions, 0 deletions

diff --git a/README.markdown b/README.markdown
new file mode 100644
index 0000000..66acd70
--- /dev/null
+++ b/README.markdown
@@ -0,0 +1,26 @@
+# countable
+
+A jQuery plugin that adds a character counter to inputs and textareas.
+
+
+## Settings
+
+The countable plugin has 11 settings:
+
+* `threshold` - The percentage at which the counter begins to fade in. Default is 0.5.
+* `appendMethod` - Either `insertAfter` or `insertBefore` to insert the counter after or before the input/textarea. Default is `insertAfter`.
+* `startOpacity` - The percentage of opacity it should start out with once it reaches the threshold. Default is 0.25.
+* `maxLength` - The maximum number of characters. Default uses the `maxlength` attribute of the input/textarea.
+* `maxClassName` - The class name to add once the user has gone over the max number of characters. Default is 'maxed'.
+* `className` - The class name for the counter. Default is 'counter'.
+* `tagName` - The type of tag to use for the counter. Default is `span`.
+* `interval` - The interval at which it checks the input/textarea. Default is 750.
+* `positiveCopy` - The copy to use when the character count is below the max. Use `{n}` to denote where the number should go. Default is "You have {n} characters left.".
+* `negativeCopy` - The copy to use when the character count is over the max. Use `{n}` to denote where the number should go. Default is "You are {n} characters over.".
+* `fadeDuration` - The duration of the fade animations. Default is 'normal'.
+
+## License
+
+The expandable plugin is dual licensed *(just like jQuery)* under the [MIT](http://www.opensource.org/licenses/mit-license.php) and [GPL](http://www.opensource.org/licenses/gpl-license.php) licenses.
+
+Copyright (c) 2009 [Brandon Aaron](http://brandonaaron.net)
\ No newline at end of file
diff --git a/jquery.countable.js b/jquery.countable.js
new file mode 100644
index 0000000..b827a64
--- /dev/null
+++ b/jquery.countable.js
@@ -0,0 +1,59 @@
+/*! Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
+ * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
+ * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+ */
+
+(function($) {
+
+$.fn.extend({
+	countable: function(options) {
+		return this.each(function() {
+			var $this = $(this), interval, $el;
+			options = $.extend({
+				threshold: 0.5,
+				appendMethod: 'insertAfter', // insertBefore || insertAfter
+				startOpacity: .25,
+				maxLength: parseInt( $this.attr('maxlength'), 10 ),
+				maxClassName: 'maxed',
+				className: 'counter',
+				tagName: 'span',
+				interval: 750,
+				positiveCopy: "You have {n} characters left.",
+				negativeCopy: "You are {n} characters over.",
+				fadeDuration: 'normal'
+			}, options);
+			$el = $('<'+options.tagName+'/>')
+				.html( options.positiveCopy.replace("{n}", '<span class="num"/>') )
+				.addClass( options.className )
+				.css({ opacity: 0 });
+			$el[options.appendMethod]($this);
+			$this
+				.bind('keyup', check)
+				.bind('focus blur', function(event) {
+					if ( event.type == 'blur' ) clearInterval( interval );
+					if ( event.type == 'focus' && !interval ) setInterval(check, options.interval);
+				});
+			function check() {
+				var val = $this.val(), length = val.length, percentage_complete = length/options.maxLength, char_diff = options.maxLength - length;
+				opacity = options.startOpacity + ((options.threshold - percentage_complete) * ((options.startOpacity * 2) - 2));
+				$el.stop().fadeTo( options.fadeDuration, percentage_complete >= options.threshold ? opacity : 0 );
+				if ( char_diff >= 0 ) {
+					if ( $el.is( '.'+options.maxClassName ) )
+						$el.html( options.positiveCopy.replace("{n}", '<span class="num"/>') );
+				} else {
+					if ( !$el.is( '.'+options.maxClassName ) )
+						$el.html( options.negativeCopy.replace("{n}", '<span class="num"/>') );
+				}
+				$el[ (char_diff < 0 ? 'add' : 'remove') + 'Class' ]( options.maxClassName );
+				$el.find('.num').text( Math.abs(char_diff) );
+				if ( char_diff == -1 || char_diff == 1 )
+					$el.html( $el.html().replace(/characters\b/, "character") );
+				else
+					$el.html( $el.html().replace(/character\b/, "characters") );
+			};
+			check();
+		});
+	}
+});
+
+})(jQuery);
\ No newline at end of file