Experimental tabbed interface in Futon document view to switch between tabular fields display and a raw JSON display.

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

1 files changed, 25 insertions, 0 deletions

diff --git a/share/www/browse/document.html b/share/www/browse/document.html
index 22f055b7..98d8ec48 100644
--- a/share/www/browse/document.html
+++ b/share/www/browse/document.html
@@ -41,6 +41,24 @@ specific language governing permissions and limitations under the License.
           .attr("href", "database.html?" + encodeURIComponent(page.db.name));
         $("h1 strong").text(page.docId);
         page.updateFieldListing();
+
+        $("#tabs li.tabular a").click(function() {
+          $("#tabs li").removeClass("active");
+          $(this).parent().addClass("active");
+          $("#fields thead th:first").text("Field").attr("colspan", 1).next().show();
+          $("#fields tbody.content").show();
+          $("#fields tbody.source").hide();
+        });
+        $("#tabs li.source a").click(function() {
+          $("#tabs li").removeClass("active");
+          $(this).parent().addClass("active");
+          $("#fields thead th:first").text("Source").attr("colspan", 2).next().hide();
+          $("#fields tbody.content").hide();
+          $("#fields tbody.source").find("td").each(function() {
+            $(this).html($("<code></code>").text(prettyPrintJSON(page.doc)));
+          }).end().show();
+        });
+
         $("#toolbar button.save").click(page.saveDocument);
         $("#toolbar button.add").click(page.addField);
         $("#toolbar button.delete").click(page.deleteDocument);
@@ -61,6 +79,10 @@ specific language governing permissions and limitations under the License.
         <li><button class="delete">Delete Document</button></li>
       </ul>
 
+      <ul id="tabs">
+        <li class="active tabular"><a href="#tabular">Fields</a></li>
+        <li class="source"><a href="#source">Source</a></li>
+      </ul>
       <table id="fields" class="listing" cellspacing="0">
         <col class="field"><col class="value">
         <caption>Fields</caption>
@@ -72,6 +94,9 @@ specific language governing permissions and limitations under the License.
         </thead>
         <tbody class="content">
         </tbody>
+        <tbody class="source" style="display: none">
+          <tr><td colspan="2"></td></tr>
+        </tbody>
         <tbody class="footer">
           <tr>
             <td colspan="2">