Automatic expanding of translation area.

ChangeLog

@@ -7,6 +7,7 @@ Relased on ? 2012.
 * Warn users on profile upgrade.
 * Remember URL for login.
 * Naming of text areas while entering plural forms.
+* Automatic expanding of translation area.
 
 weblate 0.1
 -----------

html/base.html

@@ -17,6 +17,7 @@
   <link rel="stylesheet" type="text/css" href="/media/css/blitzer/jquery-ui-1.8.18.custom.css" />
   <script src="/media/js/jquery-1.7.1.min.js" type="text/javascript"></script>
   <script src="/media/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
+  <script src="/media/js/jquery.autogrow-textarea.js" type="text/javascript"></script>
   <script src="/media/js/loader.js" type="text/javascript"></script>
   <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
 

media/js/jquery.autogrow-textarea.js

+(function($) {
+
+    /*
+     * Auto-growing textareas; technique ripped from Facebook
+     */
+    $.fn.autogrow = function(options) {
+        
+        this.filter('textarea').each(function() {
+            
+            var $this       = $(this),
+                minHeight   = $this.height(),
+                lineHeight  = $this.css('lineHeight');
+            
+            var shadow = $('<div></div>').css({
+                position:   'absolute',
+                top:        -10000,
+                left:       -10000,
+                width:      $(this).width(),
+                fontSize:   $this.css('fontSize'),
+                fontFamily: $this.css('fontFamily'),
+                lineHeight: $this.css('lineHeight'),
+                resize:     'none'
+            }).appendTo(document.body);
+            
+            var update = function() {
+                
+                var val = this.value.replace(/</g, '&lt;')
+                                    .replace(/>/g, '&gt;')
+                                    .replace(/&/g, '&amp;')
+                                    .replace(/\n/g, '<br/>');
+                
+                shadow.html(val);
+                $(this).css('height', Math.max(shadow.height() + 20, minHeight));
+            }
+            
+            $(this).change(update).keyup(update).keydown(update);
+            
+            update.apply(this);
+            
+        });
+        
+        return this;
+        
+    }
+    
+})(jQuery);
\ No newline at end of file

media/js/loader.js

@@ -14,7 +14,7 @@ $(function() {
     $('.button-next').button({text: false, icons: { primary: "ui-icon-seek-next" }});
     $('.button-prev').button({text: false, icons: { primary: "ui-icon-seek-prev" }});
     $('.button-end').button({text: false, icons: { primary: "ui-icon-seek-end" }});
-    $('#id_target').change(text_change).keypress(text_change).focus();
+    $('#id_target').change(text_change).keypress(text_change).autogrow().focus();
     $('#copy-text').button({text: false, icons: { primary: "ui-icon-arrowthick-1-s" }}).click(function f() {
         $.get("/js/get/" + $('#id_checksum').attr('value') + '/', function(data) {
             $('#id_target').text(data);