Futon: Simplify placeholder fallback using jQuery live focus events.

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

3 files changed, 29 insertions, 38 deletions

diff --git a/share/www/database.html b/share/www/database.html
index 504c2c1e..a3a02a52 100644
--- a/share/www/database.html
+++ b/share/www/database.html
@@ -120,7 +120,7 @@ specific language governing permissions and limitations under the License.
         $("#toolbar button.delete").click(page.deleteDatabase);
         $("#toolbar button.compactview").click(page.compactView);
 
-        $('#jumpto input').addPlaceholder("Document ID").suggest(function(text, callback) {
+        $('#jumpto input').suggest(function(text, callback) {
           page.db.allDocs({
             limit: 10, startkey: text, endkey: text + 'zzz',
             success: function(docs) {
@@ -158,7 +158,7 @@ specific language governing permissions and limitations under the License.
       </div>
       <div id="jumpto">
         <label>Jump to:
-          <input type="text" name="docid" autocomplete="off" />
+          <input type="text" name="docid" placeholder="Document ID" autocomplete="off" />
         </label>
       </div>
       <ul id="toolbar">
diff --git a/share/www/script/futon.js b/share/www/script/futon.js
index e2bdb468..18843eb7 100644
--- a/share/www/script/futon.js
+++ b/share/www/script/futon.js
@@ -362,31 +362,21 @@
     storage: new Storage()
   });
 
-  $.fn.addPlaceholder = function(text) {
-    return this.each(function() {
+  $.fn.addPlaceholder = function() {
+    if (this[0] && "placeholder" in document.createElement("input")) {
+      return; // found native placeholder support
+    }
+    return this.live('focusin', function() {
       var input = $(this);
-      if ($.browser.safari) {
-        input.attr("placeholder", text);
-        return;
+      if (input.val() === input.attr("placeholder")) {
+        input.removeClass("placeholder").val("");
       }
-      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("");
-        }
-      });
-    });
+    }).live("focusout", function() {
+      var input = $(this);
+      if (input.val() === "") {
+        input.val(input.attr("placeholder")).addClass("placeholder");
+      }
+    }).trigger("focusout");
   }
 
   $.fn.enableTabInsertion = function(chars) {
@@ -422,6 +412,8 @@
       // doing this as early as possible prevents flickering
       $(document.body).addClass("fullwidth");
     }
+    $("input[placeholder]").addPlaceholder();
+
     $.get("_sidebar.html", function(resp) {
       $("#wrap").append(resp)
         .find("#sidebar-toggle").click(function(e) {
@@ -443,7 +435,6 @@
           $("#version").text(info.version);
         }
       });
-      
     });
   });
 
diff --git a/share/www/style/layout.css b/share/www/style/layout.css
index b07a59e5..bf4eaa66 100644
--- a/share/www/style/layout.css
+++ b/share/www/style/layout.css
@@ -219,8 +219,8 @@ body.fullwidth #sidebar { border-bottom: 1px solid #333; right: 0;
   height: 100%; margin-right: 210px; position: relative;
 }
 body.fullwidth #wrap { margin-right: 0; }
-#content { padding: 1em 16px 3em 10px; overflow: auto; position: absolute;
-  top: 33px; bottom: 0; left: 0; right: 0;
+#content { padding: 1em 16px 3em 10px; overflow: auto; overflow-y: scroll;
+  position: absolute; top: 33px; bottom: 0; left: 0; right: 0;
 }
 
 /* Toolbar */
@@ -260,18 +260,18 @@ body.fullwidth #wrap { margin-right: 0; }
   -webkit-box-shadow: 4px 4px 6px #333;
 }
 *html #dialog { width: 33em; }
-body.loading #dialog h2 {
-  background: url(../image/spinner.gif) center no-repeat;
-}
 #dialog.loading { width: 220px; height: 80px; }
 #dialog.loaded { background-image: none; }
-#dialog h2 { background: #666; border-top: 1px solid #555;
-  border-bottom: 1px solid #777; color: #ccc; font-size: 110%;
-  font-weight: bold; margin: 0 -2em; padding: .35em 2em;
+#dialog h2 { background: #666 right center no-repeat;
+  border-top: 1px solid #555; border-bottom: 1px solid #777; color: #ccc;
+  font-size: 110%; font-weight: bold; margin: 0 -2em; padding: .35em 2em;
+}
+body.loading #dialog h2 {
+  background-image: url(../image/spinner.gif);
 }
 #dialog h3 {
-      color: #ccc; font-size: 110%;
-      font-weight: bold; margin: 0 -2em; padding: .35em 2em;
+  color: #ccc; font-size: 110%; font-weight: bold; margin: 0 -2em;
+  padding: .35em 2em;
 }
 #dialog fieldset { background: #222; border-top: 1px solid #111;
   margin: 0 0 1em; padding: .5em 1em 1em;
@@ -351,8 +351,8 @@ body.loading #dialog h2 {
   white-space: nowrap;
 }
 #viewcode .code textarea { border: none; border-top: 1px solid #ccc;
-  color: #333; font-size: 11px; margin: 0; min-height: 50px; padding: .4em 0 0;
-  resize: none; width: 100%; overflow: auto;
+  color: #333; font-size: 11px; margin: 0; min-height: 50px; overflow: auto;
+  padding: .4em 0 0; resize: none; width: 100%;
 }
 #viewcode .code textarea:focus { background: #e9f4ff; }
 #viewcode .bottom { border-bottom: none; clear: left; padding: 1px 3px; }