1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
/*! 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, prev_char_diff, $el;
options = $.extend({
threshold: .5,
appendMethod: 'insertAfter', // insertBefore || insertAfter || prependTo || appendTo
target: $this, // element in which to place the counter
startOpacity: .25,
maxLength: parseInt( $this.attr('maxlength'), 10 ) || 0,
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 );
if ( $.support.opacity ) $el.css({ opacity: 0 }); // don't set opacity for IE to avoid clear text issues.
$el[options.appendMethod](options.target);
$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;
if ( prev_char_diff != undefined && char_diff == prev_char_diff ) return;
opacity = options.startOpacity + ((options.threshold - percentage_complete) * ((options.startOpacity * 2) - 2));
if ( $el.is(':hidden') && percentage_complete >= options.threshold )
$el.show();
if ( $el.is(':visible') && percentage_complete < options.threshold )
$el.hide();
if ( $.support.opacity ) // don't set opacity for IE to avoid clear text issues.
$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") );
prev_char_diff = char_diff;
};
check();
});
}
});
})(jQuery);
|
