* The map/reduce function textareas in Futon are now horizontally resizable split-pane style

 * The initial height of the view code textareas is adjusted to the number of lines in the map/reduce functions.

git-svn-id: https://svn.apache.org/repos/asf/incubator/couchdb/trunk@662587 13f79535-47bb-0310-9956-ffa450edef68

2 files changed, 35 insertions, 15 deletions

diff --git a/share/www/script/browse.js b/share/www/script/browse.js
index d7e3fcee..7c6440dd 100644
--- a/share/www/script/browse.js
+++ b/share/www/script/browse.js
@@ -214,10 +214,14 @@ function CouchDatabasePage() {
           }
         },
         success: function(resp) {
-          page.storedViewCode = resp.views[localViewName];
-          $("#viewcode_map").val(page.storedViewCode.map);
-          $("#viewcode_reduce").val(page.storedViewCode.reduce || "");
+          var viewCode = resp.views[localViewName];
+          $("#viewcode_map").val(viewCode.map);
+          $("#viewcode_reduce").val(viewCode.reduce || "");
+          var lines = Math.max(viewCode.map.split("\n").length,
+                               (viewCode.reduce ? viewCode.reduce.split("\n").length : 1));
+          $("#viewcode textarea").attr("rows", Math.min(15, Math.max(3, lines)));
           $("#viewcode button.revert, #viewcode button.save").attr("disabled", "disabled");
+          page.storedViewCode = viewCode;
           if (callback) callback();
         }
       });
@@ -744,7 +748,7 @@ function CouchDocumentPage() {
     tools.appendTo(td);
     input.val(prettyPrintJSON(value)).appendTo(td);
     input.each(function() { this.focus(); this.select(); });
-    if (needsTextarea) input.resizable();
+    if (needsTextarea) input.makeResizable({vertical: true});
   }
 
   function _initKey(doc, row, fieldName) {
diff --git a/share/www/script/jquery.resizer.js b/share/www/script/jquery.resizer.js
index 081c7177..f020d3e2 100644
--- a/share/www/script/jquery.resizer.js
+++ b/share/www/script/jquery.resizer.js
@@ -12,10 +12,12 @@
 
 (function($) {
 
-  $.fn.resizable = function(options) {
+  $.fn.makeResizable = function(options) {
     options = options || {};
     options.always = options.always || false;
     options.grippie = options.grippie || null;
+    options.minWidth = options.minWidth || 100;
+    options.maxWidth = options.maxWidth || null;
     options.minHeight = options.minHeight || 32;
     options.maxHeight = options.maxHeight || null;
 
@@ -28,19 +30,33 @@
       grippie.addClass("grippie");
       var elem = $(this);
       grippie.mousedown(function(e) {
-        var pos = e.screenY;
-        var height = elem.height();
+        var pos = {x: e.screenX, y: e.screenY};
+        var dimensions = {width: elem.width(), height: elem.height()};
         $(document)
           .mousemove(function(e) {
-            var offset = e.screenY - pos;
-            if (offset) {
-              var newHeight = height + offset;
-              if (newHeight >= options.minHeight &&
-                  (!options.maxHeight || newHeight <= options.maxHeight)) {
-                elem.height(newHeight);
-                height = newHeight;
+            if (options.horizontal) {
+              var offset = e.screenX - pos.x;
+              if (offset) {
+                var newWidth = dimensions.width + offset;
+                if (newWidth >= options.minWidth &&
+                    (!options.maxWidth || newWidth <= options.maxWidth)) {
+                  elem.width(newWidth);
+                  dimensions.width = newWidth;
+                }
+                pos.x = e.screenX;
+              }
+            }
+            if (options.vertical) {
+              var offset = e.screenY - pos.y;
+              if (offset) {
+                var newHeight = dimensions.height + offset;
+                if (newHeight >= options.minHeight &&
+                    (!options.maxHeight || newHeight <= options.maxHeight)) {
+                  elem.height(newHeight);
+                  dimensions.height = newHeight;
+                }
+                pos.y = e.screenY;
               }
-              pos = e.screenY;
             }
             document.onselectstart = function() { return false }; // for IE
             return false;