colonymech / docs / www / colonyscout / internal / jeditable / js / jquery.autogrow.js @ f59acf11
History | View | Annotate | Download (3.4 KB)
1 |
/*
|
---|---|
2 |
* Auto Expanding Text Area (1.2.2)
|
3 |
* by Chrys Bader (www.chrysbader.com)
|
4 |
* chrysb@gmail.com
|
5 |
*
|
6 |
* Special thanks to:
|
7 |
* Jake Chapa - jake@hybridstudio.com
|
8 |
* John Resig - jeresig@gmail.com
|
9 |
*
|
10 |
* Copyright (c) 2008 Chrys Bader (www.chrysbader.com)
|
11 |
* Licensed under the GPL (GPL-LICENSE.txt) license.
|
12 |
*
|
13 |
*
|
14 |
* NOTE: This script requires jQuery to work. Download jQuery at www.jquery.com
|
15 |
*
|
16 |
*/
|
17 |
|
18 |
(function(jQuery) {
|
19 |
|
20 |
var self = null; |
21 |
|
22 |
jQuery.fn.autogrow = function(o) |
23 |
{ |
24 |
return this.each(function() { |
25 |
new jQuery.autogrow(this, o); |
26 |
}); |
27 |
}; |
28 |
|
29 |
|
30 |
/**
|
31 |
* The autogrow object.
|
32 |
*
|
33 |
* @constructor
|
34 |
* @name jQuery.autogrow
|
35 |
* @param Object e The textarea to create the autogrow for.
|
36 |
* @param Hash o A set of key/value pairs to set as configuration properties.
|
37 |
* @cat Plugins/autogrow
|
38 |
*/
|
39 |
|
40 |
jQuery.autogrow = function (e, o) |
41 |
{ |
42 |
this.options = o || {};
|
43 |
this.dummy = null; |
44 |
this.interval = null; |
45 |
this.line_height = this.options.lineHeight || parseInt(jQuery(e).css('line-height')); |
46 |
this.min_height = this.options.minHeight || parseInt(jQuery(e).css('min-height')); |
47 |
this.max_height = this.options.maxHeight || parseInt(jQuery(e).css('max-height'));; |
48 |
this.textarea = jQuery(e);
|
49 |
|
50 |
if(this.line_height == NaN) |
51 |
this.line_height = 0; |
52 |
|
53 |
// Only one textarea activated at a time, the one being used
|
54 |
this.init();
|
55 |
}; |
56 |
|
57 |
jQuery.autogrow.fn = jQuery.autogrow.prototype = { |
58 |
autogrow: '1.2.2' |
59 |
}; |
60 |
|
61 |
jQuery.autogrow.fn.extend = jQuery.autogrow.extend = jQuery.extend; |
62 |
|
63 |
jQuery.autogrow.fn.extend({ |
64 |
|
65 |
init: function() { |
66 |
var self = this; |
67 |
this.textarea.css({overflow: 'hidden', display: 'block'}); |
68 |
this.textarea.bind('focus', function() { self.startExpand() } ).bind('blur', function() { self.stopExpand() }); |
69 |
this.checkExpand();
|
70 |
}, |
71 |
|
72 |
startExpand: function() { |
73 |
var self = this; |
74 |
this.interval = window.setInterval(function() {self.checkExpand()}, 400); |
75 |
}, |
76 |
|
77 |
stopExpand: function() { |
78 |
clearInterval(this.interval);
|
79 |
}, |
80 |
|
81 |
checkExpand: function() { |
82 |
|
83 |
if (this.dummy == null) |
84 |
{ |
85 |
this.dummy = jQuery('<div></div>'); |
86 |
this.dummy.css({
|
87 |
'font-size' : this.textarea.css('font-size'), |
88 |
'font-family': this.textarea.css('font-family'), |
89 |
'width' : this.textarea.css('width'), |
90 |
'padding' : this.textarea.css('padding'), |
91 |
'line-height': this.line_height + 'px', |
92 |
'overflow-x' : 'hidden', |
93 |
'position' : 'absolute', |
94 |
'top' : 0, |
95 |
'left' : -9999 |
96 |
}).appendTo('body');
|
97 |
} |
98 |
|
99 |
// Strip HTML tags
|
100 |
var html = this.textarea.val().replace(/(<|>)/g, ''); |
101 |
|
102 |
// IE is different, as per usual
|
103 |
if ($.browser.msie) |
104 |
{ |
105 |
html = html.replace(/\n/g, '<BR>new'); |
106 |
} |
107 |
else
|
108 |
{ |
109 |
html = html.replace(/\n/g, '<br>new'); |
110 |
} |
111 |
|
112 |
if (this.dummy.html() != html) |
113 |
{ |
114 |
this.dummy.html(html);
|
115 |
|
116 |
if (this.max_height > 0 && (this.dummy.height() + this.line_height > this.max_height)) |
117 |
{ |
118 |
this.textarea.css('overflow-y', 'auto'); |
119 |
} |
120 |
else
|
121 |
{ |
122 |
this.textarea.css('overflow-y', 'hidden'); |
123 |
if (this.textarea.height() < this.dummy.height() + this.line_height || (this.dummy.height() < this.textarea.height())) |
124 |
{ |
125 |
this.textarea.animate({height: (this.dummy.height() + this.line_height) + 'px'}, 100); |
126 |
} |
127 |
} |
128 |
} |
129 |
} |
130 |
|
131 |
}); |
132 |
})(jQuery); |