jquery · gnarf · Jul 27, 2011 · Jul 27, 2011 · Jul 27, 2011 · Jul 27, 2011
diff --git a/build/tasks/testswarm.js b/build/tasks/testswarm.js
@@ -18,6 +18,7 @@ var versions = {
 		"Draggable": "draggable/draggable.html",
 		"Droppable": "droppable/droppable.html",
 		"Effects": "effects/effects.html",
+		"Mask": "mask/mask.html",
 		"Menu": "menu/menu.html",
 		"Position": "position/position.html",
 		"Progressbar": "progressbar/progressbar.html",
@@ -27,6 +28,7 @@ var versions = {
 		"Sortable": "sortable/sortable.html",
 		"Spinner": "spinner/spinner.html",
 		"Tabs": "tabs/tabs.html",
+		"Timepicker": "timepicker/timepicker.html",
 		"Tooltip": "tooltip/tooltip.html",
 		"Widget": "widget/widget.html"
 	};

diff --git a/demos/index.html b/demos/index.html
@@ -18,6 +18,7 @@
 	<li><a href="droppable/">droppable</a></li>
 	<li><a href="effect/">effect</a></li>
 	<li><a href="hide/">hide</a></li>
+	<li><a href="mask/">mask</a></li>
 	<li><a href="menu/">menu</a></li>
 	<li><a href="position/">position</a></li>
 	<li><a href="progressbar/">progressbar</a></li>
@@ -30,6 +31,7 @@
 	<li><a href="spinner/">spinner</a></li>
 	<li><a href="switchClass/">switchClass</a></li>
 	<li><a href="tabs/">tabs</a></li>
+	<li><a href="timepicker/">timepicker</a></li>
 	<li><a href="toggle/">toggle</a></li>
 	<li><a href="toggleClass/">toggleClass</a></li>
 	<li><a href="tooltip/">tooltip</a></li>

diff --git a/demos/mask/default.html b/demos/mask/default.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<title>jQuery UI Mask - Simple Mask Demo</title>
+	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+	<script src="../../jquery-1.8.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mask.js"></script>
+	<link href="../demos.css" rel="stylesheet" />
+	<script>
+	$(function() {
+		$("#phone").mask({
+			mask: "(999) 999-9999"
+		});
+	});
+	</script>
+	<style>
+
+	</style>
+</head>
+<body>
+
+<div class="demo">
+	Phone Number: <input id="phone"> (999) 999-9999<br>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>A few simple masks</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>
diff --git a/demos/mask/functiondefinition.html b/demos/mask/functiondefinition.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<title>jQuery UI Mask - Function Definition Demo</title>
+	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+	<script src="../../jquery-1.8.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mask.js"></script>
+	<link href="../demos.css" rel="stylesheet" />
+	<script>
+	$(function() {
+
+		function createTwoDigitDefinition( maximum ) {
+			return function( value ) {
+				var number = parseInt( value, 10 );
+
+				if ( value === "" || /\D/.test( value ) ) {
+					return;
+				}
+
+				// allow "0" if it is the only character in the value,
+				// otherwise allow anything from 1 to maximum
+				if ( !number && value.length === 2 ) {
+					return;
+				}
+
+				// pad to 2 characters
+				number = ( number < 10 ? "0" : "" ) + number;
+				if ( number <= maximum ) {
+					return number;
+				}
+			}
+		}
+
+		function yearsDefinition( value ) {
+			var temp;
+
+			// if the value is empty, or contains a non-digit, it is invalid
+			if ( value === "" || /\D/.test( value ) ) {
+				return false;
+			}
+
+			// convert 2 digit years to 4 digits, this allows us to type 80 <right>
+			if ( value.length <= 2 ) {
+				temp = parseInt( value, 10 );
+				// before "32" we assume 2000's otherwise 1900's
+				if ( temp < 10 ) {
+					return "200" + temp;
+				} else if ( temp < 32 ) {
+					return "20" + temp;
+				} else {
+					return "19" + temp;
+				}
+			}
+			if ( value.length === 3 ) {
+				return "0"+value;
+			}
+			if ( value.length === 4 ) {
+				return value;
+			}
+		}
+		$("#date").mask({
+			mask: "yyyy/mm/dd",
+			definitions: {
+				"mm": createTwoDigitDefinition( 12 ),
+				"dd": createTwoDigitDefinition( 31 ),
+				"yyyy": yearsDefinition
+			}
+		});
+	});
+	</script>
+	<style>
+
+	</style>
+</head>
+<body>
+
+<div class="demo">
+	Date: <input id="date"> Format: yyyy/mm/dd<br>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>An example of using functions to define new mask definitions. These definitions are "multiple character" fields that allow us to have a date formatted input that validates.</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>
diff --git a/demos/mask/index.html b/demos/mask/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<title>jQuery UI Mask Demos</title>
+</head>
+<body>
+	<div class="demos-nav">
+		<h4>Examples</h4>
+		<ul>
+			<li class="demo-config-on"><a href="default.html">Simple Masks</a></li>
+			<li><a href="regulardefinition.html">RegExp Definition</a></li>
+			<li><a href="functiondefinition.html">Function Definition</a></li>
+		</ul>
+	</div>
+</body>
+</html>
diff --git a/demos/mask/regulardefinition.html b/demos/mask/regulardefinition.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<title>jQuery UI Mask - Regular Expressions Demo</title>
+	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
+	<script src="../../jquery-1.8.2.js"></script>
+	<script src="../../ui/jquery.ui.core.js"></script>
+	<script src="../../ui/jquery.ui.widget.js"></script>
+	<script src="../../ui/jquery.ui.mask.js"></script>
+	<link href="../demos.css" rel="stylesheet" />
+	<script>
+	$(function() {
+		$("#rx").mask({
+			mask: "~9.99 ~9.99 999",
+			definitions: {
+				"~": /[+-]/
+			}
+		});
+	});
+	</script>
+	<style>
+
+	</style>
+</head>
+<body>
+
+<div class="demo">
+	Lens Perscription: <input id="rx"> Format: ~9.99 ~9.99 999<br>
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+<p>An example of using a regular expression to define a new mask definition. Using the <code>definitions</code> option we define the <code>~</code> in the mask to only accept a <code>+</code> or a <code>-</code>.</p>
+
+</div><!-- End demo-description -->
+
+
+
+</body>
+</html>
diff --git a/grunt.js b/grunt.js
@@ -281,7 +281,7 @@ grunt.initConfig({
 		files: grunt.file.expandFiles( "tests/unit/**/*.html" ).filter(function( file ) {
 			// disabling everything that doesn't (quite) work with PhantomJS for now
 			// TODO except for all|index|test, try to include more as we go
-			return !( /(all|index|test|dialog|tabs|tooltip)\.html$/ ).test( file );
+			return !( /(all|index|test|dialog|tabs|timepicker|tooltip)\.html$/ ).test( file );
 		})
 	},
 	lint: {

diff --git a/tests/unit/all.html b/tests/unit/all.html
@@ -25,6 +25,7 @@
 			"draggable/draggable.html",
 			"droppable/droppable.html",
 			"effects/effects.html",
+			"mask/mask.html",
 			"menu/menu.html",
 			"position/position.html",
 			"progressbar/progressbar.html",
@@ -34,6 +35,8 @@
 			"sortable/sortable.html",
 			"spinner/spinner.html",
 			"tabs/tabs.html",
+			"tabs/tabs_deprecated.html",
+			"timepicker/timepicker.html",
 			"tooltip/tooltip.html",
 			"widget/widget.html"
 		];

diff --git a/tests/unit/index.html b/tests/unit/index.html
@@ -42,11 +42,13 @@ <h2>Widgets</h2>
 			<li><a href="button/button.html">Button</a></li>
 			<li><a href="datepicker/datepicker.html">Datepicker</a></li>
 			<li><a href="dialog/dialog.html">Dialog</a></li>
+			<li><a href="mask/mask.html">Mask</a></li>
 			<li><a href="menu/menu.html">Menu</a></li>
 			<li><a href="progressbar/progressbar.html">Progressbar</a></li>
 			<li><a href="slider/slider.html">Slider</a></li>
 			<li><a href="spinner/spinner.html">Spinner</a></li>
 			<li><a href="tabs/tabs.html">Tabs</a></li>
+			<li><a href="timepicker/timepicker.html">Timepicker</a></li>
 			<li><a href="tooltip/tooltip.html">Tooltip</a></li>
 		</ul>
 

diff --git a/tests/unit/mask/all.html b/tests/unit/mask/all.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Mask Test Suite</title>
+
+	<script src="../../../jquery-1.7.2.js"></script>
+
+	<link rel="stylesheet" href="../../../external/qunit.css">
+	<link rel="stylesheet" href="../qunit-composite.css">
+	<script src="../../../external/qunit.js"></script>
+	<script src="../qunit-composite.js"></script>
+	<script src="../subsuite.js"></script>
+
+	<script>
+	testAllVersions( "mask" );
+	</script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery UI Mask Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+<div id="qunit-fixture">
+
+</div>
+</body>
+</html>
diff --git a/tests/unit/mask/mask.html b/tests/unit/mask/mask.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Mask Test Suite</title>
+
+	<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
+
+	<script src="../../jquery.js"></script>
+	<script src="../../../ui/jquery.ui.core.js"></script>
+	<script src="../../../ui/jquery.ui.widget.js"></script>
+	<script src="../../../ui/jquery.ui.mask.js"></script>
+
+	<link rel="stylesheet" href="../../../external/qunit.css">
+	<script src="../../../external/qunit.js"></script>
+	<script src="../../jquery.simulate.js"></script>
+	<script src="../testsuite.js"></script>
+
+	<script src="mask_test_helpers.js"></script>
+	<script src="mask_common.js"></script>
+	<script src="mask_core.js"></script>
+	<script src="mask_events.js"></script>
+	<script src="mask_methods.js"></script>
+	<script src="mask_options.js"></script>
+
+	<script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery UI Mask Test Suite</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+<div id="qunit-fixture">
+<input id="mask1" type="text">
+</div>
+</body>
+</html>
diff --git a/tests/unit/mask/mask_common.js b/tests/unit/mask/mask_common.js
@@ -0,0 +1,16 @@
+TestHelpers.commonWidgetTests( "mask", {
+	defaults: {
+		clearEmpty: true,
+		definitions: {
+			'9': /[0-9]/,
+			'a': /[A-Za-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]/,
+			'*': /[A-Za-z0-9\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]/
+		},
+		disabled: false,
+		mask: null,
+		placeholder: "_",
+
+		// callbacks
+		create: null
+	}
+});