From 1029981eac66efdd8dcbc1beea0913d296459131 Mon Sep 17 00:00:00 2001 From: Paul Joseph Davis Date: Tue, 22 Sep 2009 19:37:04 +0000 Subject: 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 --- THANKS | 2 ++ share/www/script/futon.browse.js | 48 +++++++++++++++++++++++++++++++++++++--- share/www/style/layout.css | 12 +++++----- 3 files changed, 54 insertions(+), 8 deletions(-) diff --git a/THANKS b/THANKS index ad54b0e8..ce6ebf02 100644 --- a/THANKS +++ b/THANKS @@ -34,5 +34,7 @@ suggesting improvements or submitting changes. Some of these people are: * Kevin Ilchmann Jørgensen * Dirkjan Ochtman * Sebastian Cohnen + * Sven Helmberger + * Dan Walters For a list of authors see the `AUTHORS` file. 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($("
").html($.futon.formatJSON(page.doc, {html: true})));
+          $(this).html($("
").html($.futon.formatJSON(page.doc, {html: true})))
+            .makeEditable({allowEmpty: false,
+              createInput: function(value) {
+                return $("");
+              },
+              prepareInput: function(input) {
+                $(input).makeResizable({vertical: true});
+              },
+              end: function() {
+                $(this).html($("
").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.";
+                  }
+                  $("
").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 */ -- cgit v1.2.3