Textarea autoresize update

6 files changed, 106 insertions, 61 deletions

diff --git a/src/java/com/juick/http/www/Blogs.java b/src/java/com/juick/http/www/Blogs.java
index b4d30de0..1e212b7a 100644
--- a/src/java/com/juick/http/www/Blogs.java
+++ b/src/java/com/juick/http/www/Blogs.java
@@ -121,9 +121,6 @@ public class Blogs {
             }
 
             out.println("</ul>");
-            out.println("<script type=\"text/javascript\">");
-            out.println("$(\"textarea\").autoResize();");
-            out.println("</script>");
 
             if (mids.size() == 20) {
                 String nextpage = "?before=" + mids.get(mids.size() - 1);
diff --git a/src/java/com/juick/http/www/PageTemplates.java b/src/java/com/juick/http/www/PageTemplates.java
index 8bb77238..4997f778 100644
--- a/src/java/com/juick/http/www/PageTemplates.java
+++ b/src/java/com/juick/http/www/PageTemplates.java
@@ -374,7 +374,7 @@ public class PageTemplates {
                     out.println("    <div class=\"msg-comments\"><a href=\"/" + uname + "/" + mid + "\">" + formatReplies(rs.getInt(10), locale) + "</a> " + rb.getString("(replies) by") + " " + repliesby + "</div>");
                 } else {
                     out.println("    <form action=\"/post\" method=\"POST\" enctype=\"multipart/form-data\"><input type=\"hidden\" name=\"mid\" value=\"" + mid + "\"/>");
-                    out.println("      <div class=\"msg-comment\"><textarea name=\"body\" rows=\"1\" placeholder=\"Add a comment...\" onkeypress=\"postformListener(this.form,event)\"></textarea></div>");
+                    out.println("      <div class=\"msg-comment\"><textarea name=\"body\" rows=\"1\" class=\"reply\" placeholder=\"Add a comment...\" onkeypress=\"postformListener(this.form,event)\"></textarea></div>");
                     out.println("    </form>");
                 }
                 out.println("  </li>");
diff --git a/src/java/com/juick/http/www/User.java b/src/java/com/juick/http/www/User.java
index 9d692a44..940cbfc4 100644
--- a/src/java/com/juick/http/www/User.java
+++ b/src/java/com/juick/http/www/User.java
@@ -109,9 +109,6 @@ public class User {
             }
 
             out.println("</ul>");
-            out.println("<script type=\"text/javascript\">");
-            out.println("$(\"textarea\").autoResize();");
-            out.println("</script>");
 
             if (mids.size() == 20) {
                 String nextpage = "?before=" + mids.get(19);
diff --git a/src/java/com/juick/http/www/UserThread.java b/src/java/com/juick/http/www/UserThread.java
index 7248697b..eb3adfad 100644
--- a/src/java/com/juick/http/www/UserThread.java
+++ b/src/java/com/juick/http/www/UserThread.java
@@ -72,10 +72,6 @@ public class UserThread {
 
             printReplies(out, sql, MID, locale, listview);
 
-            out.println("<script type=\"text/javascript\">");
-            out.println("$(\"textarea\").autoResize();");
-            out.println("</script>");
-
             out.println("</div>");
 
             out.println("</div>");
@@ -149,7 +145,7 @@ public class UserThread {
                 out.println("    <div class=\"msg-txt\">" + txt + "</div>");
 
                 out.println("    <form action=\"/post\" method=\"POST\" enctype=\"multipart/form-data\"><input type=\"hidden\" name=\"mid\" value=\"" + mid + "\"/>");
-                out.println("      <div class=\"msg-comment\"><textarea name=\"body\" rows=\"1\" placeholder=\"Add a comment...\" onkeypress=\"postformListener(this.form,event)\"></textarea></div>");
+                out.println("      <div class=\"msg-comment\"><textarea name=\"body\" rows=\"1\" class=\"reply\" placeholder=\"Add a comment...\" onkeypress=\"postformListener(this.form,event)\"></textarea></div>");
                 out.println("    </form>");
 
                 out.println("  </li>");
diff --git a/web/js/jquery.autoresize.js b/web/js/jquery.autoresize.js
index a54ec545..4bc0959a 100644
--- a/web/js/jquery.autoresize.js
+++ b/web/js/jquery.autoresize.js
@@ -1,7 +1,7 @@
 /*
- * jQuery.fn.autoResize 1.1
+ * jQuery.fn.autoResize 1.14
  * --
- * https://github.com/jamespadolsey/jQuery.fn.autoResize
+ * https://github.com/padolsey/jQuery.fn.autoResize
  * --
  * This program is free software. It comes without any warranty, to
  * the extent permitted by applicable law. You can redistribute it
@@ -11,24 +11,28 @@
 
 (function($){
 
-	var defaults = autoResize.defaults = {
-		onResize: function(){},
-		animate: {
-			duration: 200,
-			complete: function(){}
-		},
-		extraSpace: 0,
-		minHeight: 1,
-		maxHeight: 500,
-		minWidth: 'original',
-		maxWidth: 500
-	};
+	var uid = 'ar' + +new Date,
+
+		defaults = autoResize.defaults = {
+			onResize: function(){},
+			onBeforeResize: function(){return 123},
+			onAfterResize: function(){return 555},
+			animate: {
+				duration: 200,
+				complete: function(){}
+			},
+			extraSpace: 50,
+			minHeight: 'original',
+			maxHeight: 500,
+			minWidth: 'original',
+			maxWidth: 500
+		};
 
 	autoResize.cloneCSSProperties = [
 		'lineHeight', 'textDecoration', 'letterSpacing',
 		'fontSize', 'fontFamily', 'fontStyle', 'fontWeight',
 		'textTransform', 'textAlign', 'direction', 'wordSpacing', 'fontSizeAdjust',
-		'padding'
+		'paddingTop', 'paddingLeft', 'paddingBottom', 'paddingRight', 'width'
 	];
 
 	autoResize.cloneCSSValues = {
@@ -39,7 +43,14 @@
 		overflow: 'hidden'
 	};
 
-	autoResize.resizableFilterSelector = 'textarea,input:not(input[type]),input[type=text],input[type=password]';
+	autoResize.resizableFilterSelector = [
+		'textarea:not(textarea.' + uid + ')',
+		'input:not(input[type])',
+		'input[type=text]',
+		'input[type=password]',
+		'input[type=email]',
+		'input[type=url]'
+	].join(',');
 
 	autoResize.AutoResizer = AutoResizer;
 
@@ -53,8 +64,12 @@
 	}
 
 	function AutoResizer(el, config) {
+
+		if (el.data('AutoResizer')) {
+			el.data('AutoResizer').destroy();
+		}
 		
-		config = this.config = $.extend(autoResize.defaults, config);
+		config = this.config = $.extend({}, autoResize.defaults, config);
 		this.el = el;
 
 		this.nodeName = el[0].nodeName.toLowerCase();
@@ -78,8 +93,14 @@
 
 		el.data('AutoResizer', this);
 
-		this.createClone();
-		this.injectClone();
+		// Make sure onAfterResize is called upon animation completion
+		config.animate.complete = (function(f){
+			return function() {
+				config.onAfterResize.call(el);
+				return f.apply(this, arguments);
+			};
+		}(config.animate.complete));
+
 		this.bind();
 
 	}
@@ -98,9 +119,14 @@
 			this.el
 				.bind('keyup.autoResize', check)
 				//.bind('keydown.autoResize', check)
-				.bind('change.autoResize', check);
+				.bind('change.autoResize', check)
+				.bind('paste.autoResize', function() {
+					setTimeout(function() { check(); }, 0);
+				});
 			
-			this.check(null, true);
+			if (!this.el.is(':hidden')) {
+				this.check(null, true);
+			}
 
 		},
 
@@ -111,15 +137,7 @@
 		createClone: function() {
 
 			var el = this.el,
-				clone;
-
-			if (this.nodeName === 'textarea') {
-				clone = el.clone().height('auto');
-			} else {
-				clone = $('<span/>').width('auto').css({
-					whiteSpace: 'nowrap'
-				});
-			}
+				clone = this.nodeName === 'textarea' ? el.clone() : $('<span/>');
 
 			this.clone = clone;
 
@@ -130,18 +148,36 @@
 			clone
 				.removeAttr('name')
 				.removeAttr('id')
+				.addClass(uid)
 				.attr('tabIndex', -1)
 				.css(autoResize.cloneCSSValues);
 
+			if (this.nodeName === 'textarea') {
+				clone.height('auto');
+			} else {
+				clone.width('auto').css({
+					whiteSpace: 'nowrap'
+				});
+			}
+
 		},
 
 		check: function(e, immediate) {
 
+			if (!this.clone) {
+		this.createClone();
+		this.injectClone();
+			}
+
 			var config = this.config,
 				clone = this.clone,
 				el = this.el,
 				value = el.val();
 
+			// Do nothing if value hasn't changed
+			if (value === this.prevValue) { return true; }
+			this.prevValue = value;
+
 			if (this.nodeName === 'input') {
 
 				clone.text(value);
@@ -159,15 +195,19 @@
 					(newWidth >= config.minWidth && newWidth <= config.maxWidth)
 				) {
 
+					config.onBeforeResize.call(el);
 					config.onResize.call(el);
 
 					el.scrollLeft(0);
 
-					config.animate && !immediate ?
+					if (config.animate && !immediate) {
 						el.stop(1,1).animate({
 							width: newWidth
-						}, config.animate)
-					: el.width(newWidth);
+						}, config.animate);
+					} else {
+						el.width(newWidth);
+						config.onAfterResize.call(el);
+					}
 
 				}
 
@@ -177,9 +217,9 @@
 
 			// TEXTAREA
 			
-			clone.height(0).val(value).scrollTop(10000);
+			clone.width(el.width()).height(0).val(value).scrollTop(10000);
 			
-			var scrollTop = clone[0].scrollTop + config.extraSpace;
+			var scrollTop = clone[0].scrollTop;
 				
 			// Don't do anything if scrollTop hasen't changed:
 			if (this.previousScrollTop === scrollTop) {
@@ -188,26 +228,30 @@
 
 			this.previousScrollTop = scrollTop;
 			
-			if (scrollTop >= config.maxHeight) {
+			if (scrollTop + config.extraSpace >= config.maxHeight) {
 				el.css('overflowY', '');
-				return;
-			}
-
-			el.css('overflowY', 'hidden');
-
-			if (scrollTop < config.minHeight) {
+				scrollTop = config.maxHeight;
+				immediate = true;
+			} else if (scrollTop <= config.minHeight) {
 				scrollTop = config.minHeight;
+			} else {
+				el.css('overflowY', 'hidden');
+				scrollTop += config.extraSpace;
 			}
 
+			config.onBeforeResize.call(el);
 			config.onResize.call(el);
-			
+
 			// Either animate or directly apply height:
-			config.animate && !immediate ?
+			if (config.animate && !immediate) {
 				el.stop(1,1).animate({
 					height: scrollTop
-				}, config.animate)
-				: el.height(scrollTop);
-			
+				}, config.animate);
+			} else {
+				el.height(scrollTop);
+				config.onAfterResize.call(el);
+			}
+
 		},
 
 		destroy: function() {
@@ -227,4 +271,4 @@
 
 	};
 	
-})(jQuery);
\ No newline at end of file
+})(jQuery);
diff --git a/web/scripts3.js b/web/scripts3.js
index ec86d39e..12e0aeee 100644
--- a/web/scripts3.js
+++ b/web/scripts3.js
@@ -39,10 +39,21 @@ function showCommentForm(mid,rid) {
         var c=$('#replies #'+rid+' .msg-comment');
         c.wrap('<form action="/post" method="POST" enctype="multipart/form-data"/>');
         c.before('<input type="hidden" name="mid" value="'+mid+'"/><input type="hidden" name="rid" value="'+rid+'"/>');
-        c.append('<textarea name="body" rows="1" placeholder="Add a comment..." onkeypress="postformListener(this.form,event)"></textarea>');
+        c.append('<textarea name="body" rows="1" class="reply" placeholder="Add a comment..." onkeypress="postformListener(this.form,event)"></textarea>');
     }
     $('#replies #'+rid+' .msg-links').hide();
     $('#replies #'+rid+' .msg-comment').show();
     $('#replies #'+rid+' textarea')[0].focus();
+    $('#replies #'+rid+' textarea').autoResize({
+        extraSpace: 0,
+        minHeight: 1
+    });
     return false;
 }
+
+$(document).ready(function() {
+    $('textarea.reply').autoResize({
+        extraSpace: 0,
+        minHeight: 1
+    });
+});