* 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

4 files changed, 77 insertions, 41 deletions

diff --git a/share/www/browse/database.html b/share/www/browse/database.html
index 120c47c6..3405dbb4 100644
--- a/share/www/browse/database.html
+++ b/share/www/browse/database.html
@@ -37,7 +37,7 @@ specific language governing permissions and limitations under the License.
       $(document).ready(function() {
         $("h1 strong").text(page.db.name);
         $("#viewcode span").click(function() {
-          $("#viewcode").toggleClass("expanded");
+          $("#viewcode").toggleClass("collapsed");
         });
         $("#viewcode button.run").click(function() {
           page.updateDocumentListing();
@@ -51,9 +51,15 @@ specific language governing permissions and limitations under the License.
         $("#viewcode button.saveas").click(function() {
           page.saveViewAs();
         });
-        $("#viewcode textarea").resizable({
+        $("#viewcode textarea").makeResizable({
           always: true,
-          grippie: $("#viewcode .bottom")
+          grippie: $("#viewcode .bottom"),
+          vertical: true
+        });
+        $("#viewcode td.map").makeResizable({
+          always: true,
+          grippie: $("#viewcode td.splitter"),
+          horizontal: true
         });
 
         // Restore preferences/state from cookies
@@ -108,21 +114,24 @@ specific language governing permissions and limitations under the License.
         <li><button class="delete">Delete Database</button></li>
       </ul>
 
-      <div id="viewcode" style="display: none">
+      <div id="viewcode" class="collapsed" style="display: none">
         <div class="top">
           <a id="designdoc-link"></a>
           <span id="view-toggle">View Code</span>
         </div>
-        <div class="code map">
-          <label for="viewcode_map">Map Function:</label>
-          <textarea id="viewcode_map" class="map" rows="5" cols="79" spellcheck="false" wrap="off">function(doc) {
+        <table summary="View functions"><tr>
+          <td class="code map">
+            <label for="viewcode_map">Map Function:</label>
+            <textarea id="viewcode_map" class="map" rows="5" cols="20" spellcheck="false" wrap="off">function(doc) {
   emit(null, doc);
 }</textarea>
-        </div>
-        <div class="code reduce">
-          <label for="viewcode_reduce">Reduce Function (optional):</label>
-          <textarea id="viewcode_reduce" class="reduce" rows="5" cols="79" spellcheck="false" wrap="off"></textarea>
-        </div>
+          </td>
+          <td class="splitter"></td>
+          <td class="code reduce">
+            <label for="viewcode_reduce">Reduce Function (optional):</label>
+            <textarea id="viewcode_reduce" class="reduce" rows="5" cols="20" spellcheck="false" wrap="off"></textarea>
+          </td>
+        </tr></table>
         <div class="bottom">
           <button class="save" type="button" disabled>Save</button>
           <button class="saveas" type="button">Save As…</button>
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;
diff --git a/share/www/style/layout.css b/share/www/style/layout.css
index 0dd93a19..6f84aaae 100644
--- a/share/www/style/layout.css
+++ b/share/www/style/layout.css
@@ -249,13 +249,13 @@ ul.suggest-dropdown li.selected { cursor: pointer; background: Highlight;
 /* View function editing */
 
 #viewcode { background: #fff; border: 1px solid;
-  border-color: #999 #ddd #ddd #999; margin: 0 0 1em; padding: 0 .5em;
+  border-color: #999 #ddd #ddd #999; margin: 0 0 1em; overflow: hidden;
 }
 #viewcode .top, #viewcode .bottom { background-color: #e9e9e9;
   border: 1px solid; border-color: #ddd #ddd #e9e9e9 #ddd; color: #333;
-  margin: 0 -.5em; padding: 0 .5em 2px;
+  padding: 0 .5em 2px;
 }
-#viewcode .top {  color: #aaa; font-size: 95%; }
+#viewcode .top { border-bottom: 1px solid #ddd; color: #aaa; font-size: 95%; }
 #viewcode .top span { background: url(../image/twisty.gif) 0 3px no-repeat;
   border: none; color: #666; cursor: pointer; display: block; font-size: 90%;
   margin: 0; padding: 2px 0 0 15px;
@@ -264,15 +264,22 @@ ul.suggest-dropdown li.selected { cursor: pointer; background: Highlight;
   padding: 2px 2px 0 0;
 }
 #viewcode .top a:link, #viewcode .top a:visited { color: #999; }
-#viewcode .code, #viewcode .bottom { display: none; }
-#viewcode .code { float: left; padding: .2em 0; width: 49%; }
-#viewcode .code label { font-size: 90%; color: #999; }
+#viewcode table { border-collapse: separate; border-spacing: 0;
+  margin: 0; table-layout: fixed; width: 100%; max-width: 100%;
+}
+#viewcode table td.splitter { background: #e9e9e9; cursor: col-resize;
+  width: 4px;
+}
+#viewcode table td.map { border-right: 1px solid #ccc; }
+#viewcode table td.reduce { border-left: 1px solid #ccc; }
+#viewcode .code label { font-size: 90%; color: #999; padding: 0 .5em;
+  white-space: nowrap;
+}
 #viewcode .code textarea { border: none; border-top: 1px solid #ccc;
-  color: #333; margin: 0 0 .4em; min-height: 50px; max-width: 98%;
-  padding: .2em 0; resize: none;
+  color: #333; margin: 0; min-height: 50px; padding: .4em 0 0; resize: none;
+  width: 100%;
 }
-#viewcode .code textarea:focus { background: #ffffe9; }
-#viewcode div.map { border-right: 3px double #ccc; margin-right: .5em; }
+#viewcode .code textarea:focus { background: #e9e9ff; }
 #viewcode .bottom { border-bottom: none; clear: left; padding: 1px 3px; }
 #viewcode .bottom button { font-size: 90%; margin: 0 1em 0 0;
   padding-left: 2em; padding-right: 2em;
@@ -284,10 +291,10 @@ ul.suggest-dropdown li.selected { cursor: pointer; background: Highlight;
   float: right; margin: 0 0 0 1em;
 }
 #viewcode .bottom button.save { font-weight: bold; }
-#viewcode .grippie { background-position: 49% 50%; }
-#viewcode.expanded .top { border-bottom: 1px solid #ddd; }
-#viewcode.expanded .top span { background-position: 0 -96px; }
-#viewcode.expanded .code, #viewcode.expanded .bottom { display: block; }
+#viewcode .grippie { background-position: 50% 50%; }
+#viewcode.collapsed .top { border-bottom: none; }
+#viewcode.collapsed .top span { background-position: 0 -96px; }
+#viewcode.collapsed table, #viewcode.collapsed .bottom { display: none; }
 
 /* Database table */