From 17bc422e7a648541fd5681be9d00f647da35dd7b Mon Sep 17 00:00:00 2001
From: takezoe <takezoe@gmail.com>
Date: Fri, 4 Oct 2013 09:32:32 +0900
Subject: [PATCH] (refs #84)Add jquery.elastic and apply to issue and comment
 textarea.

---
 src/main/twirl/helper/preview.scala.html      |   6 +-
 src/main/twirl/issues/commentform.scala.html  |   2 +-
 src/main/twirl/issues/create.scala.html       |   2 +-
 src/main/twirl/issues/editissue.scala.html    |   4 +-
 src/main/twirl/main.scala.html                |   1 +
 .../assets/elastic/jquery.elastic.source.js   | 162 ++++++++++++++++++
 6 files changed, 173 insertions(+), 4 deletions(-)
 create mode 100644 src/main/webapp/assets/elastic/jquery.elastic.source.js

diff --git a/src/main/twirl/helper/preview.scala.html b/src/main/twirl/helper/preview.scala.html
index 9c1a60752..cc6504bdc 100644
--- a/src/main/twirl/helper/preview.scala.html
+++ b/src/main/twirl/helper/preview.scala.html
@@ -1,5 +1,5 @@
 @(repository: service.RepositoryService.RepositoryInfo, content: String, enableWikiLink: Boolean, enableRefsLink: Boolean,
-  style: String = "", placeholder: String = "Leave a comment")(implicit context: app.Context)
+  style: String = "", placeholder: String = "Leave a comment", elastic: Boolean = false)(implicit context: app.Context)
 @import context._
 @import view.helpers._
 <div class="tabbable">
@@ -27,6 +27,10 @@
 <script src="@assets/google-code-prettify/prettify.js"></script>
 <script>
 $(function(){
+  @if(elastic){
+    $('#content').elastic();
+  }
+
   $('#preview').click(function(){
     $('#preview-area').html('<img src="@assets/common/images/indicator.gif"> Previewing...');
     $.post('@url(repository)/_preview', {
diff --git a/src/main/twirl/issues/commentform.scala.html b/src/main/twirl/issues/commentform.scala.html
index 3c2f7ffa6..edf656eaf 100644
--- a/src/main/twirl/issues/commentform.scala.html
+++ b/src/main/twirl/issues/commentform.scala.html
@@ -8,7 +8,7 @@
     <div class="issue-avatar-image">@avatar(loginAccount.get.userName, 48)</div>
       <div class="box issue-comment-box">
       <div class="box-content">
-        @helper.html.preview(repository, "", false, true, "width: 680px; height: 100px;")
+        @helper.html.preview(repository, "", false, true, "width: 680px; height: 100px; max-height: 150px;", elastic = true)
       </div>
     </div>
     <div class="pull-right">
diff --git a/src/main/twirl/issues/create.scala.html b/src/main/twirl/issues/create.scala.html
index f32deb63a..7b2ba0536 100644
--- a/src/main/twirl/issues/create.scala.html
+++ b/src/main/twirl/issues/create.scala.html
@@ -56,7 +56,7 @@
             </div>
           </div>
           <hr>
-          @helper.html.preview(repository, "", false, true, "width: 600px; height: 200px;")
+          @helper.html.preview(repository, "", false, true, "width: 600px; height: 200px; max-height: 250px;", elastic = true)
         </div>
       </div>
       <div class="pull-right">
diff --git a/src/main/twirl/issues/editissue.scala.html b/src/main/twirl/issues/editissue.scala.html
index 12d41b011..9c7bd733a 100644
--- a/src/main/twirl/issues/editissue.scala.html
+++ b/src/main/twirl/issues/editissue.scala.html
@@ -2,11 +2,13 @@
 @import context._
 <span id="error-edit-title" class="error"></span>
 <input type="text" style="width: 680px;" id="edit-title" value="@title"/>
-<textarea style="width: 680px; height: 100px;" id="edit-content">@content.getOrElse("")</textarea>
+<textarea style="width: 680px; height: 100px; max-height: 300px;" id="edit-content">@content.getOrElse("")</textarea>
 <input type="button" class="btn btn-small" value="Update Issue"/>
 <span class="pull-right"><a class="btn btn-small btn-danger" href="#">Cancel</a></span>
 <script>
 $(function(){
+  $('#edit-content').elastic();
+
   var callback = function(data){
     $('#issueTitle').empty().text(data.title);
     $('#issueContent').empty().html(data.content);
diff --git a/src/main/twirl/main.scala.html b/src/main/twirl/main.scala.html
index fc996fee1..592238a5a 100644
--- a/src/main/twirl/main.scala.html
+++ b/src/main/twirl/main.scala.html
@@ -28,6 +28,7 @@
     <script src="@assets/colorpicker/js/bootstrap-colorpicker.js"></script>
     <script src="@assets/google-code-prettify/prettify.js"></script>
     <script src="@assets/zclip/ZeroClipboard.min.js"></script>
+    <script src="@assets/elastic/jquery.elastic.source.js"></script>
   </head>
   <body>
     <form id="search" action="@path/search" method="POST">
diff --git a/src/main/webapp/assets/elastic/jquery.elastic.source.js b/src/main/webapp/assets/elastic/jquery.elastic.source.js
new file mode 100644
index 000000000..9b1ed2b83
--- /dev/null
+++ b/src/main/webapp/assets/elastic/jquery.elastic.source.js
@@ -0,0 +1,162 @@
+/**
+*	@name							Elastic
+*	@descripton						Elastic is jQuery plugin that grow and shrink your textareas automatically
+*	@version						1.6.11
+*	@requires						jQuery 1.2.6+
+*
+*	@author							Jan Jarfalk
+*	@author-email					jan.jarfalk@unwrongest.com
+*	@author-website					http://www.unwrongest.com
+*
+*	@licence						MIT License - http://www.opensource.org/licenses/mit-license.php
+*/
+
+(function($){ 
+	jQuery.fn.extend({  
+		elastic: function() {
+		
+			//	We will create a div clone of the textarea
+			//	by copying these attributes from the textarea to the div.
+			var mimics = [
+				'paddingTop',
+				'paddingRight',
+				'paddingBottom',
+				'paddingLeft',
+				'fontSize',
+				'lineHeight',
+				'fontFamily',
+				'width',
+				'fontWeight',
+				'border-top-width',
+				'border-right-width',
+				'border-bottom-width',
+				'border-left-width',
+				'borderTopStyle',
+				'borderTopColor',
+				'borderRightStyle',
+				'borderRightColor',
+				'borderBottomStyle',
+				'borderBottomColor',
+				'borderLeftStyle',
+				'borderLeftColor'
+				];
+			
+			return this.each( function() {
+
+				// Elastic only works on textareas
+				if ( this.type !== 'textarea' ) {
+					return false;
+				}
+					
+			var $textarea	= jQuery(this),
+				$twin		= jQuery('<div />').css({
+					'position'		: 'absolute',
+					'display'		: 'none',
+					'word-wrap'		: 'break-word',
+					'white-space'	:'pre-wrap'
+				}),
+				lineHeight	= parseInt($textarea.css('line-height'),10) || parseInt($textarea.css('font-size'),'10'),
+				minheight	= parseInt($textarea.css('height'),10) || lineHeight*3,
+				maxheight	= parseInt($textarea.css('max-height'),10) || Number.MAX_VALUE,
+				goalheight	= 0;
+				
+				// Opera returns max-height of -1 if not set
+				if (maxheight < 0) { maxheight = Number.MAX_VALUE; }
+					
+				// Append the twin to the DOM
+				// We are going to meassure the height of this, not the textarea.
+				$twin.appendTo($textarea.parent());
+				
+				// Copy the essential styles (mimics) from the textarea to the twin
+				var i = mimics.length;
+				while(i--){
+					$twin.css(mimics[i].toString(),$textarea.css(mimics[i].toString()));
+				}
+				
+				// Updates the width of the twin. (solution for textareas with widths in percent)
+				function setTwinWidth(){
+					var curatedWidth = Math.floor(parseInt($textarea.width(),10));
+					if($twin.width() !== curatedWidth){
+						$twin.css({'width': curatedWidth + 'px'});
+						
+						// Update height of textarea
+						update(true);
+					}
+				}
+				
+				// Sets a given height and overflow state on the textarea
+				function setHeightAndOverflow(height, overflow){
+				
+					var curratedHeight = Math.floor(parseInt(height,10));
+					if($textarea.height() !== curratedHeight){
+						$textarea.css({'height': curratedHeight + 'px','overflow':overflow});
+					}
+				}
+				
+				// This function will update the height of the textarea if necessary 
+				function update(forced) {
+					
+					// Get curated content from the textarea.
+					var textareaContent = $textarea.val().replace(/&/g,'&amp;').replace(/ {2}/g, '&nbsp;').replace(/<|>/g, '&gt;').replace(/\n/g, '<br />');
+					
+					// Compare curated content with curated twin.
+					var twinContent = $twin.html().replace(/<br>/ig,'<br />');
+					
+					if(forced || textareaContent+'&nbsp;' !== twinContent){
+					
+						// Add an extra white space so new rows are added when you are at the end of a row.
+						$twin.html(textareaContent+'&nbsp;');
+						
+						// Change textarea height if twin plus the height of one line differs more than 3 pixel from textarea height
+						if(Math.abs($twin.height() + lineHeight - $textarea.height()) > 3){
+							
+							var goalheight = $twin.height()+lineHeight;
+							if(goalheight >= maxheight) {
+								setHeightAndOverflow(maxheight,'auto');
+							} else if(goalheight <= minheight) {
+								setHeightAndOverflow(minheight,'hidden');
+							} else {
+								setHeightAndOverflow(goalheight,'hidden');
+							}
+							
+						}
+						
+					}
+					
+				}
+				
+				// Hide scrollbars
+				$textarea.css({'overflow':'hidden'});
+				
+				// Update textarea size on keyup, change, cut and paste
+				$textarea.bind('keyup change cut paste', function(){
+					update(); 
+				});
+				
+				// Update width of twin if browser or textarea is resized (solution for textareas with widths in percent)
+				$(window).bind('resize', setTwinWidth);
+				$textarea.bind('resize', setTwinWidth);
+				$textarea.bind('update', update);
+				
+				// Compact textarea on blur
+				$textarea.bind('blur',function(){
+					if($twin.height() < maxheight){
+						if($twin.height() > minheight) {
+							$textarea.height($twin.height());
+						} else {
+							$textarea.height(minheight);
+						}
+					}
+				});
+				
+				// And this line is to catch the browser paste event
+				$textarea.bind('input paste',function(e){ setTimeout( update, 250); });				
+				
+				// Run update once when elastic is initialized
+				update();
+				
+			});
+			
+        } 
+    }); 
+})(jQuery);
\ No newline at end of file