From: Tom Hughes <tom@compton.nu>
Date: Wed, 15 Feb 2012 21:30:34 +0000 (+0000)
Subject: Grow text areas automatically in response to input
X-Git-Tag: live~5680
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/b6163f0fc29740b4d9953a8c1fe47875ce2ecab0?ds=inline

Grow text areas automatically in response to input
---

diff --git a/app/assets/javascripts/site.js b/app/assets/javascripts/site.js
index 9a43be0d6..95815d44e 100644
--- a/app/assets/javascripts/site.js
+++ b/app/assets/javascripts/site.js
@@ -1,5 +1,6 @@
 //= require jquery
 //= require jquery_ujs
+//= require jquery.autogrowtextarea
 
 /*
  * Called as the user scrolls/zooms around to aniplate hrefs of the
diff --git a/app/views/layouts/site.html.erb b/app/views/layouts/site.html.erb
index e52cc2356..33e95f6a2 100644
--- a/app/views/layouts/site.html.erb
+++ b/app/views/layouts/site.html.erb
@@ -143,8 +143,9 @@
     <script type="text/javascript">
     $(document).ready(function () {
       var auth_token = $("meta[name=csrf-token]").attr("content");
-
       $("form input[name=authenticity_token]").val(auth_token);
+
+      $("textarea").autoGrow();
     });
     </script>
 
diff --git a/vendor/assets/jquery/jquery.autogrowtextarea.js b/vendor/assets/jquery/jquery.autogrowtextarea.js
new file mode 100644
index 000000000..8666c5578
--- /dev/null
+++ b/vendor/assets/jquery/jquery.autogrowtextarea.js
@@ -0,0 +1,61 @@
+/*!
+ * Autogrow Textarea Plugin Version v2.0
+ * http://www.technoreply.com/autogrow-textarea-plugin-version-2-0
+ *
+ * Copyright 2011, Jevin O. Sewaruth
+ *
+ * Date: March 13, 2011
+ */
+jQuery.fn.autoGrow = function(){
+	return this.each(function(){
+		// Variables
+		var colsDefault = this.cols;
+		var rowsDefault = this.rows;
+		
+		//Functions
+		var grow = function() {
+			growByRef(this);
+		}
+		
+		var growByRef = function(obj) {
+			var linesCount = 0;
+			var lines = obj.value.split('\n');
+			
+			for (var i=lines.length-1; i>=0; --i)
+			{
+				linesCount += Math.floor((lines[i].length / colsDefault) + 1);
+			}
+
+			if (linesCount >= rowsDefault)
+				obj.rows = linesCount + 1;
+			else
+				obj.rows = rowsDefault;
+		}
+		
+		var characterWidth = function (obj){
+			var characterWidth = 0;
+			var temp1 = 0;
+			var temp2 = 0;
+			var tempCols = obj.cols;
+			
+			obj.cols = 1;
+			temp1 = obj.offsetWidth;
+			obj.cols = 2;
+			temp2 = obj.offsetWidth;
+			characterWidth = temp2 - temp1;
+			obj.cols = tempCols;
+			
+			return characterWidth;
+		}
+		
+		// Manipulations
+		this.style.width = "auto";
+		this.style.height = "auto";
+		this.style.overflow = "hidden";
+		this.style.width = ((characterWidth(this) * this.cols) + 6) + "px";
+		this.onkeyup = grow;
+		this.onfocus = grow;
+		this.onblur = grow;
+		growByRef(this);
+	});
+};