general update, fixed a couple of issues, added an example

hryanjones · Feb 12, 2010 · 5ec7d3c · 5ec7d3c
1 parent a50674d
commit 5ec7d3c
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 38 deletions.
diff --git a/LICENSE.txt b/LICENSE.txt
@@ -0,0 +1,20 @@
+Copyright 2010, Brandon Aaron (http://brandonaaron.net/)
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.markdown b/README.markdown
@@ -15,9 +15,9 @@ The expandable plugin has 4 settings:
 
 ## License
 
-The expandable plugin is dual licensed *(just like jQuery)* under the [MIT](http://www.opensource.org/licenses/mit-license.php) and [GPL](http://www.opensource.org/licenses/gpl-license.php) licenses.
+The expandable plugin is licensed under the MIT License (LICENSE.txt).
 
-Copyright (c) 2008 [Brandon Aaron](http://brandonaaron.net)
+Copyright (c) 2010 [Brandon Aaron](http://brandonaaron.net)
 
 ## Contributors
 

diff --git a/example.html b/example.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+    <head>
+        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+        <title>expandable example</title>
+        <style type="text/css" media="screen">
+            body { font: 12px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; color: #000; background: #fff; }
+            h1 { font-size: 18px; }
+            textarea { width: 200px; height: 100px; }
+        </style>
+        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
+        <script src="jquery.expandable.js" type="text/javascript" charset="utf-8"></script>
+        <script type="text/javascript" charset="utf-8">
+            jQuery(function($) {
+                $('textarea').expandable();
+            });
+        </script>
+    </head>
+    <body>
+        <h1>jQuery Expandable Plugin Example</h1>
+
+        <p>This example uses default settings. Just start typing in the text area below and watch it expand.</p>
+        <textarea name="example"></textarea>
+    </body>
+</html>
diff --git a/jquery.expandable.js b/jquery.expandable.js
@@ -1,6 +1,5 @@
-/*! Copyright (c) 2008 Brandon Aaron (http://brandonaaron.net)
- * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
- * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
+/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
  *
  * Contributions by:
  *   - Karl Swedberg
@@ -9,40 +8,77 @@
 (function($) {
 
 $.fn.extend({
-	expandable: function(options) {
-		options = $.extend({ duration: 'normal', interval: 750, within: 1, by: 2, init: false }, options);
-		return this.filter('textarea').each(function() {
-			var $this = $(this).css({ display: 'block', overflow: 'hidden' }), minHeight = $this.height(), interval, heightDiff = this.offsetHeight - minHeight,
-				rowSize = ( parseInt($this.css('lineHeight'), 10) || parseInt($this.css('fontSize'), 10) ),
-				$div = $('<div style="position:absolute;top:-999px;left:-999px;border-color:#000;border-style:solid;overflow-x:hidden;visibility:hidden;z-index:0;" />').appendTo('body');
-			$.each('borderTopWidth borderRightWidth borderBottomWidth borderLeftWidth paddingTop paddingRight paddingBottom paddingLeft fontSize fontFamily fontWeight fontStyle fontStretch fontVariant wordSpacing lineHeight width'.split(' '), function(i,prop) {
-				$div.css(prop, $this.css(prop));
-			});
-			$this
-				.bind('keypress', function(event) { if ( event.keyCode == '13' ) check(); })
-				.bind('focus blur', function(event) {
-					if ( event.type == 'blur' ) clearInterval( interval );
-					if ( event.type == 'focus' ) interval = setInterval(check, options.interval);
-				});
+    expandable: function(givenOptions) {
+        var options = $.extend({
+            duration: 'normal',
+            interval: 750,
+            within: 1,
+            by: 2,
+            init: false 
+        }, givenOptions);
+
+        return this.filter('textarea').each(function() {
+            var $this = $(this).css({ display: 'block', overflow: 'hidden' }),
+                minHeight = $this.height(),
+                heightDiff = this.offsetHeight - minHeight,
+                rowSize = ( parseInt($this.css('lineHeight'), 10) || parseInt($this.css('fontSize'), 10) ),
+                // $mirror is used for determining the height of the text within the textarea
+                // it isn't perfect but is pretty close
+                // white-space rules from: http://petesbloggerama.blogspot.com/2007/02/firefox-ie-word-wrap-word-break-tables.html
+                $mirror = $('<div style="position:absolute;top:-999px;left:-999px;border-color:#000;border-style:solid;overflow-x:hidden;visibility:hidden;z-index:0;white-space: pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;" />').appendTo('body'),
+                interval;
+
+            // copy styles from textarea to mirror to mirror the textarea as best possible
+            $.each('borderTopWidth borderRightWidth borderBottomWidth borderLeftWidth paddingTop paddingRight paddingBottom paddingLeft fontSize fontFamily fontWeight fontStyle fontStretch fontVariant wordSpacing lineHeight width'.split(' '), function(i,prop) {
+                $mirror.css(prop, $this.css(prop));
+            });
+
+            // setup events
+            $this
+                .bind('keypress', function(event) { if ( event.keyCode == '13' ) check(); })
+                .bind('focus blur', function(event) {
+                    if ( event.type == 'blur' ) clearInterval( interval );
+                    if ( event.type == 'focus' ) interval = setInterval(check, options.interval);
+                });
 
-			function check() {
-				var text = $this.val(), newHeight, height, usedHeight, usedRows, availableRows;
-				$div.html( text.replace(/\n/g, '&nbsp;<br>').replace(/<(\/?)scrip/g,'<$1scirp') );
-				height = $this[0].offsetHeight - heightDiff;
-				usedHeight = $div[0].offsetHeight - heightDiff;
-				usedRows = Math.floor(usedHeight / rowSize);
-				availableRows = Math.floor((height / rowSize) - usedRows);
-				if ( availableRows <= options.within ) {
-					newHeight = rowSize * (usedRows + Math.max(availableRows, 0) + options.by);
-					$this.stop().animate({ height: newHeight }, options.duration);
-				} else if ( availableRows > options.by + options.within ) {
-					newHeight = Math.max( height - (rowSize * (availableRows - (options.by + options.within))), minHeight );
-					$this.stop().animate({ height: newHeight }, options.duration);
-				}
-			};
-			if ( options.init ) check();
-		}).end();
-	}
+            function check() {
+                var text = $this.val(), newHeight, height, usedHeight, usedRows, availableRows;
+                // copy textarea value to the $mirror
+                // encode any html passed in and replace new lines with a <br>
+                // the &nbsp; is to try and normalize browser behavior
+                $mirror.html( encodeHTML(text).replace(/\n/g, '&nbsp;<br>') );
+
+                height = $this[0].offsetHeight - heightDiff;
+                usedHeight = $mirror[0].offsetHeight - heightDiff;
+                usedRows = Math.floor(usedHeight / rowSize);
+                availableRows = Math.floor((height / rowSize) - usedRows);
+
+                // adjust height if needed by either growing or shrinking the text area to within the specified bounds
+                if ( availableRows <= options.within ) {
+                    newHeight = rowSize * (usedRows + Math.max(availableRows, 0) + options.by);
+                    $this.stop().animate({ height: newHeight }, options.duration);
+                } else if ( availableRows > options.by + options.within ) {
+                    newHeight = Math.max( height - (rowSize * (availableRows - (options.by + options.within))), minHeight );
+                    $this.stop().animate({ height: newHeight }, options.duration);
+                }
+            };
+            if ( options.init ) check();
+        }).end();
+    }
 });
+
+function encodeHTML(text) {
+    var characters = {
+        '<' : '&lt;',
+        '>' : '&gt;',
+        '&' : '&amp;',
+        '"' : '&quot;',
+        '\'': '&#x27;',
+        '/' : '&#x2F;'
+    };
+    return (text + '').replace(/[<>&"'\/]/g, function(c) {
+        return characters[c];
+    });
+}
 
 })(jQuery);