textareas auto expand

app/views/comments/_new_comment.html.haml

@@ -5,7 +5,7 @@
 = form_tag( comments_path, :id => "new_comment_on_#{post_id}", :class => 'new_comment', :remote => true) do
   %p
     = label_tag "comment_text_on_#{post_id}", t('.comment')
-    = text_area_tag :text, nil, :rows => 1, :class => "comment_box",:id => "comment_text_on_#{post_id}"
+    = text_area_tag :text, nil, :rows => 2, :class => "comment_box",:id => "comment_text_on_#{post_id}"
   = hidden_field_tag :post_id,  post_id, :id => "post_id_on_#{post_id}"
   = submit_tag t('.comment'), :id => "comment_submit_#{post_id}", :class => "comment_submit button", :disable_with => t('.commenting')
 

config/assets.yml

@@ -9,6 +9,7 @@ javascripts:
     - public/javascripts/vendor/jquery.infieldlabel.js
     - public/javascripts/vendor/jquery.tipsy.js
     - public/javascripts/vendor/jquery.hotkeys.js
+    - public/javascripts/vendor/jquery.autoresize.min.js
     - public/javascripts/vendor/fancybox/jquery.fancybox-1.3.1.pack.js
     - public/javascripts/vendor/fileuploader.js
     - public/javascripts/view.js

public/javascripts/stream.js

@@ -10,6 +10,11 @@ var Stream = {
 
     $stream.not(".show").delegate("a.show_post_comments", "click", Stream.toggleComments);
 
+    // publisher textarea reset
+    $publisher.find("textarea").bind("blur", function(){ 
+      $(this).css('height','42px');
+    });
+
     // comment submit action
     $stream.delegate("a.comment_submit", "click", function(evt) {
       $(this).closest("form").children(".comment_box").attr("rows", 1);
@@ -23,14 +28,16 @@ var Stream = {
 
     $stream.delegate("textarea.comment_box", "focus", function(evt) {
       var commentBox = $(this);
-      commentBox.attr("rows", 2)
+      commentBox
         .closest("form").find(".comment_submit").fadeIn(200);
     });
 
     $stream.delegate("textarea.comment_box", "blur", function(evt) {
       var commentBox = $(this);
       if (!commentBox.val()) {
-        commentBox.attr("rows", 1)
+        commentBox
+          .attr('rows',2)
+          .css('height','2.4em')
           .closest("form").find(".comment_submit").hide();
       }
     });

public/javascripts/vendor/jquery.autoresize.min.js

@@ -0,0 +1,7 @@
+/*
+ * jQuery autoResize (textarea auto-resizer)
+ * @copyright James Padolsey http://james.padolsey.com
+ * @version 1.04
+ */
+
+(function(a){a.fn.autoResize=function(j){var b=a.extend({onResize:function(){},animate:true,animateDuration:150,animateCallback:function(){},extraSpace:20,limit:1000},j);this.filter('textarea').each(function(){var c=a(this).css({resize:'none','overflow-y':'hidden'}),k=c.height(),f=(function(){var l=['height','width','lineHeight','textDecoration','letterSpacing'],h={};a.each(l,function(d,e){h[e]=c.css(e)});return c.clone().removeAttr('id').removeAttr('name').css({position:'absolute',top:0,left:-9999}).css(h).attr('tabIndex','-1').insertBefore(c)})(),i=null,g=function(){f.height(0).val(a(this).val()).scrollTop(10000);var d=Math.max(f.scrollTop(),k)+b.extraSpace,e=a(this).add(f);if(i===d){return}i=d;if(d>=b.limit){a(this).css('overflow-y','');return}b.onResize.call(this);b.animate&&c.css('display')==='block'?e.stop().animate({height:d},b.animateDuration,b.animateCallback):e.height(d)};c.unbind('.dynSiz').bind('keyup.dynSiz',g).bind('keydown.dynSiz',g).bind('change.dynSiz',g)});return this}})(jQuery);

public/javascripts/view.js

@@ -52,6 +52,13 @@ var View = {
          'hideOnOverlayClick' : false
       });
 
+    /* Autoexpand textareas */
+    $('textarea')
+      .autoResize({
+        'animate': false,
+        'extraSpace': 0
+      });
+
     /* Webfinger form ajaxy loading */
     $(this.webFingerForm.selector)
       .submit(this.webFingerForm.submit);

public/stylesheets/sass/application.sass

@@ -524,6 +524,7 @@ ul.comments
 
   textarea
     :width 100%
+    :height 2.4em
 
   li.comment
     :list
@@ -710,9 +711,9 @@ textarea
   :border 1px solid #ccc
   :height auto
 
-  :-webkit-border-radius 5px
-  :-moz-border-radius 5px
-  :border-radius 5px
+  :-webkit-border-radius 4px
+  :-moz-border-radius 4px
+  :border-radius 4px
 
 input[type='checkbox']
   :width auto
@@ -795,13 +796,12 @@ label
         img
           :border-radius 5px
 
-  textarea
-    :height 42px
-
   input[type='text'],
   textarea
     :width 460px
     :margin 0
+  textarea
+    :height 42px
   label
     :font
       :size 14px