Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Mask & Timepicker - Code Review #494

Closed
wants to merge 118 commits into from
Commits on Jul 27, 2011
  1. @gnarf
  2. @scottgonzalez

    Mask tests: cleanup.

    scottgonzalez authored
  3. @gnarf
  4. @gnarf
Commits on Jul 29, 2011
  1. @gnarf
Commits on Jul 31, 2011
  1. @gnarf
  2. @gnarf
  3. @gnarf

    Mask: Adding refresh method, Adding unit tests for mask/placeholder o…

    gnarf authored
    …ption, backspace & delete behavior.
  4. @gnarf
  5. @gnarf
Commits on Aug 1, 2011
  1. @gnarf
  2. @gnarf
Commits on Aug 2, 2011
  1. @gnarf
  2. @gnarf

    Mask: Updating regexp to include ö and å (etc), also making sure inpu…

    gnarf authored
    …ts have focus in the tests to stop an odd sometimes bug
  3. @gnarf

    Mask: Visual Test

    gnarf authored
  4. @gnarf
  5. @gnarf

    Mask: Handling overtyping multiple values better - rewrote shiftRight…

    gnarf authored
    … function to make more sense
Commits on Aug 10, 2011
  1. @gnarf

    Mask: Adding the complete event

    gnarf authored
  2. @gnarf
  3. @gnarf
  4. @gnarf

    Mask: Updating visual test

    gnarf authored
  5. @gnarf
Commits on Aug 12, 2011
  1. @gnarf

    Mask: clearEmpty option

    gnarf authored
  2. @gnarf

    Mask: Correcting typo

    gnarf authored
  3. @gnarf

    Mask: Fixing global leak

    gnarf authored
  4. @gnarf
  5. @gnarf

    Mask: Update to visual tests

    gnarf authored
  6. @gnarf
  7. @gnarf
Commits on Sep 12, 2011
  1. @jzaefferer

    Merge branch 'master' into mask

    jzaefferer authored
    Conflicts:
    	tests/unit/all.html
  2. @jzaefferer
  3. @jzaefferer

    Mask: Refactor _events method into _events property, pass to _bind on…

    jzaefferer authored
    … _create. Matches design in Spinner
Commits on Sep 13, 2011
  1. @jzaefferer
Commits on Sep 14, 2011
  1. @gnarf

    Mask: Adding left key event to also highlight each field in multi-cha…

    gnarf authored
    …racter fields like the right arrow was doing
    
    Conflicts:
    
    	ui/jquery.ui.mask.js
  2. @gnarf
  3. @gnarf
  4. @gnarf
  5. @gnarf
  6. @gnarf
  7. @gnarf
  8. @gnarf
  9. @gnarf
  10. @gnarf
  11. @gnarf

    Mask: Fixing a focus caret position issue, adding _caretSelect to sel…

    gnarf authored
    …ect a multi-byte field, canceling the caret on focus timeout in blur to prevent a possible loop when tabbing quickly between masked inputs
  12. @gnarf
  13. @gnarf
  14. @gnarf
Commits on Sep 15, 2011
  1. @gnarf
  2. @gnarf
Commits on Sep 19, 2011
  1. @gnarf
Commits on Sep 22, 2011
  1. @gnarf
  2. @gnarf
  3. @gnarf
  4. @gnarf
Commits on Sep 26, 2011
  1. @gnarf
Commits on Sep 27, 2011
  1. @gnarf
  2. @gnarf

    Timepicker: Globalize support

    gnarf authored
  3. @gnarf
Commits on Sep 28, 2011
  1. @gnarf
Commits on Oct 5, 2011
  1. @gnarf
  2. @gnarf
Commits on Oct 11, 2011
  1. @gnarf
  2. @gnarf

    Mask: fixing a broken unit test

    gnarf authored
  3. @gnarf

    Mask: Updating code with some suggestions from review

    gnarf authored
    * remove docs link in header
    * call refresh from _create instead of _parseValue() _paint()
    * _paint call from _setOption should be in _setOptions
    * add ui-mask class to the element and remove in destroy...
    * refactor LEFT & RIGHT to be the same code - remove the bufferObject in these events...
    * remove currentEvent
    * comment in blur function needs whitespace
    * kill return at end of blur
  4. @gnarf
Commits on Oct 12, 2011
  1. @gnarf

    Mask: More updates from review - adresses comments from @jzaeffer

    gnarf authored
    * make definitions test in the options.
    * remove return true from _caretSelect
    * check out backspace/delete see if i can remove double assign/ternary
  2. @gnarf

    Mask: Optional fields not displayed until the value is 'valid', or th…

    gnarf authored
    …ere are characters in the 'optional' area
  3. @gnarf

    Mask: Tweaks to optional position handling - should now hide optional…

    gnarf authored
    … section after focus leaves as well
Commits on Oct 13, 2011
  1. @gnarf

    Merge branch 'master' into mask

    gnarf authored
  2. @gnarf

    Timepicker: Quick updates from code review.

    gnarf authored
    * Remove docs link.
    * remove button from depends
    * move destroy method under _create - make _destroy
    * comment in _trimValue describing purpose
    * _trimValue becomes _adjustValue
    * don't set the ampm option from culture dependency
    * reordering methods
    * rsingleh / rlowerhg (rename)
  3. @scottgonzalez @gnarf

    Spinner: Adjust height check for IE 6 rendering.

    scottgonzalez authored gnarf committed
Commits on Oct 25, 2011
  1. @gnarf

    Merge branch 'master' into mask

    gnarf authored
  2. @gnarf
  3. @gnarf
  4. @gnarf
Commits on Oct 26, 2011
  1. @gnarf
  2. @gnarf
  3. @gnarf

    Timepicker: value method

    gnarf authored
Commits on Oct 27, 2011
  1. @gnarf
Commits on Oct 28, 2011
  1. @gnarf
  2. @gnarf
Commits on Nov 18, 2011
  1. @jzaefferer
  2. @jzaefferer
Commits on Nov 24, 2011
  1. @jzaefferer
  2. @jzaefferer

    Upgrade jQuery to 1.7.1.

    jzaefferer authored
Commits on Mar 14, 2012
  1. @scottgonzalez
Commits on Aug 3, 2012
  1. @gnarf

    Merge branch 'master' into mask

    gnarf authored
  2. @gnarf
Commits on Aug 7, 2012
  1. @gnarf
  2. @gnarf
Commits on Sep 4, 2012
  1. @gnarf

    Merge branch 'master' into mask

    gnarf authored
  2. @gnarf

    Merge branch 'master' into mask

    gnarf authored
  3. @gnarf
Commits on Oct 15, 2012
  1. Merge remote-tracking branch 'origin/master' into mask

    Zach Shepherd authored
    Conflicts:
    	demos/index.html
  2. mask/timepicker: use jquery files from tests directory, which actuall…

    Zach Shepherd authored
    …y exist
  3. mask: update demos following merge

    Zach Shepherd authored
  4. Mask: fix bug in visual test case

    Zach Shepherd authored
  5. Mask: fix isValid logic; previously, any call to getValue(true) resul…

    Zach Shepherd authored
    …ted in isValid being set to true
  6. Mask: add visual test for removing an invalid value on blur

    Zach Shepherd authored
    This change adds a test for the functionality to remove an invalid value on blur as described in section 3 of http://wiki.jqueryui.com/w/page/12137996/Mask:
        Removing an incomplete value can be done by binding to the regular blur event, checking !mask("valid"), then using .val("") to clear the input.
  7. Mask: fix bug in raw-value-retrieval logic

    Zach Shepherd authored
Commits on Oct 16, 2012
  1. Mask: add unit tests for optional section

    Zach Shepherd authored
  2. @jzaefferer

    Mask: use setTimeout to work around Chrome caret positioning issue

    Zach Shepherd authored jzaefferer committed
  3. Mask: address Chrome timing issue in qunit-friendly way

    Zach Shepherd authored
Commits on Oct 17, 2012
  1. Mask: fix visual test to bind to blur as stated in the test's textual…

    Zach Shepherd authored
    … description
Commits on Oct 31, 2012
  1. Timepicker: use proposed syntax

    Zach Shepherd authored
  2. Mask: Add support for '<...>' placeholders

    Zach Shepherd authored
  3. Mask: add test cases for masks with multiple optional inputs and esca…

    Zach Shepherd authored
    …ped characters
  4. Mask: add support for escaped characters and processes additional opt…

    Zach Shepherd authored
    …ional markers
Commits on Nov 4, 2012
  1. @jzaefferer
Commits on Nov 12, 2012
  1. @gnarf
Commits on Nov 17, 2012
  1. @jzaefferer

    Merge branch 'master' into mask

    jzaefferer authored
    Conflicts:
    	build/tasks/testswarm.js
    	tests/unit/all.html
  2. @jzaefferer
Commits on Nov 18, 2012
  1. @jzaefferer
  2. @jzaefferer
  3. @jzaefferer
This page is out of date. Refresh to see the latest.
Showing with 2,366 additions and 1 deletion.
  1. +2 −0  build/tasks/testswarm.js
  2. +2 −0  demos/index.html
  3. +38 −0 demos/mask/default.html
  4. +93 −0 demos/mask/functiondefinition.html
  5. +17 −0 demos/mask/index.html
  6. +41 −0 demos/mask/regulardefinition.html
  7. +1 −1  grunt.js
  8. +3 −0  tests/unit/all.html
  9. +2 −0  tests/unit/index.html
  10. +30 −0 tests/unit/mask/all.html
  11. +39 −0 tests/unit/mask/mask.html
  12. +16 −0 tests/unit/mask/mask_common.js
  13. +108 −0 tests/unit/mask/mask_core.js
  14. +330 −0 tests/unit/mask/mask_events.js
  15. +58 −0 tests/unit/mask/mask_methods.js
  16. +202 −0 tests/unit/mask/mask_options.js
  17. +46 −0 tests/unit/mask/mask_test_helpers.js
  18. +30 −0 tests/unit/timepicker/all.html
  19. +43 −0 tests/unit/timepicker/timepicker.html
  20. +9 −0 tests/unit/timepicker/timepicker_common.js
  21. +5 −0 tests/unit/timepicker/timepicker_core.js
  22. +56 −0 tests/unit/timepicker/timepicker_events.js
  23. +22 −0 tests/unit/timepicker/timepicker_methods.js
  24. +43 −0 tests/unit/timepicker/timepicker_options.js
  25. +54 −0 tests/unit/timepicker/timepicker_test_helpers.js
  26. +10 −0 tests/visual/index.html
  27. +137 −0 tests/visual/mask/mask.html
  28. +61 −0 tests/visual/timepicker/timepicker.html
  29. +598 −0 ui/jquery.ui.mask.js
  30. +270 −0 ui/jquery.ui.timepicker.js
View
2  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"
};
View
2  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>
View
38 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>
View
93 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>
View
17 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>
View
41 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>
View
2  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: {
View
3  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"
];
View
2  tests/unit/index.html
@@ -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
30 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>
View
39 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>
View
16 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
+ }
+});
View
108 tests/unit/mask/mask_core.js
@@ -0,0 +1,108 @@
+(function( $ ) {
+
+module( "mask: core" );
+
+test( "masked inputs get the '.ui-mask' class", function() {
+ expect( 3 );
+ var input = $( "#mask1" );
+ ok( !input.is( ".ui-mask" ), "Input is not masked" );
+ input.mask({ mask: "999" });
+ ok( input.is( ".ui-mask" ), "Input is now masked" );
+ input.mask( "destroy" );
+ ok( !input.is( ".ui-mask" ), "destroy clears masked class" );
+});
+
+test( "_caret() can move and read the text cursor", 4, function() {
+
+ var input = $( "#mask1" ).val("1234").mask({
+ mask: "9999"
+ }),
+ instance = input.data( "ui-mask" );
+
+ input.focus();
+ instance._caret( 0 );
+ deepEqual( instance._caret(), {
+ begin: 0,
+ end: 0
+ }, "Caret position set to 0 results in 0, 0" );
+
+ instance._caret( 1 );
+ deepEqual( instance._caret(), {
+ begin: 1,
+ end: 1
+ }, "Caret position set 1 results in 1, 1" );
+
+ instance._caret( 5 );
+ deepEqual( instance._caret(), {
+ begin: 4,
+ end: 4
+ }, "Caret position set beyond bounds (5) results in 4, 4" );
+
+ instance._caret( 0, 2 );
+ deepEqual( instance._caret(), {
+ begin: 0,
+ end: 2
+ }, "Caret position set to 0, 2 results in 0, 2" );
+});
+
+test( "Parsing initial value skips literals", function() {
+ expect( 2 );
+ var input = $( "#mask1" );
+ input.val("123456").mask({
+ mask: "99/99/99"
+ });
+
+ equal( input.val(), "12/34/56", "Literals were inserted into val");
+ input.mask( "option", "mask", "99-99-99" );
+ equal( input.val(), "12-34-56", "Old literals were ignored, and new ones inserted into val");
+
+});
+
+test( "Parsing initial value with multi-character fields", function() {
+ expect( 2 );
+ var defs = {
+ hh: function( value ) {
+ value = parseInt( value, 10 );
+ if ( value >= 1 || value <= 12 ) {
+ return ( value < 10 ? "0" : "" ) + value;
+ }
+ },
+ ss: function( value ) {
+ value = parseInt( value, 10 );
+ if ( value >= 0 || value <= 59 ) {
+ return ( value < 10 ? "0" : "" ) + value;
+ }
+ }
+ },
+ input = $( "#mask1" );
+
+ input.val("123456").mask({
+ mask: "hh:ss:ss",
+ definitions: defs
+ });
+
+ equal( input.val(), "12:34:56", "Literals were inserted into val");
+ input.mask( "option", "mask", "99-99-99" );
+ equal( input.val(), "12-34-56", "Old literals were ignored, and new ones inserted into val");
+});
+
+test( "Default values provided by function", function() {
+ expect( 1 );
+ var defs = {
+ hh: function( value ) {
+ if ( value === "" ) {
+ return "11";
+ }
+ }
+ },
+ input = $( "#mask1" );
+
+ input.val("").mask({
+ mask: "hh",
+ definitions: defs
+ });
+ equal( input.val(), "11", "No value was accepted, so the 'default' from the mask was provided" );
+
+});
+
+}( jQuery ) );
View
330 tests/unit/mask/mask_events.js
@@ -0,0 +1,330 @@
+(function( $ ) {
+
+module( "mask: events" );
+
+test( "focus: Initial Caret Positioning", 4, function() {
+ var input = $( "#mask1" ).val("").mask({
+ mask: "9",
+ clearEmpty: false
+ }),
+ mask = input.data( "ui-mask" );
+
+ equal( input.val(), "_", "Initial Value Expected" );
+ TestHelpers.focus( input );
+ deepEqual( mask._caret(), { begin: 0, end: 0 }, "Caret position correct");
+ TestHelpers.blur( input );
+
+ input.mask( "option", "mask", "(9)" );
+ equal( input.val(), "(_)", "Initial Value Expected" );
+ TestHelpers.focus( input );
+
+ deepEqual( mask._caret(), { begin: 1, end: 1 }, "Caret position correct");
+});
+
+test( "keydown: Backspace pulls values from right", function() {
+ expect( 12 );
+ var input = $( "#mask1" ).val("123").mask({ mask: "999" }),
+ mask = input.data( "ui-mask" );
+
+
+ TestHelpers.focus( input );
+ equal( input.val(), "123", "Initial Value Expected" );
+
+ mask._caret( 2 );
+ input.simulate( "keydown", { keyCode: $.ui.keyCode.BACKSPACE });
+ equal( input.val(), "13_", "Backspaced the second character");
+ deepEqual( mask._caret(), { begin: 1, end: 1 }, "Caret position correct");
+
+ input.val( "1z" ).mask( "option", "mask", "9a" );
+ equal( input.val(), "1z", "Initial Value Expected" );
+
+ mask._caret( 1 );
+ input.simulate( "keydown", { keyCode: $.ui.keyCode.BACKSPACE });
+ equal( input.val(), "_z", "Backspace did not pull value because it wasn't valid" );
+ deepEqual( mask._caret(), { begin: 0, end: 0 }, "Caret position correct");
+
+ input.val( "12" ).mask( "option", "mask", "9-9" );
+ equal( input.val(), "1-2", "Initial Value Expected" );
+
+ mask._caret( 1 );
+ input.simulate( "keydown", { keyCode: $.ui.keyCode.BACKSPACE });
+ equal( input.val(), "2-_", "Backspace pulled value because it was valid" );
+ deepEqual( mask._caret(), { begin: 0, end: 0 }, "Caret position correct");
+
+
+ input.val( "1z" ).mask( "option", "mask", "9-a" );
+ equal( input.val(), "1-z", "Initial Value Expected" );
+
+ mask._caret( 1 );
+ input.simulate( "keydown", { keyCode: $.ui.keyCode.BACKSPACE });
+ equal( input.val(), "_-z", "Backspace did not pull value because it wasn't valid" );
+ deepEqual( mask._caret(), { begin: 0, end: 0 }, "Caret position correct");
+});
+
+test( "keydown: Backspace with the cursor to the right of a mask literal", function() {
+ expect( 6 );
+ var input = $( "#mask1" ).val("123").mask({ mask: "9-99" }),
+ mask = input.data( "ui-mask" );
+
+ TestHelpers.focus( input );
+ equal( input.val(), "1-23", "Initial Value Expected" );
+
+ mask._caret( 2 );
+ input.simulate( "keydown", { keyCode: $.ui.keyCode.BACKSPACE });
+ equal( input.val(), "2-3_", "Backspaced across the literal -, brought values with");
+ deepEqual( mask._caret(), { begin: 0, end: 0 }, "Caret position correct");
+
+ input.val("z12").mask( "option", "mask", "a-99" );
+ equal( input.val(), "z-12", "New Initial Value Expected");
+
+ mask._caret( 2 );
+ input.simulate( "keydown", { keyCode: $.ui.keyCode.BACKSPACE });
+ equal( input.val(), "_-12", "Backspaced across the literal -, values held position");
+ deepEqual( mask._caret(), { begin: 0, end: 0 }, "Caret position correct");
+});
+
+test( "keydown: Backspace with multiple values higlighted", function() {
+ expect( 3 );
+ var input = $( "#mask1" ).val("1234567890").mask({ mask: "(999)999-9999" }),
+ mask = input.data( "ui-mask" );
+
+ TestHelpers.focus( input );
+ equal( input.val(), "(123)456-7890", "Initial Value Expected" );
+
+ mask._caret( 5, 8 );
+ input.simulate( "keydown", { keyCode: $.ui.keyCode.BACKSPACE });
+ equal( input.val(), "(123)789-0___", "Deleted three highlighted values, pulled values from right" );
+ deepEqual( mask._caret(), { begin: 5, end: 5 }, "Caret position correct");
+});
+
+test( "keypress: Typing with multiple values higlighted", function() {
+ expect( 3 );
+ var input = $( "#mask1" ).val("1234567890").mask({ mask: "(999)999-9999" }),
+ mask = input.data( "ui-mask" );
+
+ TestHelpers.focus( input );
+ equal( input.val(), "(123)456-7890", "Initial Value Expected" );
+
+ mask._caret( 5, 8 );
+ TestHelpers.press( input, "0" );
+ equal( input.val(), "(123)078-90__", "Deleted three highlighted values, pulled values from right" );
+ deepEqual( mask._caret(), { begin: 6, end: 6 }, "Caret position correct");
+});
+
+test( "keypress: Typing with multi-character fields", function() {
+ expect( 5 );
+ var input = $( "#mask1" ).val("").mask({
+ mask: "xx-xx-xx",
+ definitions: {
+ xx: function( value ) {
+ return value;
+ }
+ }
+ }),
+ mask = input.data( "ui-mask" );
+
+ TestHelpers.focus( input );
+ equal( input.val(), "__-__-__", "Initial Value Expected" );
+
+ mask._caret( 0 );
+ TestHelpers.press( input, "0" );
+ equal( input.val(), "0_-__-__", "typed a 0" );
+ deepEqual( mask._caret(), { begin: 1, end: 1 }, "Caret position correct");
+ TestHelpers.press( input, "z" );
+ equal( input.val(), "0z-__-__", "typed a z" );
+ deepEqual( mask._caret(), { begin: 3, end: 5 }, "Caret position correct");
+});
+
+test( "keypress: Typing with multi-character only accepts valid values", function() {
+ expect( 12 );
+ var input = $( "#mask1" ).val( "" ).mask({
+ mask: "xx-xx-xx",
+ definitions: {
+ xx: function( value ) {
+ if ( !value.length ) {
+ return;
+ }
+ if ( value.charAt( 0 ) === "_" ) {
+ return;
+ }
+ if ( value.charAt( 1 ) === "-" || value.length === 1 ) {
+ return value.charAt(0) + value.charAt( 0 );
+ }
+ if ( value.charAt( 0 ) === value.charAt( 1 ) ) {
+ return value;
+ }
+ }
+ }
+ }),
+ mask = input.data( "ui-mask" );
+
+ TestHelpers.focus( input );
+ equal( input.val(), "__-__-__", "Initial Value Expected" );
+
+ deepEqual( mask._caret(), { begin: 0, end: 2 }, "Caret position correct");
+
+ TestHelpers.press( input, "0" );
+ equal( input.val(), "0_-__-__", "typed a 0" );
+ deepEqual( mask._caret(), { begin: 1, end: 1 }, "Caret position correct");
+
+ TestHelpers.press( input, "z" );
+ equal( input.val(), "0_-__-__", "typed a z, wasn't allowed" );
+ deepEqual( mask._caret(), { begin: 1, end: 1 }, "Caret position correct");
+
+ TestHelpers.press( input, "0" );
+ equal( input.val(), "00-__-__", "typed a 0, was allowed" );
+ deepEqual( mask._caret(), { begin: 3, end: 5 }, "Caret position correct");
+
+ TestHelpers.press( input, "1" );
+ equal( input.val(), "00-1_-__", "typed a 1, was allowed" );
+ deepEqual( mask._caret(), { begin: 4, end: 4 }, "Caret position correct");
+
+ TestHelpers.press( input, "-" );
+ equal( input.val(), "00-11-__", "typed a 1, was replaced with correct value" );
+ deepEqual( mask._caret(), { begin: 6, end: 8 }, "Caret position correct");
+});
+
+test( "keypress: Backspace with multi-character ", 6, function() {
+ var input = $( "#mask1" ).val( "aa-bb-cc" ).mask({
+ mask: "xx-xx-xx",
+ definitions: {
+ xx: function( value ) {
+ if ( !value.length ) {
+ return;
+ }
+ if ( value.charAt( 0 ) === "_" ) {
+ return;
+ }
+ if ( value.length === 1 ) {
+ return value+value;
+ }
+ if ( value.charAt( 0 ) === value.charAt( 1 ) ) {
+ return value;
+ }
+ }
+ }
+ }),
+ mask = input.data( "ui-mask" );
+
+ TestHelpers.focus( input );
+ equal( input.val(), "aa-bb-cc", "Initial Value Expected" );
+ mask._caret( 6, 8 );
+
+ deepEqual( mask._caret(), { begin: 6, end: 8 }, "Caret position correct");
+
+ input.simulate( "keydown", { keyCode: $.ui.keyCode.BACKSPACE });
+ equal( input.val(), "aa-bb-__", "Deleted Value Expected" );
+ deepEqual( mask._caret(), { begin: 6, end: 8 }, "Caret position correct");
+
+ input.simulate( "keydown", { keyCode: $.ui.keyCode.BACKSPACE });
+ equal( input.val(), "aa-__-__", "Deleted Value Expected" );
+ deepEqual( mask._caret(), { begin: 3, end: 5 }, "Caret position correct");
+
+});
+
+test( "keydown: Delete pulling values", function() {
+ expect( 18 );
+ var input = $( "#mask1" ).val("123").mask({ mask: "9-99" }),
+ mask = input.data( "ui-mask" );
+
+ TestHelpers.focus( input );
+ equal( input.val(), "1-23", "Initial value expected" );
+
+ mask._caret( 1 );
+ input.simulate( "keydown", { keyCode: $.ui.keyCode.DELETE });
+ equal( input.val(), "1-3_", "Delete across the literal -, brought values with");
+ deepEqual( mask._caret(), { begin: 2, end: 2 }, "Caret position correct");
+
+ input.val("12z").mask( "option", "mask", "9-9a" );
+ equal( input.val(), "1-2z", "Initial value expected" );
+
+ mask._caret( 1 );
+ input.simulate( "keydown", { keyCode: $.ui.keyCode.DELETE });
+ equal( input.val(), "1-_z", "Deleted across the literal -, z was not pulled");
+ deepEqual( mask._caret(), { begin: 2, end: 2 }, "Caret position correct");
+
+ input.val("12").mask( "option", "mask", "99" );
+ equal( input.val(), "12", "Initial value expected" );
+
+ mask._caret( 0 );
+ input.simulate( "keydown", { keyCode: $.ui.keyCode.DELETE });
+ equal( input.val(), "2_", "Deleted value, pulled values from the right");
+ deepEqual( mask._caret(), { begin: 0, end: 0 }, "Caret position correct");
+
+ input.val("1z").mask( "option", "mask", "9a" );
+ equal( input.val(), "1z", "Initial value expected" );
+
+ mask._caret( 0 );
+ input.simulate( "keydown", { keyCode: $.ui.keyCode.DELETE });
+ equal( input.val(), "_z", "Deleted value, couldn't pull values from the right");
+ deepEqual( mask._caret(), { begin: 0, end: 0 }, "Caret position correct");
+
+ input.val("12").mask( "option", "mask", "9-9" );
+ equal( input.val(), "1-2", "Initial value expected" );
+
+ mask._caret( 0 );
+ input.simulate( "keydown", { keyCode: $.ui.keyCode.DELETE });
+ equal( input.val(), "2-_", "Deleted value, pulled values from the right across the literal");
+ deepEqual( mask._caret(), { begin: 0, end: 0 }, "Caret position correct");
+
+
+ input.val("1z").mask( "option", "mask", "9-a" );
+ equal( input.val(), "1-z", "Initial value expected" );
+
+ mask._caret( 0 );
+ input.simulate( "keydown", { keyCode: $.ui.keyCode.DELETE });
+ equal( input.val(), "_-z", "Deleted value, couldn't pull values from the right");
+ deepEqual( mask._caret(), { begin: 0, end: 0 }, "Caret position correct");
+});
+
+test( "keydown: escape returns to original value", function() {
+ expect( 3 );
+ var input = $( "#mask1" ).val("6").mask({ mask: "9" }),
+ mask = input.data( "ui-mask" );
+
+ equal( input.val(), "6", "Initial value expected" );
+ TestHelpers.focus( input );
+
+ mask._caret( 0 );
+ TestHelpers.press( input, "1" );
+ equal( input.val(), "1", "Typed over" );
+
+ input.simulate( "keydown", { keyCode: $.ui.keyCode.ESCAPE });
+ equal( input.val(), "6", "Reverted value after pressing escape" );
+
+});
+
+test( "keypress: typing behaviors", function() {
+ expect( 8 );
+ var input = $( "#mask1" ).mask({
+ mask: "9-9",
+ clearEmpty: false
+ }),
+ mask = input.data( "ui-mask" );
+
+ TestHelpers.focus( input );
+ equal( input.val(), "_-_", "Initial value expected" );
+
+ mask._caret( 0 );
+ TestHelpers.press( input, "1" );
+ equal( input.val(), "1-_", "Typed a 1" );
+
+ mask._caret( 0 );
+ TestHelpers.press( input, "2" );
+ equal( input.val(), "2-1", "Typed a 2 before the 1" );
+ deepEqual( mask._caret(), { begin: 2, end: 2 }, "Caret position correct");
+
+ input.val("").mask( "option", "mask", "9-a" );
+ equal( input.val(), "_-_", "Initial value expected" );
+
+ mask._caret( 0 );
+ TestHelpers.press( input, "1" );
+ equal( input.val(), "1-_", "Typed a 1" );
+
+ mask._caret( 0 );
+ TestHelpers.press( input, "2" );
+ equal( input.val(), "2-_", "Typed a 2 before the 1 - 1 is lost because not valid" );
+ deepEqual( mask._caret(), { begin: 2, end: 2 }, "Caret position correct");
+});
+
+}( jQuery ) );
View
58 tests/unit/mask/mask_methods.js
@@ -0,0 +1,58 @@
+(function( $ ) {
+
+module( "mask: methods" );
+
+test( "refresh", function() {
+ expect( 1 );
+
+ var input = $( "#mask1" ).mask({
+ mask: "99/99/99"
+ });
+
+ input.val( "123456" ).mask( "refresh" );
+ equal( input.val(), "12/34/56", "Refresh re-parsed the value of the input" );
+});
+
+test( "value: able to get (and set) raw values", function() {
+ expect( 3 );
+ var input = $( "#mask1" ).mask({
+ mask: "99/99/99"
+ });
+
+ equal( input.mask( "value" ), "", "Reading empty raw value" );
+ input.mask( "value", "123456" );
+ equal( input.val(), "12/34/56", "Raw value set properly" );
+ equal( input.mask( "value" ), "123456", "Raw value read correctly" );
+});
+
+test( "value: able to get (and set) raw values with optional section", function() {
+ expect( 5 );
+ var input = $( "#mask1" ).val("1234").mask({
+ mask: "(999) 999-9999?x9999"
+ });
+
+ equal( input.mask('value'), "1234", "Reading initial value" );
+
+ input.mask( "value", "123456" );
+
+ equal( input.val(), "(123) 456-____", "Raw value set properly" );
+ equal( input.mask( "value" ), "123456", "Raw value read correctly" );
+
+ input.mask( "value", "12345678901234" );
+
+ equal( input.val(), "(123) 456-7890x1234", "Raw value with optional set properly" );
+ equal( input.mask( "value" ), "12345678901234", "Raw value read correctly" );
+});
+
+test( "valid: returns true when all required placeholders are filled", function() {
+ expect( 2 );
+ var input = $( "#mask1" ).mask({
+ mask: "99/99/99"
+ });
+
+ equal( input.mask( "valid" ), false, "Empty value is invalid" );
+ input.mask( "value", "123456" );
+ equal( input.mask( "valid" ), true, "All placheholders are full" );
+});
+
+}( jQuery ) );
View
202 tests/unit/mask/mask_options.js
@@ -0,0 +1,202 @@
+(function( $ ) {
+
+module( "mask: options" );
+
+test( "clearEmpty", function() {
+ expect( 4 );
+ var input = $( "#mask1" ).val( "" ).mask({
+ mask: "99/99/99",
+ placeholder: "_",
+ clearEmpty: true
+ });
+
+ equal( input.val(), "", "Empty value with clearEmpty displays no mask" );
+ TestHelpers.focus( input );
+ equal( input.val(), "__/__/__", "Empty value with clearEmpty & element focus displays mask" );
+ TestHelpers.blur( input );
+ equal( input.val(), "", "Empty value with clearEmpty displays no mask after blur" );
+ input.mask( "option", "clearEmpty", false );
+ equal( input.val(), "__/__/__", "Disabling clearEmpty displays mask" );
+});
+
+test( "placeholder", function() {
+ expect( 2 );
+ var input = $( "#mask1" ).mask({
+ mask: "99/99/99",
+ placeholder: "_",
+ clearEmpty: false
+ });
+
+ equal( input.val(), "__/__/__", "Initial value" );
+ input.mask( "option", "placeholder", " " );
+ equal( input.val(), " / / ", "Placeholder changed" );
+});
+
+test( "mask", function() {
+ expect( 2 );
+ var input = $( "#mask1" ).val( "1234" ).mask({
+ mask: "99/99/99",
+ placeholder: "_"
+ });
+
+ equal( input.val(), "12/34/__", "Initial value" );
+ input.mask( "option", "mask", "(999)999-9999" );
+ equal( input.val(), "(123)4__-____", "Mask changed" );
+});
+
+test( "mask with optional input", function() {
+ expect( 1 );
+ var input = $( "#mask1" ).val( "1234" ).mask({
+ mask: "(999) 999-9999?x9999"
+ });
+
+ equal( input.val(), "(123) 4__-____", "Initial value" );
+});
+
+test( "mask with multiple optional inputs", function() {
+ expect( 1 );
+ var input = $( "#mask1" ).val( "1234" ).mask({
+ mask: "(999) 999-9999?x9?9?9?9"
+ });
+
+ equal( input.val(), "(123) 4__-____", "Initial value" );
+});
+
+test( "mask with escaped characters", function() {
+ expect( 1 );
+ var input = $( "#mask1" ).val( "1234" ).mask({
+ mask: "(\\9\\9\\9)\\\\ 999-99\\a\\*\\?x9999"
+ });
+
+ equal( input.val(), "(999)\\ 123-4_a*?x____", "Initial value" );
+});
+
+test( "escaped use of custom mask with wrapper ", function() {
+ expect( 1 );
+ var input = $( "#mask1" ).val( "1" ).mask({
+ mask: "9\\<xyz\\>"
+ });
+
+ equal( input.val(), "1<xyz>", "Initial value" );
+});
+
+test( "custom mask with wrapper and escape", function() {
+ expect( 1 );
+ var input = $( "#mask1" ).val( "monA0" ).mask({
+ mask: "<day>:a\\?:<d>?x",
+ definitions: {
+ day: function ( value ) {
+ if ( $.inArray(value, [ "mon", "tue", "wed", "thu", "fri", "sat", "sun" ]) ) {
+ return value;
+ } else if ( $.inArray(value, [ "m", "mo" ])) {
+ return "mon";
+ } else if ( value === "t" ) {
+ return "t";
+ } else if ( value === "tu" ) {
+ return "tue";
+ } else if ( value === "thu" ) {
+ return "thu";
+ } else if ( $.inArray(value, [ "w", "we" ]) ) {
+ return "wed";
+ } else if ( $.inArray(value, [ "f", "fr" ]) ) {
+ return "fri";
+ } else if ( value === "s" ) {
+ return "s";
+ } else if ( value === "sa" ) {
+ return "sat";
+ } else if ( value === "su" ) {
+ return "sun";
+ }
+ },
+ d: /[0-9]/
+ }
+ });
+
+ equal( input.val(), "mon:A?:0", "Initial value" );
+});
+
+test( "mask option parser", 1, function() {
+ var defs = {
+ hh: function( value ) {
+ value = parseInt( value, 10 );
+ if ( value >= 1 || value <= 12 ) {
+ return ( value < 10 ? "0" : "" ) + value;
+ }
+ },
+ ss: function( value ) {
+ value = parseInt( value, 10 );
+ if ( value >= 0 || value <= 59 ) {
+ return ( value < 10 ? "0" : "" ) + value;
+ }
+ }
+ },
+ input = $( "#mask1" ).mask({
+ mask: "hh:ss:ss.999",
+ definitions: defs
+ }),
+ instance = input.data( "ui-mask" );
+ deepEqual( instance.buffer, [
+ {
+ valid: defs.hh,
+ start: 0,
+ length: 2
+ },
+ {
+ valid: defs.hh,
+ start: 0,
+ length: 2
+ },
+ {
+ literal: ":",
+ start: 2,
+ length: 1
+ },
+ {
+ valid: defs.ss,
+ start: 3,
+ length: 2
+ },
+ {
+ valid: defs.ss,
+ start: 3,
+ length: 2
+ },
+ {
+ literal: ":",
+ start: 5,
+ length: 1
+ },
+ {
+ valid: defs.ss,
+ start: 6,
+ length: 2
+ },
+ {
+ valid: defs.ss,
+ start: 6,
+ length: 2
+ },
+ {
+ literal: ".",
+ start: 8,
+ length: 1
+ },
+ {
+ valid: instance.options.definitions[ 9 ],
+ start: 9,
+ length: 1
+ },
+ {
+ valid: instance.options.definitions[ 9 ],
+ start: 10,
+ length: 1
+ },
+ {
+ valid: instance.options.definitions[ 9 ],
+ start: 11,
+ length: 1
+ }
+ ], "Buffer correctly parsed" );
+});
+
+}( jQuery ) );
View
46 tests/unit/mask/mask_test_helpers.js
@@ -0,0 +1,46 @@
+jQuery.extend( TestHelpers, {
+ press: function( input, key ) {
+ var code = key.charCodeAt( 0 );
+
+ input.simulate( "keypress", {
+ charCode: code,
+ which: code
+ });
+ },
+ focus: function( element ) {
+ var triggered = false;
+
+ function trigger() {
+ triggered = true;
+ }
+
+ element.bind( "focus", trigger );
+ element[ 0 ].focus();
+
+ if ( !triggered ) {
+ element.triggerHandler( "focus" );
+ }
+ element.unbind( "focus", trigger );
+ },
+
+ blur: function( element ) {
+ var triggered = false;
+
+ function trigger() {
+ triggered = true;
+ }
+
+ element.bind( "blur", trigger );
+ element[ 0 ].blur();
+
+ // Some versions of IE don't actually .blur() on an element - so we focus the body
+ if ( element[ 0 ].ownerDocument.activeElement === element[ 0 ] ) {
+ element[ 0 ].ownerDocument.body.focus();
+ }
+
+ if ( !triggered ) {
+ element.triggerHandler( "blur" );
+ }
+ element.unbind( "blur", trigger );
+ }
+});
View
30 tests/unit/timepicker/all.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Timepicker 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( "timepicker" );
+ </script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery UI Timepicker 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
43 tests/unit/timepicker/timepicker.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>jQuery UI Timepicker Test Suite</title>
+
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css">
+
+ <script src="../../jquery.js"></script>
+ <script src="../../../external/globalize.js"></script>
+ <script src="../../../ui/jquery.ui.core.js"></script>
+ <script src="../../../ui/jquery.ui.widget.js"></script>
+ <script src="../../../ui/jquery.ui.button.js"></script>
+ <script src="../../../ui/jquery.ui.spinner.js"></script>
+ <script src="../../../ui/jquery.ui.mask.js"></script>
+ <script src="../../../ui/jquery.ui.timepicker.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="timepicker_test_helpers.js"></script>
+ <script src="timepicker_common.js"></script>
+ <script src="timepicker_core.js"></script>
+ <script src="timepicker_events.js"></script>
+ <script src="timepicker_methods.js"></script>
+ <script src="timepicker_options.js"></script>
+
+ <script src="../swarminject.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery UI Timepicker 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="timepicker1" type="text">
+</div>
+</body>
+</html>
View
9 tests/unit/timepicker/timepicker_common.js
@@ -0,0 +1,9 @@
+TestHelpers.commonWidgetTests( "timepicker", {
+ defaults: {
+ ampm: true,
+ disabled: false,
+ seconds: true,
+ // callbacks
+ create: null
+ }
+});
View
5 tests/unit/timepicker/timepicker_core.js
@@ -0,0 +1,5 @@
+(function() {
+
+module( "timepicker: core" );
+
+}());
View
56 tests/unit/timepicker/timepicker_events.js
@@ -0,0 +1,56 @@
+(function( $ ) {
+
+module( "timepicker: events" );
+
+test( "keydown: Up/Down/Left/Right behaviors", function() {
+ expect( 12 );
+
+ var i,
+ input = $( "#timepicker1" ).val( "12:00:00 PM" ).timepicker(),
+ timepicker = input.data( "ui-timepicker" ),
+ mask = timepicker.mask;
+
+ mask._caret( 0, 0 );
+ mask._caret( 0, 0 );
+ timepicker._setField( 0 );
+ deepEqual( mask._caret(), { begin: 0, end: 0 }, "Caret position correct" );
+
+ TestHelpers.downup( input, $.ui.keyCode.UP );
+ equal( input.val(), " 1:00:00 PM", "After up keypress in hours field, value went to proper value" );
+
+ TestHelpers.downup( input, $.ui.keyCode.DOWN );
+ equal( input.val(), "12:00:00 PM", "After down keypress in hours field, value went to proper value" );
+
+ TestHelpers.downup( input, $.ui.keyCode.DOWN );
+ equal( input.val(), "11:00:00 PM", "After down keypress in hours field, value went to proper value" );
+ deepEqual( mask._caret(), { begin: 0, end: 2 }, "Caret position selects hours" );
+
+ TestHelpers.downup( input, $.ui.keyCode.RIGHT );
+ deepEqual( mask._caret(), { begin: 3, end: 5 }, "After Right - Caret position selects minutes" );
+
+ for ( i = 0; i < 10; i++ ) {
+ TestHelpers.downup( input, $.ui.keyCode.DOWN );
+ }
+ equal( input.val(), "11:50:00 PM", "After 10 down keypress in minutes field, value went to proper value" );
+
+ TestHelpers.downup( input, $.ui.keyCode.RIGHT );
+ deepEqual( mask._caret(), { begin: 6, end: 8 }, "After Right - Caret position selects seconds" );
+
+ TestHelpers.downup( input, $.ui.keyCode.RIGHT );
+ deepEqual( mask._caret(), { begin: 9, end: 11 }, "After Right - Caret position selects am/pm" );
+
+ TestHelpers.downup( input, $.ui.keyCode.DOWN );
+ equal( input.val(), "11:50:00 AM", "After down keypress in am/pm field, value went to proper value" );
+
+ input.timepicker( "destroy" ).val( "23:00:00" ).timepicker({ ampm: false });
+ timepicker = input.data( "ui-timepicker" );
+ timepicker._setField( 0 );
+ equal( input.val(), "23:00:00", "Sanity Check" );
+
+ TestHelpers.downup( input, $.ui.keyCode.UP );
+ equal( input.val(), " 0:00:00", "After up keypress in hours field, value went to proper value" );
+
+
+});
+
+}( jQuery ) );
View
22 tests/unit/timepicker/timepicker_methods.js
@@ -0,0 +1,22 @@
+(function( $ ) {
+
+module( "timepicker: methods" );
+
+test( "value - get and set value", function() {
+ expect( 3 );
+
+ var input = $( "#timepicker1" ).val( "12:00:00 AM" ).timepicker();
+
+ equal( input.timepicker( "value" ), "00:00:00", "Expected value for 12am" );
+
+
+ input.timepicker( "value", "02:34:56" );
+ equal( input.val(), " 2:34:56 AM", "Expected val() for 02:34:56" );
+
+
+ input.timepicker( "value", "12:34:56" );
+ equal( input.val(), "12:34:56 PM", "Expected val() for 12:34:56" );
+
+});
+
+}( jQuery ) );
View
43 tests/unit/timepicker/timepicker_options.js
@@ -0,0 +1,43 @@
+(function( $ ) {
+
+module( "timepicker: options" );
+
+test( "seconds", function() {
+ expect( 3 );
+
+ var input = $( "#timepicker1" ).val("12:30 AM").timepicker({
+ seconds: false
+ });
+
+ equal( input.val(), "12:30 AM", "Seconds: false startup option" );
+
+ input.timepicker( "option", "seconds", true );
+
+ equal( input.val(), "12:30:00 AM", "Seconds: enabled seconds via option method" );
+
+ input.timepicker( "option", "seconds", false );
+
+ equal( input.val(), "12:30 AM", "Seconds: disabled seconds via option method" );
+
+});
+
+test( "ampm", function() {
+ expect( 3 );
+
+ var input = $( "#timepicker1" ).val(" 1:30:00 PM").timepicker({
+ ampm: true
+ });
+
+ equal( input.val(), " 1:30:00 PM", "Sanity Check" );
+
+ input.timepicker( "option", "ampm", false );
+
+ equal( input.val(), "13:30:00", "Disabled ampm option via method" );
+
+ input.timepicker( "option", "ampm", true );
+
+ equal( input.val(), " 1:30:00 PM", "Enabled ampm option via method" );
+
+});
+
+}( jQuery ) );
View
54 tests/unit/timepicker/timepicker_test_helpers.js
@@ -0,0 +1,54 @@
+jQuery.extend( TestHelpers, {
+ // helper funciton to quick "press" a key - keydown/keyup
+ downup: function( element, key ) {
+ element.simulate( "keydown", { keyCode: key } );
+ element.simulate( "keyup", { keyCode: key } );
+ },
+
+ press: function( element, key ) {
+ var code = key.charCodeAt( 0 );
+
+ element.simulate( "keypress", {
+ charCode: code,
+ which: code
+ });
+ },
+
+ focus: function( element ) {
+ var triggered = false;
+
+ function trigger() {
+ triggered = true;
+ }
+
+ element.bind( "focus", trigger );
+ element[ 0 ].focus();
+
+ if ( !triggered ) {
+ element.triggerHandler( "focus" );
+ }
+ element.unbind( "focus", trigger );
+ },
+
+ blur: function( element ) {
+ var triggered = false;
+
+ function trigger() {
+ triggered = true;
+ }
+
+ element.bind( "blur", trigger );
+ element[ 0 ].blur();
+
+ // Some versions of IE don't actually .blur() on an element - so we focus the body
+ if ( element[ 0 ].ownerDocument.activeElement === element[ 0 ] ) {
+ element[ 0 ].ownerDocument.body.focus();
+ }
+
+ if ( !triggered ) {
+ element.triggerHandler( "blur" );
+ }
+ element.unbind( "blur", trigger );
+ }
+
+});
View
10 tests/visual/index.html
@@ -42,6 +42,11 @@
<li><a href="effects/scale.html">Scale</a></li>
</ul>
+ <h2>Mask</h2>
+ <ul>
+ <li><a href="mask/mask.html">Mask</a></li>
+ </ul>
+
<h2>Menu</h2>
<ul>
<li><a href="menu/menu.html">General</a></li>
@@ -53,6 +58,11 @@
<li><a href="position/position_feedback.html">Feedback</a></li>
</ul>
+ <h2>Timepicker</h2>
+ <ul>
+ <li><a href="timepicker/timepicker.html">Timepicker</a></li>
+ </ul>
+
<h2>Tooltip</h2>
<ul>
<li><a href="tooltip/tooltip.html">General</a></li>
View
137 tests/visual/mask/mask.html
@@ -0,0 +1,137 @@
+<!doctype html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Mask Visual Test: Default</title>
+ <link rel="stylesheet" href="../visual.css" type="text/css" />
+ <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
+ <script src="../../jquery-1.7.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>
+ <script>
+ $(function() {
+ $( "#mask1" ).mask({ mask: "99/99/9999" });
+ $( "#mask2" ).mask({ mask: "(999) 999-9999" });
+ $( "#mask3" ).mask({ mask: "(999) 999-9999" }).blur(function(event) {
+ if (!$(event.target).mask("valid")) {
+ $(event.target).val("")
+ }
+ });;
+ $( "#mask4" ).mask({ mask: "(999) 999-9999?x999999" });
+ $( "#mask5" ).mask({ mask: "99-9999999", clearEmpty: false });
+ $( "#mask6" ).mask({ mask: "999-99-9999", clearEmpty: false });
+ $( "#mask7" ).mask({ mask: "a*-999-a999" });
+ $( "#mask8" ).mask({
+ mask: "~9.99 ~9.99 999",
+ definitions: {
+ "~": /\+|-/
+ }
+ });
+ $( "#mask9" ).mask({
+ mask: "hh:mm:ss pp",
+ definitions: {
+ hh: function( value ) {
+ value = parseInt( value, 10 );
+ if ( value >= 1 && value <= 12 ) {
+ return ( value < 10 ? "0" : "" ) + value;
+ }
+ },
+ mm: sixty,
+ ss: sixty,
+ pp: function( value ) {
+ var lower = value.toLowerCase(),
+ character = lower.charAt( 0 );
+ if ( lower.length > 1 && lower.charAt( 1 ) !== "m" ) {
+ return false;
+ }
+ switch ( character ) {
+ case "a":
+ return "am";
+ case "p":
+ return "pm";
+ }
+ }
+ }
+ });
+ var input = $( "#mask10" ).mask({
+ mask: "day",
+ definitions: {
+ day: function ( value ) {
+ if ( $.inArray(value, [ "mon", "tue", "wed", "thu", "fri", "sat", "sun" ]) !== -1 ) {
+ return value;
+ } else if ( $.inArray(value, [ "m", "mo" ]) !== -1 ) {
+ return "mon";
+ } else if ( value === "t" ) {
+ return "t";
+ } else if ( value === "tu" ) {
+ return "tue";
+ } else if ( value === "thu" ) {
+ return "thu";
+ } else if ( $.inArray(value, [ "w", "we" ]) !== -1 ) {
+ return "wed";
+ } else if ( $.inArray(value, [ "f", "fr" ]) !== -1 ) {
+ return "fri";
+ } else if ( value === "s" ) {
+ return "s";
+ } else if ( value === "sa" ) {
+ return "sat";
+ } else if ( value === "su" ) {
+ return "sun";
+ }
+ },
+ d: /[0-9]/
+ }
+ });
+
+ $( "input" ).each(function( index, value ) {
+ var span = $( "<span></span>" );
+
+ value = $( value );
+ value.after( span );
+ value.keyup(function( event ) {
+ span.text( "Value: " + $( event.target ).mask("value") +
+ " Valid: " + $( event.target ).mask("valid") );
+ });
+ });
+
+ function sixty( value ) {
+ value = parseInt( value, 10 );
+ if ( value >= 0 && value <= 59 ) {
+ return ( value < 10 ? "0" : "" ) + value;
+ }
+ }
+ });
+ </script>
+ <style>
+ label {
+ font-size: 14px;
+ display: block;
+ }
+ </style>
+</head>
+<body>
+ <form>
+ <label for="mask1">Date - <code>{ mask: "99/99/9999" }</code></label>
+ <input type="text" class="masked" id="mask1">
+ <label for="mask2">Phone - <code>{ mask: "(999) 999-9999" }</code></label>
+ <input type="text" class="masked" id="mask2">
+ <label for="mask3">Phone - <code>{ mask: "(999) 999-9999" }</code> (remove incomplete values by binding to blur)</label>
+ <input type="text" class="masked" id="mask3">
+ <label for="mask4">Phone - <code>{ mask: "(999) 999-9999?x999999" }</code></label>
+ <input type="text" class="masked" id="mask4">
+ <label for="mask5">TaxID - <code>{ mask: "99-9999999", clearEmpty: false }</code></label>
+ <input type="text" class="masked" id="mask5">
+ <label for="mask6">SSN - <code>{ mask: "999-99-9999", clearEmpty: false }</code></label>
+ <input type="text" class="masked" id="mask6">
+ <label for="mask7">Product Key - <code>{ mask: "a*-999-a999" }</code></label>
+ <input type="text" class="masked" id="mask7">
+ <label for="mask8">Eye Script - <code>{ mask: "~9.99 ~9.99 999", definitions: { "~": /\+|-/ } }</code></label>
+ <input type="text" class="masked" id="mask8">
+ <label for="mask9">Time - <code>{ mask: "hh:mm:ss pp", definitions: .... }</code></label>
+ <input type="text" class="masked" id="mask9">
+ <label for="mask10">Weekday</label>
+ <input type="text" cl