library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Form Reset: Add form reset mixin

Browse Source 
Fixes #12638
Closes gh-1555
This commit is contained in:
Scott González 2015-04-23 15:11:41 -04:00
parent 556b2710f0
commit ad98cb1673
5 changed files with 210 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
tests/unit/all.html
View File

@ -25,6 +25,7 @@
"draggable/draggable.html",
"droppable/droppable.html",
"effects/effects.html",
"form-reset-mixin/form-reset-mixin.html",
"menu/menu.html",
"position/position.html",
"progressbar/progressbar.html",

26
tests/unit/form-reset-mixin/all.html Normal file
View File

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Form Reset Mixin Test Suite</title>
<script src="../../../external/jquery/jquery.js"></script>
<link rel="stylesheet" href="../../../external/qunit/qunit.css">
<link rel="stylesheet" href="../../../external/qunit-composite/qunit-composite.css">
<script src="../../../external/qunit/qunit.js"></script>
<script src="../../../external/qunit-composite/qunit-composite.js"></script>
<script src="../subsuite.js"></script>
<script>
testAllVersions( "form-reset-mixin" );
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
</div>
</body>
</html>

95
tests/unit/form-reset-mixin/core.js Normal file
View File

@ -0,0 +1,95 @@
define( [
"jquery",
"lib/common",
"ui/widget",
"ui/form-reset-mixin"
], function( $, common ) {
module( "widget factory", {
setup: function() {
$.widget( "ui.testWidget", [ $.ui.formResetMixin, {
_create: function() {
this._bindFormResetHandler();
},
_destroy: function() {
this._unbindFormResetHandler();
},
refresh: function() {
$.ui.testWidget.refreshed.push( this.element.attr( "id" ) );
}
} ] );
$.ui.testWidget.refreshed = [];
},
teardown: function() {
delete $.ui.testWidget;
delete $.fn.testWidget;
}
});
common.testJshint( "form-reset-mixin" );
asyncTest( "form reset", function() {
expect( 2 );
var form = $( "#main" );
var inputs = form.find( "input" );
inputs.testWidget();
form.on( "reset", function() {
setTimeout(function() {
deepEqual( $.ui.testWidget.refreshed, [ "input1", "input2", "input3", "input4" ],
"All widgets are refreshed on form reset" );
equal( form.data( "ui-form-reset-instances" ).length, 4,
"All widget instances are tracked against the form" );
start();
} );
} );
form[ 0 ].reset();
} );
asyncTest( "destroy", function() {
expect( 2 );
var form = $( "#main" );
var inputs = form.find( "input" );
inputs
.testWidget()
.eq( 1 )
.testWidget( "destroy" );
form.on( "reset", function() {
setTimeout(function() {
deepEqual( $.ui.testWidget.refreshed, [ "input1", "input3", "input4" ],
"All widgets are refreshed on form reset" );
deepEqual( form.data( "ui-form-reset-instances" ).length, 3,
"All widget instances are tracked against the form" );
start();
} );
} );
form[ 0 ].reset();
} );
asyncTest( "destroy all", function() {
expect( 2 );
var form = $( "#main" );
form.find( "input" )
.testWidget()
.testWidget( "destroy" );
form.on( "reset", function() {
setTimeout(function() {
deepEqual( $.ui.testWidget.refreshed, [], "No widgets are refreshed after destroy" );
strictEqual( form.data( "ui-form-reset-instances" ), undefined,
"Form data is removed when the last widget instance is destroyed" );
start();
} );
} );
form[ 0 ].reset();
} );
} );

26
tests/unit/form-reset-mixin/form-reset-mixin.html Normal file
View File

@ -0,0 +1,26 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Form Reset Mixin Test Suite</title>
<script src="../../../external/requirejs/require.js"></script>
<script src="../../lib/css.js"></script>
<script src="../../lib/bootstrap.js" data-modules="core">
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<form id="main">
<input id="input1">
<input id="input2">
<input id="input3">
<input id="input4">
</form>
</div>
</body>
</html>

62
ui/form-reset-mixin.js Normal file
View File

@ -0,0 +1,62 @@
( function( factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define( [
"jquery",
"ui/core"
], factory );
} else {
// Browser globals
factory( jQuery );
}
}( function( $ ) {
return $.ui.formResetMixin = {
_formResetHandler: function() {
var form = $( this );
// Wait for the form reset to actually happen before refreshing
setTimeout( function() {
var instances = form.data( "ui-form-reset-instances" );
$.each( instances, function() {
this.refresh();
} );
} );
},
_bindFormResetHandler: function() {
this.form = this.element.form();
if ( !this.form.length ) {
return;
}
var instances = this.form.data( "ui-form-reset-instances" ) || [];
if ( !instances.length ) {
// We don't use _on() here because we use a single event handler per form
this.form.on( "reset.ui-form-reset", this._formResetHandler );
}
instances.push( this );
this.form.data( "ui-form-reset-instances", instances );
},
_unbindFormResetHandler: function() {
if ( !this.form.length ) {
return;
}
var instances = this.form.data( "ui-form-reset-instances" );
instances.splice( $.inArray( this, instances ), 1 );
if ( instances.length ) {
this.form.data( "ui-form-reset-instances", instances );
} else {
this.form
.removeData( "ui-form-reset-instances" )
.off( "reset.ui-form-reset" );
}
}
};
} ) );