| Index: trunk/extensions/WikiLove/modules/jquery.elastic/jquery.elastic.js |
| — | — | @@ -1,7 +1,7 @@ |
| 2 | 2 | /** |
| 3 | 3 | * @name Elastic |
| 4 | 4 | * @descripton Elastic is jQuery plugin that grow and shrink your textareas automatically |
| 5 | | -* @version 1.6.5 |
| | 5 | +* @version 1.6.10 |
| 6 | 6 | * @requires jQuery 1.2.6+ |
| 7 | 7 | * |
| 8 | 8 | * @author Jan Jarfalk |
| — | — | @@ -29,22 +29,35 @@ |
| 30 | 30 | 'lineHeight', |
| 31 | 31 | 'fontFamily', |
| 32 | 32 | 'width', |
| 33 | | - 'fontWeight']; |
| | 33 | + 'fontWeight', |
| | 34 | + 'border-top-width', |
| | 35 | + 'border-right-width', |
| | 36 | + 'border-bottom-width', |
| | 37 | + 'border-left-width', |
| | 38 | + 'borderTopStyle', |
| | 39 | + 'borderTopColor', |
| | 40 | + 'borderRightStyle', |
| | 41 | + 'borderRightColor', |
| | 42 | + 'borderBottomStyle', |
| | 43 | + 'borderBottomColor', |
| | 44 | + 'borderLeftStyle', |
| | 45 | + 'borderLeftColor' |
| | 46 | + ]; |
| 34 | 47 | |
| 35 | 48 | return this.each( function() { |
| 36 | 49 | |
| 37 | 50 | // Elastic only works on textareas |
| 38 | | - if ( this.type != 'textarea' ) { |
| | 51 | + if ( this.type !== 'textarea' ) { |
| 39 | 52 | return false; |
| 40 | 53 | } |
| | 54 | + |
| | 55 | + var $textarea = jQuery(this), |
| | 56 | + $twin = jQuery('<div />').css({'position': 'absolute','display':'none','word-wrap':'break-word'}), |
| | 57 | + lineHeight = parseInt($textarea.css('line-height'),10) || parseInt($textarea.css('font-size'),'10'), |
| | 58 | + minheight = parseInt($textarea.css('height'),10) || lineHeight*3, |
| | 59 | + maxheight = parseInt($textarea.css('max-height'),10) || Number.MAX_VALUE, |
| | 60 | + goalheight = 0; |
| 41 | 61 | |
| 42 | | - var $textarea = jQuery(this), |
| 43 | | - $twin = jQuery('<div />').css({'position': 'absolute','display':'none','word-wrap':'break-word'}), |
| 44 | | - lineHeight = parseInt($textarea.css('line-height'),10) || parseInt($textarea.css('font-size'),'10'), |
| 45 | | - minheight = parseInt($textarea.css('height'),10) || lineHeight*3, |
| 46 | | - maxheight = parseInt($textarea.css('max-height'),10) || Number.MAX_VALUE, |
| 47 | | - goalheight = 0; |
| 48 | | - |
| 49 | 62 | // Opera returns max-height of -1 if not set |
| 50 | 63 | if (maxheight < 0) { maxheight = Number.MAX_VALUE; } |
| 51 | 64 | |
| — | — | @@ -58,18 +71,32 @@ |
| 59 | 72 | $twin.css(mimics[i].toString(),$textarea.css(mimics[i].toString())); |
| 60 | 73 | } |
| 61 | 74 | |
| | 75 | + // Updates the width of the twin. (solution for textareas with widths in percent) |
| | 76 | + function setTwinWidth(){ |
| | 77 | + curatedWidth = Math.floor(parseInt($textarea.width(),10)); |
| | 78 | + if($twin.width() !== curatedWidth){ |
| | 79 | + $twin.css({'width': curatedWidth + 'px'}); |
| | 80 | + |
| | 81 | + // Update height of textarea |
| | 82 | + update(true); |
| | 83 | + } |
| | 84 | + } |
| 62 | 85 | |
| 63 | 86 | // Sets a given height and overflow state on the textarea |
| 64 | 87 | function setHeightAndOverflow(height, overflow){ |
| | 88 | + |
| 65 | 89 | var curratedHeight = Math.floor(parseInt(height,10)); |
| 66 | | - if($textarea.height() != curratedHeight){ |
| | 90 | + if($textarea.height() !== curratedHeight){ |
| 67 | 91 | $textarea.css({'height': curratedHeight + 'px','overflow':overflow}); |
| | 92 | + |
| | 93 | + // Fire the custom event resize |
| | 94 | + $textarea.trigger('resize'); |
| | 95 | + |
| 68 | 96 | } |
| 69 | 97 | } |
| 70 | 98 | |
| 71 | | - |
| 72 | 99 | // This function will update the height of the textarea if necessary |
| 73 | | - function update() { |
| | 100 | + function update(forced) { |
| 74 | 101 | |
| 75 | 102 | // Get curated content from the textarea. |
| 76 | 103 | var textareaContent = $textarea.val().replace(/&/g,'&').replace(/ {2}/g, ' ').replace(/<|>/g, '>').replace(/\n/g, '<br />'); |
| — | — | @@ -77,7 +104,7 @@ |
| 78 | 105 | // Compare curated content with curated twin. |
| 79 | 106 | var twinContent = $twin.html().replace(/<br>/ig,'<br />'); |
| 80 | 107 | |
| 81 | | - if(textareaContent+' ' != twinContent){ |
| | 108 | + if(forced || textareaContent+' ' !== twinContent){ |
| 82 | 109 | |
| 83 | 110 | // Add an extra white space so new rows are added when you are at the end of a row. |
| 84 | 111 | $twin.html(textareaContent+' '); |
| — | — | @@ -108,8 +135,12 @@ |
| 109 | 136 | update(); |
| 110 | 137 | }); |
| 111 | 138 | |
| | 139 | + // Update width of twin if browser or textarea is resized (solution for textareas with widths in percent) |
| | 140 | + $(window).bind('resize', setTwinWidth); |
| | 141 | + $textarea.bind('resize', setTwinWidth); |
| | 142 | + $textarea.bind('update', update); |
| | 143 | + |
| 112 | 144 | // Compact textarea on blur |
| 113 | | - // Lets animate this.... |
| 114 | 145 | $textarea.bind('blur',function(){ |
| 115 | 146 | if($twin.height() < maxheight){ |
| 116 | 147 | if($twin.height() > minheight) { |
| — | — | @@ -121,7 +152,7 @@ |
| 122 | 153 | }); |
| 123 | 154 | |
| 124 | 155 | // And this line is to catch the browser paste event |
| 125 | | - $textarea.live('input paste',function(e){ setTimeout( update, 250); }); |
| | 156 | + $textarea.bind('input paste',function(e){ setTimeout( update, 250); }); |
| 126 | 157 | |
| 127 | 158 | // Run update once when elastic is initialized |
| 128 | 159 | update(); |