Fix #58 - Adds buttonTimeout option, enableStateButtons() api method, and disableStateButtons api method to prevent multiple submit of each state

3 files changed, 54 insertions, 4 deletions

diff --git a/src/index.html b/src/index.html
index 691c34a..8e6ca75 100644
--- a/src/index.html
+++ b/src/index.html
@@ -188,6 +188,9 @@ var api = new Impromptu( msg , options );</code></pre>
 						<dt>buttons</dt>
 						<dd>An object containing the text and values of each button the user may click. <em>Default: { Ok : true }</em></dd>
 
+						<dt>buttonTimeout</dt>
+						<dd>A time frame in milliseconds to disable buttons after a click to prevent double submitting.  -1 will disable this feature. <em>Default: 1000</em></dd>
+
 						<dt>classes</dt>
 						<dd>An object of class names for each part of a prompt for greater compatibilty with existing css frameworks.  For example if you would like to use twitter bootstrap you would include the base theme (in the themes folder), then pass the following classes:
 <pre><code>{
@@ -317,6 +320,12 @@ var api = new Impromptu( msg , options );</code></pre>
 						<dt>jQuery.prompt.prevState(callback)</dt>
 						<dd>Transitions to the previous state. Callback represents a statechanged event.</dd>
 						
+						<dt>jQuery.prompt.enableStateButtons(stateName, buttons)</dt>
+						<dd>Enable buttons in a state.  stateName defaults to the current state and buttons is an array of button values to enable.  Omit the buttons argument to enable all buttons.</dd>
+						
+						<dt>jQuery.prompt.disableStateButtons(stateName, buttons)</dt>
+						<dd>disable buttons in a state.  stateName defaults to the current state and buttons is an array of button values to disable.  Omit the buttons argument to disable all buttons.</dd>
+						
 						<dt>jQuery.prompt.close()</dt>
 						<dd>Closes the prompt.</dd>
 					</dl>
diff --git a/src/jquery-impromptu.css b/src/jquery-impromptu.css
index ba16a05..c5cd729 100644
--- a/src/jquery-impromptu.css
+++ b/src/jquery-impromptu.css
@@ -32,7 +32,6 @@ div.jqi .jqiclose{
 }
 div.jqi .jqistate{
 	background-color: #fff;
-	display: none;
 }
 div.jqi .jqititle{
 	padding: 5px 10px;
diff --git a/src/jquery-impromptu.js b/src/jquery-impromptu.js
index 5b97028..73b08b0 100644
--- a/src/jquery-impromptu.js
+++ b/src/jquery-impromptu.js
@@ -55,6 +55,7 @@
 		buttons: {

 			Ok: true

 		},

+		buttonTimeout: 1000,

 		loaded: function(e){},

 		submit: function(e,v,m,f){},

 		close: function(e,v,m,f){},

@@ -233,11 +234,20 @@
 			t.jqi.on('click', '.'+ opts.prefix +'buttons button', function(e){

 				var $t = $(this),

 					$state = $t.parents('.'+ opts.prefix +'state'),

-					stateobj = t.options.states[$state.data('jqi-name')],

+					statename = $state.data('jqi-name'),

+					stateobj = t.options.states[statename],

 					msg = $state.children('.'+ opts.prefix +'message'),

 					clicked = stateobj.buttons[$t.text()] || stateobj.buttons[$t.html()],

 					forminputs = {};

 

+				// disable for a moment to prevent multiple clicks

+				if(t.options.buttonTimeout > 0){

+					t.disableStateButtons(statename);

+					setTimeout(function(){

+						t.enableStateButtons(statename);

+					}, t.options.buttonTimeout);

+				}

+

 				// if for some reason we couldn't get the value

 				if(clicked === undefined){

 					for(var i in stateobj.buttons){

@@ -441,7 +451,7 @@
 			state += '<div class="'+ opts.prefix + 'state" data-jqi-name="'+ statename +'">'+

 						arrow + title +

 						'<div class="'+ opts.prefix +'message '+ opts.classes.message +'">' + showHtml +'</div>'+

-						'<div class="'+ opts.prefix +'buttons'+ ($.isEmptyObject(stateobj.buttons)? 'hide ':' ')+ opts.classes.buttons +'">';

+						'<div class="'+ opts.prefix +'buttons'+ ($.isEmptyObject(stateobj.buttons)? 'hide ':' ') + opts.classes.buttons +'">';

 

 			// state buttons may be in object or array, lets convert objects to arrays

 			if($.isArray(stateobj.buttons)){

@@ -471,7 +481,7 @@
 			

 			state += '</div></div>';

 

-			$state = $(state);

+			$state = $(state).css({display:'none'});

 

 			$state.on('impromptu:submit', stateobj.submit);

 

@@ -574,6 +584,38 @@
 		},

 

 		/**

+		* disableStateButtons - Disables the buttons in a state

+		* @param statename String - Name of the state containing buttons

+		* @param buttons Array - Array of button values to disable. By default all are disabled

+		* @param enable Boolean - True to enable the buttons instead of disabling (internally use only)

+		* @return Void

+		*/

+		disableStateButtons: function(statename, buttons, enable) {

+			var t = this;

+

+			if($.isArray(statename)){

+				buttons = statename;

+				statename = null;

+			}

+			

+			t.getState(statename || t.getCurrentStateName()).find('.'+ t.options.prefix + 'button').each(function(i,btn){

+				if(buttons === undefined || $.inArray(btn.value, buttons) !== -1){

+					btn.disabled = !enable;

+				}

+			});

+		},

+

+		/**

+		* enableStateButtons - Enables the buttons in a state

+		* @param statename String - Name of the state containing buttons. Defaults to current state

+		* @param buttons Array - Array of button values to enable. By default all are enabled

+		* @return Void

+		*/

+		enableStateButtons: function(statename, buttons) {

+			this.disableStateButtons(statename, buttons, true);

+		},

+

+		/**

 		* position - Repositions the prompt (Used internally)

 		* @return void

 		*/