]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 556b271)
Form Reset: Add form reset mixin
authorScott González <scott.gonzalez@gmail.com>
Thu, 23 Apr 2015 19:11:41 +0000 (15:11 -0400)
committerScott González <scott.gonzalez@gmail.com>
Fri, 15 May 2015 00:39:51 +0000 (20:39 -0400)
Fixes #12638
Closes gh-1555

tests/unit/all.html patch | blob | history
tests/unit/form-reset-mixin/all.html [new file with mode: 0644] patch | blob
tests/unit/form-reset-mixin/core.js [new file with mode: 0644] patch | blob
tests/unit/form-reset-mixin/form-reset-mixin.html [new file with mode: 0644] patch | blob
ui/form-reset-mixin.js [new file with mode: 0644] patch | blob

diff --git a/tests/unit/all.html b/tests/unit/all.html
index 712887f6367699b645d322033c5f41b7a98c7bec..c8352615a210aa6a0ad0e8450824b950aed5e898 100644 (file)
--- 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
new file mode 100644 (file)
index 0000000..9acf969
--- /dev/null
+++ 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
new file mode 100644 (file)
index 0000000..14e8046
--- /dev/null
+++ 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
new file mode 100644 (file)
index 0000000..a20e25d
--- /dev/null
+++ 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
new file mode 100644 (file)
index 0000000..a751f7f
--- /dev/null
+++ 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" );
+               }
+       }
+};
+
+} ) );
The official jQuery user interface library: https://github.com/jquery/jquery-ui