root / 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); |