diff options
| author | Brandon Aaron <brandon.aaron@gmail.com> | 2010-02-12 15:57:42 -0600 |
|---|---|---|
| committer | Brandon Aaron <brandon.aaron@gmail.com> | 2010-02-12 15:57:42 -0600 |
| commit | 5ec7d3cd412b2621e748fb0fb9b9670e42433590 (patch) | |
| tree | fd371bc1b9308ef51b94038c116b137cb37a49b1 | |
| parent | a50674d087ef0e49667064f4087fc17a21a7befd (diff) | |
| download | jquery-expandable-5ec7d3cd412b2621e748fb0fb9b9670e42433590.zip jquery-expandable-5ec7d3cd412b2621e748fb0fb9b9670e42433590.tar.gz jquery-expandable-5ec7d3cd412b2621e748fb0fb9b9670e42433590.tar.bz2 | |
general update, fixed a couple of issues, added an example
| -rw-r--r-- | LICENSE.txt | 20 | ||||
| -rw-r--r-- | README.markdown | 4 | ||||
| -rw-r--r-- | example.html | 25 | ||||
| -rw-r--r-- | jquery.expandable.js | 108 |
4 files changed, 119 insertions, 38 deletions
diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 0000000..74c5970 --- /dev/null +++ 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.
\ No newline at end of file diff --git a/README.markdown b/README.markdown index ebb83f4..ca646ee 100644 --- 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 new file mode 100644 index 0000000..8ecd4ea --- /dev/null +++ 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>
\ No newline at end of file diff --git a/jquery.expandable.js b/jquery.expandable.js index 1eec93a..a5ae569 100644 --- 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, ' <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 is to try and normalize browser behavior + $mirror.html( encodeHTML(text).replace(/\n/g, ' <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 = { + '<' : '<', + '>' : '>', + '&' : '&', + '"' : '"', + '\'': ''', + '/' : '/' + }; + return (text + '').replace(/[<>&"'\/]/g, function(c) { + return characters[c]; + }); +} })(jQuery);
\ No newline at end of file |