summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorChristopher Lenz <cmlenz@apache.org>2010-01-19 22:37:41 +0000
committerChristopher Lenz <cmlenz@apache.org>2010-01-19 22:37:41 +0000
commitca66fa917c8e297e1403dc916de96f50130af270 (patch)
tree240944c89c3f28cb9e9e18372b9856dd97891a13
parent30a45a978e3b6aa6c206fccab66a6ca383fc5fe6 (diff)
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
-rw-r--r--share/www/database.html4
-rw-r--r--share/www/script/futon.js39
-rw-r--r--share/www/style/layout.css24
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; }