r2501 - watermark: added tests; added destroy method; improved implementation to create relative-...
Author: joern.zaefferer
Date: Thu Apr 30 07:51:41 2009
New Revision: 2501
Added:
branches/dev/watermark/tests/unit/watermark/
branches/dev/watermark/tests/unit/watermark/watermark.html (contents,
props changed)
branches/dev/watermark/tests/unit/watermark/watermark_core.js
branches/dev/watermark/tests/unit/watermark/watermark_defaults.js
branches/dev/watermark/tests/unit/watermark/watermark_methods.js
branches/dev/watermark/tests/unit/watermark/watermark_options.js
branches/dev/watermark/tests/unit/watermark/watermark_tickets.js
Modified:
branches/dev/watermark/tests/unit/defaults.html
branches/dev/watermark/tests/unit/index.html
branches/dev/watermark/ui/ui.watermark.js
Log:
watermark: added tests; added destroy method; improved implementation to
create relative-positioned wrapper (and remove that on destroy)
Modified: branches/dev/watermark/tests/unit/defaults.html
==============================================================================
--- branches/dev/watermark/tests/unit/defaults.html (original)
+++ branches/dev/watermark/tests/unit/defaults.html Thu Apr 30 07:51:41 2009
@@ -16,6 +16,7 @@
<script type="text/javascript" src="../../ui/ui.progressbar.js"></script>
<script type="text/javascript" src="../../ui/ui.slider.js"></script>
<script type="text/javascript" src="../../ui/ui.tabs.js"></script>
+ <script type="text/javascript" src="../../ui/ui.watermark.js"></script>
<link type="text/css" href="testsuite.css" rel="stylesheet" />
<script type="text/javascript" src="testsuite.js"></script>
@@ -34,6 +35,7 @@
<script type="text/javascript"
src="progressbar/progressbar_defaults.js"></script>
<script type="text/javascript" src="slider/slider_defaults.js"></script>
<script type="text/javascript" src="tabs/tabs_defaults.js"></script>
+ <script type="text/javascript"
src="watermark/watermark_defaults.js"></script>
</head>
<body>
<div id="main">
Modified: branches/dev/watermark/tests/unit/index.html
==============================================================================
--- branches/dev/watermark/tests/unit/index.html (original)
+++ branches/dev/watermark/tests/unit/index.html Thu Apr 30 07:51:41 2009
@@ -19,6 +19,7 @@
<script type="text/javascript" src="../../ui/ui.slider.js"></script>
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
<script type="text/javascript" src="../../ui/ui.tabs.js"></script>
+ <script type="text/javascript" src="../../ui/ui.watermark.js"></script>
<script type="text/javascript"
src="../../external/simulate/jquery.simulate.js"></script>
<script type="text/javascript"
src="../../external/cookie/jquery.cookie.js"></script>
@@ -50,6 +51,7 @@
<li><a href="progressbar/progressbar.html">Progressbar</a></li>
<li><a href="slider/slider.html">Slider</a></li>
<li><a href="tabs/tabs.html">Tabs</a></li>
+ <li><a href="watermark/watermark.html">Watermark</a></li>
</ul>
</body>
Added: branches/dev/watermark/tests/unit/watermark/watermark.html
==============================================================================
--- (empty file)
+++ branches/dev/watermark/tests/unit/watermark/watermark.html Thu Apr 30
07:51:41 2009
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Watermark Test Suite</title>
+
+ <script type="text/javascript" src="../../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../../ui/ui.watermark.js"></script>
+
+ <link type="text/css" href="../testsuite.css" rel="stylesheet" />
+ <script type="text/javascript" src="../testsuite.js"></script>
+ <script type="text/javascript"
src="../../../external/qunit/testrunner.js"></script>
+ <script type="text/javascript"
src="../../../external/simulate/jquery.simulate.js"></script>
+
+ <script type="text/javascript" src="watermark_core.js"></script>
+ <script type="text/javascript" src="watermark_defaults.js"></script>
+ <script type="text/javascript" src="watermark_methods.js"></script>
+ <script type="text/javascript" src="watermark_options.js"></script>
+ <script type="text/javascript" src="watermark_tickets.js"></script>
+</head>
+<body>
+
+<div id="main">
+
+ <form id="loginform" autocomplete="off">
+ <fieldset>
+ <legend>Login</legend>
+ <div>
+ <label for="email">E-Mail Address</label>
+ <input type="text" id="email" name="email" placeholder="E-Mail" />
+ </div>
+ <div>
+ <label for="password">Your password</label>
+ <input type="password" id="password" name="password"
placeholder="Password" />
+ </div>
+ <input type="submit" />
+ </fieldset>
+ </form>
+
+</div>
+
+</body>
+</html>
Added: branches/dev/watermark/tests/unit/watermark/watermark_core.js
==============================================================================
--- (empty file)
+++ branches/dev/watermark/tests/unit/watermark/watermark_core.js Thu Apr
30 07:51:41 2009
@@ -0,0 +1,22 @@
+/*
+ * watermark_core.js
+ */
+
+
+
+(function($) {
+
+function attr(selector) {
+ return $(selector).attr("placeholder");
+}
+
+module("watermark core");
+
+test("basics", function() {
+ same(attr("#email"), "E-Mail")
+ $("#email, #password").watermark();
+ same(attr("#email"), undefined);
+ same($("#email").prev("label.ui-watermark-label").text(), "E-Mail");
+});
+
+})(jQuery);
Added: branches/dev/watermark/tests/unit/watermark/watermark_defaults.js
==============================================================================
--- (empty file)
+++ branches/dev/watermark/tests/unit/watermark/watermark_defaults.js Thu
Apr 30 07:51:41 2009
@@ -0,0 +1,11 @@
+/*
+ * watermark_defaults.js
+ */
+
+var watermark_defaults = {
+ animate: true,
+ disabled: false,
+ placeholder: $.ui.watermark.defaults.placeholder
+};
+
+commonWidgetTests('watermark', { defaults: watermark_defaults });
Added: branches/dev/watermark/tests/unit/watermark/watermark_methods.js
==============================================================================
--- (empty file)
+++ branches/dev/watermark/tests/unit/watermark/watermark_methods.js Thu
Apr 30 07:51:41 2009
@@ -0,0 +1,37 @@
+/*
+ * watermark_methods.js
+ */
+(function($) {
+
+module("watermark methods");
+
+test("destroy", function() {
+ var before = $("#main *").length;
+ $("#email").watermark()
+ same( $("#email").prev("label.ui-watermark-label").length, 1 );
+ $("#email").watermark("destroy");
+ var after = $("#main *").length;
+ same(after, before);
+ same( $("#email").prev("label.ui-watermark-label").length, 0 );
+});
+
+test("disable and enable", function() {
+ $("#email").watermark({
+ animate: false
+ });
+ same( $("#email").prev("label").css("display"), "inline" );
+ $("#email").focus();
+ same( $("#email").prev("label").css("display"), "none" );
+ $("#email").blur();
+ same( $("#email").prev("label").css("display"), "inline" );
+ $("#email").watermark("disable");
+ $("#email").focus();
+ same( $("#email").prev("label").css("display"), "inline" );
+ $("#email").blur();
+ same( $("#email").prev("label").css("display"), "inline" );
+ $("#email").watermark("enable");
+ $("#email").focus();
+ same( $("#email").prev("label").css("display"), "none" );
+});
+
+})(jQuery);
Added: branches/dev/watermark/tests/unit/watermark/watermark_options.js
==============================================================================
--- (empty file)
+++ branches/dev/watermark/tests/unit/watermark/watermark_options.js Thu
Apr 30 07:51:41 2009
@@ -0,0 +1,24 @@
+/*
+ * accordion_options.js
+ */
+(function($) {
+
+module("watermark options");
+
+test("placeholder, string", function() {
+ $("#email").watermark({
+ placeholder: "your email"
+ });
+ same( $("#email").prev("label").text(), "your email" );
+});
+
+test("placeholder, callback", function() {
+ $("#email").watermark({
+ placeholder: function() {
+ return "your email";
+ }
+ });
+ same( $("#email").prev("label").text(), "your email" );
+});
+
+})(jQuery);
Added: branches/dev/watermark/tests/unit/watermark/watermark_tickets.js
==============================================================================
--- (empty file)
+++ branches/dev/watermark/tests/unit/watermark/watermark_tickets.js Thu
Apr 30 07:51:41 2009
@@ -0,0 +1,8 @@
+/*
+ * watermark_tickets.js
+ */
+(function($) {
+
+module("watermark tickets");
+
+})(jQuery);
Modified: branches/dev/watermark/ui/ui.watermark.js
==============================================================================
--- branches/dev/watermark/ui/ui.watermark.js (original)
+++ branches/dev/watermark/ui/ui.watermark.js Thu Apr 30 07:51:41 2009
@@ -19,9 +19,9 @@
var o = this.options, self = this;
var input = this.element;
var placeholder = $.isFunction(o.placeholder) ?
o.placeholder.apply(this.element[0]) : o.placeholder;
+ this.element.wrap("<span/>").parent().addClass("ui-watermark-container");
var label = (this.label = $('<label for="' + input.attr("id") + '">' +
placeholder + '</label>').insertBefore(input));
label.addClass("ui-watermark-label");
- label.parent().addClass("ui-watermark-container");
label.css({
left: parseInt(input.css("borderLeftWidth")) +
parseInt(input.css("paddingLeft")),
top: parseInt(input.css("borderTopWidth")) +
parseInt(input.css("paddingTop"))
@@ -29,20 +29,22 @@
if (input.val()) {
label.hide();
}
- if (!input.attr("title")) {
- input.attr("title", label.text());
- }
- input.focus(function() {
- if (!this.value)
- label.fadeOut("fast");
- }).blur(function() {
- if (!this.value)
- label.fadeIn("fast");
+ input.bind("focus." + this.widgetName, function() {
+ if (!o.disabled && !this.value)
+ o.animate ? label.fadeOut("fast") : label.hide();
+ }).bind("blur." + this.widgetName, function() {
+ if (!o.disabled && !this.value)
+ o.animate ? label.fadeIn("fast") : label.show();
});
},
-
+
destroy: function() {
- this.label.parent().removeClass("ui-watermark-container").end().remove();
+ if (this.element.data("placeholder")) {
+ this.element.attr("placeholder", this.element.data("placeholder"));
+ }
+ this.element.parent().replaceWith(this.element);
+ this.label.remove();
+ $.widget.prototype.destroy.apply(this, arguments);
}
});
@@ -52,9 +54,11 @@
defaults: {
placeholder: function() {
var result = $(this).attr("placeholder");
+ $(this).data("placeholder", result);
$(this).removeAttr("placeholder");
return result;
- }
+ },
+ animate: true
}
});