165 lines
5.1 KiB
JavaScript
165 lines
5.1 KiB
JavaScript
/**
|
||
* @name Elastic
|
||
* @descripton Elastic is jQuery plugin that grow and shrink your textareas automatically
|
||
* @version 1.6.11 customized
|
||
* @requires jQuery 1.2.6+
|
||
*
|
||
* @author Jan Jarfalk - customized by FX Deltombe
|
||
* @author-email jan.jarfalk@unwrongest.com
|
||
* @author-website http://www.unwrongest.com
|
||
*
|
||
* @licence MIT License - http://www.opensource.org/licenses/mit-license.php
|
||
*/
|
||
|
||
(function($){
|
||
jQuery.fn.extend({
|
||
elastic: function() {
|
||
|
||
// We will create a div clone of the textarea
|
||
// by copying these attributes from the textarea to the div.
|
||
var mimics = [
|
||
'paddingTop',
|
||
'paddingRight',
|
||
'paddingBottom',
|
||
'paddingLeft',
|
||
'fontSize',
|
||
'lineHeight',
|
||
'fontFamily',
|
||
'width',
|
||
'fontWeight',
|
||
'border-top-width',
|
||
'border-right-width',
|
||
'border-bottom-width',
|
||
'border-left-width',
|
||
'borderTopStyle',
|
||
'borderTopColor',
|
||
'borderRightStyle',
|
||
'borderRightColor',
|
||
'borderBottomStyle',
|
||
'borderBottomColor',
|
||
'borderLeftStyle',
|
||
'borderLeftColor'
|
||
];
|
||
|
||
return this.each( function() {
|
||
|
||
// Elastic only works on textareas
|
||
if ( this.type !== 'textarea' ) {
|
||
return false;
|
||
}
|
||
|
||
var $textarea = jQuery(this),
|
||
$twin = jQuery('<div />').css({
|
||
'position' : 'absolute',
|
||
'display' : 'none',
|
||
'word-wrap' : 'break-word',
|
||
'white-space' :'pre-wrap'
|
||
}),
|
||
lineHeight = parseInt($textarea.css('line-height'),10) || parseInt($textarea.css('font-size'),'10'),
|
||
// modified by FX Deltombe: try to set minheight from textarea rows instead of textarea css height,
|
||
minheight = lineHeight * parseInt($textarea.attr('rows'), 10) || parseInt($textarea.css('height'),10) || lineHeight*3,
|
||
maxheight = parseInt($textarea.css('max-height'),10) || Number.MAX_VALUE,
|
||
goalheight = 0;
|
||
|
||
// Opera returns max-height of -1 if not set
|
||
if (maxheight < 0) { maxheight = Number.MAX_VALUE; }
|
||
|
||
// Append the twin to the DOM
|
||
// We are going to meassure the height of this, not the textarea.
|
||
$twin.appendTo($textarea.parent());
|
||
|
||
// Copy the essential styles (mimics) from the textarea to the twin
|
||
var i = mimics.length;
|
||
while(i--){
|
||
$twin.css(mimics[i].toString(),$textarea.css(mimics[i].toString()));
|
||
}
|
||
|
||
// Updates the width of the twin. (solution for textareas with widths in percent)
|
||
function setTwinWidth(){
|
||
var curatedWidth = Math.floor(parseInt($textarea.width(),10));
|
||
if($twin.width() !== curatedWidth){
|
||
$twin.css({'width': curatedWidth + 'px'});
|
||
|
||
// Update height of textarea
|
||
update(true);
|
||
}
|
||
}
|
||
|
||
// Sets a given height and overflow state on the textarea
|
||
function setHeightAndOverflow(height, overflow){
|
||
|
||
var curratedHeight = Math.floor(parseInt(height,10));
|
||
if($textarea.height() !== curratedHeight){
|
||
$textarea.css({'height': curratedHeight + 'px','overflow':overflow});
|
||
}
|
||
}
|
||
|
||
// This function will update the height of the textarea if necessary
|
||
function update(forced) {
|
||
|
||
// Get curated content from the textarea.
|
||
var textareaContent = $textarea.val().replace(/&/g,'&').replace(/ {2}/g, ' ').replace(/<|>/g, '>').replace(/\n/g, '<br />');
|
||
|
||
// Compare curated content with curated twin.
|
||
var twinContent = $twin.html().replace(/<br>/ig,'<br />');
|
||
|
||
if(forced || textareaContent+' ' !== twinContent){
|
||
|
||
// Add an extra white space so new rows are added when you are at the end of a row.
|
||
$twin.html(textareaContent+' ');
|
||
|
||
// modified by FX Deltombe:consider twin height instead of twin height plus the height of one line
|
||
// Change textarea height if twin height differs more than 3 pixel from textarea height
|
||
if(Math.abs($twin.height() - $textarea.height()) > 3){
|
||
|
||
var goalheight = $twin.height();
|
||
if(goalheight >= maxheight) {
|
||
setHeightAndOverflow(maxheight,'auto');
|
||
} else if(goalheight <= minheight) {
|
||
setHeightAndOverflow(minheight,'hidden');
|
||
} else {
|
||
setHeightAndOverflow(goalheight,'hidden');
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
// Hide scrollbars
|
||
$textarea.css({'overflow':'hidden'});
|
||
|
||
// Update textarea size on keyup, change, cut and paste
|
||
$textarea.bind('keyup change cut paste', function(){
|
||
update();
|
||
});
|
||
|
||
// Update width of twin if browser or textarea is resized (solution for textareas with widths in percent)
|
||
$(window).bind('resize', setTwinWidth);
|
||
$textarea.bind('resize', setTwinWidth);
|
||
$textarea.bind('update', update);
|
||
|
||
// Compact textarea on blur
|
||
$textarea.bind('blur',function(){
|
||
if($twin.height() < maxheight){
|
||
if($twin.height() > minheight) {
|
||
$textarea.height($twin.height());
|
||
} else {
|
||
$textarea.height(minheight);
|
||
}
|
||
}
|
||
});
|
||
|
||
// And this line is to catch the browser paste event
|
||
$textarea.bind('input paste',function(e){ setTimeout( update, 250); });
|
||
|
||
// Run update once when elastic is initialized
|
||
update();
|
||
|
||
});
|
||
|
||
}
|
||
});
|
||
})(jQuery);
|