Form Reset: Add form reset mixin

Fixes #12638 Closes gh-1555
jquery · May 15, 2015 · ad98cb1 · ad98cb1
1 parent 556b271
commit ad98cb1
Show file tree

Hide file tree

Showing 5 changed files with 210 additions and 0 deletions.
diff --git a/tests/unit/all.html b/tests/unit/all.html
@@ -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",

diff --git a/tests/unit/form-reset-mixin/all.html b/tests/unit/form-reset-mixin/all.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>
diff --git a/tests/unit/form-reset-mixin/core.js b/tests/unit/form-reset-mixin/core.js
@@ -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();
+} );
+
+} );
diff --git a/tests/unit/form-reset-mixin/form-reset-mixin.html b/tests/unit/form-reset-mixin/form-reset-mixin.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/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>
diff --git a/ui/form-reset-mixin.js b/ui/form-reset-mixin.js
@@ -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" );
+		}
+	}
+};
+
+} ) );