Make Futon's Source tab editable.

Thanks Sven Helmberger and Dan Walters



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

2 files changed, 52 insertions, 8 deletions

diff --git a/share/www/script/futon.browse.js b/share/www/script/futon.browse.js
index 5a8b3fa7..39f38365 100644
--- a/share/www/script/futon.browse.js
+++ b/share/www/script/futon.browse.js
@@ -688,6 +688,9 @@
       page = this;
 
       this.activateTabularView = function() {
+        if ($("#fields tbody.source textarea").length > 0)
+          return;
+
         $("#tabs li").removeClass("active").filter(".tabular").addClass("active");
         $("#fields thead th:first").text("Field").attr("colspan", 1).next().show();
         $("#fields tbody.content").show();
@@ -699,7 +702,41 @@
         $("#fields thead th:first").text("Source").attr("colspan", 2).next().hide();
         $("#fields tbody.content").hide();
         $("#fields tbody.source").find("td").each(function() {
-          $(this).html($("<pre></pre>").html($.futon.formatJSON(page.doc, {html: true})));
+          $(this).html($("<pre></pre>").html($.futon.formatJSON(page.doc, {html: true})))
+            .makeEditable({allowEmpty: false,
+              createInput: function(value) {
+                return $("<textarea rows='8' cols='80' spellcheck='false'></textarea>");
+              },
+              prepareInput: function(input) {
+                $(input).makeResizable({vertical: true});
+              },
+              end: function() {
+                $(this).html($("<pre></pre>").html($.futon.formatJSON(page.doc, {html: true})));
+              },
+              accept: function(newValue) {
+                page.doc = JSON.parse(newValue);
+                page.isDirty = true;
+                page.updateFieldListing(true);
+              },
+              populate: function(value) {
+                return $.futon.formatJSON(page.doc);
+              },
+              validate: function(value) {
+                try {
+                  var doc = JSON.parse(value);
+                  if (typeof doc != "object")
+                    throw new SyntaxError("Please enter a valid JSON document (for example, {}).");
+                  return true;
+                } catch (err) {
+                  var msg = err.message;
+                  if (msg == "parseJSON" || msg == "JSON.parse") { 
+                    msg = "There is a syntax error in the document.";
+                  }
+                  $("<div class='error'></div>").text(msg).appendTo(this);
+                  return false;
+                }
+              }
+            });
         }).end().show();
       }
 
@@ -732,7 +769,7 @@
         }
       }
 
-      this.updateFieldListing = function() {
+      this.updateFieldListing = function(noReload) {
         $("#fields tbody.content").empty();
 
         function handleResult(doc, revs) {
@@ -767,11 +804,16 @@
             $("#fields tbody.footer td span").text("Showing revision " +
               (revs.length - currentIndex) + " of " + revs.length);
           }
-          if (location.hash == "#source") {
+          if (location.hash == "#source" && !noReload) {
             page.activateSourceView();
           }
         }
 
+        if (noReload) {
+          handleResult(page.doc, []);
+          return;
+        }
+
         if (!page.isNew) {
           db.openDoc(docId, {revs_info: true,
             success: function(doc) {
diff --git a/share/www/style/layout.css b/share/www/style/layout.css
index 0b513cd3..c1a6a77b 100644
--- a/share/www/style/layout.css
+++ b/share/www/style/layout.css
@@ -428,22 +428,23 @@ body.fullwidth #wrap { margin-right: 0; }
   float: left; margin-left: 0; padding-left: 2px; padding-right: .5em;
   padding-top: 2px;
 }
-#fields tbody.content input, #fields tbody.content textarea {
+#fields tbody.content input, #fields tbody.content textarea, #fields tbody.source textarea {
   background: #fff; border: 1px solid; border-color: #999 #ddd #ddd #999;
   margin: 0; padding: 1px; width: 100%;
 }
 #fields tbody.content th input { font-family: inherit; font-size: inherit;
   font-weight: bold;
 }
-#fields tbody.content td input, #fields tbody.content td textarea {
+#fields tbody.content td input, #fields tbody.content td textarea, #fields tbody.source textarea {
   font: 11px normal "DejaVu Sans Mono",Monaco,monospace;
 }
 #fields tbody.content input.invalid,
-#fields tbody.content textarea.invalid {
+#fields tbody.content textarea.invalid,
+#fields tbody.source textarea.invalid {
   background: #f9f4f4; border-color: #b66 #ebb #ebb #b66;
 }
-#fields tbody.content div.grippie { padding: 0 1px; width: 100%; }
-#fields tbody.content div.error { color: #d33; }
+#fields tbody.content div.grippie, #fields tbody.source div.gripple { padding: 0 1px; width: 100%; }
+#fields tbody.content div.error, #fields tbody.source div.error { color: #d33; }
 
 #fields tbody.content td ul.attachments { list-style: none; margin: 0;
   padding: 0;
@@ -469,6 +470,7 @@ body.fullwidth #wrap { margin-right: 0; }
 #fields tbody.source td pre { color: #999; font-size: 11px; line-height: 1.6em;
   margin: 0; overflow: auto; white-space: pre-wrap; width: 100%;
 }
+#fields tbody.source td.editinline-container { padding-left: 14px; padding-right: 48px; }
 
 /* Test suite */