platforma/static/js/jquery.elastic.js

   1 /**
   2 *       @name                                                   Elastic
   3 *       @descripton                                             Elastic is Jquery plugin that grow and shrink your textareas automaticliy
   4 *       @version                                                1.6.3
   5 *       @requires                                               Jquery 1.2.6+
   6 *
   7 *       @author                                                 Jan Jarfalk
   8 *       @author-email                                   jan.jarfalk@unwrongest.com
   9 *       @author-website                                 http://www.unwrongest.com
  10 *
  11 *       @licens                                                 MIT License - http://www.opensource.org/licenses/mit-license.php
  12 */
  13
  14 (function(jQuery){
  15         jQuery.fn.extend({
  16                 elastic: function() {
  17
  18                         //      We will create a div clone of the textarea
  19                         //      by copying these attributes from the textarea to the div.
  20                         var mimics = [
  21                                 'paddingTop',
  22                                 'paddingRight',
  23                                 'paddingBottom',
  24                                 'paddingLeft',
  25                                 'fontSize',
  26                                 'lineHeight',
  27                                 'fontFamily',
  28                                 'width',
  29                                 'fontWeight'];
  30
  31                         return this.each( function() {
  32
  33                                 // Elastic only works on textareas
  34                                 if ( this.type != 'textarea' ) {
  35                                         return false;
  36                                 }
  37
  38                                 var $textarea   =       jQuery(this),
  39                                         $twin           =       jQuery('<div />').css({'position': 'absolute','display':'none','word-wrap':'break-word'}),
  40                                         lineHeight      =       parseInt($textarea.css('line-height'),10) || parseInt($textarea.css('font-size'),'10'),
  41                                         minheight       =       parseInt($textarea.css('height'),10) || lineHeight*3,
  42                                         maxheight       =       parseInt($textarea.css('max-height'),10) || Number.MAX_VALUE,
  43                                         goalheight      =       0,
  44                                         i                       =       0;
  45
  46                                 // Opera returns max-height of -1 if not set
  47                                 if (maxheight < 0) { maxheight = Number.MAX_VALUE; }
  48
  49                                 // Append the twin to the DOM
  50                                 // We are going to meassure the height of this, not the textarea.
  51                                 $twin.appendTo($textarea.parent());
  52
  53                                 // Copy the essential styles (mimics) from the textarea to the twin
  54                                 var i = mimics.length;
  55                                 while(i--){
  56                                         $twin.css(mimics[i].toString(),$textarea.css(mimics[i].toString()));
  57                                 }
  58
  59
  60                                 // Sets a given height and overflow state on the textarea
  61                                 function setHeightAndOverflow(height, overflow){
  62                                         curratedHeight = Math.floor(parseInt(height,10));
  63                                         if($textarea.height() != curratedHeight){
  64                                                 $textarea.css({'height': curratedHeight + 'px','overflow':overflow});
  65
  66                                         }
  67                                 }
  68
  69
  70                                 // This function will update the height of the textarea if necessary
  71                                 function update() {
  72
  73                                         // Get curated content from the textarea.
  74                                         var textareaContent = $textarea.val().replace(/&/g,'&amp;').replace(/  /g, '&nbsp;').replace(/<|>/g, '&gt;').replace(/\n/g, '<br />');
  75
  76                                         var twinContent = $twin.html();
  77
  78                                         if(textareaContent+'&nbsp;' != twinContent){
  79
  80                                                 // Add an extra white space so new rows are added when you are at the end of a row.
  81                                                 $twin.html(textareaContent+'&nbsp;');
  82
  83                                                 // Change textarea height if twin plus the height of one line differs more than 3 pixel from textarea height
  84                                                 if(Math.abs($twin.height()+lineHeight - $textarea.height()) > 3){
  85
  86                                                         var goalheight = $twin.height()+lineHeight;
  87                                                         if(goalheight >= maxheight) {
  88                                                                 setHeightAndOverflow(maxheight,'auto');
  89                                                         } else if(goalheight <= minheight) {
  90                                                                 setHeightAndOverflow(minheight,'hidden');
  91                                                         } else {
  92                                                                 setHeightAndOverflow(goalheight,'hidden');
  93                                                         }
  94
  95                                                 }
  96
  97                                         }
  98
  99                                 }
 100
 101                                 // Hide scrollbars
 102                                 $textarea.css({'overflow':'hidden'});
 103
 104                                 // Update textarea size on keyup
 105                                 $textarea.keyup(function(){ update(); });
 106
 107                                 // And this line is to catch the browser paste event
 108                                 $textarea.live('input paste',function(e){ setTimeout( update, 250); });
 109
 110                                 // Run update once when elastic is initialized
 111                                 update();
 112
 113                         });
 114
 115         }
 116     });
 117 })(jQuery);