From b218a0e7d425f7b3660433a17c6558f676524730 Mon Sep 17 00:00:00 2001
From: Christopher Lenz <cmlenz@apache.org>
Date: Fri, 1 Aug 2008 22:37:50 +0000
Subject: 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
---
 share/www/browse/document.html | 25 +++++++++++++++++++++++++
 share/www/script/browse.js     |  3 +++
 share/www/style/layout.css     | 18 +++++++++++++++++-
 3 files changed, 45 insertions(+), 1 deletion(-)

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">
diff --git a/share/www/script/browse.js b/share/www/script/browse.js
index 8ef8ccfb..8291d914 100644
--- a/share/www/script/browse.js
+++ b/share/www/script/browse.js
@@ -507,6 +507,9 @@ function CouchDocumentPage() {
   page = this;
 
   this.addField = function() {
+    if (!$("#fields tbody.content:visible").length) {
+      $("#tabs li.tabular a").click(); // switch to tabular view
+    }
     var fieldName = "unnamed";
     var fieldIdx = 1;
     while (page.doc.hasOwnProperty(fieldName)) {
diff --git a/share/www/style/layout.css b/share/www/style/layout.css
index 2ff012c7..3ea1cbcf 100644
--- a/share/www/style/layout.css
+++ b/share/www/style/layout.css
@@ -315,9 +315,22 @@ ul.suggest-dropdown li.selected { cursor: pointer; background: Highlight;
 }
 #documents tbody.content td.value { font-size: 10px; }
 
+/* Document display tabs */
+
+#tabs { float: right; list-style: none; margin: -1.4em 0 0; }
+#tabs li { display: inline; font-size: 95%; padding: 0; }
+#tabs li.active { font-weight: bold; }
+#tabs :link, #tabs :visited { background: #dadada; color: #666;
+  border: 1px solid #a7a7a7; float: left; margin: 0 0 0 .5em;
+  padding: .5em 2em .3em; position: relative; top: 1px;
+}
+#tabs .active :link, #tabs .active :visited { background: #e9e9e9;
+  border-bottom-color: #e9e9e9; color: #333;
+}
+
 /* Document fields table */
 
-#fields { table-layout: fixed; }
+#fields { clear: right; table-layout: fixed; }
 #fields col.field { width: 33%; }
 #fields tbody.content th { padding-left: 25px; padding-right: 48px; }
 #fields tbody.content th button {
@@ -400,6 +413,9 @@ ul.suggest-dropdown li.selected { cursor: pointer; background: Highlight;
 #fields tbody.content td ul.attachments li button.delete {
   background-image: url(../image/delete-mini.gif);
 }
+#fields tbody.source td code { display: block; overflow: auto;
+  white-space: pre-wrap; width: 100%;
+}
 
 /* Test suite */
 
-- 
cgit v1.2.3