Skip to content

Commit ad98cb1

Browse files
scottgonzalezscottgonzalez
committed
Form Reset: Add form reset mixin
Fixes #12638 Closes jquerygh-1555
1 parent 556b271 commit ad98cb1

File tree

5 files changed

+210
-0
lines changed

5 files changed

+210
-0
lines changed

‎tests/unit/all.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
"draggable/draggable.html",
2626
"droppable/droppable.html",
2727
"effects/effects.html",
28+
"form-reset-mixin/form-reset-mixin.html",
2829
"menu/menu.html",
2930
"position/position.html",
3031
"progressbar/progressbar.html",

‎tests/unit/form-reset-mixin/all.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Form Reset Mixin Test Suite</title>
6+
7+
<script src="../../../external/jquery/jquery.js"></script>
8+
9+
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
10+
<link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css">
11+
<script src="../../../external/qunit/qunit.js"></script>
12+
<script src="../../../external/qunit-composite/qunit-composite.js"></script>
13+
<script src="../subsuite.js"></script>
14+
15+
<script>
16+
testAllVersions( "form-reset-mixin" );
17+
</script>
18+
</head>
19+
<body>
20+
21+
<div id="qunit"></div>
22+
<div id="qunit-fixture">
23+
24+
</div>
25+
</body>
26+
</html>

‎tests/unit/form-reset-mixin/core.js

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
define( [
2+
"jquery",
3+
"lib/common",
4+
"ui/widget",
5+
"ui/form-reset-mixin"
6+
], function( $, common ) {
7+
8+
module( "widget factory", {
9+
setup: function() {
10+
$.widget( "ui.testWidget", [ $.ui.formResetMixin, {
11+
_create: function() {
12+
this._bindFormResetHandler();
13+
},
14+
_destroy: function() {
15+
this._unbindFormResetHandler();
16+
},
17+
refresh: function() {
18+
$.ui.testWidget.refreshed.push( this.element.attr( "id" ) );
19+
}
20+
} ] );
21+
22+
$.ui.testWidget.refreshed = [];
23+
},
24+
25+
teardown: function() {
26+
delete $.ui.testWidget;
27+
delete $.fn.testWidget;
28+
}
29+
});
30+
31+
common.testJshint( "form-reset-mixin" );
32+
33+
asyncTest( "form reset", function() {
34+
expect( 2 );
35+
36+
var form = $( "#main" );
37+
var inputs = form.find( "input" );
38+
39+
inputs.testWidget();
40+
form.on( "reset", function() {
41+
setTimeout(function() {
42+
deepEqual( $.ui.testWidget.refreshed, [ "input1", "input2", "input3", "input4" ],
43+
"All widgets are refreshed on form reset" );
44+
equal( form.data( "ui-form-reset-instances" ).length, 4,
45+
"All widget instances are tracked against the form" );
46+
start();
47+
} );
48+
} );
49+
form[ 0 ].reset();
50+
} );
51+
52+
asyncTest( "destroy", function() {
53+
expect( 2 );
54+
55+
var form = $( "#main" );
56+
var inputs = form.find( "input" );
57+
58+
inputs
59+
.testWidget()
60+
.eq( 1 )
61+
.testWidget( "destroy" );
62+
63+
form.on( "reset", function() {
64+
setTimeout(function() {
65+
deepEqual( $.ui.testWidget.refreshed, [ "input1", "input3", "input4" ],
66+
"All widgets are refreshed on form reset" );
67+
deepEqual( form.data( "ui-form-reset-instances" ).length, 3,
68+
"All widget instances are tracked against the form" );
69+
start();
70+
} );
71+
} );
72+
form[ 0 ].reset();
73+
} );
74+
75+
asyncTest( "destroy all", function() {
76+
expect( 2 );
77+
78+
var form = $( "#main" );
79+
80+
form.find( "input" )
81+
.testWidget()
82+
.testWidget( "destroy" );
83+
84+
form.on( "reset", function() {
85+
setTimeout(function() {
86+
deepEqual( $.ui.testWidget.refreshed, [], "No widgets are refreshed after destroy" );
87+
strictEqual( form.data( "ui-form-reset-instances" ), undefined,
88+
"Form data is removed when the last widget instance is destroyed" );
89+
start();
90+
} );
91+
} );
92+
form[ 0 ].reset();
93+
} );
94+
95+
} );

‎tests/unit/form-reset-mixin/form-reset-mixin.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>jQuery UI Form Reset Mixin Test Suite</title>
6+
7+
<script src="../../../external/requirejs/require.js"></script>
8+
<script src="../../lib/css.js"></script>
9+
<script src="../../lib/bootstrap.js" data-modules="core">
10+
</script>
11+
</head>
12+
<body>
13+
14+
<div id="qunit"></div>
15+
<div id="qunit-fixture">
16+
17+
<form id="main">
18+
<input id="input1">
19+
<input id="input2">
20+
<input id="input3">
21+
<input id="input4">
22+
</form>
23+
24+
</div>
25+
</body>
26+
</html>

‎ui/form-reset-mixin.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
( function( factory ) {
2+
if ( typeof define === "function" && define.amd ) {
3+
4+
// AMD. Register as an anonymous module.
5+
define( [
6+
"jquery",
7+
"ui/core"
8+
], factory );
9+
} else {
10+
11+
// Browser globals
12+
factory( jQuery );
13+
}
14+
}( function( $ ) {
15+
16+
return $.ui.formResetMixin = {
17+
_formResetHandler: function() {
18+
var form = $( this );
19+
20+
// Wait for the form reset to actually happen before refreshing
21+
setTimeout( function() {
22+
var instances = form.data( "ui-form-reset-instances" );
23+
$.each( instances, function() {
24+
this.refresh();
25+
} );
26+
} );
27+
},
28+
29+
_bindFormResetHandler: function() {
30+
this.form = this.element.form();
31+
if ( !this.form.length ) {
32+
return;
33+
}
34+
35+
var instances = this.form.data( "ui-form-reset-instances" ) || [];
36+
if ( !instances.length ) {
37+
38+
// We don't use _on() here because we use a single event handler per form
39+
this.form.on( "reset.ui-form-reset", this._formResetHandler );
40+
}
41+
instances.push( this );
42+
this.form.data( "ui-form-reset-instances", instances );
43+
},
44+
45+
_unbindFormResetHandler: function() {
46+
if ( !this.form.length ) {
47+
return;
48+
}
49+
50+
var instances = this.form.data( "ui-form-reset-instances" );
51+
instances.splice( $.inArray( this, instances ), 1 );
52+
if ( instances.length ) {
53+
this.form.data( "ui-form-reset-instances", instances );
54+
} else {
55+
this.form
56+
.removeData( "ui-form-reset-instances" )
57+
.off( "reset.ui-form-reset" );
58+
}
59+
}
60+
};
61+
62+
} ) );

0 commit comments

Comments
 (0)