Mask & Timepicker - Code Review #494

Closed
wants to merge 118 commits into
from
Commits
Jump to file
+2,366 −1
Split
View
@@ -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"
};
View
@@ -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>
View
@@ -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>
@@ -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>
View
@@ -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>
@@ -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>
View
@@ -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: {
View
@@ -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"
];
View
@@ -42,11 +42,13 @@
<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>
View
@@ -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>
View
@@ -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>
@@ -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
+ }
+});
Oops, something went wrong.