| Index: trunk/extensions/SemanticMediaWiki/skins/elastic/jquery.elastic.source.js |
| — | — | @@ -0,0 +1,161 @@ |
| | 2 | +/** |
| | 3 | +* @name Elastic |
| | 4 | +* @descripton Elastic is jQuery plugin that grow and shrink your textareas automatically |
| | 5 | +* @version 1.6.10 |
| | 6 | +* @requires jQuery 1.2.6+ |
| | 7 | +* |
| | 8 | +* @author Jan Jarfalk |
| | 9 | +* @author-email jan.jarfalk@unwrongest.com |
| | 10 | +* @author-website http://www.unwrongest.com |
| | 11 | +* |
| | 12 | +* @licence MIT License - http://www.opensource.org/licenses/mit-license.php |
| | 13 | +*/ |
| | 14 | + |
| | 15 | +(function(jQuery){ |
| | 16 | + jQuery.fn.extend({ |
| | 17 | + elastic: function() { |
| | 18 | + |
| | 19 | + // We will create a div clone of the textarea |
| | 20 | + // by copying these attributes from the textarea to the div. |
| | 21 | + var mimics = [ |
| | 22 | + 'paddingTop', |
| | 23 | + 'paddingRight', |
| | 24 | + 'paddingBottom', |
| | 25 | + 'paddingLeft', |
| | 26 | + 'fontSize', |
| | 27 | + 'lineHeight', |
| | 28 | + 'fontFamily', |
| | 29 | + 'width', |
| | 30 | + 'fontWeight', |
| | 31 | + 'border-top-width', |
| | 32 | + 'border-right-width', |
| | 33 | + 'border-bottom-width', |
| | 34 | + 'border-left-width', |
| | 35 | + 'borderTopStyle', |
| | 36 | + 'borderTopColor', |
| | 37 | + 'borderRightStyle', |
| | 38 | + 'borderRightColor', |
| | 39 | + 'borderBottomStyle', |
| | 40 | + 'borderBottomColor', |
| | 41 | + 'borderLeftStyle', |
| | 42 | + 'borderLeftColor' |
| | 43 | + ]; |
| | 44 | + |
| | 45 | + return this.each( function() { |
| | 46 | + |
| | 47 | + // Elastic only works on textareas |
| | 48 | + if ( this.type !== 'textarea' ) { |
| | 49 | + return false; |
| | 50 | + } |
| | 51 | + |
| | 52 | + var $textarea = jQuery(this), |
| | 53 | + $twin = jQuery('<div />').css({'position': 'absolute','display':'none','word-wrap':'break-word'}), |
| | 54 | + lineHeight = parseInt($textarea.css('line-height'),10) || parseInt($textarea.css('font-size'),'10'), |
| | 55 | + minheight = parseInt($textarea.css('height'),10) || lineHeight*3, |
| | 56 | + maxheight = parseInt($textarea.css('max-height'),10) || Number.MAX_VALUE, |
| | 57 | + goalheight = 0; |
| | 58 | + |
| | 59 | + // Opera returns max-height of -1 if not set |
| | 60 | + if (maxheight < 0) { maxheight = Number.MAX_VALUE; } |
| | 61 | + |
| | 62 | + // Append the twin to the DOM |
| | 63 | + // We are going to meassure the height of this, not the textarea. |
| | 64 | + $twin.appendTo($textarea.parent()); |
| | 65 | + |
| | 66 | + // Copy the essential styles (mimics) from the textarea to the twin |
| | 67 | + var i = mimics.length; |
| | 68 | + while(i--){ |
| | 69 | + $twin.css(mimics[i].toString(),$textarea.css(mimics[i].toString())); |
| | 70 | + } |
| | 71 | + |
| | 72 | + // Updates the width of the twin. (solution for textareas with widths in percent) |
| | 73 | + function setTwinWidth(){ |
| | 74 | + curatedWidth = Math.floor(parseInt($textarea.width(),10)); |
| | 75 | + if($twin.width() !== curatedWidth){ |
| | 76 | + $twin.css({'width': curatedWidth + 'px'}); |
| | 77 | + |
| | 78 | + // Update height of textarea |
| | 79 | + update(true); |
| | 80 | + } |
| | 81 | + } |
| | 82 | + |
| | 83 | + // Sets a given height and overflow state on the textarea |
| | 84 | + function setHeightAndOverflow(height, overflow){ |
| | 85 | + |
| | 86 | + var curratedHeight = Math.floor(parseInt(height,10)); |
| | 87 | + if($textarea.height() !== curratedHeight){ |
| | 88 | + $textarea.css({'height': curratedHeight + 'px','overflow':overflow}); |
| | 89 | + |
| | 90 | + // Fire the custom event resize |
| | 91 | + $textarea.trigger('resize'); |
| | 92 | + |
| | 93 | + } |
| | 94 | + } |
| | 95 | + |
| | 96 | + // This function will update the height of the textarea if necessary |
| | 97 | + function update(forced) { |
| | 98 | + |
| | 99 | + // Get curated content from the textarea. |
| | 100 | + var textareaContent = $textarea.val().replace(/&/g,'&').replace(/ {2}/g, ' ').replace(/<|>/g, '>').replace(/\n/g, '<br />'); |
| | 101 | + |
| | 102 | + // Compare curated content with curated twin. |
| | 103 | + var twinContent = $twin.html().replace(/<br>/ig,'<br />'); |
| | 104 | + |
| | 105 | + if(forced || textareaContent+' ' !== twinContent){ |
| | 106 | + |
| | 107 | + // Add an extra white space so new rows are added when you are at the end of a row. |
| | 108 | + $twin.html(textareaContent+' '); |
| | 109 | + |
| | 110 | + // Change textarea height if twin plus the height of one line differs more than 3 pixel from textarea height |
| | 111 | + if(Math.abs($twin.height() + lineHeight - $textarea.height()) > 3){ |
| | 112 | + |
| | 113 | + var goalheight = $twin.height()+lineHeight; |
| | 114 | + if(goalheight >= maxheight) { |
| | 115 | + setHeightAndOverflow(maxheight,'auto'); |
| | 116 | + } else if(goalheight <= minheight) { |
| | 117 | + setHeightAndOverflow(minheight,'hidden'); |
| | 118 | + } else { |
| | 119 | + setHeightAndOverflow(goalheight,'hidden'); |
| | 120 | + } |
| | 121 | + |
| | 122 | + } |
| | 123 | + |
| | 124 | + } |
| | 125 | + |
| | 126 | + } |
| | 127 | + |
| | 128 | + // Hide scrollbars |
| | 129 | + $textarea.css({'overflow':'hidden'}); |
| | 130 | + |
| | 131 | + // Update textarea size on keyup, change, cut and paste |
| | 132 | + $textarea.bind('keyup change cut paste', function(){ |
| | 133 | + update(); |
| | 134 | + }); |
| | 135 | + |
| | 136 | + // Update width of twin if browser or textarea is resized (solution for textareas with widths in percent) |
| | 137 | + jQuery(window).bind('resize', setTwinWidth); |
| | 138 | + $textarea.bind('resize', setTwinWidth); |
| | 139 | + $textarea.bind('update', update); |
| | 140 | + |
| | 141 | + // Compact textarea on blur |
| | 142 | + $textarea.bind('blur',function(){ |
| | 143 | + if($twin.height() < maxheight){ |
| | 144 | + if($twin.height() > minheight) { |
| | 145 | + $textarea.height($twin.height()); |
| | 146 | + } else { |
| | 147 | + $textarea.height(minheight); |
| | 148 | + } |
| | 149 | + } |
| | 150 | + }); |
| | 151 | + |
| | 152 | + // And this line is to catch the browser paste event |
| | 153 | + $textarea.bind('input paste',function(e){ setTimeout( update, 250); }); |
| | 154 | + |
| | 155 | + // Run update once when elastic is initialized |
| | 156 | + update(); |
| | 157 | + |
| | 158 | + }); |
| | 159 | + |
| | 160 | + } |
| | 161 | + }); |
| | 162 | +})(jQuery); |
| Property changes on: trunk/extensions/SemanticMediaWiki/skins/elastic/jquery.elastic.source.js |
| ___________________________________________________________________ |
| Added: svn:eol-style |
| 1 | 163 | + native |