Make the view-selection and jump-to-document widgets at the top of th…

…e Futon database page a bit more compact.

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

share/www/database.html

@@ -30,7 +30,6 @@
     <script src="script/futon.format.js?0.9.0"></script>
     <script>
       var page = new $.futon.CouchDatabasePage();
-
       $.futon.navigation.ready(function() {
         this.addDatabase(page.db.name);
         this.updateSelection(location.pathname, "?" + page.db.name);
@@ -104,7 +103,7 @@
         $("#toolbar button.compact").click(page.compactDatabase);
         $("#toolbar button.delete").click(page.deleteDatabase);
 
-        $('#jumpto input').suggest(function(text, callback) {
+        $('#jumpto input').addPlaceholder("Document ID").suggest(function(text, callback) {
           page.db.allDocs({
             limit: 10, startkey: text, endkey: text + 'zzz',
             success: function(docs) {
@@ -117,12 +116,12 @@
               callback(matches);
             }
           });
+        }).keypress(function(e) {
+          if (e.keyCode == 13) {
+            page.jumpToDocument($(this).val());
+          }
         });
-
-        $("#jumpto input").keypress(page.jumpToDocument);
-
       });
-
     </script>
   </head>
 
@@ -134,15 +133,15 @@ <h1>
     </h1>
     <div id="content">
       <div id="switch">
-        <label>Select view: <select autocomplete="false">
+        <label>View: <select autocomplete="false">
           <option value="_all_docs">All documents</option>
           <option value="_design_docs">Design documents</option>
           <option value="_temp_view">Temporary view…</option>
         </select></label>
       </div>
       <div id="jumpto">
-        <label>Jump to document:
-          <input type="text" name="docid" />
+        <label>Jump to:
+          <input type="text" name="docid" autocomplete="off" />
         </label>
       </div>
       <ul id="toolbar">

share/www/script/futon.browse.js

@@ -466,10 +466,10 @@
         }
       }
 
-      this.jumpToDocument = function(e) {
-        if (e.which == 13) {
-          var docid = $('#jumpto input').val();
-          location.href = 'document.html?' + encodeURIComponent(db.name) + '/' + encodeDocId(docid);
+      this.jumpToDocument = function(docId) {
+        if (docId != "") {
+          location.href = 'document.html?' + encodeURIComponent(db.name)
+            + "/" + encodeDocId(docId);
         }
       }
 

share/www/script/futon.js

@@ -107,6 +107,33 @@
     navigation: new Navigation()
   });
 
+  $.fn.addPlaceholder = function(text) {
+    return this.each(function() {
+      var input = $(this);
+      if ($.browser.safari) {
+        input.attr("placeholder", text);
+        return;
+      }
+      input.blur(function() {
+        if ($.trim(input.val()) == "") {
+          input.addClass("placeholder").val(text);
+        } else {
+          input.removeClass("placeholder");
+        }
+      }).triggerHandler("blur")
+      input.focus(function() {
+        if (input.is(".placeholder")) {
+          input.val("").removeClass("placeholder");
+        }
+      });
+      $(this.form).submit(function() {
+        if (input.is(".placeholder")) {
+          input.val("");
+        }
+      });
+    });
+  }
+
   $(document)
     .ajaxStart(function() { $(this.body).addClass("loading"); })
     .ajaxStop(function() { $(this.body).removeClass("loading"); });

share/www/style/layout.css

@@ -58,6 +58,7 @@ button[disabled] { color: #999; }
 input, select, textarea { background: #fff; border: 1px solid;
   border-color: #999 #ddd #ddd #999; margin: 0; padding: 1px;
 }
+input.placeholder { color: #999; }
 textarea { font-family: "DejaVu Sans Mono",Monaco,monospace; font-size: 100%; }
 fieldset { border: none; font-size: 95%; margin: 0; padding: .2em 0 0; }
 fieldset legend { color: #666; font-weight: bold; padding: 0; }