Permalink
Browse files

Form Reset: Add form reset mixin

Fixes #12638
Closes gh-1555
  • Loading branch information...
scottgonzalez committed Apr 23, 2015
1 parent 556b271 commit ad98cb167350b8d929b71bfeefc904c8964893dd
View
@@ -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",
@@ -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>
@@ -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();
} );
} );
@@ -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>
View
@@ -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" );
}
}
};
} ) );

0 comments on commit ad98cb1

Please sign in to comment.